From 6a9d1c1b20f531388eacf85a0627a4dc6d933cd1 Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 14:49:04 -0700 Subject: [PATCH 01/76] added components folder and MovieLibrary component --- package-lock.json | 102 ++++++++++++++++++++++++++++++++++ package.json | 13 +++++ src/component/MovieLibrary.js | 1 + 3 files changed, 116 insertions(+) create mode 100644 src/component/MovieLibrary.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/component/MovieLibrary.js b/src/component/MovieLibrary.js new file mode 100644 index 000000000..2c67c2951 --- /dev/null +++ b/src/component/MovieLibrary.js @@ -0,0 +1 @@ +// testest \ No newline at end of file From 6a3504e1658a4e295a4b1a5ac7bffdf098ab5b0e Mon Sep 17 00:00:00 2001 From: qqdipps Date: Mon, 24 Jun 2019 14:50:51 -0700 Subject: [PATCH 02/76] router dom installed --- package-lock.json | 102 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 13 ++++++ 2 files changed, 115 insertions(+) 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 2a2b3808b92ab3eb0a28fce67e5823afadef7a47 Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 14:56:58 -0700 Subject: [PATCH 03/76] created MovieLibrary component --- src/App.js | 12 +++--------- src/component/MovieLibrary.js | 13 ++++++++++++- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index 203067e4d..776ccc04b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,13 @@ import React, { Component } from 'react'; +import MovieLibrary from './component/MovieLibrary' 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/component/MovieLibrary.js b/src/component/MovieLibrary.js index 2c67c2951..dff015827 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -1 +1,12 @@ -// testest \ No newline at end of file +// testest +import React from 'react' + + +const MovieLibrary = (props) => { + return ( +

hello

+ ) +} + + +export default MovieLibrary From 46e25c8f7edc281a92b8baf878535d5532a928d5 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Mon, 24 Jun 2019 15:15:08 -0700 Subject: [PATCH 04/76] basic routes set up for homepage --- src/App.js | 10 ++------- src/component/CustomerList.js | 7 +++++++ src/component/Homepage.js | 38 +++++++++++++++++++++++++++++++++++ src/component/MovieLibrary.js | 8 +++++++- src/component/MovieSearch.js | 7 +++++++ 5 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 src/component/CustomerList.js create mode 100644 src/component/Homepage.js create mode 100644 src/component/MovieSearch.js diff --git a/src/App.js b/src/App.js index 203067e4d..92306e8d7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,12 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +import Homepage from './component/Homepage'; 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/component/CustomerList.js b/src/component/CustomerList.js new file mode 100644 index 000000000..f0fa29d63 --- /dev/null +++ b/src/component/CustomerList.js @@ -0,0 +1,7 @@ +import React, { Component } from 'react'; + +const CustomerList = () => { + return

CUSOMTER LIST PLACE HOLDER

; +}; + +export default CustomerList; diff --git a/src/component/Homepage.js b/src/component/Homepage.js new file mode 100644 index 000000000..565b0c4c5 --- /dev/null +++ b/src/component/Homepage.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react'; +import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import MovieLibrary from './MovieLibrary'; +import MovieSearch from './MovieSearch'; +import CustomerList from './CustomerList'; + +class Homepage extends Component { + constructor() { + super(); + this.state = {}; + } + + navigation = () => { + return ( + +

+ Search Movies +

+

+ Movie Library +

+

+ Customer List +

+ + + + + + ); + }; + + render() { + return
{this.navigation()}
; + } +} + +export default Homepage; diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 2c67c2951..184ccdb28 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -1 +1,7 @@ -// testest \ No newline at end of file +import React, { Component } from 'react'; + +const MovieLibrary = () => { + return

MOVIE LIB PLACE HOLDER

; +}; + +export default MovieLibrary; diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js new file mode 100644 index 000000000..1baaa464c --- /dev/null +++ b/src/component/MovieSearch.js @@ -0,0 +1,7 @@ +import React, { Component } from 'react'; + +const MovieSearch = () => { + return

MOVIE SEARCH PLACE HOLDER

; +}; + +export default MovieSearch; From 1237652522baca19a26ed8a05b2318317f3ab93b Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 15:47:38 -0700 Subject: [PATCH 05/76] able to view list of movies with MovieLibrary and Movie components --- package-lock.json | 32 +++++++++++++++++++ package.json | 1 + src/component/Movie.js | 18 +++++++++++ src/component/MovieLibrary.js | 60 +++++++++++++++++++++++++++++++---- 4 files changed, 105 insertions(+), 6 deletions(-) create mode 100644 src/component/Movie.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/component/Movie.js b/src/component/Movie.js new file mode 100644 index 000000000..fffd58b35 --- /dev/null +++ b/src/component/Movie.js @@ -0,0 +1,18 @@ +import React from 'react' + +const Movie = (props) => { + + return ( +
+ {props.movie.id} + {props.movie.title} + {props.movie.overview} + {props.movie.release_date} + {props.movie.external_id} + movie photo + ----------------------------------------- +
+ ) +} + +export default Movie \ No newline at end of file diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index dff015827..0677d6c1f 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -1,12 +1,60 @@ -// testest import React from 'react' +import Movie from './Movie' +import axios from 'axios'; +class MovieLibrary extends React.Component { -const MovieLibrary = (props) => { - return ( -

hello

