From a94c2f74f7ad2f9a11abe3b6a947ac12a22b1ba1 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Mon, 24 Jun 2019 15:09:50 -0700 Subject: [PATCH 01/52] Added components for Movies search library and customer list --- package-lock.json | 102 ++++++++++++++++++++++++++++++++ package.json | 13 ++++ src/App.js | 16 ++--- src/components/CustomerList.css | 0 src/components/CustomerList.js | 0 src/components/MovieLibrary.css | 0 src/components/MovieLibrary.js | 0 src/components/MovieSearch.css | 0 src/components/MovieSearch.js | 0 9 files changed, 121 insertions(+), 10 deletions(-) create mode 100644 src/components/CustomerList.css create mode 100644 src/components/CustomerList.js create mode 100644 src/components/MovieLibrary.css create mode 100644 src/components/MovieLibrary.js create mode 100644 src/components/MovieSearch.css create mode 100644 src/components/MovieSearch.js diff --git a/package-lock.json b/package-lock.json index 2207e63b9..3e0662036 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5603,6 +5603,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 +5782,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 +5805,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", @@ -8134,6 +8160,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 +10230,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 +10657,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 +11772,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 +12219,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..8ff0e15fd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,14 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React, { Component } from "react"; +import logo from "./logo.svg"; +import "./App.css"; class App extends Component { render() { return (
-
- logo -

Welcome to React

-
-

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

+ + +
); } 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..e69de29bb diff --git a/src/components/MovieLibrary.css b/src/components/MovieLibrary.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieSearch.css b/src/components/MovieSearch.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js new file mode 100644 index 000000000..e69de29bb From 329fc586857e995f05d7f47e4e480531db5506d1 Mon Sep 17 00:00:00 2001 From: Bitaman Date: Mon, 24 Jun 2019 15:14:45 -0700 Subject: [PATCH 02/52] set up done --- FETCH_HEAD | 0 package-lock.json | 102 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 13 ++++++ 3 files changed, 115 insertions(+) create mode 100644 FETCH_HEAD diff --git a/FETCH_HEAD b/FETCH_HEAD new file mode 100644 index 000000000..e69de29bb diff --git a/package-lock.json b/package-lock.json index 2207e63b9..3e0662036 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5603,6 +5603,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 +5782,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 +5805,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", @@ -8134,6 +8160,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 +10230,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 +10657,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 +11772,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 +12219,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" + ] } } From 70c11a3816c2d8e53386a8eb69f40b01bbba2c1a Mon Sep 17 00:00:00 2001 From: Bitaman Date: Mon, 24 Jun 2019 16:29:41 -0700 Subject: [PATCH 03/52] made the Movie search component with a search form inside --- package-lock.json | 32 +++++++++++ package.json | 1 + src/App.js | 5 +- src/components/MovieSearch.js | 88 ++++++++++++++++++++++++++++++ src/components/MovieSearchForm.css | 0 src/components/MovieSearchForm.js | 64 ++++++++++++++++++++++ 6 files changed, 188 insertions(+), 2 deletions(-) create mode 100644 src/components/MovieSearchForm.css create mode 100644 src/components/MovieSearchForm.js diff --git a/package-lock.json b/package-lock.json index 3e0662036..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", diff --git a/package.json b/package.json index d63126caa..eeff31f0a 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", diff --git a/src/App.js b/src/App.js index 8ff0e15fd..d62b00d49 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,15 @@ import React, { Component } from "react"; import logo from "./logo.svg"; import "./App.css"; +import MovieSearch from "./components/MovieSearch" class App extends Component { render() { return (
- - + {/* */} + {/* */}
); } diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index e69de29bb..b0ca61e43 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -0,0 +1,88 @@ +import React, { Component } from "react"; +// import logo from "./logo.svg"; +import "./MovieSearch.css"; +import axios from 'axios'; +import MovieSearchForm from "./MovieSearchForm" + +class MovieSearch extends Component { + constructor() { + super(); + + this.state = { + Movies: [], + error: "" + }; + } + + componentDidMount() { + const URL = "https://api.themoviedb.org/3/search/movie?api_key=<>&language=en-US&page=1&include_adult=false" + axios.get(URL) + .then((response) => { + const movies = response.data.map((movie) => { + const newMovie = { + ...movie, + } + return newMovie + }) + console.log(movies) + this.setState({ + movies: movies, + }); + }) + .catch((error) => { + console.log(error); + alert('Error happened'); + this.setState({ error: error.message }); + }); + } + searchMovieCallback = (movie) => { + const movieIds = this.state.movies.map(item => item.movie.id) + + this.setState({ + movies: [...this.state.movies, { movie:{...movie, id: Math.max(...movieIds) + 1 }}] + }); + // axios.post(`${this.props.url}${this.props.boardName}/cards`, {text: card.text, emoji: card.emoji}) + // .then((response) => { + // console.log(response) + // }) + // .catch((error)=> { + // console.log(error) + // alert('Error happened'); + // this.setState({ error }); + // }) + } + + render() { + // const moviecollection = this.state.movies.map((movie, i) => { + // return ([ + // ] + // ) + // }) + return ( + //
+ //
+ // {this.state.error} + //
+
+
+

List of movies

+
+
+ +
+
+ //
+ // + //
+ //
+ ) + }; + }; + +export default MovieSearch; \ No newline at end of file diff --git a/src/components/MovieSearchForm.css b/src/components/MovieSearchForm.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js new file mode 100644 index 000000000..d68f1c4b5 --- /dev/null +++ b/src/components/MovieSearchForm.js @@ -0,0 +1,64 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './MovieSearchForm.css'; + +class MovieSearchForm extends Component { + constructor(props) { + super(props); + + this.cleared = { + text: "", + }; + + this.state = { ...this.cleared } + } + searchMovie = (event) => { + event.preventDefault(); + + const movie = this.state; + console.log(this.props) + + this.props.searchMovieCallback(movie) + + this.setState({ ...this.cleared }); + } + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + render() { + return ( +
+
+

Search for a movie

+ + +
+
+ ); + } + + +} +// MovieSearchForm.propTypes = { +// // addCardCallback: PropTypes.func.isRequired, +// }; + +export default MovieSearchForm; \ No newline at end of file From ddc03ee2a7865477fa06c615e216f7ace2dfc93f Mon Sep 17 00:00:00 2001 From: rosalyn Date: Mon, 24 Jun 2019 16:30:53 -0700 Subject: [PATCH 04/52] Added movies selection feature --- src/App.js | 9 +++-- src/components/MovieLibrary.js | 62 ++++++++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 8ff0e15fd..b80474aaa 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,17 @@ import React, { Component } from "react"; -import logo from "./logo.svg"; import "./App.css"; +import MovieLibrary from "./components/MovieLibrary"; class App extends Component { render() { return (
- +
+

BitaRos Amazing VideoStore

+
+ {/* */} - + {/* */}
); } diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index e69de29bb..3cf73024f 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -0,0 +1,62 @@ +import React, { Component } from "react"; +import "./MovieLibrary.css"; + +class MovieLibrary extends Component { + constructor(props) { + super(props); + + this.state = { + movies: [ + "heart_eyes", + "beer", + "clap", + "sparkling_heart", + "heart_eyes_cat", + "dog" + ], + + selected: false, + selectedMovie: [] + }; + } + + addMovie = movie => { + const newState = this.state; + newState.movies.push(movie); + + this.setState(newState); + }; + + selectToAddToCheckout = () => { + this.setState({ + selectedMovie: this.state.selectedMovie, + selected: true + }); + }; + + render() { + if (this.state.selected) { + return
{this.state.selectedMovie}
; + } else { + const movies = this.state.movies.map(movie => { + return ( +
+ {movie} + + +
+ ); + }); + return
{movies}
; + } + } +} + +export default MovieLibrary; From 8fb8228450ce52e9897babe49fb468e3b06c766e Mon Sep 17 00:00:00 2001 From: rosalyn Date: Mon, 24 Jun 2019 19:43:56 -0700 Subject: [PATCH 05/52] Conditional component display feature working --- src/App.js | 58 ++++++++++++++++++++++++--- src/components/MovieLibrary.js | 12 +++--- src/components/MovieSearch.js | 72 +++++++++++++++++----------------- 3 files changed, 94 insertions(+), 48 deletions(-) diff --git a/src/App.js b/src/App.js index a1ad911b1..46b24300e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,20 +1,66 @@ import React, { Component } from "react"; import "./App.css"; import MovieLibrary from "./components/MovieLibrary"; -import MovieSearch from "./components/MovieSearch" +import MovieSearch from "./components/MovieSearch"; +import { nfapply } from "q"; class App extends Component { + constructor(props) { + super(props); + + this.state = { + displayOption: null + }; + } + + setDisplay = opt => { + this.setState({ displayOption: opt }); + }; + + rentMovie = (movie) => { + console.log({movie}) + } + render() { + let optComponent; + + if (this.state.displayOption === "library") { + optComponent = ; + } else if (this.state.displayOption === "search") { + optComponent = ; + } return (

BitaRos Amazing VideoStore

- {/* */} - - - {/* */} - {/* */} +
+ + + +
+ {optComponent}
); } diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 3cf73024f..91254f218 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -15,8 +15,7 @@ class MovieLibrary extends Component { "dog" ], - selected: false, - selectedMovie: [] + selectedMovie: "" }; } @@ -27,11 +26,12 @@ class MovieLibrary extends Component { this.setState(newState); }; - selectToAddToCheckout = () => { + selectToAddToCheckout = movie => { this.setState({ - selectedMovie: this.state.selectedMovie, - selected: true + selectedMovie: movie }); + + this.props.rentMovieCallback(movie); }; render() { @@ -47,7 +47,7 @@ class MovieLibrary extends Component { type="button" className="btn btn-danger" aria-label="Close" - onClick={this.selectToAddToCheckout} + onClick={() => this.selectToAddToCheckout(movie)} > SELECT diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index b0ca61e43..928105041 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -14,43 +14,43 @@ class MovieSearch extends Component { }; } - componentDidMount() { - const URL = "https://api.themoviedb.org/3/search/movie?api_key=<>&language=en-US&page=1&include_adult=false" - axios.get(URL) - .then((response) => { - const movies = response.data.map((movie) => { - const newMovie = { - ...movie, - } - return newMovie - }) - console.log(movies) - this.setState({ - movies: movies, - }); - }) - .catch((error) => { - console.log(error); - alert('Error happened'); - this.setState({ error: error.message }); - }); - } - searchMovieCallback = (movie) => { - const movieIds = this.state.movies.map(item => item.movie.id) + // componentDidMount() { + // const URL = "https://api.themoviedb.org/3/search/movie?api_key=<>&language=en-US&page=1&include_adult=false" + // axios.get(URL) + // .then((response) => { + // const movies = response.data.map((movie) => { + // const newMovie = { + // ...movie, + // } + // return newMovie + // }) + // console.log(movies) + // this.setState({ + // movies: movies, + // }); + // }) + // .catch((error) => { + // console.log(error); + // alert('Error happened'); + // this.setState({ error: error.message }); + // }); + // } + // searchMovieCallback = (movie) => { + // const movieIds = this.state.movies.map(item => item.movie.id) - this.setState({ - movies: [...this.state.movies, { movie:{...movie, id: Math.max(...movieIds) + 1 }}] - }); - // axios.post(`${this.props.url}${this.props.boardName}/cards`, {text: card.text, emoji: card.emoji}) - // .then((response) => { - // console.log(response) - // }) - // .catch((error)=> { - // console.log(error) - // alert('Error happened'); - // this.setState({ error }); - // }) - } + // this.setState({ + // movies: [...this.state.movies, { movie:{...movie, id: Math.max(...movieIds) + 1 }}] + // }); + // // axios.post(`${this.props.url}${this.props.boardName}/cards`, {text: card.text, emoji: card.emoji}) + // // .then((response) => { + // // console.log(response) + // // }) + // // .catch((error)=> { + // // console.log(error) + // // alert('Error happened'); + // // this.setState({ error }); + // // }) + // } render() { // const moviecollection = this.state.movies.map((movie, i) => { From bb373fbe5bc7959b975ce6af2e8055db91f8ebf1 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Mon, 24 Jun 2019 19:55:39 -0700 Subject: [PATCH 06/52] added ability to select movie and display in rental cart --- src/App.js | 21 ++++++++++++++++----- src/components/RentalCheckout.css | 0 src/components/RentalCheckout.js | 18 ++++++++++++++++++ 3 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 src/components/RentalCheckout.css create mode 100644 src/components/RentalCheckout.js diff --git a/src/App.js b/src/App.js index 46b24300e..082bcf5d4 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,8 @@ import React, { Component } from "react"; import "./App.css"; import MovieLibrary from "./components/MovieLibrary"; import MovieSearch from "./components/MovieSearch"; +import RentalCheckout from "./components/RentalCheckout"; + import { nfapply } from "q"; class App extends Component { @@ -9,7 +11,8 @@ class App extends Component { super(props); this.state = { - displayOption: null + displayOption: null, + hasMovie: null }; } @@ -17,18 +20,25 @@ class App extends Component { this.setState({ displayOption: opt }); }; - rentMovie = (movie) => { - console.log({movie}) - } + rentMovie = movie => { + this.setState({ hasMovie: movie }); + }; render() { let optComponent; if (this.state.displayOption === "library") { - optComponent = ; + optComponent = ; } else if (this.state.displayOption === "search") { optComponent = ; } + + let rental; + + if (this.state.hasMovie) { + rental = ; + } + return (
@@ -61,6 +71,7 @@ class App extends Component { {optComponent} + {rental}
); } diff --git a/src/components/RentalCheckout.css b/src/components/RentalCheckout.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js new file mode 100644 index 000000000..bb9544dde --- /dev/null +++ b/src/components/RentalCheckout.js @@ -0,0 +1,18 @@ +import React, { Component } from "react"; +import "./RentalCheckout.css"; + +class RentalCheckout extends Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+
{this.props.selectedMovie}
; +
+ ); + } +} + +export default RentalCheckout; From 3d2669f3037cd21b5d49eb0b5e1a97873a6797c1 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Mon, 24 Jun 2019 20:06:12 -0700 Subject: [PATCH 07/52] added customer list component and conditional display on main page --- src/App.js | 3 +++ src/components/CustomerList.js | 21 +++++++++++++++++++++ src/components/MovieLibrary.js | 6 +++++- src/components/MovieSearch.js | 1 - src/components/MovieSearchForm.js | 2 +- 5 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 082bcf5d4..2e0f71689 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import "./App.css"; import MovieLibrary from "./components/MovieLibrary"; import MovieSearch from "./components/MovieSearch"; import RentalCheckout from "./components/RentalCheckout"; +import CustomerList from "./components/CustomerList"; import { nfapply } from "q"; @@ -31,6 +32,8 @@ class App extends Component { optComponent = ; } else if (this.state.displayOption === "search") { optComponent = ; + } else if (this.state.displayOption === "list") { + optComponent = ; } let rental; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index e69de29bb..c8ee4cfe4 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -0,0 +1,21 @@ +import React, { Component } from "react"; +import "./CustomerList.css"; + +class CustomerList extends Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+
+

