From 818d0ec121b82001540d3c872006b4ccab50a53c Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Mon, 24 Jun 2019 15:22:59 -0700 Subject: [PATCH 01/60] added state to app and skeleton for functions --- package-lock.json | 184 +++++++++++++++++++++++++++++++--------------- package.json | 13 ++++ src/App.js | 28 +++++++ 3 files changed, 165 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2207e63b9..806bf651a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2744,8 +2744,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -2766,14 +2765,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2788,20 +2785,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -2918,8 +2912,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -2931,7 +2924,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2946,7 +2938,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2954,14 +2945,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2980,7 +2969,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3061,8 +3049,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -3074,7 +3061,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -3160,8 +3146,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -3197,7 +3182,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3217,7 +3201,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3261,14 +3244,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -5603,6 +5584,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -5777,6 +5763,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz", + "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^2.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^0.4.0" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -5787,6 +5786,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", @@ -6690,8 +6697,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -6712,14 +6718,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6734,20 +6738,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -6864,8 +6865,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -6877,7 +6877,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6892,7 +6891,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6900,14 +6898,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6926,7 +6922,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7007,8 +7002,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -7020,7 +7014,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -7106,8 +7099,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -7143,7 +7135,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7163,7 +7154,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7207,14 +7197,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } } @@ -8134,6 +8122,16 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -10194,6 +10192,52 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-router": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz", + "integrity": "sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.1.tgz", + "integrity": "sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.0.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz", @@ -10575,6 +10619,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -11685,6 +11734,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz", + "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==" + }, + "tiny-warning": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz", + "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -12122,6 +12181,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index e7e4a7c62..d63126caa 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", + "react-router-dom": "^5.0.1", "react-scripts": "3.0.1" }, "scripts": { @@ -12,5 +13,17 @@ "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/src/App.js b/src/App.js index 203067e4d..dd09d7adf 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,36 @@ import React, { Component } from 'react'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import logo from './logo.svg'; import './App.css'; class App extends Component { + constructor(props) { + super(props); + + this.state = { + movieLibrary: [], + customerList: [], + selectedMovie: null, + selectedCustotmer: null, + } + } + + addMovieToLibrary = () => { + + } + + selectMovie = () => { + + } + + selectCustomer = () => { + + } + + // Api call to get single movie + + // Api call to get all movies + render() { return (
From a7ef58fecf1271beaae2d50f09c4c0bed50482c4 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Mon, 24 Jun 2019 15:36:27 -0700 Subject: [PATCH 02/60] added skeleton for all components in mock design --- src/components/CustomerList.css | 0 src/components/CustomerList.js | 14 ++++++++++++++ src/components/Library.css | 0 src/components/Library.js | 13 +++++++++++++ src/components/Search.css | 0 src/components/Search.js | 24 ++++++++++++++++++++++++ src/components/Sidebar.css | 0 src/components/Sidebar.js | 12 ++++++++++++ 8 files changed, 63 insertions(+) create mode 100644 src/components/CustomerList.css create mode 100644 src/components/CustomerList.js create mode 100644 src/components/Library.css create mode 100644 src/components/Library.js create mode 100644 src/components/Search.css create mode 100644 src/components/Search.js create mode 100644 src/components/Sidebar.css create mode 100644 src/components/Sidebar.js diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..3e9e39f35 --- /dev/null +++ b/src/components/CustomerList.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const CustomerList = (props) => { + return ( +
+

placeholder

+
+ ); +} + + + + +export default CustomerList; \ No newline at end of file diff --git a/src/components/Library.css b/src/components/Library.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Library.js b/src/components/Library.js new file mode 100644 index 000000000..bfd81f939 --- /dev/null +++ b/src/components/Library.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const Library = (props) => { + return ( +
+

placeholder

+
+ ); +}; + + + +export default Library; \ No newline at end of file diff --git a/src/components/Search.css b/src/components/Search.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..36541328b --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react'; + +class Search extends Component { + constructor(props){ + super(props); + + this.state = { + queryString: "" + }; + } + + + // Api calls? + + render() { + return ( +
+ +
+ ); + } + +}; +export default Search; \ No newline at end of file diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js new file mode 100644 index 000000000..239471fcd --- /dev/null +++ b/src/components/Sidebar.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const Sidebar = (props) => { + return ( +
+

placeholder

+
+ ); +}; + + +export default Sidebar; \ No newline at end of file From 8acd76633d12c43f424dad092051fd4743ae9ab4 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Mon, 24 Jun 2019 15:51:28 -0700 Subject: [PATCH 03/60] added movie card functional component --- src/components/MovieCard.css | 0 src/components/MovieCard.js | 11 +++++++++++ 2 files changed, 11 insertions(+) create mode 100644 src/components/MovieCard.css create mode 100644 src/components/MovieCard.js diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js new file mode 100644 index 000000000..a572092b6 --- /dev/null +++ b/src/components/MovieCard.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const MovieCard = (props) => { + return ( +
+ +
+ ); +}; + +export default MovieCard; \ No newline at end of file From e6bb48e09d8fdc6695cf7b16dfda1f8f23e8dda3 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Mon, 24 Jun 2019 16:47:51 -0700 Subject: [PATCH 04/60] added react routes to render all components --- src/App.css | 13 +++++----- src/App.js | 44 +++++++++++++++++++++++++--------- src/components/CustomerList.js | 2 +- src/components/Library.js | 2 +- src/components/Search.js | 17 ++++++++++++- 5 files changed, 57 insertions(+), 21 deletions(-) diff --git a/src/App.css b/src/App.css index c5c6e8a68..a92e2e0e3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,11 +1,6 @@ -.App { +/* .App { text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} +} */ .App-header { background-color: #222; @@ -26,3 +21,7 @@ from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + +.nav-list{ + list-style-type: none; +} diff --git a/src/App.js b/src/App.js index dd09d7adf..7afd0b35f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,10 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -import logo from './logo.svg'; import './App.css'; +import Search from './components/Search'; +import Library from './components/Library'; +import CustomerList from './components/CustomerList'; + class App extends Component { constructor(props) { @@ -30,18 +33,37 @@ class App extends Component { // Api call to get single movie // Api call to get all movies - +r render() { return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

-
+ +
+
+

Video Store Consumer

+
+ + + + + + +
+ ); } } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 3e9e39f35..fe1f87602 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -3,7 +3,7 @@ import React from 'react'; const CustomerList = (props) => { return (
-

placeholder

+

Customer List

); } diff --git a/src/components/Library.js b/src/components/Library.js index bfd81f939..17b7e21f3 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -3,7 +3,7 @@ import React from 'react'; const Library = (props) => { return (
-

placeholder

+

Movie Library

); }; diff --git a/src/components/Search.js b/src/components/Search.js index 36541328b..38588371d 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -9,13 +9,28 @@ class Search extends Component { }; } + queryChanged = (event) => { + const queryString = event.target.value; + + this.setState({ + queryString + }) + + // this.props.searchCallback(queryString); + } // Api calls? render() { return (
- +

Search Page

+
); } From 4f21b845eb7ede48966acf79ce12a0a32dc1be66 Mon Sep 17 00:00:00 2001 From: amyesh Date: Mon, 24 Jun 2019 18:49:54 -0700 Subject: [PATCH 05/60] created API request to fetch all movie json data --- package-lock.json | 114 +++++++++++++++++++++++++++++++++++++--------- package.json | 4 +- src/App.js | 20 ++++++-- 3 files changed, 111 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 806bf651a..9bc9f54a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1902,6 +1902,38 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -2744,7 +2776,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -2765,12 +2798,14 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2785,17 +2820,20 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2912,7 +2950,8 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -2924,6 +2963,7 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2938,6 +2978,7 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2945,12 +2986,14 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2969,6 +3012,7 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3049,7 +3093,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3061,6 +3106,7 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -3146,7 +3192,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3182,6 +3229,7 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3201,6 +3249,7 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3244,12 +3293,14 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } }, @@ -6697,7 +6748,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -6718,12 +6770,14 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6738,17 +6792,20 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6865,7 +6922,8 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -6877,6 +6935,7 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6891,6 +6950,7 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6898,12 +6958,14 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6922,6 +6984,7 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7002,7 +7065,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7014,6 +7078,7 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -7099,7 +7164,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7135,6 +7201,7 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7154,6 +7221,7 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7197,12 +7265,14 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } } diff --git a/package.json b/package.json index d63126caa..361aa9098 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.19.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", @@ -25,5 +26,6 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "proxy": "http://localhost:3001" } diff --git a/src/App.js b/src/App.js index 7afd0b35f..6a5c1cc52 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css'; import Search from './components/Search'; import Library from './components/Library'; import CustomerList from './components/CustomerList'; +import axios from 'axios'; class App extends Component { @@ -18,6 +19,21 @@ class App extends Component { } } + // Api Call to get movies from json + componentDidMount() { + axios.get('/movies') + .then(response => { + console.log(response) + this.setState({ + movieLibrary: response.data + }) + }) + .catch(error => console.log(error)) + } + + // Api call to get single movie + + addMovieToLibrary = () => { } @@ -30,10 +46,6 @@ class App extends Component { } - // Api call to get single movie - - // Api call to get all movies -r render() { return ( From 4a08ad1f23c11f42727f94a4d56b7b73b70bed1d Mon Sep 17 00:00:00 2001 From: amyesh Date: Mon, 24 Jun 2019 19:04:46 -0700 Subject: [PATCH 06/60] added API call to fetch all customers --- src/App.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/App.js b/src/App.js index 6a5c1cc52..6529803a1 100644 --- a/src/App.js +++ b/src/App.js @@ -29,6 +29,16 @@ class App extends Component { }) }) .catch(error => console.log(error)) + + // Api call to get all customers + axios.get('/customers') + .then(response => { + console.log(response) + this.setState({ + customerList: response.data + }) + }) + .catch(error => console.log(error)) } // Api call to get single movie From 6733455faebb9f4f65c6c17f47e9f248a56a642e Mon Sep 17 00:00:00 2001 From: amyesh Date: Mon, 24 Jun 2019 19:12:26 -0700 Subject: [PATCH 07/60] added API requests to find movie by title and search movies by word --- src/App.js | 21 +++++++++++++++++++++ src/components/Search.js | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 6529803a1..f59e3e056 100644 --- a/src/App.js +++ b/src/App.js @@ -42,7 +42,28 @@ class App extends Component { } // Api call to get single movie + showMovieDetails = (title) => { + axios.get(`/movies/${title}`) + .then(response => { + console.log(response) + this.setState({ + customerList: response.data + }) + }) + .catch(error => console.log(error)) + } + //Api call to search movies + searchMovies = (query) => { + axios.get(`/movies?query=${query}`) + .then(response => { + console.log(response) + this.setState({ + customerList: response.data + }) + }) + .catch(error => console.log(error)) + } addMovieToLibrary = () => { diff --git a/src/components/Search.js b/src/components/Search.js index 38588371d..c4f54610e 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -16,7 +16,7 @@ class Search extends Component { queryString }) - // this.props.searchCallback(queryString); + // this.props.searchMoviesCallback(queryString); } // Api calls? From f37d0764be5356a2c79532e874171241de2b0f6a Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Tue, 25 Jun 2019 09:08:01 -0700 Subject: [PATCH 08/60] added onFormSubmit function --- src/components/Search.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Search.js b/src/components/Search.js index 38588371d..d68a5b135 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -5,7 +5,8 @@ class Search extends Component { super(props); this.state = { - queryString: "" + queryString: "", + searchResults: [], }; } @@ -19,6 +20,9 @@ class Search extends Component { // this.props.searchCallback(queryString); } + onFormSubmit = (event) => { + event.preventDefault() + } // Api calls? render() { From 89af3cfac171d766ae8e16564ae7bdbec6713b22 Mon Sep 17 00:00:00 2001 From: amyesh Date: Tue, 25 Jun 2019 12:16:42 -0700 Subject: [PATCH 09/60] fixed typo --- src/App.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index f59e3e056..62d3b4395 100644 --- a/src/App.js +++ b/src/App.js @@ -69,12 +69,20 @@ class App extends Component { } - selectMovie = () => { + selectMovie = (movieId) => { + const movie = this.state.movieLibrary.find(movie => movie.id === movieId) + this.setState({ + selectedMovie: movie + }); } - selectCustomer = () => { + selectCustomer = (CustomerId) => { + const customer = this.state.customerLibrary.find(customer => customer.id === customerId) + this.setState({ + selectedCustomer: customer + }); } render() { From 4cf02b0128dba43f961b0fc4358b8486ae261e14 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Tue, 25 Jun 2019 13:20:38 -0700 Subject: [PATCH 10/60] functional search bar --- package-lock.json | 82 ++++++++++--------------------------- src/App.js | 23 ++++++----- src/components/MovieCard.js | 5 ++- src/components/Search.js | 39 +++++++++++++++--- 4 files changed, 72 insertions(+), 77 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9bc9f54a4..5b8203228 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2776,8 +2776,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -2798,14 +2797,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2820,20 +2817,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -2950,8 +2944,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -2963,7 +2956,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2978,7 +2970,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2986,14 +2977,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3012,7 +3001,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3093,8 +3081,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -3106,7 +3093,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -3192,8 +3178,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -3229,7 +3214,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3249,7 +3233,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3293,14 +3276,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -6748,8 +6729,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -6770,14 +6750,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6792,20 +6770,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -6922,8 +6897,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -6935,7 +6909,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6950,7 +6923,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6958,14 +6930,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6984,7 +6954,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7065,8 +7034,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -7078,7 +7046,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -7164,8 +7131,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -7201,7 +7167,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7221,7 +7186,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7265,14 +7229,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } } diff --git a/src/App.js b/src/App.js index 62d3b4395..58460acc5 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css'; import Search from './components/Search'; import Library from './components/Library'; import CustomerList from './components/CustomerList'; +import MovieCard from './components/MovieCard'; import axios from 'axios'; @@ -54,16 +55,16 @@ class App extends Component { } //Api call to search movies - searchMovies = (query) => { - axios.get(`/movies?query=${query}`) - .then(response => { - console.log(response) - this.setState({ - customerList: response.data - }) - }) - .catch(error => console.log(error)) - } + // searchMovies = (query) => { + // axios.get(`/movies?query=${query}`) + // .then(response => { + // console.log(response) + // this.setState({ + // customerList: response.data + // }) + // }) + // .catch(error => console.log(error)) + // } addMovieToLibrary = () => { @@ -77,7 +78,7 @@ class App extends Component { }); } - selectCustomer = (CustomerId) => { + selectCustomer = (customerId) => { const customer = this.state.customerLibrary.find(customer => customer.id === customerId) this.setState({ diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index a572092b6..73f4059d4 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -1,9 +1,12 @@ import React from 'react'; const MovieCard = (props) => { + const { title, release_date, overview } = props return (
- +