- ) -} + constructor() { + super(); + this.state = { + movieList: [] + } + } + + componentDidMount() { + URL = 'http://localhost:3000' + + axios.get( URL + '/movies' ) + .then((response) => { + const movieList = response.data.map((movie) => { + return ( + movie + ) + }) + + this.setState ({ + movieList: movieList + }) + + console.log('state!', this.state) + }) + .catch((error) => { + return ( + console.log(error.message) + ) + }) + } + + movieCollection = () => { + return ( + this.state.movieList.map((movie) => { + return ( + // console.log('movietitle', movie.title) + < Movie movie={movie} /> + ) + }) + ) + } + + render() { + + return ( +
+ {this.movieCollection()} +
+ ) + } +} export default MovieLibrary From 19681806d0994e81866cbc5a29ac4e2441d7f3dd Mon Sep 17 00:00:00 2001 From: qqdipps Date: Mon, 24 Jun 2019 15:53:56 -0700 Subject: [PATCH 06/76] passing callback func exploration --- src/component/Customer.js | 0 src/component/CustomerList.js | 5 +++-- src/component/Homepage.js | 12 +++++++++++- 3 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 src/component/Customer.js diff --git a/src/component/Customer.js b/src/component/Customer.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index f0fa29d63..518385ab4 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; -const CustomerList = () => { - return

CUSOMTER LIST PLACE HOLDER

; +const CustomerList = ({ customerSelectCallback }) => { + return

CUSOMTER LIST PLACE HOLDER {customerSelectCallback()}

; }; export default CustomerList; diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 565b0c4c5..b8f80e4af 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -25,11 +25,21 @@ class Homepage extends Component { - + ( + + )} + /> ); }; + onCustomerSelect = () => { + // this will updated selected customer + console.log('this is a callback'); + }; + render() { return
{this.navigation()}
; } From 49fbbd17a584f968c02222dcd65b509a79fd787e Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 16:13:37 -0700 Subject: [PATCH 07/76] addeds select button in Movie component --- src/component/Homepage.js | 5 +++++ src/component/Movie.js | 14 ++++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 565b0c4c5..b59646a03 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -10,6 +10,11 @@ class Homepage extends Component { this.state = {}; } + selectCard = () => { + + } + + navigation = () => { return ( diff --git a/src/component/Movie.js b/src/component/Movie.js index fffd58b35..bf5da6f21 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -4,13 +4,15 @@ const Movie = (props) => { return (
- {props.movie.id} - {props.movie.title} - {props.movie.overview} - {props.movie.release_date} - {props.movie.external_id} +

ID: {props.movie.id}

+

Title: {props.movie.title}

+

Overview: {props.movie.overview}

+

Release Date: {props.movie.release_date}

+ {/*

External ID: {props.movie.external_id}

*/} movie photo - ----------------------------------------- + +

-----------------------------------------

) } From 66588de3772b087f914d6685674e48cd394915d4 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Mon, 24 Jun 2019 16:19:28 -0700 Subject: [PATCH 08/76] set up api request for customers didmount --- src/component/Customer.js | 6 +++++ src/component/CustomerList.js | 48 ++++++++++++++++++++++++++++++++--- 2 files changed, 51 insertions(+), 3 deletions(-) diff --git a/src/component/Customer.js b/src/component/Customer.js index e69de29bb..acf41ec51 100644 --- a/src/component/Customer.js +++ b/src/component/Customer.js @@ -0,0 +1,6 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Customer = props => {}; + +export default Customer; diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index 518385ab4..2afb6f9e1 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -1,8 +1,50 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -const CustomerList = ({ customerSelectCallback }) => { - return

CUSOMTER LIST PLACE HOLDER {customerSelectCallback()}

; -}; +class CustomerList extends Component { + constructor(props) { + super(props); + this.state = { + customerList: [], + }; + } + customerCollection = () => { + return this.state.customerList.map(customer => { + return ( + + ); + }); + }; + + componentDidMount() { + getCusomters(); + } + + getCustomers = () => { + URL = 'http://localhost:3000'; + axios + .get(URL + '/customers') + .then(response => { + const customerList = response.data.map(customer => { + return customer; + }); + console.log(customerList); + this.setState({ + customerList: customerList, + }); + console.log('state!', this.state); + }) + .catch(error => { + return console.log(error.message); + }); + }; + + render() { + return

CUSOMTER LIST PLACE HOLDER {customerSelectCallback()}

; + } +} export default CustomerList; From 2fe1ae95cb17b8e872d0d7899479d352855817ca Mon Sep 17 00:00:00 2001 From: qqdipps Date: Mon, 24 Jun 2019 16:23:46 -0700 Subject: [PATCH 09/76] fixed bunches of bugs --- src/component/Customer.js | 4 +++- src/component/CustomerList.js | 7 ++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/component/Customer.js b/src/component/Customer.js index acf41ec51..4ce077769 100644 --- a/src/component/Customer.js +++ b/src/component/Customer.js @@ -1,6 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Customer = props => {}; +const Customer = props => { + return

{this.props}

; +}; export default Customer; diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index 2afb6f9e1..c43f2bc32 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import Customer from './Customer'; class CustomerList extends Component { constructor(props) { @@ -13,14 +14,14 @@ class CustomerList extends Component { return ( ); }); }; componentDidMount() { - getCusomters(); + this.getCustomers(); } getCustomers = () => { @@ -43,7 +44,7 @@ class CustomerList extends Component { }; render() { - return

CUSOMTER LIST PLACE HOLDER {customerSelectCallback()}

; + return
{this.customerCollection()}
; } } From 073a42dc11753ccb36f6e916c877d27081963b6b Mon Sep 17 00:00:00 2001 From: qqdipps Date: Mon, 24 Jun 2019 16:31:30 -0700 Subject: [PATCH 10/76] added customer information to component --- src/component/Customer.js | 12 +++++++++++- src/component/CustomerList.js | 1 + 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/component/Customer.js b/src/component/Customer.js index 4ce077769..7edf4d559 100644 --- a/src/component/Customer.js +++ b/src/component/Customer.js @@ -2,7 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; const Customer = props => { - return

{this.props}

; + console.log(props); + return ( +
+

+ {props.name} ID: {props.id} +

+

Number of movies checked out: {props.movies_checked_out_count}

+

Account credit: {props.account_credit}

+ ----------------------------------------- +
+ ); }; export default Customer; diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index c43f2bc32..c715418a6 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Customer from './Customer'; +import axios from 'axios'; class CustomerList extends Component { constructor(props) { From 63c3327f903070bb1055c561f98654c42e41a47b Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 16:35:04 -0700 Subject: [PATCH 11/76] trying to add callback function for selectMovie --- src/component/Homepage.js | 11 ++++++++--- src/component/Movie.js | 7 +++++-- src/component/MovieLibrary.js | 9 +++++++-- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index b59646a03..d61d3946e 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -10,8 +10,8 @@ class Homepage extends Component { this.state = {}; } - selectCard = () => { - + selectMovie = (movieID) => { + console.log('inside the select movie method!', movieID) } @@ -29,7 +29,12 @@ class Homepage extends Component {

- + ( + + )} + /> ); diff --git a/src/component/Movie.js b/src/component/Movie.js index bf5da6f21..1ca7257b9 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -2,6 +2,10 @@ import React from 'react' const Movie = (props) => { + const selectMovie = () => { + props.selectMovie(props.movie.id) + } + return (

ID: {props.movie.id}

@@ -10,8 +14,7 @@ const Movie = (props) => {

Release Date: {props.movie.release_date}

{/*

External ID: {props.movie.external_id}

*/} movie photo - +

-----------------------------------------

) diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 3cbf3c256..05c98fcee 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -37,12 +37,17 @@ class MovieLibrary extends React.Component { } + selectMovie = (movieID) => { + this.props.selectMovie(movieID) + } + movieCollection = () => { return ( this.state.movieList.map((movie) => { return ( - // console.log('movietitle', movie.title) - < Movie movie={movie} /> + < Movie + movie={movie} + selectMovie={this.selectMovie()} /> ) }) ) From 6dc9a8dda930f983f7a6004106a19ed929f195ad Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 16:38:03 -0700 Subject: [PATCH 12/76] add movie callback function connected --- src/component/Homepage.js | 6 +++--- src/component/Movie.js | 2 +- src/component/MovieLibrary.js | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index d61d3946e..3d15795dd 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -10,8 +10,8 @@ class Homepage extends Component { this.state = {}; } - selectMovie = (movieID) => { - console.log('inside the select movie method!', movieID) + selectMovie = () => { + console.log('inside the select movie method!') } @@ -32,7 +32,7 @@ class Homepage extends Component { ( - + )} /> diff --git a/src/component/Movie.js b/src/component/Movie.js index 1ca7257b9..f56c0db7c 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -3,7 +3,7 @@ import React from 'react' const Movie = (props) => { const selectMovie = () => { - props.selectMovie(props.movie.id) + props.selectMovie() } return ( diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 05c98fcee..20f0ff44f 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -37,8 +37,8 @@ class MovieLibrary extends React.Component { } - selectMovie = (movieID) => { - this.props.selectMovie(movieID) + selectMovie = () => { + this.props.selectMovie() } movieCollection = () => { @@ -47,7 +47,7 @@ class MovieLibrary extends React.Component { return ( < Movie movie={movie} - selectMovie={this.selectMovie()} /> + selectMovie={this.selectMovie} /> ) }) ) From 07d57f46ff9e0628a51ec72869a42c3b8cbebc57 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Mon, 24 Jun 2019 16:40:38 -0700 Subject: [PATCH 13/76] added selecting customer functionality --- src/component/Customer.js | 5 ++++- src/component/CustomerList.js | 5 ++--- src/component/Homepage.js | 5 ++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/component/Customer.js b/src/component/Customer.js index 7edf4d559..a2610a6e4 100644 --- a/src/component/Customer.js +++ b/src/component/Customer.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; const Customer = props => { - console.log(props); return (

@@ -10,6 +9,10 @@ const Customer = props => {

Number of movies checked out: {props.movies_checked_out_count}

Account credit: {props.account_credit}

+ +
-----------------------------------------
); diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index c715418a6..7952e38cc 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -11,10 +11,11 @@ class CustomerList extends Component { }; } customerCollection = () => { - return this.state.customerList.map(customer => { + return this.state.customerList.map((customer, i) => { return ( ); @@ -33,11 +34,9 @@ class CustomerList extends Component { const customerList = response.data.map(customer => { return customer; }); - console.log(customerList); this.setState({ customerList: customerList, }); - console.log('state!', this.state); }) .catch(error => { return console.log(error.message); diff --git a/src/component/Homepage.js b/src/component/Homepage.js index b8f80e4af..4ef2d1b9c 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -35,9 +35,8 @@ class Homepage extends Component { ); }; - onCustomerSelect = () => { - // this will updated selected customer - console.log('this is a callback'); + onCustomerSelect = customer => { + this.setState({ currentCustomer: customer }); }; render() { From 55cf9e2d1761fe1ac41dee0317c26c256533c843 Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 16:42:53 -0700 Subject: [PATCH 14/76] passing movie as prop when selecting one movie --- src/component/Homepage.js | 14 +++++++++++--- src/component/Movie.js | 3 ++- src/component/MovieLibrary.js | 5 +++-- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 3d15795dd..b00653fbc 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -7,11 +7,19 @@ import CustomerList from './CustomerList'; class Homepage extends Component { constructor() { super(); - this.state = {}; + this.state = { + selectedMovie: undefined + }; } - selectMovie = () => { - console.log('inside the select movie method!') + selectMovie = (movie) => { + console.log('inside the select movie method!', movie.title) + + this.setState({ + selectedMovie: movie + }) + + console.log(this.state.selectedMovie) } diff --git a/src/component/Movie.js b/src/component/Movie.js index f56c0db7c..28154de8a 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -3,7 +3,8 @@ import React from 'react' const Movie = (props) => { const selectMovie = () => { - props.selectMovie() + // console.log('in the movie component callback function', props.movie.id) + props.selectMovie(props.movie) } return ( diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 20f0ff44f..a05354618 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -37,8 +37,9 @@ class MovieLibrary extends React.Component { } - selectMovie = () => { - this.props.selectMovie() + selectMovie = (movie) => { + // console.log('in the movie library', movieID) + this.props.selectMovie(movie) } movieCollection = () => { From 812a319e476ea0a9110b687c6997f9873891ff37 Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 19:39:04 -0700 Subject: [PATCH 15/76] moved axios api request into separate method --- src/component/MovieLibrary.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index a05354618..14a67b35c 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -13,8 +13,11 @@ class MovieLibrary extends React.Component { } componentDidMount() { - URL = 'http://localhost:3000' + this.getMovies(); + } + getMovies = () => { + URL = 'http://localhost:3000' axios.get( URL + '/movies' ) .then((response) => { const movieList = response.data.map((movie) => { @@ -26,19 +29,15 @@ class MovieLibrary extends React.Component { this.setState ({ movieList: movieList }) - - console.log('state!', this.state) }) .catch((error) => { return ( console.log(error.message) ) }) - } selectMovie = (movie) => { - // console.log('in the movie library', movieID) this.props.selectMovie(movie) } From 100702f84022d4bc5a9ead4a24fd15a2988f24e0 Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 19:43:50 -0700 Subject: [PATCH 16/76] fixed indentation and erased comments --- src/component/Movie.js | 1 - src/component/MovieLibrary.js | 23 +++++++---------------- 2 files changed, 7 insertions(+), 17 deletions(-) diff --git a/src/component/Movie.js b/src/component/Movie.js index 28154de8a..caef04f8e 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -13,7 +13,6 @@ const Movie = (props) => {

Title: {props.movie.title}

Overview: {props.movie.overview}

Release Date: {props.movie.release_date}

- {/*

External ID: {props.movie.external_id}

*/} movie photo

-----------------------------------------

diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 14a67b35c..3b716a531 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -21,21 +21,17 @@ class MovieLibrary extends React.Component { axios.get( URL + '/movies' ) .then((response) => { const movieList = response.data.map((movie) => { - return ( - movie - ) - }) + return movie + }); this.setState ({ movieList: movieList - }) + }); }) .catch((error) => { - return ( - console.log(error.message) - ) - }) - } + return console.log(error.message); + }); + }; selectMovie = (movie) => { this.props.selectMovie(movie) @@ -54,12 +50,7 @@ class MovieLibrary extends React.Component { } render() { - - return ( -
- {this.movieCollection()} -
- ) + return
{this.movieCollection()}
; } } From 94ca94c11a7d5bd28aaad0948f34a366fa318532 Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 19:47:36 -0700 Subject: [PATCH 17/76] used spread operator to pass movie object into Movie --- src/component/Movie.js | 12 +++++++----- src/component/MovieLibrary.js | 7 ++++--- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/component/Movie.js b/src/component/Movie.js index caef04f8e..d2c8d26f1 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -1,4 +1,6 @@ import React from 'react' +import PropTypes from 'prop-types'; + const Movie = (props) => { @@ -9,11 +11,11 @@ const Movie = (props) => { return (
-

ID: {props.movie.id}

-

Title: {props.movie.title}

-

Overview: {props.movie.overview}

-

Release Date: {props.movie.release_date}

- movie photo +

ID: {props.id}

+

Title: {props.title}

+

Overview: {props.overview}

+

Release Date: {props.release_date}

+ movie photo

-----------------------------------------

diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 3b716a531..4b89e1572 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -5,8 +5,8 @@ import axios from 'axios'; class MovieLibrary extends React.Component { - constructor() { - super(); + constructor(props) { + super(props); this.state = { movieList: [] } @@ -42,7 +42,8 @@ class MovieLibrary extends React.Component { this.state.movieList.map((movie) => { return ( < Movie - movie={movie} + // movie={movie} + {...movie} selectMovie={this.selectMovie} /> ) }) From fe19caf1de89d10fe07fca1f170bd2c90acbe768 Mon Sep 17 00:00:00 2001 From: Angela Date: Mon, 24 Jun 2019 19:51:55 -0700 Subject: [PATCH 18/76] more syntax cleanup --- src/component/Movie.js | 15 +++++---------- src/component/MovieLibrary.js | 7 +------ 2 files changed, 6 insertions(+), 16 deletions(-) diff --git a/src/component/Movie.js b/src/component/Movie.js index d2c8d26f1..b7e9aacbf 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -1,14 +1,9 @@ -import React from 'react' +import React from 'react'; import PropTypes from 'prop-types'; const Movie = (props) => { - const selectMovie = () => { - // console.log('in the movie component callback function', props.movie.id) - props.selectMovie(props.movie) - } - return (

ID: {props.id}

@@ -16,10 +11,10 @@ const Movie = (props) => {

Overview: {props.overview}

Release Date: {props.release_date}

movie photo - +

-----------------------------------------

- ) -} + ); +}; -export default Movie \ No newline at end of file +export default Movie; \ No newline at end of file diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 4b89e1572..ae60470a6 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -33,18 +33,13 @@ class MovieLibrary extends React.Component { }); }; - selectMovie = (movie) => { - this.props.selectMovie(movie) - } - movieCollection = () => { return ( this.state.movieList.map((movie) => { return ( < Movie - // movie={movie} {...movie} - selectMovie={this.selectMovie} /> + selectMovie={this.props.selectMovie} /> ) }) ) From 2e682ca84e83953e666727ebae6d37043ddcd934 Mon Sep 17 00:00:00 2001 From: Angela Date: Tue, 25 Jun 2019 10:41:26 -0700 Subject: [PATCH 19/76] added message in Router if movie is selected --- src/component/Homepage.js | 3 ++- src/component/MovieLibrary.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 849616451..14552b6fa 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -13,7 +13,6 @@ class Homepage extends Component { } selectMovie = movie => { - console.log('inside the select movie method!', movie.title); this.setState({ selectedMovie: movie, @@ -25,6 +24,8 @@ class Homepage extends Component { navigation = () => { return ( + {this.state.selectedMovie &&

The movie, {this.state.selectedMovie.title}, has been selected

} +

Search Movies

diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index ae60470a6..959e1b00b 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -38,6 +38,7 @@ class MovieLibrary extends React.Component { this.state.movieList.map((movie) => { return ( < Movie + key={movie.id} {...movie} selectMovie={this.props.selectMovie} /> ) From 1cbb959bcc7925e863e3a9a3e3f94d9851b1aa16 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 11:14:22 -0700 Subject: [PATCH 20/76] refactored homepage to reflect code style changes and temp display of customers --- src/component/Homepage.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 14552b6fa..a4b558e53 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -9,22 +9,32 @@ class Homepage extends Component { super(); this.state = { selectedMovie: undefined, + selectedCustomer: undefined, }; } selectMovie = movie => { + this.setState({ selectedMovie: movie }); + }; - this.setState({ - selectedMovie: movie, - }); - - console.log(this.state.selectedMovie); + onCustomerSelect = customer => { + this.setState({ currentCustomer: customer }); }; navigation = () => { return ( - {this.state.selectedMovie &&

The movie, {this.state.selectedMovie.title}, has been selected

} + {this.state.selectedMovie && ( +

+ The movie, {this.state.selectedMovie.title}, has been selected +

+ )} + + {this.state.selectedCustomer && ( +

+ The customer, {this.state.selectedCustomer.name}, has been selected +

+ )}

Search Movies @@ -51,10 +61,6 @@ class Homepage extends Component { ); }; - onCustomerSelect = customer => { - this.setState({ currentCustomer: customer }); - }; - render() { return

{this.navigation()}
; } From 69b84c3caf323d5d0d85dd4411b3dfb995b64ae4 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 11:18:30 -0700 Subject: [PATCH 21/76] fixed display bug for customer --- src/component/Homepage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index a4b558e53..92cf1fcaf 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -18,7 +18,7 @@ class Homepage extends Component { }; onCustomerSelect = customer => { - this.setState({ currentCustomer: customer }); + this.setState({ selectedCustomer: customer }); }; navigation = () => { From 3bc44e375fa3334f6d7de6dbe36f8cccc4cfada7 Mon Sep 17 00:00:00 2001 From: Angela Date: Tue, 25 Jun 2019 11:19:20 -0700 Subject: [PATCH 22/76] added a get request to Rails API in MovieSearch --- src/component/MovieSearch.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 1baaa464c..e545d3863 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -1,7 +1,30 @@ import React, { Component } from 'react'; +import Axios from 'axios'; + +const getMovies = () => { + URL = 'http://localhost:3000' + axios.get( URL + '/movies' ) + .then((response) => { + const movieList = response.data.map((movie) => { + return movie + }); + + this.setState ({ + movieList: movieList + }); + }) + .catch((error) => { + return console.log(error.message); + }); +}; const MovieSearch = () => { - return

MOVIE SEARCH PLACE HOLDER

; + return ( +
+

MOVIE SEARCH PLACE HOLDER

+ {getMovies()} +
+ ) }; export default MovieSearch; From 333ca4b952f264ac28ad471f452eee47b23d1594 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 11:37:15 -0700 Subject: [PATCH 23/76] set up scaffolding for checkOut component --- src/component/CheckOut.js | 15 +++++++++++++++ src/component/Homepage.js | 29 ++++++++++++++++------------- 2 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 src/component/CheckOut.js diff --git a/src/component/CheckOut.js b/src/component/CheckOut.js new file mode 100644 index 000000000..f0cd631b3 --- /dev/null +++ b/src/component/CheckOut.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class CheckOut extends Component { + constructor(props) { + super(props); + } + render() { + return

HELLO CHECKOUT

; + } +} + +CheckOut.propTypes = {}; + +export default CheckOut; diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 92cf1fcaf..f4c735697 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import MovieLibrary from './MovieLibrary'; import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; +import CheckOut from './CheckOut'; class Homepage extends Component { constructor() { @@ -21,21 +22,18 @@ class Homepage extends Component { this.setState({ selectedCustomer: customer }); }; + displaySelected = () => { + const { selectedMovie, selectedCustomer } = this.state; + return ( + (selectedMovie || selectedCustomer) && ( + + ) + ); + }; + navigation = () => { return ( - {this.state.selectedMovie && ( -

- The movie, {this.state.selectedMovie.title}, has been selected -

- )} - - {this.state.selectedCustomer && ( -

- The customer, {this.state.selectedCustomer.name}, has been selected -

- )} -

Search Movies

@@ -62,7 +60,12 @@ class Homepage extends Component { }; render() { - return
{this.navigation()}
; + return ( +
+
{this.displaySelected()}
+
{this.navigation()}
+
+ ); } } From 06d9c709250411514828e810d5fb544ce244a1c6 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 13:26:28 -0700 Subject: [PATCH 24/76] added lifecyle func to derive states from props after intialization of object --- src/component/CheckOut.js | 21 ++++++++++++++++++++- src/component/Homepage.js | 9 ++++++--- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/component/CheckOut.js b/src/component/CheckOut.js index f0cd631b3..1b8339fb5 100644 --- a/src/component/CheckOut.js +++ b/src/component/CheckOut.js @@ -4,9 +4,28 @@ import PropTypes from 'prop-types'; class CheckOut extends Component { constructor(props) { super(props); + this.state = { + customer: props.customer, + movie: props.movie, + }; } + + static getDerivedStateFromProps(props, state) { + if (props.customer !== state.customer || props.movie !== state.movie) { + return { customer: props.customer, movie: props.movie }; + } else return null; + } + + displayCustomer = () => {}; + displayMovie = () => {}; + render() { - return

HELLO CHECKOUT

; + return ( +
+ TEST + {console.log(this.state)}; +
+ ); } } diff --git a/src/component/Homepage.js b/src/component/Homepage.js index f4c735697..c7a1e9389 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -25,9 +25,12 @@ class Homepage extends Component { displaySelected = () => { const { selectedMovie, selectedCustomer } = this.state; return ( - (selectedMovie || selectedCustomer) && ( - - ) +
+ {console.log('AAAAAHHHHHHH')} + {(selectedMovie || selectedCustomer) && ( + + )} +
); }; From acaad7a8f049b98a608f02832c32c15d6132b444 Mon Sep 17 00:00:00 2001 From: Angela Date: Tue, 25 Jun 2019 13:37:37 -0700 Subject: [PATCH 25/76] sets state so SearchedMovies returns all movies from external database based on search query --- src/component/MovieSearch.js | 74 ++++++++++++++++++++++++++++++------ 1 file changed, 63 insertions(+), 11 deletions(-) diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index e545d3863..eb2344e5c 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -1,16 +1,27 @@ import React, { Component } from 'react'; -import Axios from 'axios'; +import axios from 'axios'; +import Movie from './Movie' -const getMovies = () => { +class MovieSearch extends React.Component { + constructor() { + super(); + this.state = { + searchTitle: '', + searchedMovies: undefined + } + } + +getMovies = () => { URL = 'http://localhost:3000' - axios.get( URL + '/movies' ) + console.log('inside axios', this.state.searchTitle) + axios.get( URL + '/movies?query=' + this.state.searchTitle ) .then((response) => { const movieList = response.data.map((movie) => { return movie }); this.setState ({ - movieList: movieList + searchedMovies: movieList }); }) .catch((error) => { @@ -18,13 +29,54 @@ const getMovies = () => { }); }; -const MovieSearch = () => { - return ( -
-

MOVIE SEARCH PLACE HOLDER

- {getMovies()} -
- ) + onMovieInput = (event) => { + const updatedSearch = {} + updatedSearch[event.target.name] = event.target.value + this.setState(updatedSearch) + } + + findMovie = (event) => { + event.preventDefault(); + this.getMovies() + console.log('inside find movie', this.state.searchedMovies) + + } + + movieCollection = () => { + console.log('inside movieCollection: ', this.state.searchedMovies) + return ( + this.state.searchedMovies.map((movie) => { + return ( + < Movie + key={movie.id} + {...movie} /> + ) + }) + ) + } + + render() { + return ( +
+

MOVIE SEARCH PLACE HOLDER

+ +
+ + + + +
+ + {this.searchedMovies && this.movieCollection()} + +
+ ) + } }; export default MovieSearch; From 8dda284d5716c29ca608f333e0804c6cb9495463 Mon Sep 17 00:00:00 2001 From: Angela Date: Tue, 25 Jun 2019 13:51:01 -0700 Subject: [PATCH 26/76] DOM renders list of searched movies --- src/component/MovieSearch.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index eb2344e5c..0336fb729 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -38,24 +38,26 @@ getMovies = () => { findMovie = (event) => { event.preventDefault(); this.getMovies() - console.log('inside find movie', this.state.searchedMovies) + } movieCollection = () => { console.log('inside movieCollection: ', this.state.searchedMovies) return ( - this.state.searchedMovies.map((movie) => { - return ( - < Movie - key={movie.id} - {...movie} /> - ) - }) - ) + this.state.searchedMovies.map((movie) => { + return ( + < Movie + key={movie.id} + {...movie} /> + ) + }) + ) } render() { + console.log('inside render', this.state.searchedMovies) + return (

MOVIE SEARCH PLACE HOLDER

@@ -72,7 +74,7 @@ getMovies = () => { value='Search Movie' /> - {this.searchedMovies && this.movieCollection()} + {this.state.searchedMovies && this.movieCollection()}
) From acf30f3d6e85acfbf1e5b1269dd87c9262fb8aa3 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 13:55:20 -0700 Subject: [PATCH 27/76] refactored to functional componenet with callback, state not req --- src/component/CheckOut.js | 54 +++++++++++++++++++++------------------ src/component/Homepage.js | 8 +++++- 2 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/component/CheckOut.js b/src/component/CheckOut.js index 1b8339fb5..cef652a1f 100644 --- a/src/component/CheckOut.js +++ b/src/component/CheckOut.js @@ -1,33 +1,37 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -class CheckOut extends Component { - constructor(props) { - super(props); - this.state = { - customer: props.customer, - movie: props.movie, - }; - } +const CheckOut = ({ customer, movie, checkOutCallBack }) => { + return ( +
+ {customer && displayCustomer(customer)} + {movie && displayMovie(movie)} + {customer && movie && ( + + )} +
+ ); +}; - static getDerivedStateFromProps(props, state) { - if (props.customer !== state.customer || props.movie !== state.movie) { - return { customer: props.customer, movie: props.movie }; - } else return null; - } +const displayCustomer = customer => { + return ( +
+

Name: {customer.name}

+

ID: {customer.id}

+

Account Credit: {customer.account_credit}

+
+ ); +}; - displayCustomer = () => {}; - displayMovie = () => {}; - - render() { - return ( -
- TEST - {console.log(this.state)}; -
- ); - } -} +const displayMovie = movie => { + return ( +
+

Title: {movie.title}

+

ID: {movie.id}

+ movie photo +
+ ); +}; CheckOut.propTypes = {}; diff --git a/src/component/Homepage.js b/src/component/Homepage.js index c7a1e9389..5720c6375 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -22,13 +22,19 @@ class Homepage extends Component { this.setState({ selectedCustomer: customer }); }; + onCheckOut = () => {}; + displaySelected = () => { const { selectedMovie, selectedCustomer } = this.state; return (
{console.log('AAAAAHHHHHHH')} {(selectedMovie || selectedCustomer) && ( - + )}
); From f4cbd3e5e453b2b67e9184fea73c0da737fcac0e Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 13:57:32 -0700 Subject: [PATCH 28/76] removed console.log --- src/component/Homepage.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 5720c6375..784cc55a0 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -22,13 +22,14 @@ class Homepage extends Component { this.setState({ selectedCustomer: customer }); }; - onCheckOut = () => {}; + onCheckOut = () => { + // DOING THIS NOW + }; displaySelected = () => { const { selectedMovie, selectedCustomer } = this.state; return (
- {console.log('AAAAAHHHHHHH')} {(selectedMovie || selectedCustomer) && ( Date: Tue, 25 Jun 2019 14:23:53 -0700 Subject: [PATCH 29/76] added addToLibrary button --- src/component/Homepage.js | 14 +++++++++++++- src/component/Movie.js | 6 ++++-- src/component/MovieSearch.js | 7 +++++-- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 784cc55a0..a2be41cee 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -41,6 +41,11 @@ class Homepage extends Component { ); }; + addToLibrary = () => { + console.log('inside addToLibrary') + } + + navigation = () => { return ( @@ -54,13 +59,20 @@ class Homepage extends Component { Customer List

- + ( + + )} + /> + ( )} /> + } diff --git a/src/component/Movie.js b/src/component/Movie.js index b7e9aacbf..28903ca3d 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -1,9 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; - const Movie = (props) => { + const addLibraryButton = + const selectMovieButton = + return (

ID: {props.id}

@@ -11,7 +13,7 @@ const Movie = (props) => {

Overview: {props.overview}

Release Date: {props.release_date}

movie photo - + {props.isSearch ? addLibraryButton : selectMovieButton}

-----------------------------------------

); diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 0336fb729..14280dc99 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -7,7 +7,8 @@ class MovieSearch extends React.Component { super(); this.state = { searchTitle: '', - searchedMovies: undefined + searchedMovies: undefined, + isSearch: true } } @@ -49,7 +50,9 @@ getMovies = () => { return ( < Movie key={movie.id} - {...movie} /> + {...movie} + isSearch={this.state.isSearch} + addToLibrary={this.props.addToLibrary} /> ) }) ) From 6e87710a6cb51b959ce24ff3870f9e5c8d549524 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 14:28:49 -0700 Subject: [PATCH 30/76] added post request for rental to callback, and update state to clear selected items --- src/component/Homepage.js | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 784cc55a0..e3b6fd4a6 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -4,6 +4,7 @@ import MovieLibrary from './MovieLibrary'; import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; import CheckOut from './CheckOut'; +import axios from 'axios'; class Homepage extends Component { constructor() { @@ -23,7 +24,30 @@ class Homepage extends Component { }; onCheckOut = () => { - // DOING THIS NOW + const params = { + title: this.state.selectedMovie.title, + customer_id: this.state.selectedCustomer.id, + due_date: new Date(Date.now() + 700000000), + }; + URL = 'http://localhost:3000'; + axios + .post( + URL + + '/rentals/' + + this.state.selectedMovie.title.toString() + + '/check-out', + params + ) + .then(response => { + this.setState({ + selectedMovie: undefined, + selectedCustomer: undefined, + }); + console.log(response); + }) + .catch(error => { + return console.log(error.response); + }); }; displaySelected = () => { From d6080da52839a2ec5ccf72a733e81b277741bc62 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 16:18:17 -0700 Subject: [PATCH 31/76] merge resolved --- src/component/MovieSearch.js | 100 ++++++++++++++++------------------- 1 file changed, 46 insertions(+), 54 deletions(-) diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 14280dc99..7cf193f10 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import axios from 'axios'; -import Movie from './Movie' +import Movie from './Movie'; class MovieSearch extends React.Component { constructor() { @@ -8,80 +8,72 @@ class MovieSearch extends React.Component { this.state = { searchTitle: '', searchedMovies: undefined, - isSearch: true - } + isSearch: true, + }; } -getMovies = () => { - URL = 'http://localhost:3000' - console.log('inside axios', this.state.searchTitle) - axios.get( URL + '/movies?query=' + this.state.searchTitle ) - .then((response) => { - const movieList = response.data.map((movie) => { - return movie - }); + getMovies = () => { + URL = 'http://localhost:3000'; + console.log('inside axios', this.state.searchTitle); + axios + .get(URL + '/movies?query=' + this.state.searchTitle) + .then(response => { + const movieList = response.data.map(movie => { + return movie; + }); - this.setState ({ - searchedMovies: movieList + this.setState({ + searchedMovies: movieList, + }); + }) + .catch(error => { + return console.log(error.message); }); - }) - .catch((error) => { - return console.log(error.message); - }); -}; + }; - onMovieInput = (event) => { - const updatedSearch = {} - updatedSearch[event.target.name] = event.target.value - this.setState(updatedSearch) - } + onMovieInput = event => { + const updatedSearch = {}; + updatedSearch[event.target.name] = event.target.value; + this.setState(updatedSearch); + }; - findMovie = (event) => { + findMovie = event => { event.preventDefault(); - this.getMovies() - - - } + this.getMovies(); + }; movieCollection = () => { - console.log('inside movieCollection: ', this.state.searchedMovies) - return ( - this.state.searchedMovies.map((movie) => { - return ( - < Movie - key={movie.id} - {...movie} - isSearch={this.state.isSearch} - addToLibrary={this.props.addToLibrary} /> - ) - }) - ) - } + console.log('inside movieCollection: ', this.state.searchedMovies); + return this.state.searchedMovies.map(movie => { + return ( + + ); + }); + }; render() { - console.log('inside render', this.state.searchedMovies) + console.log('inside render', this.state.searchedMovies); return (

MOVIE SEARCH PLACE HOLDER

- - - - + + + +
{this.state.searchedMovies && this.movieCollection()} -
- ) + ); } -}; +} export default MovieSearch; From ae532a3021f2f2ad2cc5734deba892a7f5b0958a Mon Sep 17 00:00:00 2001 From: Angela Date: Tue, 25 Jun 2019 16:21:17 -0700 Subject: [PATCH 32/76] added proptypes to all child components --- src/component/Customer.js | 8 ++++++++ src/component/CustomerList.js | 4 ++++ src/component/Movie.js | 9 +++++++++ src/component/MovieLibrary.js | 6 ++++++ src/component/MovieSearch.js | 8 ++++++-- 5 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/component/Customer.js b/src/component/Customer.js index a2610a6e4..06747dc31 100644 --- a/src/component/Customer.js +++ b/src/component/Customer.js @@ -18,4 +18,12 @@ const Customer = props => { ); }; +// Customer.PropTypes = { +// name: PropTypes.string, +// id: PropTypes.number, +// movies_checked_out_count: PropTypes.number, +// account_credit: PropTypes.number, +// customerSelectCallback: PropTypes.func +// } + export default Customer; diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index 7952e38cc..c75c6cc5e 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -48,4 +48,8 @@ class CustomerList extends Component { } } +CustomerList.propTypes = { + customerSelectCallback: PropTypes.func +} + export default CustomerList; diff --git a/src/component/Movie.js b/src/component/Movie.js index 28903ca3d..39ec83479 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -19,4 +19,13 @@ const Movie = (props) => { ); }; +Movie.propTypes = { + id: PropTypes.number, + title: PropTypes.string, + overview: PropTypes.string, + release_date: PropTypes.string, + image_url: PropTypes.string, + addToLibrary: PropTypes.func, + selectMovie: PropTypes.func +} export default Movie; \ No newline at end of file diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 959e1b00b..2f11287c3 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -2,6 +2,7 @@ import React from 'react' import Movie from './Movie' import axios from 'axios'; +import PropTypes from 'prop-types'; class MovieLibrary extends React.Component { @@ -51,4 +52,9 @@ class MovieLibrary extends React.Component { } } +MovieLibrary.propTypes = { + selectMovie: PropTypes.func, + +} + export default MovieLibrary diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 14280dc99..ecdb95442 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import axios from 'axios'; -import Movie from './Movie' +import Movie from './Movie'; +import PropTypes from 'prop-types'; + class MovieSearch extends React.Component { constructor() { @@ -14,7 +16,6 @@ class MovieSearch extends React.Component { getMovies = () => { URL = 'http://localhost:3000' - console.log('inside axios', this.state.searchTitle) axios.get( URL + '/movies?query=' + this.state.searchTitle ) .then((response) => { const movieList = response.data.map((movie) => { @@ -84,4 +85,7 @@ getMovies = () => { } }; +MovieSearch.propTypes = { + addToLibrary: PropTypes.func +} export default MovieSearch; From d552a73b8f8ef29791c4cf1058242484b395ca83 Mon Sep 17 00:00:00 2001 From: Angela Date: Tue, 25 Jun 2019 16:22:14 -0700 Subject: [PATCH 33/76] added customer.js proptypes --- src/component/Customer.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/component/Customer.js b/src/component/Customer.js index 06747dc31..349d61f45 100644 --- a/src/component/Customer.js +++ b/src/component/Customer.js @@ -18,12 +18,12 @@ const Customer = props => { ); }; -// Customer.PropTypes = { -// name: PropTypes.string, -// id: PropTypes.number, -// movies_checked_out_count: PropTypes.number, -// account_credit: PropTypes.number, -// customerSelectCallback: PropTypes.func -// } +Customer.propTypes = { + name: PropTypes.string, + id: PropTypes.number, + movies_checked_out_count: PropTypes.number, + account_credit: PropTypes.number, + customerSelectCallback: PropTypes.func +} export default Customer; From 43a3d47c0de358976e839811bc0ba8ea6691c748 Mon Sep 17 00:00:00 2001 From: Angela Date: Tue, 25 Jun 2019 16:29:58 -0700 Subject: [PATCH 34/76] finished PropTypes and erased unnecessary console.logs --- src/App.js | 4 ---- src/component/CheckOut.js | 10 +++++++--- src/component/Movie.js | 2 +- src/component/MovieSearch.js | 8 +------- 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/App.js b/src/App.js index 4bbaf2143..4a75d5500 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,4 @@ import React, { Component } from 'react'; - -import MovieLibrary from './component/MovieLibrary' - - import Homepage from './component/Homepage'; import './App.css'; diff --git a/src/component/CheckOut.js b/src/component/CheckOut.js index cef652a1f..24dc5ee4a 100644 --- a/src/component/CheckOut.js +++ b/src/component/CheckOut.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; const CheckOut = ({ customer, movie, checkOutCallBack }) => { @@ -28,11 +28,15 @@ const displayMovie = movie => {

Title: {movie.title}

ID: {movie.id}

- movie photo +
); }; -CheckOut.propTypes = {}; +CheckOut.propTypes = { + movie: PropTypes.string, + customer: PropTypes.string, + checkOutCallback: PropTypes.func +}; export default CheckOut; diff --git a/src/component/Movie.js b/src/component/Movie.js index 39ec83479..5875398bb 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -12,7 +12,7 @@ const Movie = (props) => {

Title: {props.title}

Overview: {props.overview}

Release Date: {props.release_date}

- movie photo + {props.isSearch ? addLibraryButton : selectMovieButton}

-----------------------------------------

diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index ecdb95442..c594f81e6 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -4,7 +4,7 @@ import Movie from './Movie'; import PropTypes from 'prop-types'; -class MovieSearch extends React.Component { +class MovieSearch extends Component { constructor() { super(); this.state = { @@ -40,12 +40,9 @@ getMovies = () => { findMovie = (event) => { event.preventDefault(); this.getMovies() - - } movieCollection = () => { - console.log('inside movieCollection: ', this.state.searchedMovies) return ( this.state.searchedMovies.map((movie) => { return ( @@ -60,8 +57,6 @@ getMovies = () => { } render() { - console.log('inside render', this.state.searchedMovies) - return (

MOVIE SEARCH PLACE HOLDER

@@ -79,7 +74,6 @@ getMovies = () => { {this.state.searchedMovies && this.movieCollection()} -
) } From f285f2b576db13881abd9b9952f03b0e678eb96d Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 16:36:33 -0700 Subject: [PATCH 35/76] added dynamic button display to movie --- src/component/Movie.js | 46 +++++++++++------ src/component/MovieLibrary.js | 93 +++++++++++++++++------------------ src/component/MovieSearch.js | 2 - 3 files changed, 76 insertions(+), 65 deletions(-) diff --git a/src/component/Movie.js b/src/component/Movie.js index 28903ca3d..8d34789c5 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -1,22 +1,36 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Movie = (props) => { +const Movie = props => { + const addLibraryButton = ( + + ); + const selectMovieButton = ( + + ); - const addLibraryButton = - const selectMovieButton = + const dynamicButton = () => { + if (props.selectable) { + return selectMovieButton; + } else if (!props.in_library) { + return addLibraryButton; + } + }; - return ( -
-

ID: {props.id}

-

Title: {props.title}

-

Overview: {props.overview}

-

Release Date: {props.release_date}

- movie photo - {props.isSearch ? addLibraryButton : selectMovieButton} -

-----------------------------------------

-
- ); -}; + return ( +
+ {console.log(props)} +

ID: {props.id}

+

Title: {props.title}

+

Overview: {props.overview}

+

Release Date: {props.release_date}

+ movie photo + {dynamicButton()} +

-----------------------------------------

+
+ ); +}; -export default Movie; \ No newline at end of file +export default Movie; diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 959e1b00b..56985f847 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -1,54 +1,53 @@ - -import React from 'react' -import Movie from './Movie' +import React from 'react'; +import Movie from './Movie'; import axios from 'axios'; class MovieLibrary extends React.Component { - - constructor(props) { - super(props); - this.state = { - movieList: [] - } - } - - componentDidMount() { - this.getMovies(); - } - - getMovies = () => { - URL = 'http://localhost:3000' - axios.get( URL + '/movies' ) - .then((response) => { - const movieList = response.data.map((movie) => { - return movie - }); - - this.setState ({ - movieList: movieList - }); - }) - .catch((error) => { - return console.log(error.message); - }); + constructor(props) { + super(props); + this.state = { + movieList: [], }; + } + + componentDidMount() { + this.getMovies(); + } + + getMovies = () => { + URL = 'http://localhost:3000'; + axios + .get(URL + '/movies') + .then(response => { + const movieList = response.data.map(movie => { + return movie; + }); - movieCollection = () => { - return ( - this.state.movieList.map((movie) => { - return ( - < Movie - key={movie.id} - {...movie} - selectMovie={this.props.selectMovie} /> - ) - }) - ) - } - - render() { - return
{this.movieCollection()}
; - } + this.setState({ + movieList: movieList, + }); + }) + .catch(error => { + return console.log(error.message); + }); + }; + + movieCollection = () => { + return this.state.movieList.map(movie => { + return ( + + ); + }); + }; + + render() { + return
{this.movieCollection()}
; + } } -export default MovieLibrary +export default MovieLibrary; diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 7cf193f10..4d09ad6c3 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -8,7 +8,6 @@ class MovieSearch extends React.Component { this.state = { searchTitle: '', searchedMovies: undefined, - isSearch: true, }; } @@ -49,7 +48,6 @@ class MovieSearch extends React.Component { ); From 937d7dccefd6e754493faf66a5707439366f13a7 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Tue, 25 Jun 2019 16:41:20 -0700 Subject: [PATCH 36/76] debug conflict --- src/component/Movie.js | 19 ++++++++----------- src/component/MovieLibrary.js | 11 +++-------- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/src/component/Movie.js b/src/component/Movie.js index 96903f4dc..c10ef4cd5 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -35,15 +35,12 @@ const Movie = props => { export default Movie; - - Movie.propTypes = { - id: PropTypes.number, - title: PropTypes.string, - overview: PropTypes.string, - release_date: PropTypes.string, - image_url: PropTypes.string, - addToLibrary: PropTypes.func, - selectMovie: PropTypes.func -} -export default Movie; + id: PropTypes.number, + title: PropTypes.string, + overview: PropTypes.string, + release_date: PropTypes.string, + image_url: PropTypes.string, + addToLibrary: PropTypes.func, + selectMovie: PropTypes.func, +}; diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index ade3775da..c8f443e26 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -51,13 +51,8 @@ class MovieLibrary extends React.Component { } } -<<<<<<< HEAD -export default MovieLibrary; -======= MovieLibrary.propTypes = { - selectMovie: PropTypes.func, - -} + selectMovie: PropTypes.func, +}; -export default MovieLibrary ->>>>>>> 42228cdeb295a4a6af015da51835ed728ea238fd +export default MovieLibrary; From 365cbd1adf5a8b0d47c67d9308d895cd4ffcacc0 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Wed, 26 Jun 2019 11:18:56 -0700 Subject: [PATCH 37/76] added callback error massage method to movieSearch --- src/component/MovieSearch.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 3b9da3d88..275e4e15e 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -14,7 +14,6 @@ class MovieSearch extends Component { getMovies = () => { URL = 'http://localhost:3000'; - console.log('inside axios', this.state.searchTitle); axios .get(URL + '/movies?query=' + this.state.searchTitle) .then(response => { @@ -25,9 +24,15 @@ class MovieSearch extends Component { this.setState({ searchedMovies: movieList, }); + + if (movieList.length === 0) { + const errorMessage = 'No movies found.'; + this.props.errorCallback(errorMessage); + } }) .catch(error => { - return console.log(error.message); + console.log(error.message); + this.props.errorCallback(error.message); }); }; From 9c084df89675f165aea995c078524ae9abd26b78 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Wed, 26 Jun 2019 11:20:08 -0700 Subject: [PATCH 38/76] added callback error massage method to movieLibrary --- src/component/MovieLibrary.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index ade3775da..141316bb0 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -29,7 +29,8 @@ class MovieLibrary extends React.Component { }); }) .catch(error => { - return console.log(error.message); + console.log(error.message); + this.props.errorCallback(error.message); }); }; @@ -51,13 +52,8 @@ class MovieLibrary extends React.Component { } } -<<<<<<< HEAD -export default MovieLibrary; -======= MovieLibrary.propTypes = { - selectMovie: PropTypes.func, - -} + selectMovie: PropTypes.func, +}; -export default MovieLibrary ->>>>>>> 42228cdeb295a4a6af015da51835ed728ea238fd +export default MovieLibrary; From f4fa53e26829d29d132cc6e1b29d7ccb2e3a6d76 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Wed, 26 Jun 2019 11:23:25 -0700 Subject: [PATCH 39/76] added callback error massage method to customerList --- src/component/CustomerList.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index c75c6cc5e..a4e45bf2d 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -37,9 +37,15 @@ class CustomerList extends Component { this.setState({ customerList: customerList, }); + + if (customerList.length === 0) { + const errorMessage = 'No customers in system.'; + this.props.errorCallback(errorMessage); + } }) .catch(error => { - return console.log(error.message); + console.log(error.message); + this.props.errorCallback(error.message); }); }; @@ -49,7 +55,7 @@ class CustomerList extends Component { } CustomerList.propTypes = { - customerSelectCallback: PropTypes.func -} + customerSelectCallback: PropTypes.func, +}; export default CustomerList; From f50a6f970bc7ecd68c6ed70eac159f5329f08448 Mon Sep 17 00:00:00 2001 From: Angela Date: Wed, 26 Jun 2019 11:58:24 -0700 Subject: [PATCH 40/76] added post request to add movie from exernal into library --- src/component/Homepage.js | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index e4295c246..cbd7858ec 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -29,6 +29,8 @@ class Homepage extends Component { customer_id: this.state.selectedCustomer.id, due_date: new Date(Date.now() + 700000000), }; + + console.log('check out params', params) URL = 'http://localhost:3000'; axios .post( @@ -65,8 +67,35 @@ class Homepage extends Component { ); }; - addToLibrary = () => { + addToLibrary = (movie) => { console.log('inside addToLibrary') + console.log('looking at movie', movie) + + const params = { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url.substring(31, movie.image_url.length), + inventory: 10, + external_id: movie.external_id + }; + + // console.log('params image url', params['image_url'].substring(31, params['image_url'].length)) + + URL = 'http://localhost:3000'; + axios + .post( + URL + + '/movies?', + params + ) + .then(response => { + console.log('successful post add to library', response); + }) + .catch(error => { + return console.log(error.response); + }); + } From 1a379f8f9d52dd317ea403474d8fdb32c4172b4c Mon Sep 17 00:00:00 2001 From: Angela Date: Wed, 26 Jun 2019 12:35:17 -0700 Subject: [PATCH 41/76] erased unnecessary console.logs --- src/component/Homepage.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/component/Homepage.js b/src/component/Homepage.js index cbd7858ec..50d396b64 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -68,9 +68,6 @@ class Homepage extends Component { }; addToLibrary = (movie) => { - console.log('inside addToLibrary') - console.log('looking at movie', movie) - const params = { title: movie.title, overview: movie.overview, @@ -80,8 +77,6 @@ class Homepage extends Component { external_id: movie.external_id }; - // console.log('params image url', params['image_url'].substring(31, params['image_url'].length)) - URL = 'http://localhost:3000'; axios .post( @@ -97,8 +92,7 @@ class Homepage extends Component { }); } - - + navigation = () => { return ( From c5c405822004cba7ccc4da5f18c500fdbd50465f Mon Sep 17 00:00:00 2001 From: qqdipps Date: Wed, 26 Jun 2019 13:09:54 -0700 Subject: [PATCH 42/76] added Error Message component and implemeted callback func --- src/component/ErrorMessage.js | 12 ++++++++++++ src/component/Homepage.js | 37 ++++++++++++++++++++++++++--------- src/component/Movie.js | 20 ++++++++----------- 3 files changed, 48 insertions(+), 21 deletions(-) create mode 100644 src/component/ErrorMessage.js diff --git a/src/component/ErrorMessage.js b/src/component/ErrorMessage.js new file mode 100644 index 000000000..ed4e35afb --- /dev/null +++ b/src/component/ErrorMessage.js @@ -0,0 +1,12 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const ErrorMessage = ({ message }) => { + return ( +
+

Error: {message}

+
+ ); +}; + +export default ErrorMessage; diff --git a/src/component/Homepage.js b/src/component/Homepage.js index e4295c246..a93e8dde0 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -4,6 +4,7 @@ import MovieLibrary from './MovieLibrary'; import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; import CheckOut from './CheckOut'; +import ErrorMessage from './ErrorMessage'; import axios from 'axios'; class Homepage extends Component { @@ -12,9 +13,14 @@ class Homepage extends Component { this.state = { selectedMovie: undefined, selectedCustomer: undefined, + errorMessage: undefined, }; } + handleErrorMessages = message => { + this.setState({ errorMessage: message }); + }; + selectMovie = movie => { this.setState({ selectedMovie: movie }); }; @@ -46,7 +52,8 @@ class Homepage extends Component { console.log(response); }) .catch(error => { - return console.log(error.response); + console.log(error.response); + this.handleErrorMessages(error.message); }); }; @@ -66,9 +73,8 @@ class Homepage extends Component { }; addToLibrary = () => { - console.log('inside addToLibrary') - } - + console.log('inside addToLibrary'); + }; navigation = () => { return ( @@ -83,31 +89,44 @@ class Homepage extends Component { Customer List

- ( - + )} /> ( - + )} /> } + render={() => ( + + )} /> ); }; render() { + const { errorMessage } = this.state; return (
+ {errorMessage && }
{this.displaySelected()}
{this.navigation()}
diff --git a/src/component/Movie.js b/src/component/Movie.js index 96903f4dc..a8c65adf1 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -33,17 +33,13 @@ const Movie = props => { ); }; -export default Movie; - - - Movie.propTypes = { - id: PropTypes.number, - title: PropTypes.string, - overview: PropTypes.string, - release_date: PropTypes.string, - image_url: PropTypes.string, - addToLibrary: PropTypes.func, - selectMovie: PropTypes.func -} + id: PropTypes.number, + title: PropTypes.string, + overview: PropTypes.string, + release_date: PropTypes.string, + image_url: PropTypes.string, + addToLibrary: PropTypes.func, + selectMovie: PropTypes.func, +}; export default Movie; From 562322f08b93befc21732d51b0b1acb8183ef6d1 Mon Sep 17 00:00:00 2001 From: Angela Date: Wed, 26 Jun 2019 13:23:20 -0700 Subject: [PATCH 43/76] added bootstrap --- package-lock.json | 5 +++++ package.json | 1 + public/index.html | 4 ++++ src/component/Movie.css | 3 +++ src/component/Movie.js | 5 ++++- src/component/MovieLibrary.css | 0 src/component/MovieLibrary.js | 1 + src/index.js | 1 + 8 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/component/Movie.css create mode 100644 src/component/MovieLibrary.css diff --git a/package-lock.json b/package-lock.json index 9bc9f54a4..4081138c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2428,6 +2428,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index eeff31f0a..42e177ba0 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "axios": "^0.19.0", + "bootstrap": "^4.3.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", diff --git a/public/index.html b/public/index.html index ed0ebafa1..28d5b09a5 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,7 @@ manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> + + + + diff --git a/src/component/Movie.css b/src/component/Movie.css new file mode 100644 index 000000000..4b0c4505f --- /dev/null +++ b/src/component/Movie.css @@ -0,0 +1,3 @@ +.bootstrap_button { + /* background: blue; */ +} \ No newline at end of file diff --git a/src/component/Movie.js b/src/component/Movie.js index c10ef4cd5..39b73ca66 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -1,9 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; +import './Movie.css' +import 'bootstrap/dist/css/bootstrap.css'; + const Movie = props => { const addLibraryButton = ( - ); diff --git a/src/component/MovieLibrary.css b/src/component/MovieLibrary.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index c8f443e26..0a3488405 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -2,6 +2,7 @@ import React from 'react'; import Movie from './Movie'; import axios from 'axios'; import PropTypes from 'prop-types'; +import './MovieLibrary.css' class MovieLibrary extends React.Component { constructor(props) { diff --git a/src/index.js b/src/index.js index fae3e3500..c3736a925 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import 'bootstrap/dist/css/bootstrap.css'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; From 1456f4b5dca9a4c6cbdd5285e33b8243e854ef97 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Wed, 26 Jun 2019 13:23:22 -0700 Subject: [PATCH 44/76] implemented clear error callback func and sent to components --- src/component/CustomerList.js | 1 + src/component/Homepage.js | 8 ++++++++ src/component/MovieLibrary.js | 1 + src/component/MovieSearch.js | 11 +++++++---- 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index a4e45bf2d..481a2edab 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -23,6 +23,7 @@ class CustomerList extends Component { }; componentDidMount() { + this.props.clearErrorCallback(); this.getCustomers(); } diff --git a/src/component/Homepage.js b/src/component/Homepage.js index a93e8dde0..e7990f2da 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -21,6 +21,10 @@ class Homepage extends Component { this.setState({ errorMessage: message }); }; + clearErrorMessages = () => { + this.setState({ errorMessage: undefined }); + }; + selectMovie = movie => { this.setState({ selectedMovie: movie }); }; @@ -49,6 +53,7 @@ class Homepage extends Component { selectedMovie: undefined, selectedCustomer: undefined, }); + this.clearErrorMessages(); console.log(response); }) .catch(error => { @@ -95,6 +100,7 @@ class Homepage extends Component { )} /> @@ -105,6 +111,7 @@ class Homepage extends Component { )} /> @@ -115,6 +122,7 @@ class Homepage extends Component { )} /> diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 141316bb0..8265a0e7b 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -12,6 +12,7 @@ class MovieLibrary extends React.Component { } componentDidMount() { + this.props.clearErrorCallback(); this.getMovies(); } diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 275e4e15e..1a9be5352 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -4,27 +4,30 @@ import Movie from './Movie'; import PropTypes from 'prop-types'; class MovieSearch extends Component { - constructor() { - super(); + constructor(props) { + super(props); this.state = { searchTitle: '', searchedMovies: undefined, }; } + componentDidMount = () => { + this.props.clearErrorCallback(); + }; + getMovies = () => { URL = 'http://localhost:3000'; axios .get(URL + '/movies?query=' + this.state.searchTitle) .then(response => { + this.props.clearErrorCallback(); const movieList = response.data.map(movie => { return movie; }); - this.setState({ searchedMovies: movieList, }); - if (movieList.length === 0) { const errorMessage = 'No movies found.'; this.props.errorCallback(errorMessage); From b870dd9b15646578d0a4c1215a3303092ce00db6 Mon Sep 17 00:00:00 2001 From: Angela Date: Wed, 26 Jun 2019 13:32:19 -0700 Subject: [PATCH 45/76] added bootstrap button --- src/component/Movie.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/component/Movie.js b/src/component/Movie.js index 39b73ca66..9b5e7ba1c 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -6,12 +6,12 @@ import 'bootstrap/dist/css/bootstrap.css'; const Movie = props => { const addLibraryButton = ( - ); const selectMovieButton = ( - + ); const dynamicButton = () => { @@ -30,7 +30,8 @@ const Movie = props => {

Overview: {props.overview}

Release Date: {props.release_date}

movie photo - {dynamicButton()} +
{dynamicButton()}
+

-----------------------------------------

); From b00d1466f58adb6e48c1c056ac79763152c544fe Mon Sep 17 00:00:00 2001 From: Angela Date: Wed, 26 Jun 2019 14:12:37 -0700 Subject: [PATCH 46/76] added bootstrap cards for movie list display --- src/App.css | 1 + .../{MovieLibrary.css => Homepage.css} | 0 src/component/Homepage.js | 23 +++++++++++-------- src/component/Movie.css | 11 +++++++-- src/component/Movie.js | 19 ++++++++------- src/component/MovieLibrary.js | 4 ++-- src/component/MovieList.css | 10 ++++++++ src/component/MovieSearch.js | 8 ++++--- 8 files changed, 49 insertions(+), 27 deletions(-) rename src/component/{MovieLibrary.css => Homepage.css} (100%) create mode 100644 src/component/MovieList.css diff --git a/src/App.css b/src/App.css index c5c6e8a68..5ce19645c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ .App { text-align: center; + background: rgb(40, 26, 101); } .App-logo { diff --git a/src/component/MovieLibrary.css b/src/component/Homepage.css similarity index 100% rename from src/component/MovieLibrary.css rename to src/component/Homepage.css diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 50d396b64..ee0fd55cb 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -5,6 +5,7 @@ import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; import CheckOut from './CheckOut'; import axios from 'axios'; +import './Homepage.css' class Homepage extends Component { constructor() { @@ -30,7 +31,6 @@ class Homepage extends Component { due_date: new Date(Date.now() + 700000000), }; - console.log('check out params', params) URL = 'http://localhost:3000'; axios .post( @@ -96,15 +96,18 @@ class Homepage extends Component { navigation = () => { return ( -

- Search Movies -

-

- Movie Library -

-

- Customer List -

+ { }; return ( -
- {console.log(props)} -

ID: {props.id}

-

Title: {props.title}

-

Overview: {props.overview}

-

Release Date: {props.release_date}

- movie photo -
{dynamicButton()}
- -

-----------------------------------------

+
+ movie photo +
+

ID: {props.id}

+

Title: {props.title}

+

Overview: {props.overview}

+

Release Date: {props.release_date}

+
{dynamicButton()}
+
); }; diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 0a3488405..6aedb71d9 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -2,7 +2,7 @@ import React from 'react'; import Movie from './Movie'; import axios from 'axios'; import PropTypes from 'prop-types'; -import './MovieLibrary.css' +import './MovieList.css' class MovieLibrary extends React.Component { constructor(props) { @@ -48,7 +48,7 @@ class MovieLibrary extends React.Component { }; render() { - return
{this.movieCollection()}
; + return
{this.movieCollection()}
; } } diff --git a/src/component/MovieList.css b/src/component/MovieList.css new file mode 100644 index 000000000..fe66b2c91 --- /dev/null +++ b/src/component/MovieList.css @@ -0,0 +1,10 @@ +.card-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +h1.search-title { + color: white; +} diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 3b9da3d88..4ab9b64f8 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import axios from 'axios'; import Movie from './Movie'; import PropTypes from 'prop-types'; +import './MovieList.css' class MovieSearch extends Component { constructor() { @@ -58,7 +59,7 @@ class MovieSearch extends Component { render() { return (
-

MOVIE SEARCH PLACE HOLDER

+

Search for Your Movie Here:

@@ -66,8 +67,9 @@ class MovieSearch extends Component {
- - {this.state.searchedMovies && this.movieCollection()} +
+ {this.state.searchedMovies && this.movieCollection()} +
); } From e7a72c91dddc124950b45d62844e70c15b5e376c Mon Sep 17 00:00:00 2001 From: Angela Date: Wed, 26 Jun 2019 14:35:13 -0700 Subject: [PATCH 47/76] added bootstrap nav bar --- src/App.css | 1 - src/component/Homepage.js | 27 ++++++++++++++++----------- src/component/Movie.js | 4 ++-- src/component/MovieList.css | 11 +++++++++-- src/component/MovieSearch.js | 8 +++----- 5 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/App.css b/src/App.css index 5ce19645c..c5c6e8a68 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,5 @@ .App { text-align: center; - background: rgb(40, 26, 101); } .App-logo { diff --git a/src/component/Homepage.js b/src/component/Homepage.js index ee0fd55cb..77316e309 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -96,18 +96,23 @@ class Homepage extends Component { navigation = () => { return ( - )} /> @@ -165,6 +153,7 @@ class Homepage extends Component { customerSelectCallback={this.onCustomerSelect} errorCallback={this.handleErrorMessages} clearErrorCallback={this.clearErrorMessages} + hideWelcomeCallback={this.hideWelcome} /> )} /> @@ -176,6 +165,7 @@ class Homepage extends Component { selectMovie={this.selectMovie} errorCallback={this.handleErrorMessages} clearErrorCallback={this.clearErrorMessages} + hideWelcomeCallback={this.hideWelcome} /> )} /> diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 015785516..961a7e1aa 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -2,7 +2,7 @@ import React from 'react'; import Movie from './Movie'; import axios from 'axios'; import PropTypes from 'prop-types'; -import './MovieList.css' +import './MovieList.css'; class MovieLibrary extends React.Component { constructor(props) { @@ -14,6 +14,7 @@ class MovieLibrary extends React.Component { componentDidMount() { this.props.clearErrorCallback(); + this.props.hideWelcomeCallback(); this.getMovies(); } @@ -50,7 +51,7 @@ class MovieLibrary extends React.Component { }; render() { - return
{this.movieCollection()}
; + return
{this.movieCollection()}
; } } diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 095aba3ca..29de414cb 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import axios from 'axios'; import Movie from './Movie'; import PropTypes from 'prop-types'; -import './MovieList.css' +import './MovieList.css'; class MovieSearch extends Component { constructor(props) { @@ -15,6 +15,7 @@ class MovieSearch extends Component { componentDidMount = () => { this.props.clearErrorCallback(); + this.props.hideWelcomeCallback(); }; getMovies = () => { @@ -67,13 +68,20 @@ class MovieSearch extends Component { render() { return (
-
- + + - +
-
+
{this.state.searchedMovies && this.movieCollection()}
From f97ae6e532d0f3afbb99a18a35a028842a1f00c5 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 01:24:55 -0700 Subject: [PATCH 52/76] rearrange error placement and added boot strap alert to error --- src/component/ErrorMessage.js | 2 +- src/component/Homepage.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/component/ErrorMessage.js b/src/component/ErrorMessage.js index ed4e35afb..04b2d3123 100644 --- a/src/component/ErrorMessage.js +++ b/src/component/ErrorMessage.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; const ErrorMessage = ({ message }) => { return ( -
+

Error: {message}

); diff --git a/src/component/Homepage.js b/src/component/Homepage.js index e990087e9..777d5a917 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -134,6 +134,10 @@ class Homepage extends Component {
+ {this.state.errorMessage && ( + + )} + ( @@ -177,9 +181,8 @@ class Homepage extends Component { const { errorMessage, showWelcome } = this.state; return (
- {errorMessage && } -
{this.displaySelected()}
{this.navigation()}
+
{this.displaySelected()}
{showWelcome && }
); From af4933cddfe444976840d05be67888fe744184c2 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 01:31:32 -0700 Subject: [PATCH 53/76] fixed bug in chechout for undfined func --- src/component/CheckOut.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/component/CheckOut.js b/src/component/CheckOut.js index 1a6cd7ca7..cbefc3499 100644 --- a/src/component/CheckOut.js +++ b/src/component/CheckOut.js @@ -1,13 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -const CheckOut = ({ - customer, - movie, - checkOutCallBack, - hideWelcomeCallback, -}) => { - hideWelcomeCallback(); +const CheckOut = ({ customer, movie, checkOutCallBack }) => { return (
{customer && displayCustomer(customer)} From 8ef25f7ced164ef655e50ad178c806693aa9b6ad Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 08:42:39 -0700 Subject: [PATCH 54/76] styling and rearranging selected comp for CheckOut, looks ok, not great --- src/component/CheckOut.css | 27 +++++++++++++++++++++++++++ src/component/CheckOut.js | 23 +++++++++++++---------- src/component/Homepage.js | 2 +- 3 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 src/component/CheckOut.css diff --git a/src/component/CheckOut.css b/src/component/CheckOut.css new file mode 100644 index 000000000..93ffe8dad --- /dev/null +++ b/src/component/CheckOut.css @@ -0,0 +1,27 @@ +.checkoutContainer{ + /* display: flex; + flex-flow: column; + font-size: 1.5em; */ + +} + +.container { + display: flex; + justify-content: space-around; + text-align: center; + width: 600px; + +} + +.content { + display: inline; + /* align-self: left; */ +} + +h2{ + font-size: 1em; +} + +.sml-img{ + height: 50px; +} diff --git a/src/component/CheckOut.js b/src/component/CheckOut.js index cbefc3499..d25a6b15f 100644 --- a/src/component/CheckOut.js +++ b/src/component/CheckOut.js @@ -1,13 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import './CheckOut.css'; const CheckOut = ({ customer, movie, checkOutCallBack }) => { return ( -
+
{customer && displayCustomer(customer)} {movie && displayMovie(movie)} {customer && movie && ( - + )}
); @@ -15,20 +18,20 @@ const CheckOut = ({ customer, movie, checkOutCallBack }) => { const displayCustomer = customer => { return ( -
-

Name: {customer.name}

-

ID: {customer.id}

-

Account Credit: {customer.account_credit}

+
+

Customer: {customer.name}

+

ID: {customer.id}

+

Account Credit: {customer.account_credit}

); }; const displayMovie = movie => { return ( -
-

Title: {movie.title}

-

ID: {movie.id}

- +
+

Movie: {movie.title}

+

ID: {movie.id}

+
); }; diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 777d5a917..ccd5cd3f2 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -137,6 +137,7 @@ class Homepage extends Component { {this.state.errorMessage && ( )} +
{this.displaySelected()}
{this.navigation()}
-
{this.displaySelected()}
{showWelcome && }
); From a8b44b845aeb687cc93031d3c8c2e311d54f182a Mon Sep 17 00:00:00 2001 From: Angela Date: Thu, 27 Jun 2019 13:28:44 -0700 Subject: [PATCH 55/76] added message when movie is added to library --- src/component/CustomerList.js | 2 ++ src/component/Homepage.js | 21 +++++++++++++++++++++ src/component/LibraryMessage.js | 12 ++++++++++++ src/component/Movie.js | 5 +++++ src/component/MovieLibrary.js | 2 ++ src/component/MovieSearch.js | 2 ++ 6 files changed, 44 insertions(+) create mode 100644 src/component/LibraryMessage.js diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index e1b1d5a5a..e30e2d86e 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -26,6 +26,8 @@ class CustomerList extends Component { componentDidMount() { this.props.clearErrorCallback(); this.props.hideWelcomeCallback(); + this.props.addLibraryCallback(); + this.props.hideLibraryCallback(); this.getCustomers(); } diff --git a/src/component/Homepage.js b/src/component/Homepage.js index ccd5cd3f2..fc8f349fc 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -5,6 +5,7 @@ import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; import CheckOut from './CheckOut'; import ErrorMessage from './ErrorMessage'; +import LibraryMessage from './LibraryMessage' import Welcome from './Welcome'; import axios from 'axios'; import './Homepage.css'; @@ -16,6 +17,7 @@ class Homepage extends Component { selectedMovie: undefined, selectedCustomer: undefined, errorMessage: undefined, + addToLibraryMessage: undefined, showWelcome: true, }; } @@ -32,6 +34,14 @@ class Homepage extends Component { this.setState({ errorMessage: undefined }); }; + handleAddToLibrary = (message) => { + this.setState({addToLibraryMessage: message}) + } + + clearAddToLibrary = () => { + this.setState({addToLibraryMessage: undefined}) + } + selectMovie = movie => { this.setState({ selectedMovie: movie }); }; @@ -100,10 +110,12 @@ class Homepage extends Component { .post(URL + '/movies?', params) .then(response => { console.log('successful post add to library', response); + this.handleAddToLibrary(`${movie.title} has been added to library`) }) .catch(error => { return console.log(error.response); }); + this.clearAddToLibrary() }; navigation = () => { @@ -137,6 +149,9 @@ class Homepage extends Component { {this.state.errorMessage && ( )} + {this.state.addToLibraryMessage && ( + + )}
{this.displaySelected()}
)} @@ -158,6 +175,8 @@ class Homepage extends Component { customerSelectCallback={this.onCustomerSelect} errorCallback={this.handleErrorMessages} clearErrorCallback={this.clearErrorMessages} + addLibraryCallback={this.handleAddToLibrary} + hideLibraryCallback={this.clearAddToLibrary} hideWelcomeCallback={this.hideWelcome} /> )} @@ -170,6 +189,8 @@ class Homepage extends Component { selectMovie={this.selectMovie} errorCallback={this.handleErrorMessages} clearErrorCallback={this.clearErrorMessages} + addLibraryCallback={this.handleAddToLibrary} + hideLibraryCallback={this.clearAddToLibrary} hideWelcomeCallback={this.hideWelcome} /> )} diff --git a/src/component/LibraryMessage.js b/src/component/LibraryMessage.js new file mode 100644 index 000000000..f32ff3646 --- /dev/null +++ b/src/component/LibraryMessage.js @@ -0,0 +1,12 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LibraryMessage = ({ message }) => { + return ( +
+

{message}

+
+ ); +}; + +export default LibraryMessage; \ No newline at end of file diff --git a/src/component/Movie.js b/src/component/Movie.js index 0425a2112..2e6626d17 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -10,6 +10,9 @@ const Movie = props => { Add to Library ); + const inLibraryMessage = ( +
In Movie Library
+ ) const selectMovieButton = ( ); @@ -19,6 +22,8 @@ const Movie = props => { return selectMovieButton; } else if (!props.in_library) { return addLibraryButton; + } else { + return inLibraryMessage; } }; diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 961a7e1aa..56c437085 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -15,6 +15,8 @@ class MovieLibrary extends React.Component { componentDidMount() { this.props.clearErrorCallback(); this.props.hideWelcomeCallback(); + this.props.addLibraryCallback(); + this.props.hideLibraryCallback(); this.getMovies(); } diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 29de414cb..6328dfea4 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -16,6 +16,8 @@ class MovieSearch extends Component { componentDidMount = () => { this.props.clearErrorCallback(); this.props.hideWelcomeCallback(); + this.props.addLibraryCallback(); + this.props.hideLibraryCallback(); }; getMovies = () => { From 831655f7816b66353aedcf554df91bcff167646e Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 14:29:21 -0700 Subject: [PATCH 56/76] refactoring errormessage to generic alert component --- src/component/{ErrorMessage.js => Alert.js} | 6 +++--- src/component/CheckOut.js | 4 +++- src/component/Homepage.js | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) rename src/component/{ErrorMessage.js => Alert.js} (53%) diff --git a/src/component/ErrorMessage.js b/src/component/Alert.js similarity index 53% rename from src/component/ErrorMessage.js rename to src/component/Alert.js index 04b2d3123..f3f7f78ad 100644 --- a/src/component/ErrorMessage.js +++ b/src/component/Alert.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -const ErrorMessage = ({ message }) => { +const Alert = ({ message, type }) => { return ( -
+

Error: {message}

); }; -export default ErrorMessage; +export default Alert; diff --git a/src/component/CheckOut.js b/src/component/CheckOut.js index d25a6b15f..a1f53d6f0 100644 --- a/src/component/CheckOut.js +++ b/src/component/CheckOut.js @@ -1,14 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import './CheckOut.css'; +import Alert from './Alert'; const CheckOut = ({ customer, movie, checkOutCallBack }) => { + let showSuccessAlert = undefined; return (
{customer && displayCustomer(customer)} {movie && displayMovie(movie)} {customer && movie && ( - )} diff --git a/src/component/Homepage.js b/src/component/Homepage.js index ccd5cd3f2..a0ff792b5 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -4,7 +4,7 @@ import MovieLibrary from './MovieLibrary'; import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; import CheckOut from './CheckOut'; -import ErrorMessage from './ErrorMessage'; +import Alert from './Alert'; import Welcome from './Welcome'; import axios from 'axios'; import './Homepage.css'; @@ -135,7 +135,7 @@ class Homepage extends Component { {this.state.errorMessage && ( - + )}
{this.displaySelected()}
From 05ead74e95b92c2230e291262797a096d8f8bc50 Mon Sep 17 00:00:00 2001 From: Angela Date: Thu, 27 Jun 2019 16:25:18 -0700 Subject: [PATCH 57/76] added modal to show movie information on side --- package-lock.json | 268 +++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/component/Movie.js | 87 +++++++++---- 3 files changed, 330 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4081138c2..b5c580676 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1162,6 +1162,39 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@react-bootstrap/react-popper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", + "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==", + "requires": { + "babel-runtime": "6.x.x", + "create-react-context": "^0.2.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.5", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.2.tgz", + "integrity": "sha512-gZF+r35a5R3sHhtoQi6YhtG2fRzwVuassZ+GvrlieHG531ocF2oJvwe0/gYtAd8bDr30MlET3ctFyJ/r6gJZfw==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -3364,6 +3397,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3714,6 +3752,15 @@ "sha.js": "^2.4.8" } }, + "create-react-context": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", + "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4271,6 +4318,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -4397,6 +4452,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -5237,6 +5300,35 @@ "bser": "^2.0.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -6441,6 +6533,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -7764,6 +7865,11 @@ "array-includes": "^3.0.3" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -8403,6 +8509,15 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -9056,6 +9171,11 @@ "ts-pnp": "^1.0.0" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -9997,6 +10117,25 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "property-information": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.1.0.tgz", @@ -10169,6 +10308,33 @@ "whatwg-fetch": "3.0.0" } }, + "react-bootstrap": { + "version": "1.0.0-beta.9", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.9.tgz", + "integrity": "sha512-M0BYLuuUdMITJ16+DDDb1p4vWV87csEBi/uOxZYODuDZh7hvbrJVahfvPXcqeqq4eEpNL+PKSlqb9fNaY0HZyA==", + "requires": { + "@babel/runtime": "^7.4.2", + "@react-bootstrap/react-popper": "1.2.1", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.0", + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "invariant": "^2.2.4", + "keycode": "^2.2.0", + "popper.js": "^1.14.7", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^1.2.0", + "react-transition-group": "^4.0.0", + "uncontrollable": "^6.1.0", + "warning": "^4.0.3" + } + }, + "react-context-toolbox": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz", + "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==" + }, "react-dev-utils": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz", @@ -10267,6 +10433,50 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-overlays": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz", + "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==", + "requires": { + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-popper": "^1.3.2", + "uncontrollable": "^6.0.0", + "warning": "^4.0.2" + } + }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + } + } + }, "react-router": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz", @@ -10373,6 +10583,27 @@ "workbox-webpack-plugin": "4.2.0" } }, + "react-transition-group": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.1.tgz", + "integrity": "sha512-K/N1wqJ2GRP2yj3WBqEUYa0KV5fiaAWpUfU9SpHOHefeKvyrO+VrnMBML21M19QZoVbDZKmuQFHZYoMMi1xuJA==", + "requires": { + "@babel/runtime": "^7.4.5", + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz", + "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -11955,11 +12186,21 @@ "mime-types": "~2.1.24" } }, + "typed-styles": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz", + "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.20", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", + "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", @@ -11981,6 +12222,25 @@ } } }, + "uncontrollable": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz", + "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==", + "requires": { + "@babel/runtime": "^7.4.5", + "invariant": "^2.2.4" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz", + "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -12351,6 +12611,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 42e177ba0..e092f2f8c 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "axios": "^0.19.0", "bootstrap": "^4.3.1", "react": "^16.8.6", + "react-bootstrap": "^1.0.0-beta.9", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", "react-scripts": "3.0.1" diff --git a/src/component/Movie.js b/src/component/Movie.js index 2e6626d17..cdf91c3e9 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -1,44 +1,78 @@ import React from 'react'; import PropTypes from 'prop-types'; import './Movie.css' -import 'bootstrap/dist/css/bootstrap.css'; +import Modal from 'react-bootstrap/Modal' +import Button from 'react-bootstrap/Button' +class Movie extends React.Component { + constructor(props, context) { + super(props, context) -const Movie = props => { - const addLibraryButton = ( - ); - const inLibraryMessage = ( + inLibraryMessage = (
In Movie Library
) - const selectMovieButton = ( - + selectMovieButton = ( + ); - const dynamicButton = () => { - if (props.selectable) { - return selectMovieButton; - } else if (!props.in_library) { - return addLibraryButton; + dynamicButton = () => { + if (this.props.selectable) { + return this.selectMovieButton; + } else if (!this.props.in_library) { + return this.addLibraryButton; } else { - return inLibraryMessage; + return this.inLibraryMessage; } }; - return ( -
- movie photo -
-

ID: {props.id}

-

Title: {props.title}

-

Overview: {props.overview}

-

Release Date: {props.release_date}

-
{dynamicButton()}
-
-
- ); + render() { + return ( + <> +
+

{this.props.title}

+ movie photo +
+ + + + {this.props.title} + + +

External ID: {this.props.external_id}

+

Overview: {this.props.overview}

+

Release Date: {this.props.release_date}

+ + + + {this.dynamicButton()} + + + + ); + } }; Movie.propTypes = { @@ -47,9 +81,10 @@ Movie.propTypes = { overview: PropTypes.string, release_date: PropTypes.string, image_url: PropTypes.string, + external_id: PropTypes.number, addToLibrary: PropTypes.func, selectMovie: PropTypes.func, }; export default Movie; - +// render(); From d82e2d4a0f2cc4503e143e64f1dae02afa57f46d Mon Sep 17 00:00:00 2001 From: Angela Date: Thu, 27 Jun 2019 16:36:07 -0700 Subject: [PATCH 58/76] added margins for movie list --- src/component/Customer.css | 3 +++ src/component/Customer.js | 2 +- src/component/CustomerList.css | 2 ++ src/component/Movie.css | 17 ++++++++++++++--- src/component/Movie.js | 6 +++--- src/component/MovieList.css | 1 + 6 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/component/Customer.css b/src/component/Customer.css index e69de29bb..211858b40 100644 --- a/src/component/Customer.css +++ b/src/component/Customer.css @@ -0,0 +1,3 @@ +.customer-card { + padding-top: 15px; +} \ No newline at end of file diff --git a/src/component/Customer.js b/src/component/Customer.js index 863da01dc..3acd798dc 100644 --- a/src/component/Customer.js +++ b/src/component/Customer.js @@ -4,7 +4,7 @@ import './Customer.css' const Customer = props => { return ( -
+

{props.name} ID: {props.id}

diff --git a/src/component/CustomerList.css b/src/component/CustomerList.css index ebdc522c3..e18b8a8bc 100644 --- a/src/component/CustomerList.css +++ b/src/component/CustomerList.css @@ -3,4 +3,6 @@ flex-direction: row; flex-wrap: wrap; justify-content: space-around; + margin-top: 25px; + } \ No newline at end of file diff --git a/src/component/Movie.css b/src/component/Movie.css index f68b3ed1f..19b7e9491 100644 --- a/src/component/Movie.css +++ b/src/component/Movie.css @@ -1,10 +1,21 @@ .card { width: 350px; - height: auto; + height: 530px; } img.card-img-top { width: 300px; - margin-left: 25px; - margin-right: 25px; + /* margin-left: 25px; + margin-right: 25px; */ + margin: 25px; +} + +.movie-title { + font-weight: bolder; + margin-top: 5px; + margin-bottom: 0px; +} + +.movie-list-container { + margin-top: 25px; } \ No newline at end of file diff --git a/src/component/Movie.js b/src/component/Movie.js index cdf91c3e9..3f4df0257 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -48,9 +48,9 @@ class Movie extends React.Component { render() { return ( - <> +
-

{this.props.title}

+

{this.props.title}

movie photo
@@ -70,7 +70,7 @@ class Movie extends React.Component { {this.dynamicButton()} - +
); } }; diff --git a/src/component/MovieList.css b/src/component/MovieList.css index 2aa65b7de..a68432d6e 100644 --- a/src/component/MovieList.css +++ b/src/component/MovieList.css @@ -8,6 +8,7 @@ form.movie-search-form { margin-top: 50px; + margin-bottom: 10px; } input.btn { margin-left: 10px; From dd975d7cdcd9ce670ce567f29f9b56e108e2cb70 Mon Sep 17 00:00:00 2001 From: Angela Date: Thu, 27 Jun 2019 17:05:59 -0700 Subject: [PATCH 59/76] fixed card sizes to be uniform --- src/component/Movie.css | 4 +--- src/component/Movie.js | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/component/Movie.css b/src/component/Movie.css index 19b7e9491..fec7a32a1 100644 --- a/src/component/Movie.css +++ b/src/component/Movie.css @@ -1,12 +1,10 @@ -.card { +div.movie-card-container { width: 350px; height: 530px; } img.card-img-top { width: 300px; - /* margin-left: 25px; - margin-right: 25px; */ margin: 25px; } diff --git a/src/component/Movie.js b/src/component/Movie.js index 3f4df0257..08b7c0c46 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -49,7 +49,7 @@ class Movie extends React.Component { render() { return (
-
+

{this.props.title}

movie photo
From 91f43cda5fd7a801fe882398831147628addda51 Mon Sep 17 00:00:00 2001 From: Angela Date: Thu, 27 Jun 2019 17:10:31 -0700 Subject: [PATCH 60/76] fixed button on movie --- src/component/Movie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/Movie.js b/src/component/Movie.js index 08b7c0c46..e32a7230c 100644 --- a/src/component/Movie.js +++ b/src/component/Movie.js @@ -30,7 +30,7 @@ class Movie extends React.Component { ); inLibraryMessage = ( -
In Movie Library
+
In Movie Library
) selectMovieButton = ( From 584cc39c232c3a9046a0a5c4865b31598c7c9072 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 22:10:30 -0700 Subject: [PATCH 61/76] refactoring message components to Alert --- src/component/Alert.js | 6 ++-- src/component/Homepage.js | 67 +++++++++++------------------------- src/component/MovieSearch.js | 2 -- 3 files changed, 23 insertions(+), 52 deletions(-) diff --git a/src/component/Alert.js b/src/component/Alert.js index f3f7f78ad..73c82e7ff 100644 --- a/src/component/Alert.js +++ b/src/component/Alert.js @@ -1,10 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Alert = ({ message, type }) => { +const Alert = ({ text, type }) => { return ( -
-

Error: {message}

+
+

Error: {text}

); }; diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 7f3620fc6..0b6de9289 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -5,7 +5,7 @@ import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; import CheckOut from './CheckOut'; import Alert from './Alert'; -import LibraryMessage from './LibraryMessage' +import LibraryMessage from './LibraryMessage'; import Welcome from './Welcome'; import axios from 'axios'; import './Homepage.css'; @@ -16,8 +16,7 @@ class Homepage extends Component { this.state = { selectedMovie: undefined, selectedCustomer: undefined, - errorMessage: undefined, - addToLibraryMessage: undefined, + messageAlert: { text: '', type: '' }, showWelcome: true, }; } @@ -26,22 +25,9 @@ class Homepage extends Component { this.setState({ showWelcome: false }); }; - handleErrorMessages = message => { - this.setState({ errorMessage: message }); + handleMessageAlerts = (text, type) => { + this.setState({ messageAlert: { text: text, type: type } }); }; - - clearErrorMessages = () => { - this.setState({ errorMessage: undefined }); - }; - - handleAddToLibrary = (message) => { - this.setState({addToLibraryMessage: message}) - } - - clearAddToLibrary = () => { - this.setState({addToLibraryMessage: undefined}) - } - selectMovie = movie => { this.setState({ selectedMovie: movie }); }; @@ -71,12 +57,12 @@ class Homepage extends Component { selectedMovie: undefined, selectedCustomer: undefined, }); - this.clearErrorMessages(); - console.log(response); + + this.handleMessageAlerts('Movie checked out', 'Success'); }) .catch(error => { console.log(error.response); - this.handleErrorMessages(error.message); + this.handleMessageAlerts(error.response, 'danger'); }); }; @@ -110,12 +96,17 @@ class Homepage extends Component { .post(URL + '/movies?', params) .then(response => { console.log('successful post add to library', response); - this.handleAddToLibrary(`${movie.title} has been added to library`) + this.handleMessageAlerts( + `${movie.title} has been added to library`, + 'success' + ); }) .catch(error => { - return console.log(error.response); + console.log(error.response); + if (error.response.data.errors) { + this.handleMessageAlerts(error.response.data.errors, 'danger'); + } }); - this.clearAddToLibrary() }; navigation = () => { @@ -145,52 +136,34 @@ class Homepage extends Component {
- - {this.state.errorMessage && ( - - )} - {this.state.addToLibraryMessage && ( - - )} + {this.state.messageAlert.text && }
{this.displaySelected()}
- ( )} /> - ( )} /> - ( )} @@ -200,7 +173,7 @@ class Homepage extends Component { }; render() { - const { errorMessage, showWelcome } = this.state; + const { showWelcome } = this.state; return (
{this.navigation()}
diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 6328dfea4..29de414cb 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -16,8 +16,6 @@ class MovieSearch extends Component { componentDidMount = () => { this.props.clearErrorCallback(); this.props.hideWelcomeCallback(); - this.props.addLibraryCallback(); - this.props.hideLibraryCallback(); }; getMovies = () => { From 8b7a108cfd4df89ef0f071a49ebed6b219ba657f Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 22:22:47 -0700 Subject: [PATCH 62/76] refactored MovieSearch errormessage handling to alerts --- src/component/Homepage.js | 3 +-- src/component/LibraryMessage.js | 12 ------------ src/component/MovieSearch.js | 8 ++++---- 3 files changed, 5 insertions(+), 18 deletions(-) delete mode 100644 src/component/LibraryMessage.js diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 0b6de9289..7dcadfdaa 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -5,7 +5,6 @@ import MovieSearch from './MovieSearch'; import CustomerList from './CustomerList'; import CheckOut from './CheckOut'; import Alert from './Alert'; -import LibraryMessage from './LibraryMessage'; import Welcome from './Welcome'; import axios from 'axios'; import './Homepage.css'; @@ -58,7 +57,7 @@ class Homepage extends Component { selectedCustomer: undefined, }); - this.handleMessageAlerts('Movie checked out', 'Success'); + this.handleMessageAlerts('Movie checked out', 'success'); }) .catch(error => { console.log(error.response); diff --git a/src/component/LibraryMessage.js b/src/component/LibraryMessage.js deleted file mode 100644 index f32ff3646..000000000 --- a/src/component/LibraryMessage.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const LibraryMessage = ({ message }) => { - return ( -
-

{message}

-
- ); -}; - -export default LibraryMessage; \ No newline at end of file diff --git a/src/component/MovieSearch.js b/src/component/MovieSearch.js index 29de414cb..aab30b1ba 100644 --- a/src/component/MovieSearch.js +++ b/src/component/MovieSearch.js @@ -14,16 +14,16 @@ class MovieSearch extends Component { } componentDidMount = () => { - this.props.clearErrorCallback(); + this.props.alertCallback('', ''); this.props.hideWelcomeCallback(); }; getMovies = () => { URL = 'http://localhost:3000'; + this.props.alertCallback('', ''); axios .get(URL + '/movies?query=' + this.state.searchTitle) .then(response => { - this.props.clearErrorCallback(); const movieList = response.data.map(movie => { return movie; }); @@ -32,12 +32,12 @@ class MovieSearch extends Component { }); if (movieList.length === 0) { const errorMessage = 'No movies found.'; - this.props.errorCallback(errorMessage); + this.props.alertCallback(errorMessage, 'danger'); } }) .catch(error => { console.log(error.message); - this.props.errorCallback(error.message); + this.props.alertCallback(error.message, 'danger'); }); }; From 7840cba657007ae9cbac51309a49434ccfde94d5 Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 22:25:08 -0700 Subject: [PATCH 63/76] refactored error messages to handling alerts --- src/component/MovieLibrary.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/component/MovieLibrary.js b/src/component/MovieLibrary.js index 56c437085..69fd6b4b8 100644 --- a/src/component/MovieLibrary.js +++ b/src/component/MovieLibrary.js @@ -12,13 +12,11 @@ class MovieLibrary extends React.Component { }; } - componentDidMount() { - this.props.clearErrorCallback(); + componentDidMount = () => { + this.props.alertCallback('', ''); this.props.hideWelcomeCallback(); - this.props.addLibraryCallback(); - this.props.hideLibraryCallback(); this.getMovies(); - } + }; getMovies = () => { URL = 'http://localhost:3000'; @@ -35,7 +33,7 @@ class MovieLibrary extends React.Component { }) .catch(error => { console.log(error.message); - this.props.errorCallback(error.message); + this.props.alertCallback(error.message, 'danger'); }); }; From 7b67c43a1f19ee0ff05a4f2b50fff270347631ef Mon Sep 17 00:00:00 2001 From: qqdipps Date: Thu, 27 Jun 2019 22:48:14 -0700 Subject: [PATCH 64/76] finished cleaning up and refactoring alerts and related callback func --- src/component/Alert.js | 2 +- src/component/CustomerList.js | 12 +++++------- src/component/Homepage.js | 26 ++++++++++++++++++-------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/component/Alert.js b/src/component/Alert.js index 73c82e7ff..fea87c17a 100644 --- a/src/component/Alert.js +++ b/src/component/Alert.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; const Alert = ({ text, type }) => { return (
-

Error: {text}

+

Alert: {text}

); }; diff --git a/src/component/CustomerList.js b/src/component/CustomerList.js index e30e2d86e..a9ad5b467 100644 --- a/src/component/CustomerList.js +++ b/src/component/CustomerList.js @@ -23,13 +23,11 @@ class CustomerList extends Component { }); }; - componentDidMount() { - this.props.clearErrorCallback(); + componentDidMount = () => { + this.props.alertCallback('', ''); this.props.hideWelcomeCallback(); - this.props.addLibraryCallback(); - this.props.hideLibraryCallback(); this.getCustomers(); - } + }; getCustomers = () => { URL = 'http://localhost:3000'; @@ -45,12 +43,12 @@ class CustomerList extends Component { if (customerList.length === 0) { const errorMessage = 'No customers in system.'; - this.props.errorCallback(errorMessage); + this.props.alertCallback(errorMessage, 'danger'); } }) .catch(error => { console.log(error.message); - this.props.errorCallback(error.message); + this.props.alertCallback(error.message, 'danger'); }); }; diff --git a/src/component/Homepage.js b/src/component/Homepage.js index 7dcadfdaa..03d627cea 100644 --- a/src/component/Homepage.js +++ b/src/component/Homepage.js @@ -28,10 +28,16 @@ class Homepage extends Component { this.setState({ messageAlert: { text: text, type: type } }); }; selectMovie = movie => { + if (this.state.messageAlert.text) { + this.handleMessageAlerts('', ''); + } this.setState({ selectedMovie: movie }); }; onCustomerSelect = customer => { + if (this.state.messageAlert.text) { + this.handleMessageAlerts('', ''); + } this.setState({ selectedCustomer: customer }); }; @@ -52,12 +58,16 @@ class Homepage extends Component { params ) .then(response => { + this.handleMessageAlerts( + `The movie, ${ + this.state.selectedMovie.title + }, has been checked out to ${this.state.selectedCustomer.name}.`, + 'success' + ); this.setState({ selectedMovie: undefined, selectedCustomer: undefined, }); - - this.handleMessageAlerts('Movie checked out', 'success'); }) .catch(error => { console.log(error.response); @@ -112,22 +122,22 @@ class Homepage extends Component { return (