Future List of Customers

+
+ ; +
+ ); + } +} + +export default CustomerList; diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 91254f218..1b74d9157 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -54,7 +54,11 @@ class MovieLibrary extends Component { ); }); - return
{movies}
; + return ( +
+

Movie Library

{movies} +
+ ); } } } diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 928105041..029c8dfc0 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -71,7 +71,6 @@ class MovieSearch extends Component { //
-

List of movies

diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index d68f1c4b5..e24f8839e 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -39,7 +39,7 @@ class MovieSearchForm extends Component { className="new-card-form__form" onSubmit={this.searchMovie} > -

Search for a movie

+

Search for a movie

); } From ed15c36a77a69415d0e0f84f477d4445cec60c3f Mon Sep 17 00:00:00 2001 From: rosalyn Date: Tue, 25 Jun 2019 15:19:49 -0700 Subject: [PATCH 12/52] small changes --- src/App.js | 8 ++ src/components/MovieLibrary.js | 7 +- src/components/MovieSearch.js | 137 +++++++++++++++---------------- src/components/RentalCheckout.js | 6 +- 4 files changed, 81 insertions(+), 77 deletions(-) diff --git a/src/App.js b/src/App.js index 3866ae779..abe404cc8 100644 --- a/src/App.js +++ b/src/App.js @@ -28,6 +28,14 @@ class App extends Component { this.setState({ hasCustomer: customer }); }; + searchMovie = movie => { + const newState = this.state; + newState.movies.push(movie); + + this.setState(newState); + }; + + render() { let optionalComponent; diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 548cca588..51ff4e209 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -11,12 +11,6 @@ class MovieLibrary extends Component { }; } - // searchMovie = movie => { - // const newState = this.state; - // newState.movies.push(movie); - - // this.setState(newState); - // }; selectToCheckoutMovie = movie => { this.setState({ @@ -55,4 +49,5 @@ class MovieLibrary extends Component { } } + export default MovieLibrary; diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 029c8dfc0..a362af3d3 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -1,58 +1,58 @@ import React, { Component } from "react"; // import logo from "./logo.svg"; import "./MovieSearch.css"; -import axios from 'axios'; -import MovieSearchForm from "./MovieSearchForm" +import axios from "axios"; +import MovieSearchForm from "./MovieSearchForm"; class MovieSearch extends Component { - constructor() { - super(); - - this.state = { - Movies: [], - error: "" - }; - } - - // componentDidMount() { - // const URL = "https://api.themoviedb.org/3/search/movie?api_key=<>&language=en-US&page=1&include_adult=false" - // axios.get(URL) - // .then((response) => { - // const movies = response.data.map((movie) => { - // const newMovie = { - // ...movie, - // } - // return newMovie - // }) - // console.log(movies) - // this.setState({ - // movies: movies, - // }); - // }) - // .catch((error) => { - // console.log(error); - // alert('Error happened'); - // this.setState({ error: error.message }); - // }); - // } - // searchMovieCallback = (movie) => { - // const movieIds = this.state.movies.map(item => item.movie.id) - - // this.setState({ - // movies: [...this.state.movies, { movie:{...movie, id: Math.max(...movieIds) + 1 }}] - // }); - // // axios.post(`${this.props.url}${this.props.boardName}/cards`, {text: card.text, emoji: card.emoji}) - // // .then((response) => { - // // console.log(response) - // // }) - // // .catch((error)=> { - // // console.log(error) - // // alert('Error happened'); - // // this.setState({ error }); - // // }) - // } + constructor() { + super(); - render() { + this.state = { + Movies: [], + error: "" + }; + } + + // componentDidMount() { + // const URL = "https://api.themoviedb.org/3/search/movie?api_key=<>&language=en-US&page=1&include_adult=false" + // axios.get(URL) + // .then((response) => { + // const movies = response.data.map((movie) => { + // const newMovie = { + // ...movie, + // } + // return newMovie + // }) + // console.log(movies) + // this.setState({ + // movies: movies, + // }); + // }) + // .catch((error) => { + // console.log(error); + // alert('Error happened'); + // this.setState({ error: error.message }); + // }); + // } + // searchMovieCallback = (movie) => { + // const movieIds = this.state.movies.map(item => item.movie.id) + + // this.setState({ + // movies: [...this.state.movies, { movie:{...movie, id: Math.max(...movieIds) + 1 }}] + // }); + // // axios.post(`${this.props.url}${this.props.boardName}/cards`, {text: card.text, emoji: card.emoji}) + // // .then((response) => { + // // console.log(response) + // // }) + // // .catch((error)=> { + // // console.log(error) + // // alert('Error happened'); + // // this.setState({ error }); + // // }) + // } + + render() { // const moviecollection = this.state.movies.map((movie, i) => { // return ([ // ] // ) // }) - return ( - //
- //
- // {this.state.error} - //
-
-
-
-
- -
-
- //
- // - //
- //
- ) - }; - }; + return ( + //
+ //
+ // {this.state.error} + //
+
+
+
+ +
+
+ //
+ // + //
+ //
+ ); + } +} -export default MovieSearch; \ No newline at end of file +export default MovieSearch; diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 991e0e4d2..350ca26a8 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -13,7 +13,7 @@ class RentalCheckout extends Component { checkout = (movie, customer) => { this.setState({ - checkout: movie, + checkout: [...this.state.checkout, customer, movie], checkoutStatus: true }); }; @@ -22,7 +22,9 @@ class RentalCheckout extends Component { let checkoutText = ""; if (this.state.checkoutStatus === true) { - checkoutText = "You are checked out"; + checkoutText = `${ + this.state.checkout[0] + } has check out the following movie: ${this.state.checkout[1]}`; } console.log(checkoutText); From 926987d42726d5b284e49743f0c6e946c2fcfc4e Mon Sep 17 00:00:00 2001 From: Bitaman Date: Tue, 25 Jun 2019 15:20:59 -0700 Subject: [PATCH 13/52] made the axios call inside the form --- .gitignore | 1 + src/components/MovieSearch.js | 128 +++++++++++++----------------- src/components/MovieSearchForm.js | 48 ++++++++++- 3 files changed, 99 insertions(+), 78 deletions(-) diff --git a/.gitignore b/.gitignore index d30f40ef4..fbc176002 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ .env.development.local .env.test.local .env.production.local +.env npm-debug.log* yarn-debug.log* diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 029c8dfc0..32420efbe 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -5,83 +5,63 @@ import axios from 'axios'; import MovieSearchForm from "./MovieSearchForm" class MovieSearch extends Component { - constructor() { - super(); - - this.state = { - Movies: [], - error: "" - }; - } + constructor() { + super(); + + this.state = { + movies: [], + // error: "" + }; + } + + // componentDidMount() { + + getresult = (movies) => { + const collection = movies.map((movie)=>{ + this.state.movies.push(movie) + }) + } + + + // this.setState({ + // movies: movie + // }) + - // componentDidMount() { - // const URL = "https://api.themoviedb.org/3/search/movie?api_key=<>&language=en-US&page=1&include_adult=false" - // axios.get(URL) - // .then((response) => { - // const movies = response.data.map((movie) => { - // const newMovie = { - // ...movie, - // } - // return newMovie - // }) - // console.log(movies) - // this.setState({ - // movies: movies, - // }); - // }) - // .catch((error) => { - // console.log(error); - // alert('Error happened'); - // this.setState({ error: error.message }); - // }); - // } - // searchMovieCallback = (movie) => { - // const movieIds = this.state.movies.map(item => item.movie.id) + - // this.setState({ - // movies: [...this.state.movies, { movie:{...movie, id: Math.max(...movieIds) + 1 }}] - // }); - // // axios.post(`${this.props.url}${this.props.boardName}/cards`, {text: card.text, emoji: card.emoji}) - // // .then((response) => { - // // console.log(response) - // // }) - // // .catch((error)=> { - // // console.log(error) - // // alert('Error happened'); - // // this.setState({ error }); - // // }) - // } + + render() { - // const moviecollection = this.state.movies.map((movie, i) => { - // return ([ - // ] - // ) - // }) - return ( - //
- //
- // {this.state.error} - //
-
-
-
-
- -
-
- //
- // - //
- //
- ) - }; + console.log(this.state.movies) + const moviecollection = this.state.movies.map((movie) => { + return( +
+ {movie["title"]} + + +
+ ) + }) + return ( +
+ +
+ + {/* getresultcallback={this.getresult} */} +
+
{this.state.movies}
+
+ + ) }; + }; -export default MovieSearch; \ No newline at end of file + export default MovieSearch; \ No newline at end of file diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index e24f8839e..81d586139 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import './MovieSearchForm.css'; @@ -9,19 +10,43 @@ class MovieSearchForm extends Component { this.cleared = { text: "", + // movies: [], + hasmovies: false }; this.state = { ...this.cleared } } searchMovie = (event) => { event.preventDefault(); + const URL = `https://api.themoviedb.org/3/search/movie?api_key=bb031365ec3e7cc087920804b23e74b1&language=en-US&page=1&query=${this.state.text}&include_adult=false` + axios.get(URL) + .then((response) => { + console.log(response) + const movies = response.data["results"] + // const movies = response.data["results"].map((movie) => { + // const newMovie = { + // title: movie["title"] + // } + // return newMovie + // }) + console.log(response.data["results"]) + // this.setState({ + // movies: movies, + // hasmovies: true + // }); + this.props.getresultcallback(movies) + + // console.log(this.state.movies) + }) + .catch((error) => { + console.log(error); + alert('Error happened'); + this.setState({ error: error.message }); + }); const movie = this.state; console.log(this.props) - - this.props.searchMovieCallback(movie) - - this.setState({ ...this.cleared }); + this.setState({ movies: movie }); } onInputChange = (event) => { const updatedState = {}; @@ -33,6 +58,21 @@ class MovieSearchForm extends Component { this.setState(updatedState); } render() { + // const moviecollection = this.state.movies.map((movie) => { + // return( + //
+ // {movie} + + // + //
+ // ) + // }) return (
Date: Tue, 25 Jun 2019 16:20:37 -0700 Subject: [PATCH 14/52] search results rendering --- src/App.js | 34 ++++-- src/components/MovieSearch.js | 65 ++---------- src/components/MovieSearchForm.js | 167 ++++++++++++++---------------- 3 files changed, 110 insertions(+), 156 deletions(-) diff --git a/src/App.js b/src/App.js index abe404cc8..71ff50253 100644 --- a/src/App.js +++ b/src/App.js @@ -4,18 +4,29 @@ import MovieLibrary from "./components/MovieLibrary"; import MovieSearch from "./components/MovieSearch"; import RentalCheckout from "./components/RentalCheckout"; import CustomerList from "./components/CustomerList"; +import MovieSearchForm from "./components/MovieSearchForm"; class App extends Component { constructor(props) { super(props); this.state = { + movies: [], displayOption: null, hasMovie: null, - hasCustomer: null + hasCustomer: null, + searchComplete: false }; } + getresult = movies => { + movies.map(movie => { + this.state.movies.push(movie); + }); + + this.setState({ searchComplete: true }); + }; + setDisplay = option => { this.setState({ displayOption: option }); }; @@ -28,14 +39,6 @@ class App extends Component { this.setState({ hasCustomer: customer }); }; - searchMovie = movie => { - const newState = this.state; - newState.movies.push(movie); - - this.setState(newState); - }; - - render() { let optionalComponent; @@ -44,7 +47,9 @@ class App extends Component { ); } else if (this.state.displayOption === "search") { - optionalComponent = ; + optionalComponent = ( + + ); } else if (this.state.displayOption === "list") { optionalComponent = ( { + return movie["title"]; + }); + } + return (
@@ -95,6 +107,8 @@ class App extends Component { CustomerList +

{searchResults}

+ {optionalComponent}
{rentalMovie}
diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index ba8ec49f8..f9eb27e36 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -5,63 +5,16 @@ import axios from "axios"; import MovieSearchForm from "./MovieSearchForm"; class MovieSearch extends Component { - constructor() { - super(); - - this.state = { - movies: [], - // error: "" - }; - } - - // componentDidMount() { - - getresult = (movies) => { - const collection = movies.map((movie)=>{ - this.state.movies.push(movie) - }) - } - - - // this.setState({ - // movies: movie - // }) - - - - - - - - render() { - console.log(this.state.movies) - const moviecollection = this.state.movies.map((movie) => { - return( -
- {movie["title"]} - - -
- ) - }) - return ( -
+ render() { + return ( +
- - {/* getresultcallback={this.getresult} */} +
-
{this.state.movies}
-
- - ) - }; - }; +
+ ); + } +} - export default MovieSearch; +export default MovieSearch; diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 81d586139..3b694bd09 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -1,104 +1,91 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import axios from 'axios'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import axios from "axios"; -import './MovieSearchForm.css'; +import "./MovieSearchForm.css"; class MovieSearchForm extends Component { - constructor(props) { - super(props); + constructor(props) { + super(props); - this.cleared = { - text: "", - // movies: [], - hasmovies: false - }; + this.cleared = { + text: "", + hasmovies: false + }; - this.state = { ...this.cleared } - } - searchMovie = (event) => { - event.preventDefault(); - const URL = `https://api.themoviedb.org/3/search/movie?api_key=bb031365ec3e7cc087920804b23e74b1&language=en-US&page=1&query=${this.state.text}&include_adult=false` - axios.get(URL) - .then((response) => { - console.log(response) - const movies = response.data["results"] - // const movies = response.data["results"].map((movie) => { - // const newMovie = { - // title: movie["title"] - // } - // return newMovie - // }) - console.log(response.data["results"]) - // this.setState({ - // movies: movies, - // hasmovies: true - // }); - this.props.getresultcallback(movies) - - // console.log(this.state.movies) - }) - .catch((error) => { - console.log(error); - alert('Error happened'); - this.setState({ error: error.message }); - }); - - const movie = this.state; - console.log(this.props) - this.setState({ movies: movie }); - } - onInputChange = (event) => { - const updatedState = {}; - - const field = event.target.name; - const value = event.target.value; + this.state = { ...this.cleared }; + } + searchMovie = event => { + event.preventDefault(); + const URL = `https://api.themoviedb.org/3/search/movie?api_key=bb031365ec3e7cc087920804b23e74b1&language=en-US&page=1&query=${ + this.state.text + }&include_adult=false`; + axios + .get(URL) + .then(response => { + console.log(response); + const movies = response.data["results"]; + // const movies = response.data["results"].map((movie) => { + // const newMovie = { + // title: movie["title"] + // } + // return newMovie + // }) + console.log(response.data["results"]); + // this.setState({ + // movies: movies, + // hasmovies: true + // }); + this.props.getresultcallback(movies); - updatedState[field] = value; - this.setState(updatedState); - } - render() { - // const moviecollection = this.state.movies.map((movie) => { - // return( - //
- // {movie} + // console.log(this.state.movies) + }) + .catch(error => { + console.log(error); + alert("Error happened"); + this.setState({ error: error.message }); + }); - // - //
- // ) - // }) - return ( -
- -

Search for a movie

- - - -
- ); - } + const movie = this.state; + console.log(this.props); + this.setState({ movies: movie }); + }; + onInputChange = event => { + const updatedState = {}; + const field = event.target.name; + const value = event.target.value; + updatedState[field] = value; + this.setState(updatedState); + }; + render() { + return ( +
+
+

Search for a movie

+ + +
+
+ ); + } } // MovieSearchForm.propTypes = { // // addCardCallback: PropTypes.func.isRequired, // }; -export default MovieSearchForm; \ No newline at end of file +export default MovieSearchForm; From 23a8d067c3f1eb96da0e9e420bdd4dc59c0aa215 Mon Sep 17 00:00:00 2001 From: Bitaman Date: Tue, 25 Jun 2019 17:10:01 -0700 Subject: [PATCH 15/52] the search result is now renders in the MovieSearch --- src/App.js | 6 +++--- src/components/MovieSearch.js | 32 ++++++++++++++++++++++++++++--- src/components/MovieSearchForm.js | 3 ++- 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 71ff50253..baa947dbf 100644 --- a/src/App.js +++ b/src/App.js @@ -71,9 +71,9 @@ class App extends Component { let searchResults = ""; if (this.state.searchComplete === true) { - searchResults = this.state.movies.map(movie => { - return movie["title"]; - }); + return( + + ) } return ( diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index f9eb27e36..8cee07a47 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -1,16 +1,42 @@ import React, { Component } from "react"; // import logo from "./logo.svg"; import "./MovieSearch.css"; -import axios from "axios"; -import MovieSearchForm from "./MovieSearchForm"; + + class MovieSearch extends Component { + constructor(props){ + super(props) + } + + // handleclick=()=>{ + // addMovieCallback + // } render() { + const collection = this.props.movies.map(movie => { + // return movie["title"]; + return( +
+ + {movie.title} + + +
+ ) + }); return (
- + {collection}
); diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 3b694bd09..49234cef5 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -37,6 +37,7 @@ class MovieSearchForm extends Component { // hasmovies: true // }); this.props.getresultcallback(movies); + this.setState({text: ""}) // console.log(this.state.movies) }) @@ -48,7 +49,7 @@ class MovieSearchForm extends Component { const movie = this.state; console.log(this.props); - this.setState({ movies: movie }); + // this.setState({ movies: movie }); }; onInputChange = event => { const updatedState = {}; From b8b201e01aa2141b6f0e3b1b511b6f4915ac6154 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Tue, 25 Jun 2019 18:55:02 -0700 Subject: [PATCH 16/52] Small changes --- src/App.js | 5 +++-- src/components/MovieLibrary.js | 4 +++- src/components/RentalCheckout.js | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 71ff50253..cc5968282 100644 --- a/src/App.js +++ b/src/App.js @@ -72,7 +72,8 @@ class App extends Component { let searchResults = ""; if (this.state.searchComplete === true) { searchResults = this.state.movies.map(movie => { - return movie["title"]; + return ( + movie["title"]) }); } @@ -107,7 +108,7 @@ class App extends Component { CustomerList -

{searchResults}

+
{searchResults}
{optionalComponent}
{rentalMovie}
diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 51ff4e209..3bd1525dd 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -11,6 +11,9 @@ class MovieLibrary extends Component { }; } + addmoviestoLibrary = (movie) => { + + } selectToCheckoutMovie = movie => { this.setState({ @@ -49,5 +52,4 @@ class MovieLibrary extends Component { } } - export default MovieLibrary; diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 350ca26a8..28808fa2a 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -16,7 +16,7 @@ class RentalCheckout extends Component { checkout: [...this.state.checkout, customer, movie], checkoutStatus: true }); - }; + };z render() { let checkoutText = ""; From 1d018c97b2d1aed7969bd00cbc3d1f4945270a59 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Tue, 25 Jun 2019 18:58:52 -0700 Subject: [PATCH 17/52] Search results rendering effectively --- src/App.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index bd4791e73..c6e580ed4 100644 --- a/src/App.js +++ b/src/App.js @@ -71,9 +71,9 @@ class App extends Component { let searchResults = ""; if (this.state.searchComplete === true) { - return( - - ) + + searchResults = + } return ( From b8fc24de655f47d05eaad90732a1a0438856e5b4 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Tue, 25 Jun 2019 19:21:01 -0700 Subject: [PATCH 18/52] Search results cleared after each search --- src/App.js | 15 +++--- src/components/MovieSearch.js | 46 ------------------- src/components/MovieSearchForm.js | 19 +------- ...MovieSearch.css => MovieSearchResults.css} | 0 src/components/MovieSearchResults.js | 30 ++++++++++++ 5 files changed, 37 insertions(+), 73 deletions(-) delete mode 100644 src/components/MovieSearch.js rename src/components/{MovieSearch.css => MovieSearchResults.css} (100%) create mode 100644 src/components/MovieSearchResults.js diff --git a/src/App.js b/src/App.js index c6e580ed4..ba39b241d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React, { Component } from "react"; import "./App.css"; import MovieLibrary from "./components/MovieLibrary"; -import MovieSearch from "./components/MovieSearch"; +import MovieSearchResults from "./components/MovieSearchResults"; import RentalCheckout from "./components/RentalCheckout"; import CustomerList from "./components/CustomerList"; import MovieSearchForm from "./components/MovieSearchForm"; @@ -20,15 +20,14 @@ class App extends Component { } getresult = movies => { - movies.map(movie => { - this.state.movies.push(movie); + this.setState({ + movies: movies, + searchComplete: true }); - - this.setState({ searchComplete: true }); }; setDisplay = option => { - this.setState({ displayOption: option }); + this.setState({ displayOption: option, searchComplete: false }); }; rentMovieWithMovie = movie => { @@ -71,9 +70,7 @@ class App extends Component { let searchResults = ""; if (this.state.searchComplete === true) { - - searchResults = - + searchResults = ; } return ( diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js deleted file mode 100644 index 8cee07a47..000000000 --- a/src/components/MovieSearch.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { Component } from "react"; -// import logo from "./logo.svg"; -import "./MovieSearch.css"; - - - -class MovieSearch extends Component { - constructor(props){ - super(props) - } - - // handleclick=()=>{ - // addMovieCallback - // } - - render() { - const collection = this.props.movies.map(movie => { - // return movie["title"]; - return( -
- - {movie.title} - - -
- ) - }); - return ( -
-
- {collection} -
-
- ); - } -} - -export default MovieSearch; diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 49234cef5..f56229780 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -23,33 +23,16 @@ class MovieSearchForm extends Component { axios .get(URL) .then(response => { - console.log(response); const movies = response.data["results"]; - // const movies = response.data["results"].map((movie) => { - // const newMovie = { - // title: movie["title"] - // } - // return newMovie - // }) - console.log(response.data["results"]); - // this.setState({ - // movies: movies, - // hasmovies: true - // }); + this.setState({ text: "" }); this.props.getresultcallback(movies); - this.setState({text: ""}) - - // console.log(this.state.movies) }) .catch(error => { - console.log(error); alert("Error happened"); this.setState({ error: error.message }); }); const movie = this.state; - console.log(this.props); - // this.setState({ movies: movie }); }; onInputChange = event => { const updatedState = {}; diff --git a/src/components/MovieSearch.css b/src/components/MovieSearchResults.css similarity index 100% rename from src/components/MovieSearch.css rename to src/components/MovieSearchResults.css diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js new file mode 100644 index 000000000..4f12c3b17 --- /dev/null +++ b/src/components/MovieSearchResults.js @@ -0,0 +1,30 @@ +import React, { Component } from "react"; +// import logo from "./logo.svg"; +import "./MovieSearchResults.css"; + +class MovieSearch extends Component { + constructor(props) { + super(props); + } + + render() { + const collection = this.props.movies.map(movie => { + return ( +
+ {movie.title} + + +
+ ); + }); + return ( +
+
{collection}
+
+ ); + } +} + +export default MovieSearch; From 3416fee3443a10255599a15962987c04d9c43145 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Tue, 25 Jun 2019 20:20:22 -0700 Subject: [PATCH 19/52] Added ability to add movies to library --- src/App.js | 23 +++++++++++++++---- src/components/CustomerList.js | 2 +- src/components/MovieLibrary.js | 11 +++------ src/components/MovieSearchForm.js | 2 -- src/components/MovieSearchResults.js | 12 +++++++++- src/components/RentalCheckout.js | 34 ++++++++++++++++------------ 6 files changed, 54 insertions(+), 30 deletions(-) diff --git a/src/App.js b/src/App.js index ba39b241d..c715ba5af 100644 --- a/src/App.js +++ b/src/App.js @@ -15,7 +15,8 @@ class App extends Component { displayOption: null, hasMovie: null, hasCustomer: null, - searchComplete: false + searchComplete: false, + librayMovies: [] }; } @@ -38,12 +39,21 @@ class App extends Component { this.setState({ hasCustomer: customer }); }; + addMovietoLibray = movie => { + this.setState({ + librayMovies: [...this.state.librayMovies, movie] + }); + }; + render() { let optionalComponent; if (this.state.displayOption === "library") { optionalComponent = ( - + ); } else if (this.state.displayOption === "search") { optionalComponent = ( @@ -59,7 +69,7 @@ class App extends Component { let rentalMovie; - if (this.state.hasMovie && this.state.hasMovie) { + if (this.state.hasMovie || this.state.hasCustomer) { rentalMovie = ( ; + searchResults = ( + + ); } return ( diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index d08264367..bf4280693 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -25,7 +25,7 @@ class CustomerList extends Component { } else { const customers = this.state.customers.map(customer => { return ( -
+
{customer}
diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 28808fa2a..bb4b38066 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -6,36 +6,29 @@ class RentalCheckout extends Component { super(props); this.state = { - checkout: [], + checkout: {}, checkoutStatus: false }; } checkout = (movie, customer) => { this.setState({ - checkout: [...this.state.checkout, customer, movie], + checkout: { customer: customer, movie: movie }, checkoutStatus: true }); - };z + }; render() { let checkoutText = ""; if (this.state.checkoutStatus === true) { checkoutText = `${ - this.state.checkout[0] - } has check out the following movie: ${this.state.checkout[1]}`; + this.state.checkout.customer + } has check out the following movie: ${this.state.checkout.movie.title}`; } - console.log(checkoutText); - return ( -
-
-

- {this.props.selectedMovie} - {this.props.selectedCustomer} -

-
+ const checkoutRental = + this.props.selectedCustomer && this.props.selectedMovie ? ( + ) : null; + + return ( +
+
+

+ {this.props.selectedMovie + ? this.props.selectedMovie.title + : "Please select Movie to checkout"} + {this.props.selectedCustomer} +

+
+ {checkoutRental}

{checkoutText}

); From 46783de2cff2db3134670d6792eb856c1f1f6bc8 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Tue, 25 Jun 2019 20:29:19 -0700 Subject: [PATCH 20/52] added add to library confirmation --- src/components/MovieSearchForm.js | 5 +++-- src/components/MovieSearchResults.css | 3 +++ src/components/MovieSearchResults.js | 11 ++++++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 141d017a7..54183d279 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -9,8 +9,7 @@ class MovieSearchForm extends Component { super(props); this.cleared = { - text: "", - hasmovies: false + text: "" }; this.state = { ...this.cleared }; @@ -32,6 +31,7 @@ class MovieSearchForm extends Component { this.setState({ error: error.message }); }); }; + onInputChange = event => { const updatedState = {}; @@ -41,6 +41,7 @@ class MovieSearchForm extends Component { updatedState[field] = value; this.setState(updatedState); }; + render() { return (
diff --git a/src/components/MovieSearchResults.css b/src/components/MovieSearchResults.css index e69de29bb..73d807661 100644 --- a/src/components/MovieSearchResults.css +++ b/src/components/MovieSearchResults.css @@ -0,0 +1,3 @@ +.send-to-library { + color: red +} \ No newline at end of file diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index f77c029fd..609d5c036 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -5,11 +5,18 @@ import "./MovieSearchResults.css"; class MovieSearch extends Component { constructor(props) { super(props); + + this.state = { + sendToLibraryIndicator: "" + }; } sendToLibray = movie => { + this.setState({ + sendToLibraryIndicator: `Added ${movie.title} to the library` + }); + this.props.addMovietoLibrayCallback(movie); - console.log(movie) }; render() { @@ -31,6 +38,8 @@ class MovieSearch extends Component { }); return (
+

{this.state.sendToLibraryIndicator}

+
{collection}
); From 436078a19aaed817749f431e1ad8663fe01f7e70 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Tue, 25 Jun 2019 20:45:19 -0700 Subject: [PATCH 21/52] Made some small formatting changes --- src/App.js | 8 +++--- src/components/CustomerList.js | 42 +++++++++++++--------------- src/components/MovieLibrary.js | 42 +++++++++++++--------------- src/components/MovieSearchForm.js | 2 +- src/components/MovieSearchResults.js | 1 - src/components/RentalCheckout.js | 4 +-- 6 files changed, 45 insertions(+), 54 deletions(-) diff --git a/src/App.js b/src/App.js index c715ba5af..15dcf0bc5 100644 --- a/src/App.js +++ b/src/App.js @@ -39,6 +39,7 @@ class App extends Component { this.setState({ hasCustomer: customer }); }; + // what to do with duplicate clicks to add to library addMovietoLibray = movie => { this.setState({ librayMovies: [...this.state.librayMovies, movie] @@ -79,7 +80,7 @@ class App extends Component { } let searchResults = ""; - if (this.state.searchComplete === true) { + if (this.state.searchComplete) { searchResults = (
-
{searchResults}
- + {searchResults} {optionalComponent} -
{rentalMovie}
+ {rentalMovie}
); } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index bf4280693..372b5a5c7 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -20,31 +20,27 @@ class CustomerList extends Component { }; render() { - if (this.state.selected) { - return
{this.state.selectedCustomer}
; - } else { - const customers = this.state.customers.map(customer => { - return ( -
- {customer} - - -
- ); - }); + const customers = this.state.customers.map(customer => { return ( -
-

List of Customers

{customers} -
+
+ {customer} + + +
); - } + }); + return ( +
+

List of Customers

{customers} +
+ ); } } diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 2d5467483..cd426f366 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -19,31 +19,27 @@ class MovieLibrary extends Component { }; render() { - if (this.state.selected) { - return
{this.state.selectedMovie}
; - } else { - const movies = this.props.librayMovies.map(movie => { - return ( -
- {movie.title} - - -
- ); - }); + const movies = this.props.librayMovies.map(movie => { return ( -
-

Movie Library

{movies} -
+
+ {movie.title} + + +
); - } + }); + return ( +
+

Movie Library

{movies} +
+ ); } } diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 54183d279..a6158370b 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -22,7 +22,7 @@ class MovieSearchForm extends Component { axios .get(URL) .then(response => { - const movies = response.data["results"]; + const movies = response.data.results; this.setState({ text: "" }); this.props.getresultcallback(movies); }) diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index 609d5c036..0b6fcc72f 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -1,5 +1,4 @@ import React, { Component } from "react"; -// import logo from "./logo.svg"; import "./MovieSearchResults.css"; class MovieSearch extends Component { diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index bb4b38066..16fa1aa69 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -21,7 +21,7 @@ class RentalCheckout extends Component { render() { let checkoutText = ""; - if (this.state.checkoutStatus === true) { + if (this.state.checkoutStatus) { checkoutText = `${ this.state.checkout.customer } has check out the following movie: ${this.state.checkout.movie.title}`; @@ -48,7 +48,7 @@ class RentalCheckout extends Component { {this.props.selectedMovie ? this.props.selectedMovie.title : "Please select Movie to checkout"} - {this.props.selectedCustomer} + {this.props.selectedCustomer ? this.props.selectedCustomer : "Please select a Customer to checkout"} {checkoutRental} From a38d784a4b443a27833a057e60517682e03e406d Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 10:20:34 -0700 Subject: [PATCH 22/52] Created a seperate card component --- src/components/CustomerList.js | 1 + src/components/Movie.js | 30 ++++++++++++++++++++++++++++ src/components/MovieSearchResults.js | 27 ++++++++++--------------- 3 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 src/components/Movie.js diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 372b5a5c7..07ce473e6 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; + import "./CustomerList.css"; class CustomerList extends Component { diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..fac9b8ae5 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,30 @@ +import React, { Component } from "react"; + +class Movie extends Component { + constructor(props) { + super(props); + } + + onSelectedClick = () => { + this.props.sendToLibrayCallback(this.props); + }; + + render() { + return ( +
+ {this.props.title} + + +
+ ); + } +} + +export default Movie; diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index 0b6fcc72f..a357508f1 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -1,7 +1,8 @@ import React, { Component } from "react"; +import Movie from "./Movie"; import "./MovieSearchResults.css"; -class MovieSearch extends Component { +class MovieSearchResults extends Component { constructor(props) { super(props); @@ -19,30 +20,24 @@ class MovieSearch extends Component { }; render() { - const collection = this.props.movies.map(movie => { + const collection = this.props.movies.map((movie, i) => { return ( -
- {movie.title} - - -
+ ); }); + return (

{this.state.sendToLibraryIndicator}

-
{collection}
); } } -export default MovieSearch; +export default MovieSearchResults; From eeb32c3e35acd48bd74b80ef8762f1a257d21811 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 10:56:15 -0700 Subject: [PATCH 23/52] Added visual display of movies --- src/components/Movie.js | 32 +++++++++++++++++++--------- src/components/MovieSearchResults.js | 5 +++++ 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index fac9b8ae5..26659cebd 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -10,18 +10,30 @@ class Movie extends Component { }; render() { + // console.log(this.props) return (
- {this.props.title} - - +
+
+ Card image cap +
Title: {this.props.title}
+

ID: {this.props.id}

+

Overview: {this.props.overview}

+

Release Date: {this.props.releaseDate}

+ {" "} +
+
); } diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index a357508f1..7d3964161 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -21,11 +21,16 @@ class MovieSearchResults extends Component { render() { const collection = this.props.movies.map((movie, i) => { + console.log(movie) return ( ); From b1de68ae543c6263e44417f492661caf5ea768f5 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 11:12:27 -0700 Subject: [PATCH 24/52] Added details for movie library page --- src/components/Movie.js | 1 + src/components/MovieLibrary.js | 32 +++++++++++++++++++++----------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 26659cebd..d82e613e4 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -24,6 +24,7 @@ class Movie extends Component {

ID: {this.props.id}

Overview: {this.props.overview}

Release Date: {this.props.releaseDate}

+

+
+
+
+ Card image cap +
Title: {movie.title}
+

ID: {movie.id}

+
+ +
+
); }); From 184c764a7bd889621455cfbdc4829188ae6668dd Mon Sep 17 00:00:00 2001 From: Bitaman Date: Wed, 26 Jun 2019 11:16:57 -0700 Subject: [PATCH 25/52] axios call to get the customers --- src/components/CustomerList.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 07ce473e6..87769f612 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import axios from "axios"; import "./CustomerList.css"; @@ -7,7 +8,7 @@ class CustomerList extends Component { super(props); this.state = { - customers: ["Adam", "Alex", "Victor", "Walter"], + customers: [], selectedCustomer: "" }; } @@ -19,6 +20,26 @@ class CustomerList extends Component { this.props.rentMovieWithCustomerCallback(customer); }; + componentDidMount() { + axios.get(`http://localhost:3001/customers`) + .then((response) => { + const customers = response.data.map((customer) => { + + return( +

{customer.name}

+ ) + }) + console.log(response.data) + this.setState({ + customers: customers, + }); + }) + .catch((error) => { + console.log(error); + alert('Error happened'); + this.setState({ error: error.message }); + }); + } render() { const customers = this.state.customers.map(customer => { From d023080c1615f208787b23776e215b0d2a16efa3 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 11:52:24 -0700 Subject: [PATCH 26/52] Added more details to customer list --- src/components/CustomerList.js | 54 +++++++++++++++++++--------------- 1 file changed, 31 insertions(+), 23 deletions(-) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 87769f612..69093a87b 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -21,40 +21,48 @@ class CustomerList extends Component { this.props.rentMovieWithCustomerCallback(customer); }; componentDidMount() { - axios.get(`http://localhost:3001/customers`) - .then((response) => { - const customers = response.data.map((customer) => { - - return( -

{customer.name}

- ) - }) - console.log(response.data) + axios + .get(`http://localhost:3000/customers`) + .then(response => { + const customers = response.data.map(customer => { + return customer; + }); + console.log(response.data); this.setState({ - customers: customers, + customers: customers }); }) - .catch((error) => { + .catch(error => { console.log(error); - alert('Error happened'); + alert("An error occurred"); this.setState({ error: error.message }); }); } render() { - const customers = this.state.customers.map(customer => { + const customers = this.state.customers.map((customer, i) => { return ( -
- {customer} +
+
+
+
Name: {customer.name}
+

ID: {customer.id}

+

+ # of Movies checked out: {customer.movies_checked_out_count} +

+

Phone number: {customer.phone}

- +
+ +
+
); }); From 89e6e5a21cffac3e2e2b5d2593ad30f0c4e26c2c Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 12:18:49 -0700 Subject: [PATCH 27/52] Added some formatting and styles to the main page --- src/App.css | 34 +++++++++++++++++++--------------- src/App.js | 14 +++++++------- src/components/CustomerList.js | 2 +- src/components/Movie.js | 1 - 4 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/App.css b/src/App.css index c5c6e8a68..c0cfd2ba8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,28 +1,32 @@ .App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; + background-color: white; + text-align: center } .App-header { background-color: #222; - height: 150px; - padding: 20px; + padding-bottom: 0.5rem; color: white; + position: fixed; + width: 100%; + z-index: 100; +} + +.App-main { + padding-top: 7rem; + padding-bottom: 5rem; + text-align: center; + background-color: #C5D86D; } .App-title { + text-align: center; font-size: 1.5em; } -.App-intro { - font-size: large; -} +.movie-display { + max-width: 50rem; + margin: auto; + text-align: center; -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 15dcf0bc5..aad9c7bb2 100644 --- a/src/App.js +++ b/src/App.js @@ -91,21 +91,21 @@ class App extends Component { return (
-
-

BitaRos Amazing VideoStore

+
+

BitaRos Amazing VideoStore

-
+
diff --git a/src/components/Movie.js b/src/components/Movie.js index d82e613e4..dd05170d9 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -10,7 +10,6 @@ class Movie extends Component { }; render() { - // console.log(this.props) return (
From fbc76a851050efe99d95d770ab795404e1a1883e Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 13:17:45 -0700 Subject: [PATCH 28/52] Small changes --- src/App.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index aad9c7bb2..b5b03d2df 100644 --- a/src/App.js +++ b/src/App.js @@ -94,14 +94,15 @@ class App extends Component {

BitaRos Amazing VideoStore

-
+
+
{searchResults} From 89847cabab8e6d4cb8a51c123704f08ba2d1896b Mon Sep 17 00:00:00 2001 From: Bitaman Date: Wed, 26 Jun 2019 13:26:56 -0700 Subject: [PATCH 29/52] axios call to display the library --- src/App.js | 1 + src/components/MovieLibrary.js | 30 ++++++++++++++++++++++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 15dcf0bc5..20b0d3884 100644 --- a/src/App.js +++ b/src/App.js @@ -54,6 +54,7 @@ class App extends Component { ); } else if (this.state.displayOption === "search") { diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index c812c8d3b..80fabb91c 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import "./MovieLibrary.css"; - +import axios from "axios"; class MovieLibrary extends Component { constructor(props) { super(props); @@ -18,10 +18,36 @@ class MovieLibrary extends Component { this.props.rentMovieWithMovieCallback(movie); }; + componentDidMount() { + axios.get(`http://localhost:3001/movies`) + .then((response) => { + const movielist = response.data.map((movie) => { + this.props.addMovietoLibrayCallback(movie) + const newMovie = { + ...movie, + } + return newMovie + + }) + console.log(movielist) + // this.props.rentMovieWithMovieCallback(movie) + + }) + .catch((error) => { + console.log(error); + alert('Error happened'); + this.setState({ error: error.message }); + }); + } + + + + + render() { const movies = this.props.librayMovies.map(movie => { return ( -
+
Date: Wed, 26 Jun 2019 14:51:56 -0700 Subject: [PATCH 30/52] Styling of header --- src/App.css | 14 ++++-- src/App.js | 20 ++++---- src/components/Movie.js | 40 ++++++++-------- src/components/MovieLibrary.js | 71 +++++++++++++--------------- src/components/MovieSearchResults.js | 1 - src/components/movie.css | 7 +++ 6 files changed, 80 insertions(+), 73 deletions(-) create mode 100644 src/components/movie.css diff --git a/src/App.css b/src/App.css index c0cfd2ba8..4d6580221 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,6 @@ .App { background-color: white; - text-align: center + text-align: center; } .App-header { @@ -16,7 +16,7 @@ padding-top: 7rem; padding-bottom: 5rem; text-align: center; - background-color: #C5D86D; + background-color: #c5d86d; } .App-title { @@ -27,6 +27,12 @@ .movie-display { max-width: 50rem; margin: auto; - text-align: center; +} -} \ No newline at end of file +.movie-body { + text-align: center; + display: grid; + grid-column-gap: 50px; + grid-column-start: 1; + grid-column-end: 3; +} diff --git a/src/App.js b/src/App.js index d0209aabd..d2bb30eec 100644 --- a/src/App.js +++ b/src/App.js @@ -57,10 +57,6 @@ class App extends Component { addMovietoLibrayCallback={this.addMovietoLibray} /> ); - } else if (this.state.displayOption === "search") { - optionalComponent = ( - - ); } else if (this.state.displayOption === "list") { optionalComponent = ( ; + } + let rentalMovie; if (this.state.hasMovie || this.state.hasCustomer) { @@ -96,7 +97,6 @@ class App extends Component {

BitaRos Amazing VideoStore

- + {optionalSearch} + +
+
+ {searchResults} + {optionalComponent} + {rentalMovie}
- {searchResults} - {optionalComponent} - {rentalMovie}
); } diff --git a/src/components/Movie.js b/src/components/Movie.js index dd05170d9..607993ea5 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -12,27 +12,25 @@ class Movie extends Component { render() { return (
-
-
- Card image cap -
Title: {this.props.title}
-

ID: {this.props.id}

-

Overview: {this.props.overview}

-

Release Date: {this.props.releaseDate}

-

- {" "} -
+
+ Card image cap +
Title: {this.props.title}
+

ID: {this.props.id}

+

Overview: {this.props.overview}

+

Release Date: {this.props.releaseDate}

+
+ {" "}
); diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 80fabb91c..a1e5afccc 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -19,54 +19,47 @@ class MovieLibrary extends Component { }; componentDidMount() { - axios.get(`http://localhost:3001/movies`) - .then((response) => { - const movielist = response.data.map((movie) => { - this.props.addMovietoLibrayCallback(movie) + axios + .get(`http://localhost:3000/movies`) + .then(response => { + const movielist = response.data.map(movie => { + this.props.addMovietoLibrayCallback(movie); const newMovie = { - ...movie, - } - return newMovie - - }) - console.log(movielist) - // this.props.rentMovieWithMovieCallback(movie) - + ...movie + }; + return newMovie; + }); + console.log(movielist); }) - .catch((error) => { + .catch(error => { console.log(error); - alert('Error happened'); + alert("Error happened"); this.setState({ error: error.message }); }); - } - - - - + } render() { const movies = this.props.librayMovies.map(movie => { + console.log(movie); return ( -
-
-
- Card image cap -
Title: {movie.title}
-

ID: {movie.id}

-
- -
+
+
+ Card image cap +
Title: {movie.title}
+

ID: {movie.id}

+
+
); diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index 7d3964161..ec1653511 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -21,7 +21,6 @@ class MovieSearchResults extends Component { render() { const collection = this.props.movies.map((movie, i) => { - console.log(movie) return ( Date: Wed, 26 Jun 2019 15:25:35 -0700 Subject: [PATCH 31/52] Changes to movies component to reuse it across the app --- src/App.css | 10 ++++---- src/App.js | 3 +-- src/components/Movie.js | 40 ++++++++++++++++--------------- src/components/MovieLibrary.js | 2 +- src/components/MovieSearchForm.js | 6 ++--- src/components/movie.css | 7 ------ 6 files changed, 32 insertions(+), 36 deletions(-) diff --git a/src/App.css b/src/App.css index 4d6580221..409df3e3f 100644 --- a/src/App.css +++ b/src/App.css @@ -17,6 +17,7 @@ padding-bottom: 5rem; text-align: center; background-color: #c5d86d; + } .App-title { @@ -30,9 +31,10 @@ } .movie-body { - text-align: center; display: grid; - grid-column-gap: 50px; - grid-column-start: 1; - grid-column-end: 3; + grid-template-columns: 100px 100px 100px; + grid-gap: 10px; + background-color: #fff; + color: #444; } + diff --git a/src/App.js b/src/App.js index d2bb30eec..2e16ebe25 100644 --- a/src/App.js +++ b/src/App.js @@ -122,9 +122,8 @@ class App extends Component {

CustomerList

{optionalSearch} -
-
+
{searchResults} {optionalComponent} {rentalMovie} diff --git a/src/components/Movie.js b/src/components/Movie.js index 607993ea5..bffa8b018 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -12,25 +12,27 @@ class Movie extends Component { render() { return (
-
- Card image cap -
Title: {this.props.title}
-

ID: {this.props.id}

-

Overview: {this.props.overview}

-

Release Date: {this.props.releaseDate}

-
- {" "} +
+
+ Card image cap +
Title: {this.props.title}
+

ID: {this.props.id}

+

Overview: {this.props.overview}

+

Release Date: {this.props.releaseDate}

+

+ {" "} +
); diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index a1e5afccc..7a822df97 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -42,7 +42,7 @@ class MovieLibrary extends Component { const movies = this.props.librayMovies.map(movie => { console.log(movie); return ( -
+
+

Search for a movie

+
); } } diff --git a/src/components/movie.css b/src/components/movie.css index 6f4ad2de8..e69de29bb 100644 --- a/src/components/movie.css +++ b/src/components/movie.css @@ -1,7 +0,0 @@ -.grid-item { - background-color: rgba(255, 255, 255, 0.8); - border: 1px solid rgba(0, 0, 0, 0.8); - padding: 20px; - font-size: 30px; - text-align: center; -} \ No newline at end of file From 108fa6462244239992ecfb45a269709cac95ddbf Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 16:53:35 -0700 Subject: [PATCH 32/52] Starting to add routes --- src/App.js | 50 +++++++++++++++++++++++++++++++++++++++++++++----- src/index.js | 43 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 82 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 2e16ebe25..601eb71b0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,10 @@ import React, { Component } from "react"; +import ReactDOM from "react-dom"; + import "./App.css"; +import registerServiceWorker from "./registerServiceWorker"; +import { Route, Link, BrowserRouter as Router } from "react-router-dom"; + import MovieLibrary from "./components/MovieLibrary"; import MovieSearchResults from "./components/MovieSearchResults"; import RentalCheckout from "./components/RentalCheckout"; @@ -46,6 +51,32 @@ class App extends Component { }); }; + // routing = ( + // + //
+ //
    + //
  • + // Home + //
    • + //
  • + // MovieLibrary + //
    • + //
  • + // MovieSearchForm + //
    • + + //
  • + // CustomerList + //
    • + //
+ // + // + // + // + //
+ // + // ); + render() { let optionalComponent; @@ -81,7 +112,7 @@ class App extends Component { ); } - let searchResults = ""; + let searchResults; if (this.state.searchComplete) { searchResults = (
-

BitaRos Amazing VideoStore

+

+ BitaRos Amazing VideoStore +

+ {/*

BitaRos Amazing VideoStore

*/}
{optionalSearch}
@@ -134,3 +171,6 @@ class App extends Component { } export default App; +ReactDOM.render(, document.getElementById("root")); +registerServiceWorker(); + diff --git a/src/index.js b/src/index.js index fae3e3500..9112ce75e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,39 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import registerServiceWorker from './registerServiceWorker'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import MovieLibrary from "./components/MovieLibrary"; +import CustomerList from "./components/CustomerList"; +import MovieSearchForm from "./components/MovieSearchForm"; -ReactDOM.render(, document.getElementById('root')); +import registerServiceWorker from "./registerServiceWorker"; +import { Route, Link, BrowserRouter as Router } from "react-router-dom"; + +const routing = ( + +
+ {/*
    +
  • + Home +
    • +
  • + MovieLibrary +
    • +
  • + MovieSearchForm +
    • + +
  • + CustomerList +
    • +
*/} + + + + +
+ +); + +ReactDOM.render(routing, document.getElementById("root")); registerServiceWorker(); From f4d9814bf8dc167a364925514303cf5603068949 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 18:39:29 -0700 Subject: [PATCH 33/52] Routing implemented --- src/App.css | 8 ++-- src/App.js | 82 ++++++++-------------------------- src/components/CustomerList.js | 1 - src/components/MovieLibrary.js | 2 - src/index.js | 23 ++-------- 5 files changed, 26 insertions(+), 90 deletions(-) diff --git a/src/App.css b/src/App.css index 409df3e3f..98a3b3ece 100644 --- a/src/App.css +++ b/src/App.css @@ -13,16 +13,17 @@ } .App-main { - padding-top: 7rem; + padding-top: 8rem; padding-bottom: 5rem; text-align: center; background-color: #c5d86d; - } -.App-title { +.App-title a { text-align: center; font-size: 1.5em; + color: #fff; + text-decoration: none; } .movie-display { @@ -37,4 +38,3 @@ background-color: #fff; color: #444; } - diff --git a/src/App.js b/src/App.js index 601eb71b0..7fa555e8a 100644 --- a/src/App.js +++ b/src/App.js @@ -32,10 +32,6 @@ class App extends Component { }); }; - setDisplay = option => { - this.setState({ displayOption: option, searchComplete: false }); - }; - rentMovieWithMovie = movie => { this.setState({ hasMovie: movie }); }; @@ -51,36 +47,10 @@ class App extends Component { }); }; - // routing = ( - // - //
- //
    - //
  • - // Home - //
    • - //
  • - // MovieLibrary - //
    • - //
  • - // MovieSearchForm - //
    • - - //
  • - // CustomerList - //
    • - //
- // - // - // - // - //
- // - // ); - render() { let optionalComponent; - if (this.state.displayOption === "library") { + if (this.props.page === "library") { optionalComponent = ( ); - } else if (this.state.displayOption === "list") { + } else if (this.props.page === "list") { optionalComponent = ( ; } @@ -128,36 +98,23 @@ class App extends Component {

BitaRos Amazing VideoStore

- {/*

BitaRos Amazing VideoStore

*/}
- - - + + + + + + + + + {optionalSearch}
@@ -171,6 +128,3 @@ class App extends Component { } export default App; -ReactDOM.render(, document.getElementById("root")); -registerServiceWorker(); - diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 3fbb0d3bb..51800be40 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -27,7 +27,6 @@ class CustomerList extends Component { const customers = response.data.map(customer => { return customer; }); - console.log(response.data); this.setState({ customers: customers }); diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 7a822df97..c739c3c50 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -29,7 +29,6 @@ class MovieLibrary extends Component { }; return newMovie; }); - console.log(movielist); }) .catch(error => { console.log(error); @@ -40,7 +39,6 @@ class MovieLibrary extends Component { render() { const movies = this.props.librayMovies.map(movie => { - console.log(movie); return (
diff --git a/src/index.js b/src/index.js index 9112ce75e..ce0fe80e2 100644 --- a/src/index.js +++ b/src/index.js @@ -12,25 +12,10 @@ import { Route, Link, BrowserRouter as Router } from "react-router-dom"; const routing = (
- {/*
    -
  • - Home -
    • -
  • - MovieLibrary -
    • -
  • - MovieSearchForm -
    • - -
  • - CustomerList -
    • -
*/} - - - - + } /> + } /> + } /> + } />
); From a27ff53564d64b13a8b562dc5321db24f9ca1cf0 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 19:36:45 -0700 Subject: [PATCH 34/52] Routing fixed. Now working --- src/App.js | 9 +++++---- src/components/RentalCheckout.js | 17 +++++++++++------ src/index.js | 9 ++++++--- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 7fa555e8a..8b685efad 100644 --- a/src/App.js +++ b/src/App.js @@ -50,7 +50,7 @@ class App extends Component { render() { let optionalComponent; - if (this.props.page === "library") { + if (this.props.match.params.page === "MovieLibrary") { optionalComponent = ( ); - } else if (this.props.page === "list") { + } else if (this.props.match.params.page === "CustomerList") { optionalComponent = ( ; } @@ -99,7 +99,9 @@ class App extends Component { BitaRos Amazing VideoStore +
+ {rentalMovie}
); diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 16fa1aa69..42c686dad 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -43,16 +43,21 @@ class RentalCheckout extends Component { return (
+

{checkoutText}

+

- {this.props.selectedMovie - ? this.props.selectedMovie.title - : "Please select Movie to checkout"} - {this.props.selectedCustomer ? this.props.selectedCustomer : "Please select a Customer to checkout"} +

+ {this.props.selectedMovie + ? this.props.selectedMovie.title + : "Please select Movie to checkout"} +

+

{this.props.selectedCustomer + ? this.props.selectedCustomer + : "Please select a Customer to checkout"}

- {checkoutRental} -

{checkoutText}

+

{checkoutRental}

); } diff --git a/src/index.js b/src/index.js index ce0fe80e2..7b2f5a4b3 100644 --- a/src/index.js +++ b/src/index.js @@ -12,10 +12,13 @@ import { Route, Link, BrowserRouter as Router } from "react-router-dom"; const routing = (
- } /> - } /> + {/* */} + + + + {/* } /> } /> - } /> + } /> */}
); From dc7293d9d4fc272ec84fc8a9830fc30b9f5751a7 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Wed, 26 Jun 2019 21:13:08 -0700 Subject: [PATCH 35/52] Styling and formatting changes --- src/App.js | 39 ++++++++++++++++++++------- src/components/CustomerList.css | 5 ++++ src/components/CustomerList.js | 17 ++++++------ src/components/Movie.js | 2 +- src/components/MovieLibrary.css | 5 ++++ src/components/MovieLibrary.js | 23 +++++++--------- src/components/MovieSearchForm.js | 4 --- src/components/MovieSearchResults.css | 9 ++++++- src/components/MovieSearchResults.js | 10 +++---- src/components/movie.css | 6 +++++ 10 files changed, 77 insertions(+), 43 deletions(-) diff --git a/src/App.js b/src/App.js index 8b685efad..eda096985 100644 --- a/src/App.js +++ b/src/App.js @@ -20,15 +20,16 @@ class App extends Component { displayOption: null, hasMovie: null, hasCustomer: null, - searchComplete: false, + showResults: false, librayMovies: [] + }; } getresult = movies => { this.setState({ movies: movies, - searchComplete: true + showResults: true }); }; @@ -40,13 +41,18 @@ class App extends Component { this.setState({ hasCustomer: customer }); }; - // what to do with duplicate clicks to add to library - addMovietoLibray = movie => { + addMovietoLibray = movies => { + // Movies could be single or array of movies + const movieList = Array.isArray(movies) ? movies : [movies]; this.setState({ - librayMovies: [...this.state.librayMovies, movie] + librayMovies: [...this.state.librayMovies, ...movieList] }); }; + setDisplay = () => { + this.setState({ showResults: false }); + }; + render() { let optionalComponent; @@ -83,7 +89,7 @@ class App extends Component { } let searchResults; - if (this.state.searchComplete) { + if (this.state.showResults) { searchResults = ( {rentalMovie} - - - diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css index e69de29bb..814ff896b 100644 --- a/src/components/CustomerList.css +++ b/src/components/CustomerList.css @@ -0,0 +1,5 @@ +.customer-layout { + display: grid; + grid-template: 1fr / repeat(auto-fit, minmax(200px, 1fr)); + grid-gap: 5px; +} diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 51800be40..c8af3c9d1 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -24,9 +24,7 @@ class CustomerList extends Component { axios .get(`http://localhost:3000/customers`) .then(response => { - const customers = response.data.map(customer => { - return customer; - }); + const customers = response.data; this.setState({ customers: customers }); @@ -45,11 +43,11 @@ class CustomerList extends Component {
Name: {customer.name}
-

ID: {customer.id}

-

+

ID: {customer.id}

+

# of Movies checked out: {customer.movies_checked_out_count}

-

Phone number: {customer.phone}

+

Contact: {customer.phone}


+ +

List of Customers

+
{customers}
+ ); } } diff --git a/src/components/Movie.js b/src/components/Movie.js index bffa8b018..4890a05d6 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import "./Movie.css"; class Movie extends Component { constructor(props) { @@ -23,7 +24,6 @@ class Movie extends Component {

ID: {this.props.id}

Overview: {this.props.overview}

Release Date: {this.props.releaseDate}

-

); }); return ( -
-

Movie Library

{movies} -
+ +

Movie Library

+
{movies}
+ ); } } diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 5711cf8c5..a5046f1b2 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -67,8 +67,4 @@ class MovieSearchForm extends Component { ); } } -// MovieSearchForm.propTypes = { -// // addCardCallback: PropTypes.func.isRequired, -// }; - export default MovieSearchForm; diff --git a/src/components/MovieSearchResults.css b/src/components/MovieSearchResults.css index 73d807661..974dc403f 100644 --- a/src/components/MovieSearchResults.css +++ b/src/components/MovieSearchResults.css @@ -1,3 +1,10 @@ .send-to-library { color: red -} \ No newline at end of file +} + +.movie-grid { + display: grid; + grid-template: 1fr / repeat(auto-fit, minmax(200px, 1fr)); + grid-gap: 5px; + +} diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index ec1653511..565b53b91 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -22,24 +22,24 @@ class MovieSearchResults extends Component { render() { const collection = this.props.movies.map((movie, i) => { return ( - ); }); return ( -
+

{this.state.sendToLibraryIndicator}

-
{collection}
-
+

Movie search results

+
{collection}
+ ); } } diff --git a/src/components/movie.css b/src/components/movie.css index e69de29bb..bd7c2de72 100644 --- a/src/components/movie.css +++ b/src/components/movie.css @@ -0,0 +1,6 @@ +.card-text { + text-overflow: ellipsis; + width: 200px; + white-space: nowrap; + overflow: hidden; +} From bd6978b2aeadcac269a61f2a36bb32ecb4e8d16c Mon Sep 17 00:00:00 2001 From: rosalyn Date: Thu, 27 Jun 2019 09:47:54 -0700 Subject: [PATCH 36/52] Added formatting to customers --- src/components/CustomerList.js | 17 +++++++++-------- src/index.js | 8 +------- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index c8af3c9d1..8ebc65d29 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -40,14 +40,15 @@ class CustomerList extends Component { const customers = this.state.customers.map((customer, i) => { return (
-
-
+

+

Name: {customer.name}
-

ID: {customer.id}

-

+

ID: {customer.id}

+

# of Movies checked out: {customer.movies_checked_out_count}

-

Contact: {customer.phone}

+

Account credit: ${customer.account_credit.toFixed(2)}

+

Contact: {customer.phone}


-
-
+

+

); }); diff --git a/src/index.js b/src/index.js index 7b2f5a4b3..0c3fe5a93 100644 --- a/src/index.js +++ b/src/index.js @@ -12,13 +12,7 @@ import { Route, Link, BrowserRouter as Router } from "react-router-dom"; const routing = (
- {/* */} - - - - {/* } /> - } /> - } /> */} +
); From fe93f3da6cddae1d8f701e59c5fd863b3778baaa Mon Sep 17 00:00:00 2001 From: Bitaman Date: Thu, 27 Jun 2019 10:30:01 -0700 Subject: [PATCH 37/52] check out movie is adding to movies checked out to the customer --- src/components/CustomerList.js | 8 ++++---- src/components/MovieLibrary.js | 2 +- src/components/RentalCheckout.js | 21 +++++++++++++++++++-- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 8ebc65d29..6f79e1218 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -22,7 +22,7 @@ class CustomerList extends Component { }; componentDidMount() { axios - .get(`http://localhost:3000/customers`) + .get(`http://localhost:3001/customers`) .then(response => { const customers = response.data; this.setState({ @@ -44,9 +44,9 @@ class CustomerList extends Component {

Name: {customer.name}

ID: {customer.id}

-

+ # of Movies checked out: {customer.movies_checked_out_count} -

+

Account credit: ${customer.account_credit.toFixed(2)}

Contact: {customer.phone}

@@ -55,7 +55,7 @@ class CustomerList extends Component { type="button" className="btn btn-danger" aria-label="Close" - onClick={() => this.selectToCheckoutCustomer(customer.name)} + onClick={() => this.selectToCheckoutCustomer(customer)} > SELECT CUSTOMER diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index dbfa02625..7c1ccfa46 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -20,7 +20,7 @@ class MovieLibrary extends Component { componentDidMount() { axios - .get(`http://localhost:3000/movies`) + .get(`http://localhost:3001/movies`) .then(response => { const movielist = response.data; diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 42c686dad..5ffd27fb3 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; import "./RentalCheckout.css"; +import axios from "axios" class RentalCheckout extends Component { constructor(props) { @@ -16,7 +17,23 @@ class RentalCheckout extends Component { checkout: { customer: customer, movie: movie }, checkoutStatus: true }); - }; + let dueDate = new Date(); + dueDate.setDate(dueDate.getDate() + 7) + console.log(dueDate) + + axios.post(`http://localhost:3001/rentals/${movie.title}/check-out`, { customer_id: customer.id, due_date: dueDate}) + .then((response) => { + return response.data + console.log("Did checked out") + }) + + .catch((error) => { + + console.log(error.messages) + alert('Error happened'); + this.setState({ error: error.message }); + }) + } render() { let checkoutText = ""; @@ -53,7 +70,7 @@ class RentalCheckout extends Component { : "Please select Movie to checkout"}

{this.props.selectedCustomer - ? this.props.selectedCustomer + ? this.props.selectedCustomer.name : "Please select a Customer to checkout"}

From 4e90edff63869d5a25925c5e331a90f04de98346 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Thu, 27 Jun 2019 11:59:41 -0700 Subject: [PATCH 38/52] Merged checkout changes and fixed message upon checkout --- src/components/RentalCheckout.js | 40 ++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 5ffd27fb3..cc2cab288 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import "./RentalCheckout.css"; -import axios from "axios" +import axios from "axios"; class RentalCheckout extends Component { constructor(props) { @@ -18,29 +18,31 @@ class RentalCheckout extends Component { checkoutStatus: true }); let dueDate = new Date(); - dueDate.setDate(dueDate.getDate() + 7) - console.log(dueDate) - - axios.post(`http://localhost:3001/rentals/${movie.title}/check-out`, { customer_id: customer.id, due_date: dueDate}) - .then((response) => { - return response.data - console.log("Did checked out") + dueDate.setDate(dueDate.getDate() + 7); + console.log(dueDate); + + axios + .post(`http://localhost:3001/rentals/${movie.title}/check-out`, { + customer_id: customer.id, + due_date: dueDate + }) + .then(response => { + return response.data; }) - - .catch((error) => { - console.log(error.messages) - alert('Error happened'); + .catch(error => { + console.log(error.messages); + alert("Error happened"); this.setState({ error: error.message }); - }) - } + }); + }; render() { let checkoutText = ""; if (this.state.checkoutStatus) { checkoutText = `${ - this.state.checkout.customer + this.state.checkout.customer.name } has check out the following movie: ${this.state.checkout.movie.title}`; } @@ -69,9 +71,11 @@ class RentalCheckout extends Component { ? this.props.selectedMovie.title : "Please select Movie to checkout"}

-

{this.props.selectedCustomer - ? this.props.selectedCustomer.name - : "Please select a Customer to checkout"}

+

+ {this.props.selectedCustomer + ? this.props.selectedCustomer.name + : "Please select a Customer to checkout"}{" "} +

{checkoutRental}

From 4fc6ffdbaedb25165d8b5626bd12b70bc32a6aaa Mon Sep 17 00:00:00 2001 From: Bitaman Date: Thu, 27 Jun 2019 13:46:17 -0700 Subject: [PATCH 39/52] small changes in rental --- src/components/RentalCheckout.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 5ffd27fb3..ae825b9f2 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -24,7 +24,6 @@ class RentalCheckout extends Component { axios.post(`http://localhost:3001/rentals/${movie.title}/check-out`, { customer_id: customer.id, due_date: dueDate}) .then((response) => { return response.data - console.log("Did checked out") }) .catch((error) => { From 36c16055b0e89b4db4d224ddb42b65e26975d930 Mon Sep 17 00:00:00 2001 From: Bitaman Date: Thu, 27 Jun 2019 13:56:35 -0700 Subject: [PATCH 40/52] added axios call to add a movie to the library --- src/components/MovieSearchResults.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index 565b53b91..4310cdb55 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -1,6 +1,7 @@ import React, { Component } from "react"; import Movie from "./Movie"; import "./MovieSearchResults.css"; +import axios from "axios"; class MovieSearchResults extends Component { constructor(props) { @@ -17,6 +18,16 @@ class MovieSearchResults extends Component { }); this.props.addMovietoLibrayCallback(movie); + axios.post(`http://localhost:3001/movies`, { title: movie.title, overview: movie.overview, release_date: movie.release_date, inventory: 5}) + .then((response) => { + return response.data + }) + + .catch(error => { + console.log(error.messages); + alert("Error happened"); + this.setState({ error: error.message }); + }); }; render() { From f6e740170258bc0d88031eae9cccb56c3566113f Mon Sep 17 00:00:00 2001 From: Bitaman Date: Thu, 27 Jun 2019 14:41:32 -0700 Subject: [PATCH 41/52] made some changes to addmovie to the library callback function --- src/App.js | 11 ++++++++++- src/components/MovieLibrary.js | 2 +- src/components/MovieSearchResults.js | 2 +- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index eda096985..42b940190 100644 --- a/src/App.js +++ b/src/App.js @@ -48,6 +48,14 @@ class App extends Component { librayMovies: [...this.state.librayMovies, ...movieList] }); }; + addSingleMovietoLibrary = movie => { + let newState = this.state.librayMovies + newState.push(movie) + this.setState({ + librayMovies: newState + + }) + } setDisplay = () => { this.setState({ showResults: false }); @@ -93,7 +101,8 @@ class App extends Component { searchResults = ( ); } diff --git a/src/components/MovieLibrary.js b/src/components/MovieLibrary.js index 7c1ccfa46..8b993f9df 100644 --- a/src/components/MovieLibrary.js +++ b/src/components/MovieLibrary.js @@ -36,7 +36,7 @@ class MovieLibrary extends Component { render() { const movies = this.props.librayMovies.map(movie => { return ( -
+
{ return ( Date: Thu, 27 Jun 2019 14:48:39 -0700 Subject: [PATCH 42/52] Styling changes to customer --- src/App.css | 2 +- src/App.js | 2 ++ src/components/CustomerList.css | 13 ++++++++- src/components/CustomerList.js | 42 +++++++++++----------------- src/components/Movie.js | 2 +- src/components/MovieLibrary.css | 11 ++++++++ src/components/MovieLibrary.js | 2 +- src/components/MovieSearchResults.js | 4 +-- src/components/movie.css | 10 +++++++ 9 files changed, 57 insertions(+), 31 deletions(-) diff --git a/src/App.css b/src/App.css index 98a3b3ece..9d260f7fb 100644 --- a/src/App.css +++ b/src/App.css @@ -16,7 +16,7 @@ padding-top: 8rem; padding-bottom: 5rem; text-align: center; - background-color: #c5d86d; + background-color: #A4AF69; } .App-title a { diff --git a/src/App.js b/src/App.js index eda096985..c581f5ff7 100644 --- a/src/App.js +++ b/src/App.js @@ -53,6 +53,8 @@ class App extends Component { this.setState({ showResults: false }); }; + + render() { let optionalComponent; diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css index 814ff896b..ad57abb09 100644 --- a/src/components/CustomerList.css +++ b/src/components/CustomerList.css @@ -1,5 +1,16 @@ -.customer-layout { +.customer-grid { display: grid; grid-template: 1fr / repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 5px; } + + +.block { + width: 100%; + border: none; + background-color: #EDE580; + padding: 14px 28px; + font-size: 16px; + cursor: pointer; + text-align: center; +} diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 6f79e1218..18ab912e8 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -39,35 +39,27 @@ class CustomerList extends Component { render() { const customers = this.state.customers.map((customer, i) => { return ( -
-

-

-

Name: {customer.name}
-

ID: {customer.id}

- - # of Movies checked out: {customer.movies_checked_out_count} - -

Account credit: ${customer.account_credit.toFixed(2)}

-

Contact: {customer.phone}

- -
- -

-

-
+ +
Id: {customer.id}
+
Name: {customer.name}
+
# of Rentals: {customer.movies_checked_out_count}
+
Account Credit: ${customer.account_credit}
+
Contact: {customer.phone}
{" "} + +
); }); return ( -

List of Customers

-
{customers}
+

Customers

+ {customers}
); } diff --git a/src/components/Movie.js b/src/components/Movie.js index 4890a05d6..2e65c2363 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -26,7 +26,7 @@ class Movie extends Component {

Release Date: {this.props.releaseDate}

+
); }); return (

Customers

- {customers}
+
{customers}
); } From b86f06014e92fd2ec1f6d4f6a6061b712d820a49 Mon Sep 17 00:00:00 2001 From: Bitaman Date: Thu, 27 Jun 2019 15:35:03 -0700 Subject: [PATCH 44/52] an existing movie can't get added to the library again --- src/components/CustomerList.js | 6 ++-- src/components/MovieSearchResults.js | 45 ++++++++++++++++++---------- 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 6f79e1218..40ea11d51 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -9,13 +9,15 @@ class CustomerList extends Component { this.state = { customers: [], - selectedCustomer: "" + selectedCustomer: "", + error: "" }; } selectToCheckoutCustomer = customer => { this.setState({ - selectedCustomer: customer + selectedCustomer: customer, + error: "", }); this.props.rentMovieWithCustomerCallback(customer); diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index 9bc539cdf..ff10e3775 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -2,38 +2,52 @@ import React, { Component } from "react"; import Movie from "./Movie"; import "./MovieSearchResults.css"; import axios from "axios"; +import Axios from "axios"; class MovieSearchResults extends Component { constructor(props) { super(props); this.state = { - sendToLibraryIndicator: "" + sendToLibraryIndicator: "", + error: "" }; } - sendToLibray = movie => { - this.setState({ - sendToLibraryIndicator: `Added ${movie.title} to the library` - }); - this.props.addMovietoLibrayCallback(movie); - axios.post(`http://localhost:3001/movies`, { title: movie.title, overview: movie.overview, release_date: movie.release_date, inventory: 5}) - .then((response) => { - return response.data + + sendToLibray = movie => { + axios.get(`http://localhost:3001/movies/${movie.title}`) + .then(()=>{ + this.setState({ + error: "This movie already exist in the library, Please select another one!" + }) }) + .catch(()=>{ + this.setState({ + sendToLibraryIndicator: `Added ${movie.title} to the library` + }); - .catch(error => { - console.log(error.messages); - alert("Error happened"); - this.setState({ error: error.message }); - }); + this.props.addMovietoLibrayCallback(movie); + axios.post(`http://localhost:3001/movies`, { title: movie.title, overview: movie.overview, release_date: movie.release_date, inventory: 5 }) + .then((response) => { + return response.data + }) + + .catch(error => { + console.log(error.messages); + alert("Error happened"); + this.setState({ error: error.message }); + }); + + }) + }; render() { const collection = this.props.movies.map((movie, i) => { return ( -

{this.state.sendToLibraryIndicator}

Movie search results

+

{this.state.error}

{collection}
); From d2b6e694f7e3640dbca865df9adec455e49e00b0 Mon Sep 17 00:00:00 2001 From: rosalyn Date: Thu, 27 Jun 2019 20:45:12 -0700 Subject: [PATCH 45/52] added the ability to rerender customers after checkout to show new rental numbers --- src/App.css | 2 +- src/App.js | 38 ++++++++++++++++++---------- src/components/CustomerList.js | 34 +++++++++++++++---------- src/components/Movie.js | 3 --- src/components/MovieSearchForm.js | 1 + src/components/MovieSearchResults.js | 3 +-- src/components/RentalCheckout.js | 5 +++- src/index.js | 5 +--- 8 files changed, 52 insertions(+), 39 deletions(-) diff --git a/src/App.css b/src/App.css index 9d260f7fb..5290045b3 100644 --- a/src/App.css +++ b/src/App.css @@ -16,7 +16,7 @@ padding-top: 8rem; padding-bottom: 5rem; text-align: center; - background-color: #A4AF69; + background-color: #a4af69; } .App-title a { diff --git a/src/App.js b/src/App.js index 599a0c9dd..47fdf0155 100644 --- a/src/App.js +++ b/src/App.js @@ -21,8 +21,8 @@ class App extends Component { hasMovie: null, hasCustomer: null, showResults: false, - librayMovies: [] - + librayMovies: [], + customerList: [] }; } @@ -42,26 +42,34 @@ class App extends Component { }; addMovietoLibray = movies => { - // Movies could be single or array of movies - const movieList = Array.isArray(movies) ? movies : [movies]; this.setState({ - librayMovies: [...this.state.librayMovies, ...movieList] + librayMovies: movies }); }; - addSingleMovietoLibrary = movie => { - let newState = this.state.librayMovies - newState.push(movie) + + addSingleMovieToLibrary = movie => { this.setState({ - librayMovies: newState + librayMovies: [...this.state.librayMovies, movie] + }); + }; - }) - } + addCustomers = customers => { + this.setState({ + customerList: customers + }); + }; setDisplay = () => { this.setState({ showResults: false }); }; - + hasCheckedOut = (movie, customer) => { + this.setState({ + customerList: [], + hasMovie: null, + hasCustomer: null + }); + }; render() { let optionalComponent; @@ -78,6 +86,8 @@ class App extends Component { optionalComponent = ( ); } @@ -94,6 +104,7 @@ class App extends Component { ); } @@ -103,8 +114,7 @@ class App extends Component { searchResults = ( ); } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index df9f02c87..53f5b8356 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -8,7 +8,6 @@ class CustomerList extends Component { super(props); this.state = { - customers: [], selectedCustomer: "" }; } @@ -20,24 +19,31 @@ class CustomerList extends Component { this.props.rentMovieWithCustomerCallback(customer); }; - componentDidMount() { + + fetchCustomers = () => { axios .get(`http://localhost:3001/customers`) .then(response => { const customers = response.data; - this.setState({ - customers: customers - }); + this.props.addCustomersCallback(customers); }) .catch(error => { console.log(error); alert("An error occurred"); this.setState({ error: error.message }); }); + }; + + componentDidMount() { + this.fetchCustomers(); + } + + componentDidUpdate() { + this.fetchCustomers(); } render() { - const customers = this.state.customers.map((customer, i) => { + const customers = this.props.customerList.map((customer, i) => { return (
Id: {customer.id} @@ -45,14 +51,14 @@ class CustomerList extends Component { # of Rentals: {customer.movies_checked_out_count} Account Credit: ${customer.account_credit} Contact: {customer.phone} - +
); }); diff --git a/src/components/Movie.js b/src/components/Movie.js index 2e65c2363..3f6aaab74 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,9 +2,6 @@ import React, { Component } from "react"; import "./Movie.css"; class Movie extends Component { - constructor(props) { - super(props); - } onSelectedClick = () => { this.props.sendToLibrayCallback(this.props); diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index a5046f1b2..54783db04 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -24,6 +24,7 @@ class MovieSearchForm extends Component { .then(response => { const movies = response.data.results; this.setState({ text: "" }); + this.props.getresultcallback(movies); }) .catch(error => { diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index 276a6a02d..ad3723477 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -17,12 +17,11 @@ class MovieSearchResults extends Component { sendToLibraryIndicator: `Added ${movie.title} to the library` }); - this.props.addMovietoLibrayCallback(movie); + this.props.addSingleMovieToLibraryCallback(movie); axios.post(`http://localhost:3001/movies`, { title: movie.title, overview: movie.overview, release_date: movie.release_date, inventory: 5}) .then((response) => { return response.data }) - .catch(error => { console.log(error.messages); alert("Error happened"); diff --git a/src/components/RentalCheckout.js b/src/components/RentalCheckout.js index 93c47890d..c9ad0d80a 100644 --- a/src/components/RentalCheckout.js +++ b/src/components/RentalCheckout.js @@ -12,6 +12,8 @@ class RentalCheckout extends Component { }; } + + checkout = (movie, customer) => { this.setState({ checkout: { customer: customer, movie: movie }, @@ -19,7 +21,6 @@ class RentalCheckout extends Component { }); let dueDate = new Date(); dueDate.setDate(dueDate.getDate() + 7) - console.log(dueDate) axios.post(`http://localhost:3001/rentals/${movie.title}/check-out`, { customer_id: customer.id, due_date: dueDate}) .then((response) => { @@ -31,6 +32,8 @@ class RentalCheckout extends Component { alert("Error happened"); this.setState({ error: error.message }); }); + + this.props.hasCheckedOutCallback(movie,customer) }; render() { diff --git a/src/index.js b/src/index.js index 0c3fe5a93..e3788f844 100644 --- a/src/index.js +++ b/src/index.js @@ -2,12 +2,9 @@ import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; -import MovieLibrary from "./components/MovieLibrary"; -import CustomerList from "./components/CustomerList"; -import MovieSearchForm from "./components/MovieSearchForm"; import registerServiceWorker from "./registerServiceWorker"; -import { Route, Link, BrowserRouter as Router } from "react-router-dom"; +import { Route, BrowserRouter as Router } from "react-router-dom"; const routing = ( From 02960c430ca1431571df1a489338e9e8ef6f475d Mon Sep 17 00:00:00 2001 From: rosalyn Date: Thu, 27 Jun 2019 21:45:21 -0700 Subject: [PATCH 46/52] Fixed issue of images not rendering when added from search to library --- src/App.js | 13 +------------ src/components/MovieSearchResults.js | 28 +++++++++++++++++----------- 2 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/App.js b/src/App.js index 47fdf0155..00b7d5d85 100644 --- a/src/App.js +++ b/src/App.js @@ -47,12 +47,6 @@ class App extends Component { }); }; - addSingleMovieToLibrary = movie => { - this.setState({ - librayMovies: [...this.state.librayMovies, movie] - }); - }; - addCustomers = customers => { this.setState({ customerList: customers @@ -111,12 +105,7 @@ class App extends Component { let searchResults; if (this.state.showResults) { - searchResults = ( - - ); + searchResults = ; } return ( diff --git a/src/components/MovieSearchResults.js b/src/components/MovieSearchResults.js index ad3723477..b843e1a52 100644 --- a/src/components/MovieSearchResults.js +++ b/src/components/MovieSearchResults.js @@ -17,22 +17,28 @@ class MovieSearchResults extends Component { sendToLibraryIndicator: `Added ${movie.title} to the library` }); - this.props.addSingleMovieToLibraryCallback(movie); - axios.post(`http://localhost:3001/movies`, { title: movie.title, overview: movie.overview, release_date: movie.release_date, inventory: 5}) - .then((response) => { - return response.data - }) - .catch(error => { - console.log(error.messages); - alert("Error happened"); - this.setState({ error: error.message }); - }); + axios + .post(`http://localhost:3001/movies`, { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: "https://image.tmdb.org/t/p/w185/" + movie.image, + inventory: 5 + }) + .then(response => { + return response.data; + }) + .catch(error => { + console.log(error.messages); + alert("Error happened"); + this.setState({ error: error.message }); + }); }; render() { const collection = this.props.movies.map((movie, i) => { return ( - Date: Thu, 27 Jun 2019 22:16:54 -0700 Subject: [PATCH 47/52] Added message when checked out. --- src/App.css | 3 ++- src/App.js | 27 +++++++++++---------------- src/components/CustomerList.js | 4 +++- src/components/RentalCheckout.js | 27 +++++++++++++-------------- 4 files changed, 29 insertions(+), 32 deletions(-) diff --git a/src/App.css b/src/App.css index 5290045b3..43ade9380 100644 --- a/src/App.css +++ b/src/App.css @@ -17,11 +17,11 @@ padding-bottom: 5rem; text-align: center; background-color: #a4af69; + font-size: 12px; } .App-title a { text-align: center; - font-size: 1.5em; color: #fff; text-decoration: none; } @@ -29,6 +29,7 @@ .movie-display { max-width: 50rem; margin: auto; + font-size: 12px; } .movie-body { diff --git a/src/App.js b/src/App.js index 00b7d5d85..986add343 100644 --- a/src/App.js +++ b/src/App.js @@ -22,7 +22,8 @@ class App extends Component { hasCustomer: null, showResults: false, librayMovies: [], - customerList: [] + customerList: [], + checkoutStatus: false }; } @@ -54,14 +55,15 @@ class App extends Component { }; setDisplay = () => { - this.setState({ showResults: false }); + this.setState({ showResults: false, checkoutStatus: false }); }; hasCheckedOut = (movie, customer) => { this.setState({ customerList: [], hasMovie: null, - hasCustomer: null + hasCustomer: null, + checkoutStatus: true }); }; @@ -91,18 +93,6 @@ class App extends Component { optionalSearch = ; } - let rentalMovie; - - if (this.state.hasMovie || this.state.hasCustomer) { - rentalMovie = ( - - ); - } - let searchResults; if (this.state.showResults) { searchResults = ; @@ -117,7 +107,12 @@ class App extends Component {
- {rentalMovie} +