{ title }

+
{ release_date }
+

{ overview }

); }; diff --git a/src/components/Search.js b/src/components/Search.js index febac5531..12a6d4f2b 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import axios from 'axios'; +import MovieCard from './MovieCard'; class Search extends Component { constructor(props){ @@ -17,27 +19,54 @@ class Search extends Component { queryString }) - // this.props.searchMoviesCallback(queryString); } onFormSubmit = (event) => { - event.preventDefault() + event.preventDefault(); + + // const URL = `http://localhost:3000/movies?query=${this.state.queryString}`; + + axios.get(`/movies?query=${this.state.queryString}`) + .then((response) => { + console.log(response) + this.setState({ + searchResults: response.data + }) + }) + .catch(error => console.log(error)) } - // Api calls? render() { + const searchResultList = this.state.searchResults.map((movie, index) => { + return + }) return (

Search Page

- */} + {searchResultList}
); } }; + export default Search; \ No newline at end of file From a85701e252e8492a00e22ad7328f0b84c7b98e4c Mon Sep 17 00:00:00 2001 From: amyesh Date: Tue, 25 Jun 2019 13:23:09 -0700 Subject: [PATCH 11/60] passed props into customerList --- src/App.js | 10 +++++++--- src/components/CustomerList.js | 15 ++++++++++++++- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 62d3b4395..966f3dfac 100644 --- a/src/App.js +++ b/src/App.js @@ -15,7 +15,7 @@ class App extends Component { movieLibrary: [], customerList: [], selectedMovie: null, - selectedCustotmer: null, + selectedCustomer: null, } } @@ -77,7 +77,7 @@ class App extends Component { }); } - selectCustomer = (CustomerId) => { + selectCustomer = (customerId) => { const customer = this.state.customerLibrary.find(customer => customer.id === customerId) this.setState({ @@ -111,7 +111,11 @@ class App extends Component { - + } + /> +
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index fe1f87602..055050fc0 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,14 +1,27 @@ import React from 'react'; +import PropTypes from 'prop-types'; const CustomerList = (props) => { + + const {customerList} = props + + const displayCustomers = customerList.map((customer, i) => { + return ( +

{customer.name}

+ ) + }) + return (

Customer List

+ { displayCustomers }
); } - +CustomerList.propTypes = { + customerList: PropTypes.array, +}; export default CustomerList; \ No newline at end of file From 58c18cfce3b8ac956127700316ba0796ae835c72 Mon Sep 17 00:00:00 2001 From: amyesh Date: Tue, 25 Jun 2019 13:27:52 -0700 Subject: [PATCH 12/60] merged updates from master --- src/components/CustomerList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 055050fc0..a1bffbb1d 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -7,7 +7,7 @@ const CustomerList = (props) => { const displayCustomers = customerList.map((customer, i) => { return ( -

{customer.name}

+

{customer.name}

) }) From 73eae79ce521afe8829b4d23a867dbb97f686584 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Tue, 25 Jun 2019 13:30:48 -0700 Subject: [PATCH 13/60] finalized search functionality and MovieCard component --- src/components/MovieCard.js | 2 +- src/components/Search.js | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 73f4059d4..e72af9fe3 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -1,7 +1,7 @@ import React from 'react'; const MovieCard = (props) => { - const { title, release_date, overview } = props + const { title, release_date, overview } = props.movie; return (

{ title }

diff --git a/src/components/Search.js b/src/components/Search.js index 12a6d4f2b..22fc91969 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -56,12 +56,6 @@ class Search extends Component {
- {/* */} {searchResultList} ); From 486ad0a317fb60c2deac84dbdfc6600fb7abae89 Mon Sep 17 00:00:00 2001 From: amyesh Date: Tue, 25 Jun 2019 13:45:19 -0700 Subject: [PATCH 14/60] added movieCard display --- src/App.js | 6 ++++-- src/components/Library.js | 8 ++++++++ src/components/MovieCard.js | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 037a397c7..b67122bca 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,6 @@ import './App.css'; import Search from './components/Search'; import Library from './components/Library'; import CustomerList from './components/CustomerList'; -import MovieCard from './components/MovieCard'; import axios from 'axios'; @@ -111,7 +110,10 @@ class App extends Component { - + } + /> } diff --git a/src/components/Library.js b/src/components/Library.js index 17b7e21f3..48ce32eba 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,9 +1,17 @@ import React from 'react'; +import MovieCard from './MovieCard'; const Library = (props) => { + const {movieLibrary} = props + const movieCards = movieLibrary.map((movie, i) => { + return ( + + ) + }) return (

Movie Library

+ { movieCards }
); }; diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 73f4059d4..b8480281d 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -1,7 +1,7 @@ import React from 'react'; const MovieCard = (props) => { - const { title, release_date, overview } = props + const { title, release_date, overview } = props.movie return (

{ title }

From 12518529b3c6a3972fe9a0dd56cd56782e76c6e7 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Tue, 25 Jun 2019 14:47:51 -0700 Subject: [PATCH 15/60] Click handler for select movie and appropriate state changes --- src/App.js | 19 +++++++++++++------ src/components/Library.js | 2 +- src/components/MovieCard.js | 1 + 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index b67122bca..6c0cb330e 100644 --- a/src/App.js +++ b/src/App.js @@ -69,12 +69,16 @@ class App extends Component { } - selectMovie = (movieId) => { - const movie = this.state.movieLibrary.find(movie => movie.id === movieId) - - this.setState({ - selectedMovie: movie + selectMovie = (title) => { + return () => { + this.setState({ + selectedMovie: title }); +} + // const movie = this.state.movieLibrary.find(movie => movie.id === movieId) + + + // console.log(this.state.selectedMovie) } selectCustomer = (customerId) => { @@ -103,16 +107,19 @@ class App extends Component {
  • Movie Library
    • +
  • Selected Movie: {this.state.selectedMovie}
  • Customer List
    • +
  • Selected Customer: {this.state.selectedCustomer}
    • } + render={(props) => } /> { const {movieLibrary} = props const movieCards = movieLibrary.map((movie, i) => { return ( - + ) }) return ( diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index e72af9fe3..07e8d7e76 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -7,6 +7,7 @@ const MovieCard = (props) => {

    { title }

    { release_date }

    { overview }

    +
    ); }; From 0c15ec833c0a859479953f0709cdd7a8f90abc25 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Tue, 25 Jun 2019 14:55:58 -0700 Subject: [PATCH 16/60] click handler for select customer and appropriate state changes which propogates --- src/App.js | 22 +++++++++++++--------- src/components/CustomerList.js | 8 ++++++-- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 6c0cb330e..9c5d31cdc 100644 --- a/src/App.js +++ b/src/App.js @@ -73,20 +73,23 @@ class App extends Component { return () => { this.setState({ selectedMovie: title - }); -} + }); + } // const movie = this.state.movieLibrary.find(movie => movie.id === movieId) - - // console.log(this.state.selectedMovie) } selectCustomer = (customerId) => { - const customer = this.state.customerLibrary.find(customer => customer.id === customerId) + return () => { + this.setState({ + selectedCustomer: customerId + }); + } + // const customer = this.state.customerLibrary.find(customer => customer.id === customerId) - this.setState({ - selectedCustomer: customer - }); + // this.setState({ + // selectedCustomer: customer + // }); } render() { @@ -123,7 +126,8 @@ class App extends Component { /> } + render={(props) => } /> diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index a1bffbb1d..f7189d11b 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -7,8 +7,12 @@ const CustomerList = (props) => { const displayCustomers = customerList.map((customer, i) => { return ( -

    {customer.name}

    - ) +

    {customer.name} + +

    + ) }) return ( From 0259d616b67498f99c360bf6bbf579948f3f9f97 Mon Sep 17 00:00:00 2001 From: amyesh Date: Tue, 25 Jun 2019 15:44:54 -0700 Subject: [PATCH 17/60] working through adding to library --- src/App.js | 27 ++++++++++++--------------- src/components/Search.js | 8 +++++++- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 9c5d31cdc..ad413e128 100644 --- a/src/App.js +++ b/src/App.js @@ -53,20 +53,15 @@ class App extends Component { .catch(error => console.log(error)) } - //Api call to search movies - // searchMovies = (query) => { - // axios.get(`/movies?query=${query}`) - // .then(response => { - // console.log(response) - // this.setState({ - // customerList: response.data - // }) - // }) - // .catch(error => console.log(error)) - // } - - addMovieToLibrary = () => { - + addMovieToLibrary = (title) => { + axios.post(`/movies/${title}`) + .then(response => { + console.log(response) + this.setState({ + customerList: response.data + }) + }) + .catch(error => console.log(error)) } selectMovie = (title) => { @@ -118,7 +113,9 @@ class App extends Component { - + } + /> { - return + return ( +
    + + +
    + ) }) return (
    From 4152f47cc40b6b90144f332f0ef3c0c90565ef7c Mon Sep 17 00:00:00 2001 From: amyesh Date: Tue, 25 Jun 2019 16:37:25 -0700 Subject: [PATCH 18/60] working through adding movie to rails server --- src/App.js | 8 ++++---- src/components/Search.js | 3 +-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index ad413e128..84add76dd 100644 --- a/src/App.js +++ b/src/App.js @@ -56,10 +56,10 @@ class App extends Component { addMovieToLibrary = (title) => { axios.post(`/movies/${title}`) .then(response => { - console.log(response) - this.setState({ - customerList: response.data - }) + // console.log(response) + // this.setState({ + // movieLibrary: response.data + // }) }) .catch(error => console.log(error)) } diff --git a/src/components/Search.js b/src/components/Search.js index b3b451353..e4524a73b 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -9,7 +9,6 @@ class Search extends Component { this.state = { queryString: "", searchResults: [], - addMovieCallback: props.addMovieCallback, }; } @@ -42,7 +41,7 @@ class Search extends Component { return (
    - +
    ) }) From 29d8a12c2ef8edf3db3617fb6d5c0944863b0233 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Tue, 25 Jun 2019 18:02:39 -0700 Subject: [PATCH 19/60] made changes to add movie function bug with displaying MovieCard --- src/App.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 84add76dd..b5bface1b 100644 --- a/src/App.js +++ b/src/App.js @@ -54,8 +54,10 @@ class App extends Component { } addMovieToLibrary = (title) => { - axios.post(`/movies/${title}`) - .then(response => { + const url = `http://localhost:3000/movies`; + axios.post(url, title) + .then(() => { + alert(`${title} was successfully added to rental library!`); // console.log(response) // this.setState({ // movieLibrary: response.data @@ -67,7 +69,7 @@ class App extends Component { selectMovie = (title) => { return () => { this.setState({ - selectedMovie: title + selectedMovie: title }); } // const movie = this.state.movieLibrary.find(movie => movie.id === movieId) @@ -114,7 +116,8 @@ class App extends Component { } + render={(props) => } /> Date: Tue, 25 Jun 2019 19:34:12 -0700 Subject: [PATCH 20/60] added method to checkout movie --- src/App.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/App.js b/src/App.js index b5bface1b..0e28a8173 100644 --- a/src/App.js +++ b/src/App.js @@ -76,6 +76,8 @@ class App extends Component { // console.log(this.state.selectedMovie) } + // this method takes in a name rather than an id + // we'll need the id to send to the checkout request selectCustomer = (customerId) => { return () => { this.setState({ @@ -89,6 +91,24 @@ class App extends Component { // }); } + // pass this as callback method to sidebar + // do we need to pass in customer id into this method to set params? + // maybe we should update the select customer method to store + // the entire customer object for reference elsewhere + checkoutMovie = (title) => { + axios.post(`/movies/${title}/check-out`, { + // this won't work until we've updated selectedCustomer + // to hold all customer data + params: { + customer_id: this.state.selectedCustomer.id + } + }) + .then(() => { + alert(`${title} was successfully checked out!`); + }) + .catch(error => console.log(error)); + } + render() { return ( From f11a48d66c6a7cbfeba52be60b7d5d6014972b0b Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 10:25:38 -0700 Subject: [PATCH 21/60] fixed post request to successfully add data to rails server --- src/App.js | 8 +++++--- src/components/Search.js | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 0e28a8173..5d39bf712 100644 --- a/src/App.js +++ b/src/App.js @@ -53,11 +53,13 @@ class App extends Component { .catch(error => console.log(error)) } - addMovieToLibrary = (title) => { + addMovieToLibrary = (movie) => { const url = `http://localhost:3000/movies`; - axios.post(url, title) + axios.post(url, movie) .then(() => { - alert(`${title} was successfully added to rental library!`); + // let movieLibraryUpdate = this.state.movieLibrary; + // this.setState({ movieLibrary: movieLibraryUpdate}) + alert(`${movie.title} was successfully added to rental library!`); // console.log(response) // this.setState({ // movieLibrary: response.data diff --git a/src/components/Search.js b/src/components/Search.js index e4524a73b..23524f328 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -41,7 +41,7 @@ class Search extends Component { return (
    - +
    ) }) From a4cb56d94aa4b567849f615a859403f02e981d54 Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 10:42:33 -0700 Subject: [PATCH 22/60] changed Library to classical component to render state --- src/App.js | 12 +--------- src/components/Library.js | 47 ++++++++++++++++++++++++++++----------- 2 files changed, 35 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 5d39bf712..f53ad2589 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,6 @@ class App extends Component { super(props); this.state = { - movieLibrary: [], customerList: [], selectedMovie: null, selectedCustomer: null, @@ -21,15 +20,6 @@ class App extends Component { // Api Call to get movies from json componentDidMount() { - axios.get('/movies') - .then(response => { - console.log(response) - this.setState({ - movieLibrary: response.data - }) - }) - .catch(error => console.log(error)) - // Api call to get all customers axios.get('/customers') .then(response => { @@ -144,7 +134,7 @@ class App extends Component { } + />} /> { - const {movieLibrary} = props - const movieCards = movieLibrary.map((movie, i) => { +class Library extends Component { + constructor(props) { + super(props); + + this.state = { + movieLibrary: [], + } + } + + componentDidMount() { + axios.get('/movies') + .then(response => { + console.log(response) + this.setState({ + movieLibrary: response.data + }) + }) + .catch(error => console.log(error)) + } + + render () { + const movieCards = this.state.movieLibrary.map((movie, i) => { + return ( + + ) + }) return ( - - ) - }) - return ( -
    -

    Movie Library

    - { movieCards } -
    - ); +
    +

    Movie Library

    + { movieCards } +
    + ); + } }; From 84ed048b4adae4dde3a3d6fb8a22d5faf8dd091e Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Wed, 26 Jun 2019 11:14:01 -0700 Subject: [PATCH 23/60] rendering selected movie object --- src/App.js | 14 ++++++++------ src/components/Library.js | 2 +- src/components/MovieCard.js | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index f53ad2589..a0fbd683e 100644 --- a/src/App.js +++ b/src/App.js @@ -58,12 +58,13 @@ class App extends Component { .catch(error => console.log(error)) } - selectMovie = (title) => { - return () => { + selectMovie = (movie) => { + console.log(movie) + // return () => { this.setState({ - selectedMovie: title + selectedMovie: movie }); - } + // } // const movie = this.state.movieLibrary.find(movie => movie.id === movieId) // console.log(this.state.selectedMovie) } @@ -71,9 +72,10 @@ class App extends Component { // this method takes in a name rather than an id // we'll need the id to send to the checkout request selectCustomer = (customerId) => { + return () => { this.setState({ - selectedCustomer: customerId + selectedCustomer: customerId }); } // const customer = this.state.customerLibrary.find(customer => customer.id === customerId) @@ -119,7 +121,7 @@ class App extends Component {
  • Movie Library
    • -
  • Selected Movie: {this.state.selectedMovie}
    • +
  • Selected Movie: {this.state.selectedMovie ? this.state.selectedMovie.title : "No movie selected"}
  • Customer List
    • diff --git a/src/components/Library.js b/src/components/Library.js index d8f269bb6..8bc6c5242 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -25,7 +25,7 @@ class Library extends Component { render () { const movieCards = this.state.movieLibrary.map((movie, i) => { return ( - + {this.props.selectMovie(movie)}} /> ) }) return ( diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 07e8d7e76..c0f51c14f 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -7,7 +7,7 @@ const MovieCard = (props) => {

    { title }

    { release_date }

    { overview }

    - + ); }; From 0c0fcc9b5a5a7226617bd5b7eb1475904cc20e64 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Wed, 26 Jun 2019 11:23:09 -0700 Subject: [PATCH 24/60] changed function to select customer object --- src/App.js | 12 ++++++------ src/components/CustomerList.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index a0fbd683e..92d944a5f 100644 --- a/src/App.js +++ b/src/App.js @@ -71,13 +71,13 @@ class App extends Component { // this method takes in a name rather than an id // we'll need the id to send to the checkout request - selectCustomer = (customerId) => { - - return () => { + selectCustomer = (customer) => { + console.log(customer) + // return () => { this.setState({ - selectedCustomer: customerId + selectedCustomer: customer }); - } + // } // const customer = this.state.customerLibrary.find(customer => customer.id === customerId) // this.setState({ @@ -125,7 +125,7 @@ class App extends Component {
  • Customer List
    • -
  • Selected Customer: {this.state.selectedCustomer}
    • +
  • Selected Customer: {this.state.selectedCustomer ? this.state.selectedCustomer.name : "No customer selected"}
    • diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index f7189d11b..26f966a6d 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -8,7 +8,7 @@ const CustomerList = (props) => { const displayCustomers = customerList.map((customer, i) => { return (

    {customer.name} -

    From e3ff093e90bcffe00d7ca27cb3cefb915a62feeb Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Wed, 26 Jun 2019 12:35:58 -0700 Subject: [PATCH 25/60] added user messages to app state --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index 92d944a5f..0684f9679 100644 --- a/src/App.js +++ b/src/App.js @@ -12,6 +12,7 @@ class App extends Component { super(props); this.state = { + userMessages: [], customerList: [], selectedMovie: null, selectedCustomer: null, From ab1dc294ceb9f0cdaa45879b173e3f8ec9b14d5c Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Wed, 26 Jun 2019 13:04:09 -0700 Subject: [PATCH 26/60] added proptypes and messages section --- src/App.js | 12 +++++++++++- src/components/CustomerList.js | 1 + src/components/Library.js | 6 +++++- src/components/MovieCard.js | 12 ++++++++++-- src/components/Search.js | 12 ++++++------ 5 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index 0684f9679..1122453fb 100644 --- a/src/App.js +++ b/src/App.js @@ -48,9 +48,11 @@ class App extends Component { const url = `http://localhost:3000/movies`; axios.post(url, movie) .then(() => { + let success = `${movie.title} was successfully added to rental library!`; + this.setState({userMessages: [success]}) // let movieLibraryUpdate = this.state.movieLibrary; // this.setState({ movieLibrary: movieLibraryUpdate}) - alert(`${movie.title} was successfully added to rental library!`); + // alert(`${movie.title} was successfully added to rental library!`); // console.log(response) // this.setState({ // movieLibrary: response.data @@ -105,12 +107,20 @@ class App extends Component { } render() { + const allUserMessages = this.state.userMessages.map((message, i) => { + return

    { message }

    ; + }) return (

    Video Store Consumer

    + +
    + {allUserMessages} +
    + @@ -143,8 +139,6 @@ class App extends Component { render={(props) => } /> - -
    ); diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 239471fcd..3146cfa17 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,11 +1,6 @@ import React from 'react'; const Sidebar = (props) => { - return ( -
    -

    placeholder

    -
    - ); }; From 667bd36b9ec56f4fbfb2c0bd53c33ac420485f95 Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 13:32:45 -0700 Subject: [PATCH 29/60] cleaned up app file --- src/App.js | 46 ++++++++++++---------------------------------- 1 file changed, 12 insertions(+), 34 deletions(-) diff --git a/src/App.js b/src/App.js index 1bdde8f3c..730c37f44 100644 --- a/src/App.js +++ b/src/App.js @@ -19,9 +19,7 @@ class App extends Component { } } - // Api Call to get movies from json componentDidMount() { - // Api call to get all customers axios.get('/customers') .then(response => { console.log(response) @@ -32,17 +30,16 @@ class App extends Component { .catch(error => console.log(error)) } - // Api call to get single movie - showMovieDetails = (title) => { - axios.get(`/movies/${title}`) - .then(response => { - console.log(response) - this.setState({ - customerList: response.data - }) - }) - .catch(error => console.log(error)) - } + // showMovieDetails = (title) => { + // axios.get(`/movies/${title}`) + // .then(response => { + // console.log(response) + // this.setState({ + // customerList: response.data + // }) + // }) + // .catch(error => console.log(error)) + // } addMovieToLibrary = (movie) => { const url = `http://localhost:3000/movies`; @@ -50,42 +47,22 @@ class App extends Component { .then(() => { let success = `${movie.title} was successfully added to rental library!`; this.setState({userMessages: [success]}) - // let movieLibraryUpdate = this.state.movieLibrary; - // this.setState({ movieLibrary: movieLibraryUpdate}) - // alert(`${movie.title} was successfully added to rental library!`); - // console.log(response) - // this.setState({ - // movieLibrary: response.data - // }) }) .catch(error => console.log(error)) } selectMovie = (movie) => { console.log(movie) - // return () => { this.setState({ selectedMovie: movie }); - // } - // const movie = this.state.movieLibrary.find(movie => movie.id === movieId) - // console.log(this.state.selectedMovie) } - // this method takes in a name rather than an id - // we'll need the id to send to the checkout request selectCustomer = (customer) => { console.log(customer) - // return () => { this.setState({ selectedCustomer: customer }); - // } - // const customer = this.state.customerLibrary.find(customer => customer.id === customerId) - - // this.setState({ - // selectedCustomer: customer - // }); } checkoutMovie = (movie, customer) => { @@ -96,7 +73,8 @@ class App extends Component { }; axios.post(`/rentals/${movie.title}/check-out`, checkoutParams) .then(() => { - alert(`${movie.title} was successfully checked out to ${customer.name}!`); + let success = `${movie.title} was successfully added to rental library!`; + this.setState({userMessages: [success]}) }) .catch(error => console.log(error)); } From f9c28ce1f6d6aa3fc8d9cf492f4cd729740844b0 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Wed, 26 Jun 2019 13:45:51 -0700 Subject: [PATCH 30/60] added disabled button for movie checkout --- src/App.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 730c37f44..1b7ca1ace 100644 --- a/src/App.js +++ b/src/App.js @@ -83,6 +83,8 @@ class App extends Component { const allUserMessages = this.state.userMessages.map((message, i) => { return

    { message }

    ; }) + + const enabledCheckout = this.state.selectedCustomer && this.state.selectedMovie !== null return (
    @@ -110,7 +112,7 @@ class App extends Component {
  • Selected Movie: {this.state.selectedMovie ? this.state.selectedMovie.title : "No movie selected"}
  • Selected Customer: {this.state.selectedCustomer ? this.state.selectedCustomer.name : "No customer selected"}
    • - + From f07b4ee5cb1e3b5e0a6815437a941753c93ef0ac Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 14:54:50 -0700 Subject: [PATCH 31/60] working through conditional button rendering --- src/App.js | 12 +----------- src/components/Library.js | 13 +++++++++++-- src/components/MovieCard.js | 29 ++++++++++++++++++++++++++++- src/components/Search.js | 10 ++++------ 4 files changed, 44 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 1b7ca1ace..2926496dd 100644 --- a/src/App.js +++ b/src/App.js @@ -14,6 +14,7 @@ class App extends Component { this.state = { userMessages: [], customerList: [], + movieLibrary: [], selectedMovie: null, selectedCustomer: null, } @@ -30,17 +31,6 @@ class App extends Component { .catch(error => console.log(error)) } - // showMovieDetails = (title) => { - // axios.get(`/movies/${title}`) - // .then(response => { - // console.log(response) - // this.setState({ - // customerList: response.data - // }) - // }) - // .catch(error => console.log(error)) - // } - addMovieToLibrary = (movie) => { const url = `http://localhost:3000/movies`; axios.post(url, movie) diff --git a/src/components/Library.js b/src/components/Library.js index a7166f06a..547f91848 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -23,10 +23,19 @@ class Library extends Component { .catch(error => console.log(error)) } + filterMovies(title) { + const movieExists = this.state.movieLibrary.filter(movie => movie.title === title); + if (movieExists) { + return true; + } else { + return false; + } + } + render () { const movieCards = this.state.movieLibrary.map((movie, i) => { return ( - {this.props.selectMovie(movie)}} /> + {this.props.selectMovie(movie)}} /> ) }) return ( @@ -39,7 +48,7 @@ class Library extends Component { }; Library.propTypes = { - movieLibrary: PropTypes.array.isRequired, + movieLibrary: PropTypes.array, selectMovie: PropTypes.func.isRequired, } diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 2bf4a68cc..5bf0629f9 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -1,15 +1,41 @@ +// import React from 'react'; +// import PropTypes from 'prop-types'; + +// const MovieCard = (props) => { +// const { title, release_date, overview, image_url } = props.movie; +// return ( +//
    +//

    { title }

    +// {title} +//
    { release_date }
    +//

    { overview }

    +// +// +//
    +// ); +// }; + + +// MovieCard.propTypes = { +// selectMovie: PropTypes.func.isRequired, +// movie: PropTypes.object.isRequired, +// } + +// export default MovieCard; + import React from 'react'; import PropTypes from 'prop-types'; const MovieCard = (props) => { const { title, release_date, overview, image_url } = props.movie; + const displayButton = props.filterMovies(props.movie.title) ? : return (

    { title }

    {title}
    { release_date }

    { overview }

    - + {displayButton}
    ); }; @@ -18,6 +44,7 @@ const MovieCard = (props) => { MovieCard.propTypes = { selectMovie: PropTypes.func.isRequired, movie: PropTypes.object.isRequired, + filterMovies: PropTypes.func, } export default MovieCard; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js index 9cd732579..9f6c1d7eb 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -24,9 +24,7 @@ class Search extends Component { onFormSubmit = (event) => { event.preventDefault(); - - // const URL = `http://localhost:3000/movies?query=${this.state.queryString}`; - + axios.get(`/movies?query=${this.state.queryString}`) .then((response) => { console.log(response) @@ -38,11 +36,11 @@ class Search extends Component { } render() { - const searchResultList = this.state.searchResults.map((movie, index) => { + const searchResultList = this.state.searchResults.map((movie, i) => { return (
    - - + + {/* */}
    ) }) From 8b77368194cb30c15910a147822fd1f2ea8c438f Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 16:39:13 -0700 Subject: [PATCH 32/60] tried to render buttons to no avail --- src/App.js | 40 ++++++++++++++++++++----- src/components/Library.js | 58 ++++++++++--------------------------- src/components/MovieCard.js | 4 +-- src/components/Search.js | 8 +++-- 4 files changed, 55 insertions(+), 55 deletions(-) diff --git a/src/App.js b/src/App.js index 2926496dd..9c599df1c 100644 --- a/src/App.js +++ b/src/App.js @@ -23,18 +23,27 @@ class App extends Component { componentDidMount() { axios.get('/customers') .then(response => { - console.log(response) this.setState({ customerList: response.data }) }) .catch(error => console.log(error)) + + axios.get('/movies') + .then(response => { + console.log(response) + this.setState({ + movieLibrary: response.data + }) + }) + .catch(error => console.log(error)) } addMovieToLibrary = (movie) => { const url = `http://localhost:3000/movies`; axios.post(url, movie) - .then(() => { + .then((response) => { + console.log(response) let success = `${movie.title} was successfully added to rental library!`; this.setState({userMessages: [success]}) }) @@ -42,19 +51,28 @@ class App extends Component { } selectMovie = (movie) => { - console.log(movie) this.setState({ selectedMovie: movie }); } selectCustomer = (customer) => { - console.log(customer) this.setState({ selectedCustomer: customer }); } + filterMovies(title) { + console.log(this) + const library = this.state.movieLibrary + const movieExists = library.filter(movie => movie.title === title); + if (movieExists.length > 0) { + return true; + } else { + return false; + } + } + checkoutMovie = (movie, customer) => { let dueDate = Date.now() + 604800000 const checkoutParams = { @@ -107,17 +125,23 @@ class App extends Component { } + render={(props) => } /> } /> } />
    diff --git a/src/components/Library.js b/src/components/Library.js index 547f91848..38d18a726 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,55 +1,27 @@ -import React, {Component} from 'react'; +import React from 'react'; import MovieCard from './MovieCard'; import PropTypes from 'prop-types' -import axios from 'axios'; -class Library extends Component { - constructor(props) { - super(props); - - this.state = { - movieLibrary: [], - } - } +const Library = (props) => { + const { movieLibrary, selectMovie, filterMoviesCallback } = props; - componentDidMount() { - axios.get('/movies') - .then(response => { - console.log(response) - this.setState({ - movieLibrary: response.data - }) - }) - .catch(error => console.log(error)) - } - - filterMovies(title) { - const movieExists = this.state.movieLibrary.filter(movie => movie.title === title); - if (movieExists) { - return true; - } else { - return false; - } - } - - render () { - const movieCards = this.state.movieLibrary.map((movie, i) => { - return ( - {this.props.selectMovie(movie)}} /> - ) - }) + const movieCards = props.movieLibrary.map((movie, i) => { return ( -
    -

    Movie Library

    - { movieCards } -
    - ); - } -}; + {props.selectMovie(movie)}} /> + ) + }) + return ( +
    +

    Movie Library

    + { movieCards } +
    + ); +} Library.propTypes = { movieLibrary: PropTypes.array, selectMovie: PropTypes.func.isRequired, + filterMoviesCallback: PropTypes.func.isRequired, } export default Library; \ No newline at end of file diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 5bf0629f9..b4077d912 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -28,7 +28,7 @@ import PropTypes from 'prop-types'; const MovieCard = (props) => { const { title, release_date, overview, image_url } = props.movie; - const displayButton = props.filterMovies(props.movie.title) ? : + const displayButton = props.filterMoviesCallback ? : return (

    { title }

    @@ -44,7 +44,7 @@ const MovieCard = (props) => { MovieCard.propTypes = { selectMovie: PropTypes.func.isRequired, movie: PropTypes.object.isRequired, - filterMovies: PropTypes.func, + filterMoviesCallback: PropTypes.func, } export default MovieCard; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js index 9f6c1d7eb..4c55ebbba 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -24,7 +24,7 @@ class Search extends Component { onFormSubmit = (event) => { event.preventDefault(); - + axios.get(`/movies?query=${this.state.queryString}`) .then((response) => { console.log(response) @@ -39,7 +39,11 @@ class Search extends Component { const searchResultList = this.state.searchResults.map((movie, i) => { return (
    - + {/* */}
    ) From 817239425589b52c3aab5fc1d9fca47b9a3ccbbc Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 16:53:05 -0700 Subject: [PATCH 33/60] reset files --- src/components/MovieCard.js | 4 ++-- src/components/Search.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index b4077d912..5bf0629f9 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -28,7 +28,7 @@ import PropTypes from 'prop-types'; const MovieCard = (props) => { const { title, release_date, overview, image_url } = props.movie; - const displayButton = props.filterMoviesCallback ? : + const displayButton = props.filterMovies(props.movie.title) ? : return (

    { title }

    @@ -44,7 +44,7 @@ const MovieCard = (props) => { MovieCard.propTypes = { selectMovie: PropTypes.func.isRequired, movie: PropTypes.object.isRequired, - filterMoviesCallback: PropTypes.func, + filterMovies: PropTypes.func, } export default MovieCard; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js index 4c55ebbba..e75a4420e 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -43,7 +43,7 @@ class Search extends Component { movie={movie} selectMovie={this.props.selectMovie} addMovieCallback={this.props.addMovieCallback} - filterMoviesCallback={this.props.filterMoviesCallback}/> + filterMoviesCallback={this.props.filterMoviesCallback} /> {/* */}
    ) From 288bf3ed0b538f576cc5b974095aa4f72ecb8668 Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 17:23:51 -0700 Subject: [PATCH 34/60] completed conditional button rendering based on movie library --- src/App.js | 4 ++-- src/components/Library.js | 4 ++-- src/components/MovieCard.js | 7 +++++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 9c599df1c..35dd5b167 100644 --- a/src/App.js +++ b/src/App.js @@ -46,6 +46,7 @@ class App extends Component { console.log(response) let success = `${movie.title} was successfully added to rental library!`; this.setState({userMessages: [success]}) + // setstate with new movie }) .catch(error => console.log(error)) } @@ -62,8 +63,7 @@ class App extends Component { }); } - filterMovies(title) { - console.log(this) + filterMovies = (title) => { const library = this.state.movieLibrary const movieExists = library.filter(movie => movie.title === title); if (movieExists.length > 0) { diff --git a/src/components/Library.js b/src/components/Library.js index 38d18a726..7b66ca929 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -5,9 +5,9 @@ import PropTypes from 'prop-types' const Library = (props) => { const { movieLibrary, selectMovie, filterMoviesCallback } = props; - const movieCards = props.movieLibrary.map((movie, i) => { + const movieCards = movieLibrary.map((movie, i) => { return ( - {props.selectMovie(movie)}} /> + {selectMovie(movie)}} /> ) }) return ( diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 5bf0629f9..78909fed4 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -28,7 +28,9 @@ import PropTypes from 'prop-types'; const MovieCard = (props) => { const { title, release_date, overview, image_url } = props.movie; - const displayButton = props.filterMovies(props.movie.title) ? : + const displayButton = props.filterMoviesCallback(props.movie.title) ? + : + return (

    { title }

    @@ -44,7 +46,8 @@ const MovieCard = (props) => { MovieCard.propTypes = { selectMovie: PropTypes.func.isRequired, movie: PropTypes.object.isRequired, - filterMovies: PropTypes.func, + filterMoviesCallback: PropTypes.func, + addMovieCallback: PropTypes.func, } export default MovieCard; \ No newline at end of file From 6d50a07df8f43935d6b7ca8974e2369ceb8f8c74 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Wed, 26 Jun 2019 17:26:23 -0700 Subject: [PATCH 35/60] fixed typo --- src/components/Search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search.js b/src/components/Search.js index e75a4420e..487752d18 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -57,7 +57,7 @@ class Search extends Component {
    - +
    {searchResultList} From e570b15dab000edb4c1401993e944d62104bd46d Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 21:07:28 -0700 Subject: [PATCH 36/60] added conditional rendering to selected movies and setState to addMovie function --- src/App.js | 40 +++++++++++++++++++--------------- src/components/CustomerList.js | 2 +- src/components/Library.js | 7 ++++-- src/components/Search.js | 2 +- 4 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/App.js b/src/App.js index 35dd5b167..c6df29939 100644 --- a/src/App.js +++ b/src/App.js @@ -31,7 +31,6 @@ class App extends Component { axios.get('/movies') .then(response => { - console.log(response) this.setState({ movieLibrary: response.data }) @@ -43,17 +42,22 @@ class App extends Component { const url = `http://localhost:3000/movies`; axios.post(url, movie) .then((response) => { - console.log(response) let success = `${movie.title} was successfully added to rental library!`; - this.setState({userMessages: [success]}) - // setstate with new movie + let updatedLibrary = this.state.movieLibrary.slice(); + updatedLibrary.push(movie); + this.setState( + { + userMessages: [success], + movieLibrary: updatedLibrary, + }) }) .catch(error => console.log(error)) } selectMovie = (movie) => { + const movieRecord = this.state.movieLibrary.filter(libraryMovie => libraryMovie.title === movie.title); this.setState({ - selectedMovie: movie + selectedMovie: movieRecord[0] }); } @@ -64,8 +68,7 @@ class App extends Component { } filterMovies = (title) => { - const library = this.state.movieLibrary - const movieExists = library.filter(movie => movie.title === title); + const movieExists = this.state.movieLibrary.filter(movie => movie.title === title); if (movieExists.length > 0) { return true; } else { @@ -81,7 +84,7 @@ class App extends Component { }; axios.post(`/rentals/${movie.title}/check-out`, checkoutParams) .then(() => { - let success = `${movie.title} was successfully added to rental library!`; + let success = `${movie.title} was successfully checked out to ${customer.name}!`; this.setState({userMessages: [success]}) }) .catch(error => console.log(error)); @@ -93,6 +96,14 @@ class App extends Component { }) const enabledCheckout = this.state.selectedCustomer && this.state.selectedMovie !== null + + const displaySelectedItems = (this.state.selectedCustomer || this.state.selectedMovie !== null) ? +
    +

    Selected Movie: {this.state.selectedMovie ? this.state.selectedMovie.title : "No movie selected"}

    +

    Selected Customer: {this.state.selectedCustomer ? this.state.selectedCustomer.name : "No customer selected"}

    + +
    : '' + return (
    @@ -107,21 +118,16 @@ class App extends Component { { return (
    -

    Customer List

    +

    Customers:

    { displayCustomers }
    ); diff --git a/src/components/Library.js b/src/components/Library.js index 7b66ca929..a7d1599b1 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -7,12 +7,15 @@ const Library = (props) => { const movieCards = movieLibrary.map((movie, i) => { return ( - {selectMovie(movie)}} /> + {selectMovie(movie)}} /> ) }) return (
    -

    Movie Library

    +

    Movies:

    { movieCards }
    ); diff --git a/src/components/Search.js b/src/components/Search.js index e75a4420e..88213a20e 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -41,7 +41,7 @@ class Search extends Component {
    {this.props.selectMovie(movie)}} addMovieCallback={this.props.addMovieCallback} filterMoviesCallback={this.props.filterMoviesCallback} /> {/* */} From 24c0926099fef3bd6900442a15812f05c28eb1f5 Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 21:52:37 -0700 Subject: [PATCH 37/60] added form clearing functionality to search --- src/App.js | 6 +++++- src/components/Search.js | 1 - 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index c6df29939..b74993bf8 100644 --- a/src/App.js +++ b/src/App.js @@ -85,7 +85,11 @@ class App extends Component { axios.post(`/rentals/${movie.title}/check-out`, checkoutParams) .then(() => { let success = `${movie.title} was successfully checked out to ${customer.name}!`; - this.setState({userMessages: [success]}) + this.setState({ + userMessages: [success], + selectedCustomer: null, + selectedMovie: null, + }) }) .catch(error => console.log(error)); } diff --git a/src/components/Search.js b/src/components/Search.js index 88213a20e..1f5d80bb2 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -44,7 +44,6 @@ class Search extends Component { selectMovie={() => {this.props.selectMovie(movie)}} addMovieCallback={this.props.addMovieCallback} filterMoviesCallback={this.props.filterMoviesCallback} /> - {/* */}
    ) }) From e5372e2575c9d8a4f531ffceaedc40fa76f5686b Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 22:24:47 -0700 Subject: [PATCH 38/60] debugging search function --- src/App.js | 5 +++-- src/components/Search.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index b74993bf8..8ae92288e 100644 --- a/src/App.js +++ b/src/App.js @@ -137,8 +137,9 @@ class App extends Component { } + addMovieCallback={this.addMovieToLibrary} + filterMoviesCallback={this.filterMovies} + />} /> { - console.log(response) this.setState({ - searchResults: response.data + searchResults: response.data, + queryString: '' }) }) .catch(error => console.log(error)) From 27f3c40cfb365fedf25bfa8117e5c387a7d1cb27 Mon Sep 17 00:00:00 2001 From: amyesh Date: Wed, 26 Jun 2019 22:36:35 -0700 Subject: [PATCH 39/60] internal server error present --- src/App.js | 2 +- src/components/MovieCard.js | 25 ------------------------- 2 files changed, 1 insertion(+), 26 deletions(-) diff --git a/src/App.js b/src/App.js index 8ae92288e..81f03820b 100644 --- a/src/App.js +++ b/src/App.js @@ -137,7 +137,7 @@ class App extends Component { } /> diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 78909fed4..399fe9e12 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -1,28 +1,3 @@ -// import React from 'react'; -// import PropTypes from 'prop-types'; - -// const MovieCard = (props) => { -// const { title, release_date, overview, image_url } = props.movie; -// return ( -//
    -//

    { title }

    -// {title} -//
    { release_date }
    -//

    { overview }

    -// -// -//
    -// ); -// }; - - -// MovieCard.propTypes = { -// selectMovie: PropTypes.func.isRequired, -// movie: PropTypes.object.isRequired, -// } - -// export default MovieCard; - import React from 'react'; import PropTypes from 'prop-types'; From ab3719a93e63337b196992ba10dfbc66e9a50eba Mon Sep 17 00:00:00 2001 From: amyesh Date: Thu, 27 Jun 2019 10:13:20 -0700 Subject: [PATCH 40/60] added bootstrap --- package-lock.json | 87 +++++++++++++++++++++++++++++++++++------------ package.json | 1 + src/index.js | 1 + 3 files changed, 67 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b8203228..4081138c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2428,6 +2428,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2776,7 +2781,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -2797,12 +2803,14 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2817,17 +2825,20 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2944,7 +2955,8 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -2956,6 +2968,7 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2970,6 +2983,7 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2977,12 +2991,14 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3001,6 +3017,7 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3081,7 +3098,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3093,6 +3111,7 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -3178,7 +3197,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3214,6 +3234,7 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3233,6 +3254,7 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3276,12 +3298,14 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } }, @@ -6729,7 +6753,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -6750,12 +6775,14 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6770,17 +6797,20 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6897,7 +6927,8 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -6909,6 +6940,7 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6923,6 +6955,7 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6930,12 +6963,14 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6954,6 +6989,7 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7034,7 +7070,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7046,6 +7083,7 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -7131,7 +7169,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7167,6 +7206,7 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7186,6 +7226,7 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7229,12 +7270,14 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } } diff --git a/package.json b/package.json index 361aa9098..995623811 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "axios": "^0.19.0", + "bootstrap": "^4.3.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", diff --git a/src/index.js b/src/index.js index fae3e3500..cb6856b7c 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; +import 'bootstrap/dist/css/bootstrap.css'; ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); From 22b75f4f1185e00298b75b72afdc6c6902402106 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Thu, 27 Jun 2019 10:15:16 -0700 Subject: [PATCH 41/60] added bootstrap --- package-lock.json | 82 ++++++++++--------------------------- src/components/MovieCard.js | 3 +- 2 files changed, 24 insertions(+), 61 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4081138c2..ba562b6ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2781,8 +2781,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -2803,14 +2802,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2825,20 +2822,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -2955,8 +2949,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -2968,7 +2961,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2983,7 +2975,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2991,14 +2982,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3017,7 +3006,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3098,8 +3086,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -3111,7 +3098,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -3197,8 +3183,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -3234,7 +3219,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3254,7 +3238,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3298,14 +3281,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -6753,8 +6734,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -6775,14 +6755,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6797,20 +6775,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -6927,8 +6902,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -6940,7 +6914,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6955,7 +6928,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6963,14 +6935,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6989,7 +6959,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7070,8 +7039,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -7083,7 +7051,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -7169,8 +7136,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -7206,7 +7172,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7226,7 +7191,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7270,14 +7234,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } } diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 399fe9e12..beef34556 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; - +import './MovieCard.css'; + const MovieCard = (props) => { const { title, release_date, overview, image_url } = props.movie; const displayButton = props.filterMoviesCallback(props.movie.title) ? From a72cfc2466bd798bdc58f82d1d8e2aad991f2fed Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Thu, 27 Jun 2019 12:16:17 -0700 Subject: [PATCH 42/60] basic movie card styling --- src/components/MovieCard.css | 5 +++++ src/components/MovieCard.js | 14 ++++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css index e69de29bb..08951e39e 100644 --- a/src/components/MovieCard.css +++ b/src/components/MovieCard.css @@ -0,0 +1,5 @@ +.card { + width: 33%; + margin: 20px; +} + diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index beef34556..5d4a84358 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -8,12 +8,14 @@ const MovieCard = (props) => { : return ( -
    -

    { title }

    - {title} -
    { release_date }
    -

    { overview }

    - {displayButton} +
    +
    +

    { title }

    + { +
    { release_date }
    +

    { overview }

    + {displayButton} +
    ); }; From 8f6d28700460c8015b2764e551e301c68654ad96 Mon Sep 17 00:00:00 2001 From: amyesh Date: Thu, 27 Jun 2019 13:35:40 -0700 Subject: [PATCH 43/60] added navbar styling --- package-lock.json | 92 +++++++++++++++++++++++++++++++++++----------- package.json | 2 + src/App.css | 23 ++++++++++++ src/App.js | 94 +++++++++++++++++++++++++++++------------------ src/index.js | 5 ++- 5 files changed, 158 insertions(+), 58 deletions(-) diff --git a/package-lock.json b/package-lock.json index ba562b6ad..1d5fe7fc7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2781,7 +2781,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -2802,12 +2803,14 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2822,17 +2825,20 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2949,7 +2955,8 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -2961,6 +2968,7 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2975,6 +2983,7 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2982,12 +2991,14 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3006,6 +3017,7 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3086,7 +3098,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3098,6 +3111,7 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -3183,7 +3197,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3219,6 +3234,7 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3238,6 +3254,7 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3281,12 +3298,14 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } }, @@ -6734,7 +6753,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -6755,12 +6775,14 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6775,17 +6797,20 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6902,7 +6927,8 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -6914,6 +6940,7 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6928,6 +6955,7 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6935,12 +6963,14 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6959,6 +6989,7 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7039,7 +7070,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7051,6 +7083,7 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -7136,7 +7169,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7172,6 +7206,7 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7191,6 +7226,7 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7234,12 +7270,14 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } } @@ -7574,6 +7612,11 @@ } } }, + "jquery": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", + "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" + }, "js-levenshtein": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", @@ -9018,6 +9061,11 @@ "ts-pnp": "^1.0.0" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", diff --git a/package.json b/package.json index 995623811..0c3a7119c 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "dependencies": { "axios": "^0.19.0", "bootstrap": "^4.3.1", + "jquery": "^3.4.1", + "popper.js": "^1.15.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", diff --git a/src/App.css b/src/App.css index a92e2e0e3..97d8bacf7 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,14 @@ text-align: center; } */ +* { + box-sizing: border-box; +} + +body { + /* font-family: 'Courier', sans-serif; */ +} + .App-header { background-color: #222; height: 150px; @@ -25,3 +33,18 @@ .nav-list{ list-style-type: none; } + +/* .nav-list li { + display: inline; +} */ + +.nav-spacer { + flex-grow: 1; +} + +.store { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 81f03820b..88c0f5516 100644 --- a/src/App.js +++ b/src/App.js @@ -111,54 +111,78 @@ class App extends Component { return (
    -
    + {/*

    Video Store Consumer

    -
    - -
    - {allUserMessages} -
    - -
    */} + + + {/* + */} + +
    + {allUserMessages} +
    - } - /> - } - /> - } - /> +
    + } + /> + } + /> + } + /> +
    ); } } -export default App; +export default App; \ No newline at end of file diff --git a/src/index.js b/src/index.js index cb6856b7c..e567947ee 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,12 @@ +import 'bootstrap/dist/css/bootstrap.css'; +import $ from 'jquery'; +import Popper from 'popper.js'; +import 'bootstrap/dist/js/bootstrap.bundle.min' import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; -import 'bootstrap/dist/css/bootstrap.css'; ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); From 87415f017ce2884a97fb1f1bc543a1b6a06332e5 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Thu, 27 Jun 2019 13:40:00 -0700 Subject: [PATCH 44/60] movie library grid under constructtion --- src/App.css | 6 +++--- src/components/Library.css | 4 ++++ src/components/Library.js | 6 ++++-- src/components/MovieCard.css | 9 ++++++++- src/components/MovieCard.js | 9 +++++---- 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/src/App.css b/src/App.css index a92e2e0e3..45dd343db 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,6 @@ -/* .App { - text-align: center; -} */ +.App { + padding: 5px; +} .App-header { background-color: #222; diff --git a/src/components/Library.css b/src/components/Library.css index e69de29bb..f8b7c5410 100644 --- a/src/components/Library.css +++ b/src/components/Library.css @@ -0,0 +1,4 @@ +/* body { + padding: 20px; +} */ + diff --git a/src/components/Library.js b/src/components/Library.js index a7d1599b1..afc02b05b 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -15,8 +15,10 @@ const Library = (props) => { }) return (
    -

    Movies:

    - { movieCards } +

    Movies:

    +
    + { movieCards } +
    ); } diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css index 08951e39e..9ddc83235 100644 --- a/src/components/MovieCard.css +++ b/src/components/MovieCard.css @@ -1,5 +1,12 @@ .card { + display: flex; width: 33%; - margin: 20px; + /* mar: 20px; */ } +.card-body { + text-align: center; +} +.card-columns { + padding: 25px; +} \ No newline at end of file diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index 5d4a84358..e122f917c 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -11,12 +11,13 @@ const MovieCard = (props) => {

    { title }

    - { -
    { release_date }
    -

    { overview }

    - {displayButton} + { +
    { release_date }
    +

    { overview }

    + {displayButton}
    + ); }; From a32e4ae43cf3a028b8d01e895b66f82ddde708df Mon Sep 17 00:00:00 2001 From: amyesh Date: Thu, 27 Jun 2019 14:36:23 -0700 Subject: [PATCH 45/60] changed button styling --- src/components/MovieCard.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index e122f917c..1ea58b20a 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -5,8 +5,8 @@ import './MovieCard.css'; const MovieCard = (props) => { const { title, release_date, overview, image_url } = props.movie; const displayButton = props.filterMoviesCallback(props.movie.title) ? - : - + : + return (
    From b6bca352c1e90c56b77fe97dcb1ff96da34bb738 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Thu, 27 Jun 2019 14:36:24 -0700 Subject: [PATCH 46/60] movie card title changes and rearranging description --- package-lock.json | 82 ++++++++++-------------------------- src/components/Library.css | 3 ++ src/components/MovieCard.css | 15 ++++--- src/components/MovieCard.js | 5 +-- 4 files changed, 36 insertions(+), 69 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1d5fe7fc7..94226c293 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2781,8 +2781,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -2803,14 +2802,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2825,20 +2822,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -2955,8 +2949,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -2968,7 +2961,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2983,7 +2975,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2991,14 +2982,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3017,7 +3006,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3098,8 +3086,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -3111,7 +3098,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -3197,8 +3183,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -3234,7 +3219,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3254,7 +3238,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3298,14 +3281,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -6753,8 +6734,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -6775,14 +6755,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6797,20 +6775,17 @@ "code-point-at": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -6927,8 +6902,7 @@ "inherits": { "version": "2.0.3", "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -6940,7 +6914,6 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6955,7 +6928,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6963,14 +6935,12 @@ "minimist": { "version": "0.0.8", "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6989,7 +6959,6 @@ "version": "0.5.1", "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7070,8 +7039,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -7083,7 +7051,6 @@ "version": "1.4.0", "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -7169,8 +7136,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -7206,7 +7172,6 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7226,7 +7191,6 @@ "version": "3.0.1", "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7270,14 +7234,12 @@ "wrappy": { "version": "1.0.2", "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } } diff --git a/src/components/Library.css b/src/components/Library.css index f8b7c5410..e63d26752 100644 --- a/src/components/Library.css +++ b/src/components/Library.css @@ -2,3 +2,6 @@ padding: 20px; } */ +.card-columns { + width: 50%; +} \ No newline at end of file diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css index 9ddc83235..029599446 100644 --- a/src/components/MovieCard.css +++ b/src/components/MovieCard.css @@ -1,12 +1,15 @@ -.card { - display: flex; - width: 33%; - /* mar: 20px; */ -} +/* .card-body{ + object-fit: cover; + width: 50%; +} */ +.card-text { + padding: 10px; +} .card-body { text-align: center; + padding: 0; } .card-columns { padding: 25px; -} \ No newline at end of file +} diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index e122f917c..eb569df88 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -10,9 +10,8 @@ const MovieCard = (props) => { return (
    -

    { title }

    - { -
    { release_date }
    + { +

    { title }

    { overview }

    {displayButton}
    From c6fde5960751000d7346b6b97400dd5395ef4421 Mon Sep 17 00:00:00 2001 From: Stephanie Marchante Date: Thu, 27 Jun 2019 16:44:27 -0700 Subject: [PATCH 47/60] basic styling for cards in card columns --- src/App.js | 4 + src/components/Library.css | 7 ++ src/components/Library.js | 4 +- src/components/MovieCard.css | 152 ++++++++++++++++++++++++++++++++++- src/components/MovieCard.js | 2 +- 5 files changed, 162 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 88c0f5516..ddafb2613 100644 --- a/src/App.js +++ b/src/App.js @@ -67,6 +67,10 @@ class App extends Component { }); } + hideDescription = (movie) => { + + } + filterMovies = (title) => { const movieExists = this.state.movieLibrary.filter(movie => movie.title === title); if (movieExists.length > 0) { diff --git a/src/components/Library.css b/src/components/Library.css index e63d26752..13bf2aa85 100644 --- a/src/components/Library.css +++ b/src/components/Library.css @@ -2,6 +2,13 @@ padding: 20px; } */ +h2{ + text-align: center; +} .card-columns { width: 50%; +} + +.card-columns { + column-gap: 0; } \ No newline at end of file diff --git a/src/components/Library.js b/src/components/Library.js index afc02b05b..64cff30a8 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -15,8 +15,8 @@ const Library = (props) => { }) return (
    -

    Movies:

    -
    +

    Movies:

    +
    { movieCards }
    diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css index 029599446..2abb318d1 100644 --- a/src/components/MovieCard.css +++ b/src/components/MovieCard.css @@ -1,10 +1,51 @@ -/* .card-body{ - object-fit: cover; - width: 50%; -} */ +.card:hover { + -webkit-animation: shadow-pop-tr 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; + animation: shadow-pop-tr 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; +} + +/* ---------------------------------------------- + * Generated by Animista on 2019-5-27 1:4:45 + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ +/** + * ---------------------------------------- + * animation shadow-pop-tr + * ---------------------------------------- + */ + @-webkit-keyframes shadow-pop-tr { + 0% { + box-shadow: 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); + } + 100% { + box-shadow: 1px -1px #449FB5, 2px -2px #449FB5, 3px -3px #449FB5, 4px -4px #449FB5, 5px -5px #449FB5, 6px -6px #449FB5, 7px -7px #449FB5, 8px -8px #449FB5; + -webkit-transform: translateX(-8px) translateY(8px); + transform: translateX(-8px) translateY(8px); + } + } + @keyframes shadow-pop-tr { + 0% { + box-shadow: 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5, 0 0 #449FB5; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); + } + 100% { + box-shadow: 1px -1px #449FB5, 2px -2px #449FB5, 3px -3px #449FB5, 4px -4px #449FB5, 5px -5px #449FB5, 6px -6px #449FB5, 7px -7px #449FB5, 8px -8px #449FB5; + -webkit-transform: translateX(-8px) translateY(8px); + transform: translateX(-8px) translateY(8px); + } + } + .card-text { padding: 10px; + color: #A6A9AC ; +} + +.movie-title{ + color: rgb(129, 131, 133); + padding-top: 5px; } .card-body { text-align: center; @@ -13,3 +54,106 @@ .card-columns { padding: 25px; } + +.card{ + border-color: rgba(68, 158, 181, 0.276); +} + +.btn, btn-info{ + margin-bottom: 16px; +} + +@media (min-width: 576px){ +.card-columns .card { + display: inline-block; + width: 70%; +}} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + min-width: 700px; + min-height: 350px; + border-radius: 20px; + position: relative; + -webkit-transition: 1.5s ease-in-out; + transition: 1.5s ease-in-out; + transform-style: preserve-3d; +} + +.side { + position: absolute; + text-align: center; + width: 100%; + height: 100%; + padding: 20px 50px; + color: #fff; + transform-style: preserve-3d; + backface-visibility: hidden; + border-radius: 20px; +} +.content { + transform: translatez(70px) scale(0.8); + line-height: 1.5em; +} +.content h1 { + position: relative; +} +.content p { + margin-top: 50px; + line-height: 2em; +} +.content h1:before { + content: ""; + position: absolute; + bottom: -20px; + height: 3px; + background-color: #3e3; + width: 70px; + left: 50%; + transform: translateX(-50%); +} +.front { + z-index: 2; + background-size: 100vh; + background-size: cover; + background-image: url(https://livewallpaperhd.com/wp-content/uploads/2017/07/Dark-Elegant-Wallpaper.jpg); +} +.back { + background-color: #333; + transform: rotateY(180deg); + z-index: 0; + padding-top: 10px; + background-image: url(https://userscontent2.emaze.com/images/f9538183-0ff9-478f-b964-c8ab90421e3b/3d28e192fda5c17250f96a2779c84475.jpg); +} +.container:hover { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.back h1 { + margin: 0; +} + +/* my button style */ +.white-mode { + text-decoration: none; + padding: 7px 10px; + background-color: #122; + border-radius: 3px; + color: #fff; + transition: 0.35s ease-in-out; + position: fixed; + left: 15px; + bottom: 15px; + font-family: "Montserrat"; +} + +.white-mode:hover { + background-color: #fff; + color: #122; +} diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js index ecd19eddc..14e938918 100644 --- a/src/components/MovieCard.js +++ b/src/components/MovieCard.js @@ -11,7 +11,7 @@ const MovieCard = (props) => {
    { -

    { title }

    +

    { title }

    { overview }

    {displayButton}
    From a08c0d6370ae9f875f34ad2ea771c9f9bc1c733c Mon Sep 17 00:00:00 2001 From: amyesh Date: Thu, 27 Jun 2019 21:45:20 -0700 Subject: [PATCH 48/60] added styling to nav bar and homepage --- public/index.html | 4 + src/App.css | 103 +++++++++++++++++++---- src/App.js | 32 ++----- src/components/{Sidebar.css => Home.css} | 0 src/components/Home.js | 11 +++ src/components/Library.js | 2 +- src/components/MovieCard.css | 9 ++ src/components/Sidebar.js | 7 -- 8 files changed, 119 insertions(+), 49 deletions(-) rename src/components/{Sidebar.css => Home.css} (100%) create mode 100644 src/components/Home.js delete mode 100644 src/components/Sidebar.js diff --git a/public/index.html b/public/index.html index ed0ebafa1..7256f8d0c 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,10 @@ --> + + + +