From 8d0291fa25437e18aca0effb98a4d534e86948cd Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Mon, 24 Jun 2019 14:08:27 -0700 Subject: [PATCH 01/39] app set up --- package.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/package.json b/package.json index e7e4a7c62..b3eb42e1a 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,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 1aa77d24502e075c888ef9aca2262ad38215ff8e Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Mon, 24 Jun 2019 16:09:36 -0700 Subject: [PATCH 02/39] created new component files --- src/components/Customer.js | 0 src/components/Customers.css | 0 src/components/Library.css | 0 src/components/Library.js | 0 src/components/Search.css | 0 src/components/Search.js | 0 6 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/Customer.js create mode 100644 src/components/Customers.css create mode 100644 src/components/Library.css create mode 100644 src/components/Library.js create mode 100644 src/components/Search.css create mode 100644 src/components/Search.js diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Customers.css b/src/components/Customers.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Library.css b/src/components/Library.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Library.js b/src/components/Library.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Search.css b/src/components/Search.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..e69de29bb From 6383ffc9a36977707bae9b1026ad6e0a18a7d73c Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Mon, 24 Jun 2019 16:55:53 -0700 Subject: [PATCH 03/39] can show all movies in library in app --- package-lock.json | 32 +++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 43 +++++++++++++++++++++++++++++++-------- src/components/Library.js | 25 +++++++++++++++++++++++ 4 files changed, 92 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2207e63b9..47823f065 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 b3eb42e1a..3aae7f405 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-scripts": "3.0.1" diff --git a/src/App.js b/src/App.js index 203067e4d..669cbb344 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,43 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import axios from 'axios'; +import Library from './components/Library'; class App extends Component { + constructor(props) { + super(props); + this.state = { + allMovies: [], + allCustomers: [], + tmdbId: null, + customerId: null, + movieId: null, + errorMessage: null, + } + } + + componentDidMount() { + axios.get('http://localhost:3000/movies') + .then((response) => { + console.log('response.data is:', response.data); + this.setState({ + allMovies: response.data + }); + console.log('allMovies is:',this.state.allMovies) + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }) + }) + } + + render() { return ( -
-
- logo -

Welcome to React

-
-

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

+
+ Video Store App + < Library allMovies={this.state.allMovies}/>
); } diff --git a/src/components/Library.js b/src/components/Library.js index e69de29bb..b22d14d4e 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './Library.css'; + +const Library = (props) => { + const {allMovies} = props; + + const movies = allMovies.map((movie, i) => { + return ( +
+

{movie.title}

+

{movie.overview}

+

{movie.release_date}

+
+ ) + }); + + return ( +
+ {movies} +
+ ) +} + +export default Library; \ No newline at end of file From d56ee928d725c0a6ea5f3e94688dd2cdc52f2d96 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 12:42:43 -0700 Subject: [PATCH 04/39] added customer and movie components --- src/components/Customer.css | 0 src/components/Customers.js | 0 src/components/Movie.css | 0 src/components/Movie.js | 0 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/Customer.css create mode 100644 src/components/Customers.js create mode 100644 src/components/Movie.css create mode 100644 src/components/Movie.js diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Customers.js b/src/components/Customers.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Movie.css b/src/components/Movie.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..e69de29bb From 0271b66c22e09278ccc2049ac8612eeadd265478 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 12:45:32 -0700 Subject: [PATCH 05/39] renamed library to MovieList and Customers to CustomerList --- src/App.js | 4 ++-- src/components/{Customers.css => CustomersList.css} | 0 src/components/{Customers.js => CustomersList.js} | 0 src/components/{Library.css => MovieList.css} | 0 src/components/{Library.js => MovieList.js} | 6 +++--- 5 files changed, 5 insertions(+), 5 deletions(-) rename src/components/{Customers.css => CustomersList.css} (100%) rename src/components/{Customers.js => CustomersList.js} (100%) rename src/components/{Library.css => MovieList.css} (100%) rename src/components/{Library.js => MovieList.js} (83%) diff --git a/src/App.js b/src/App.js index 669cbb344..0d76a1768 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import './App.css'; import axios from 'axios'; -import Library from './components/Library'; +import MovieList from './components/MovieList'; class App extends Component { constructor(props) { @@ -37,7 +37,7 @@ class App extends Component { return (
Video Store App - < Library allMovies={this.state.allMovies}/> + < MovieList allMovies={this.state.allMovies}/>
); } diff --git a/src/components/Customers.css b/src/components/CustomersList.css similarity index 100% rename from src/components/Customers.css rename to src/components/CustomersList.css diff --git a/src/components/Customers.js b/src/components/CustomersList.js similarity index 100% rename from src/components/Customers.js rename to src/components/CustomersList.js diff --git a/src/components/Library.css b/src/components/MovieList.css similarity index 100% rename from src/components/Library.css rename to src/components/MovieList.css diff --git a/src/components/Library.js b/src/components/MovieList.js similarity index 83% rename from src/components/Library.js rename to src/components/MovieList.js index b22d14d4e..0530054dc 100644 --- a/src/components/Library.js +++ b/src/components/MovieList.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './Library.css'; +import './MovieList.css'; -const Library = (props) => { +const MovieList = (props) => { const {allMovies} = props; const movies = allMovies.map((movie, i) => { @@ -22,4 +22,4 @@ const Library = (props) => { ) } -export default Library; \ No newline at end of file +export default MovieList; \ No newline at end of file From 04cb166868a274cf5827d4cc34c460f45027ab80 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 13:23:32 -0700 Subject: [PATCH 06/39] working on displaying all customers and all movies --- src/App.js | 18 +++++++++++++++++ src/components/Customer.js | 23 ++++++++++++++++++++++ src/components/CustomerList.js | 34 +++++++++++++++++++++++++++++++++ src/components/CustomersList.js | 0 src/components/Movie.js | 16 ++++++++++++++++ src/components/MovieList.js | 16 +++++++++------- 6 files changed, 100 insertions(+), 7 deletions(-) create mode 100644 src/components/CustomerList.js delete mode 100644 src/components/CustomersList.js diff --git a/src/App.js b/src/App.js index 0d76a1768..0847c2bfa 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import './App.css'; import axios from 'axios'; import MovieList from './components/MovieList'; +import CustomerList from './components/CustomerList'; class App extends Component { constructor(props) { @@ -32,12 +33,29 @@ class App extends Component { }) } + // componentDidMount() { + // axios.get('http://localhost:3000/customers') + // .then((response) => { + // console.log('response.data is:', response.data); + // this.setState({ + // allCustomers: response.data + // }); + // console.log('allCustomers is:',this.state.allCustomers) + // }) + // .catch((error) => { + // this.setState({ + // errorMessage: error.message + // }) + // }) + // } + render() { return (
Video Store App < MovieList allMovies={this.state.allMovies}/> + {/* < CustomerList allCustomers={this.state.allCustomers}/> */}
); } diff --git a/src/components/Customer.js b/src/components/Customer.js index e69de29bb..9802c0039 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +const Customer = (props) => { + const {id, name, registered_at, address, city, state, postal_code, phone, account_credit, movies_checked_out_count} = props; + + return ( +
+

{name}

+

{id}

+

{phone}

+

{account_credit}

+

{movies_checked_out_count}

+

{registered_at}

+

{address}

+

{city}

+

{state}

+

{postal_code}

+
+ ) +} + +export default Customer; \ No newline at end of file diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..e67c1b0d0 --- /dev/null +++ b/src/components/CustomerList.js @@ -0,0 +1,34 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './CustomersList.css'; +import Customer from './Customer'; + +const CustomerList = (props) => { + const {allCustomers} = props; + + const customerCards = allCustomers.map((customer, i) => { + return ( + < Customer + key={i} + id={customer.id} + registerd_at={customer.registerd_at} + name={customer.name} + address={customer.address} + city={customer.city} + state={customer.state} + postal_code={customer.postal_code} + phone={customer.phone} + account_credit={customer.account_credit} + movies_checked_out_count={customer.movies_checked_out_count} + /> + ) + }); + + return ( +
+ {customerCards} +
+ ) +} + +export default CustomerList; \ No newline at end of file diff --git a/src/components/CustomersList.js b/src/components/CustomersList.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/Movie.js b/src/components/Movie.js index e69de29bb..877634c02 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +const Movie = (props) => { + const {title, overview, release_date} = props; + + return ( +
+

{title}

+

{overview}

+

{release_date}

+
+ ) +} + +export default Movie; \ No newline at end of file diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 0530054dc..5ea4432d4 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -1,23 +1,25 @@ import React from 'react'; import PropTypes from 'prop-types'; import './MovieList.css'; +import Movie from './Movie'; const MovieList = (props) => { const {allMovies} = props; - const movies = allMovies.map((movie, i) => { + const movieCards = allMovies.map((movie, i) => { return ( -
-

{movie.title}

-

{movie.overview}

-

{movie.release_date}

-
+ < Movie + key={i} + title={movie.title} + overview={movie.overview} + release_date={movie.release_date} + /> ) }); return (
- {movies} + {movieCards}
) } From 5564c98bb27e1ecb5cd83bd25d5b08be4ec6f895 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 13:29:24 -0700 Subject: [PATCH 07/39] added get requests for customers and movies to the same componentDidMount --- src/App.js | 32 ++++++++++++++------------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index 0847c2bfa..09c05c781 100644 --- a/src/App.js +++ b/src/App.js @@ -31,31 +31,27 @@ class App extends Component { errorMessage: error.message }) }) + axios.get('http://localhost:3000/customers') + .then((response) => { + console.log('response.data is:', response.data); + this.setState({ + allCustomers: response.data + }); + console.log('allCustomers is:',this.state.allCustomers) + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }) + }) } - - // componentDidMount() { - // axios.get('http://localhost:3000/customers') - // .then((response) => { - // console.log('response.data is:', response.data); - // this.setState({ - // allCustomers: response.data - // }); - // console.log('allCustomers is:',this.state.allCustomers) - // }) - // .catch((error) => { - // this.setState({ - // errorMessage: error.message - // }) - // }) - // } - render() { return (
Video Store App < MovieList allMovies={this.state.allMovies}/> - {/* < CustomerList allCustomers={this.state.allCustomers}/> */} + < CustomerList allCustomers={this.state.allCustomers}/>
); } From 1549d2934ba6d9d1505b8f54f73eab85bd0ebb42 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 14:05:30 -0700 Subject: [PATCH 08/39] added React Router to App --- package-lock.json | 102 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 46 +++++++++++++++------ 3 files changed, 136 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47823f065..9bc9f54a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5635,6 +5635,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", @@ -5809,6 +5814,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", @@ -5819,6 +5837,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", @@ -8166,6 +8192,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", @@ -10226,6 +10262,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", @@ -10607,6 +10689,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", @@ -11717,6 +11804,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", @@ -12154,6 +12251,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 3aae7f405..eeff31f0a 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "axios": "^0.19.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-router-dom": "^5.0.1", "react-scripts": "3.0.1" }, "scripts": { diff --git a/src/App.js b/src/App.js index 09c05c781..18b1f1990 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import axios from 'axios'; import MovieList from './components/MovieList'; import CustomerList from './components/CustomerList'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; class App extends Component { constructor(props) { @@ -21,23 +22,23 @@ class App extends Component { axios.get('http://localhost:3000/movies') .then((response) => { console.log('response.data is:', response.data); - this.setState({ - allMovies: response.data + this.setState({ + allMovies: response.data }); - console.log('allMovies is:',this.state.allMovies) + console.log('allMovies is:', this.state.allMovies) }) .catch((error) => { this.setState({ errorMessage: error.message }) }) - axios.get('http://localhost:3000/customers') + axios.get('http://localhost:3000/customers') .then((response) => { console.log('response.data is:', response.data); - this.setState({ - allCustomers: response.data + this.setState({ + allCustomers: response.data }); - console.log('allCustomers is:',this.state.allCustomers) + console.log('allCustomers is:', this.state.allCustomers) }) .catch((error) => { this.setState({ @@ -45,14 +46,33 @@ class App extends Component { }) }) } - + + render() { return ( -
- Video Store App - < MovieList allMovies={this.state.allMovies}/> - < CustomerList allCustomers={this.state.allCustomers}/> -
+ +
+
    +
  • + Movies +
    • +
  • + Customers +
    • +
+ +
+ + } + /> + } + /> +
+ ); } } From 54f3d1954e5a81e2ec972d29d6af59a794ca008b Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 14:25:22 -0700 Subject: [PATCH 09/39] react router working and can show all movies or all customers --- src/App.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 18b1f1990..30a9692d0 100644 --- a/src/App.js +++ b/src/App.js @@ -67,9 +67,7 @@ class App extends Component { path="/movies" render={(props) => } /> - } + } />
From bb8fb8a88f84c04902612837e2f0ee63c4bd992d Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 15:23:29 -0700 Subject: [PATCH 10/39] added functionality to select customer and select movie --- src/App.js | 25 +++++++++++++++++++++++-- src/components/Customer.js | 6 +++++- src/components/CustomerList.js | 3 ++- src/components/Movie.js | 6 +++++- src/components/MovieList.js | 4 +++- 5 files changed, 38 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 30a9692d0..14109ac6e 100644 --- a/src/App.js +++ b/src/App.js @@ -47,12 +47,32 @@ class App extends Component { }) } + onSelectMovie = (movieId) => { + const selectedMovie = this.state.allMovies.find(movie => movie.id === movieId) + console.log('movieId is', movieId) + console.log('selectedMovie.id is', selectedMovie.id) + this.setState({ + movieId: selectedMovie.id + }); + } + + onSelectCustomer = (customerId) => { + const selectedCustomer = this.state.allCustomers.find(customer => customer.id === customerId) + console.log('customerId is', customerId) + console.log('selectedCustomer.id is', selectedCustomer.id) + this.setState({ + customerId: selectedCustomer.id + }); + } render() { return (
    +
  • + Home +
  • Movies
    • @@ -63,11 +83,12 @@ class App extends Component {
    + } + render={(props) => } /> - } + } />
diff --git a/src/components/Customer.js b/src/components/Customer.js index 9802c0039..9711ec254 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -2,10 +2,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; const Customer = (props) => { - const {id, name, registered_at, address, city, state, postal_code, phone, account_credit, movies_checked_out_count} = props; + const {id, name, registered_at, address, city, state, postal_code, phone, account_credit, movies_checked_out_count, onSelectCustomer} = props; return (
+

{name}

{id}

{phone}

diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index e67c1b0d0..af384614d 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -4,7 +4,7 @@ import './CustomersList.css'; import Customer from './Customer'; const CustomerList = (props) => { - const {allCustomers} = props; + const {allCustomers, onSelectCustomer} = props; const customerCards = allCustomers.map((customer, i) => { return ( @@ -20,6 +20,7 @@ const CustomerList = (props) => { phone={customer.phone} account_credit={customer.account_credit} movies_checked_out_count={customer.movies_checked_out_count} + onSelectCustomer={onSelectCustomer} /> ) }); diff --git a/src/components/Movie.js b/src/components/Movie.js index 877634c02..750e259ae 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,10 +2,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; const Movie = (props) => { - const {title, overview, release_date} = props; + const { title, overview, release_date, onSelectMovie, id } = props; return (
+

{title}

{overview}

{release_date}

diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 5ea4432d4..abf1bf9e5 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -4,15 +4,17 @@ import './MovieList.css'; import Movie from './Movie'; const MovieList = (props) => { - const {allMovies} = props; + const {allMovies, onSelectMovie} = props; const movieCards = allMovies.map((movie, i) => { return ( < Movie key={i} + id={movie.id} title={movie.title} overview={movie.overview} release_date={movie.release_date} + onSelectMovie={onSelectMovie} /> ) }); From bbd69a09d09adec2b6e002c4d002f016bef292e5 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 15:31:40 -0700 Subject: [PATCH 11/39] added prop types --- src/components/Customer.js | 15 ++++++++++++++- src/components/CustomerList.js | 5 +++++ src/components/Movie.js | 10 +++++++++- src/components/MovieList.js | 5 +++++ 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index 9711ec254..770a28a78 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; const Customer = (props) => { @@ -24,4 +24,17 @@ const Customer = (props) => { ) } +Customer.propTypes = { + name: PropTypes.string.isRequired, + id: PropTypes.number, + phone: PropTypes.string, + account_credit: PropTypes.string, + movies_checked_out_count: PropTypes.number, + registered_at: PropTypes.string, + address: PropTypes.string, + city: PropTypes.string, + state: PropTypes.string, + postal_code: PropTypes.number, +} + export default Customer; \ No newline at end of file diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index af384614d..906cb6134 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -32,4 +32,9 @@ const CustomerList = (props) => { ) } +CustomerList.propTypes = { + allCustomers: PropTypes.array.isRequired, + onSelectCustomer: PropTypes.func, +} + export default CustomerList; \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js index 750e259ae..bae516f68 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; const Movie = (props) => { @@ -17,4 +17,12 @@ const Movie = (props) => { ) } +Movie.propTypes = { + title: PropTypes.string.isRequired, + overview: PropTypes.string, + release_date: PropTypes.string, + onSelectMovie: PropTypes.func, + id: PropTypes.number, +} + export default Movie; \ No newline at end of file diff --git a/src/components/MovieList.js b/src/components/MovieList.js index abf1bf9e5..ab5c7c30c 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -26,4 +26,9 @@ const MovieList = (props) => { ) } +MovieList.propTypes = { + allMovies: PropTypes.array, + onSelectMovie: PropTypes.func, +} + export default MovieList; \ No newline at end of file From 8c5549c3475765ce655bd55eac9f1068def30c82 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 15:51:44 -0700 Subject: [PATCH 12/39] shows selected customer id and movie id --- src/App.js | 58 ++++++++++++++++++++++---------------- src/components/Customer.js | 21 ++++++-------- src/components/Movie.js | 6 ++-- 3 files changed, 45 insertions(+), 40 deletions(-) diff --git a/src/App.js b/src/App.js index 14109ac6e..6a24e6694 100644 --- a/src/App.js +++ b/src/App.js @@ -50,7 +50,6 @@ class App extends Component { onSelectMovie = (movieId) => { const selectedMovie = this.state.allMovies.find(movie => movie.id === movieId) console.log('movieId is', movieId) - console.log('selectedMovie.id is', selectedMovie.id) this.setState({ movieId: selectedMovie.id }); @@ -59,7 +58,6 @@ class App extends Component { onSelectCustomer = (customerId) => { const selectedCustomer = this.state.allCustomers.find(customer => customer.id === customerId) console.log('customerId is', customerId) - console.log('selectedCustomer.id is', selectedCustomer.id) this.setState({ customerId: selectedCustomer.id }); @@ -67,31 +65,41 @@ class App extends Component { render() { return ( - -
-
    -
  • - Home -
    • -
  • - Movies -
    • -
  • - Customers -
    • -
+
+ +
+
    +
  • + Home +
    • +
  • + Movies +
    • +
  • + Customers +
    • +
-
+
- - } - /> - } - /> -
- +
+ Current Selections: +

Customer: {this.state.customerId}

+ +

Movie: {this.state.movieId}

+ +
+ + + } + /> + } + /> +
+ +
); } } diff --git a/src/components/Customer.js b/src/components/Customer.js index 770a28a78..295b6e06c 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -10,16 +10,13 @@ const Customer = (props) => { onClick={() => onSelectCustomer(id)} >Select Customer -

{name}

-

{id}

-

{phone}

-

{account_credit}

-

{movies_checked_out_count}

-

{registered_at}

-

{address}

-

{city}

-

{state}

-

{postal_code}

+

Name: {name}

+

ID: {id}

+

Phone: {phone}

+

Account Credit: ${account_credit}

+

Movies Checked Out: {movies_checked_out_count}

+

Registed at: {registered_at}

+

Address: {address} {city} {state} {postal_code}

) } @@ -28,13 +25,13 @@ Customer.propTypes = { name: PropTypes.string.isRequired, id: PropTypes.number, phone: PropTypes.string, - account_credit: PropTypes.string, + account_credit: PropTypes.number, movies_checked_out_count: PropTypes.number, registered_at: PropTypes.string, address: PropTypes.string, city: PropTypes.string, state: PropTypes.string, - postal_code: PropTypes.number, + postal_code: PropTypes.string, } export default Customer; \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js index bae516f68..b201d18b6 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -10,9 +10,9 @@ const Movie = (props) => { onClick={() => onSelectMovie(id)} >Select Movie -

{title}

-

{overview}

-

{release_date}

+

Title: {title}

+

Overview: {overview}

+

Release Date: {release_date}

) } From b98d3c0b84e4cf255f31422333525ab881d33d13 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 16:00:39 -0700 Subject: [PATCH 13/39] displaying selected customer id and name, selected movie id and title --- src/App.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 6a24e6694..e2c7b0ce4 100644 --- a/src/App.js +++ b/src/App.js @@ -12,8 +12,10 @@ class App extends Component { allMovies: [], allCustomers: [], tmdbId: null, - customerId: null, - movieId: null, + selectedCustomerId: null, + selectedMovieId: null, + selectedCustomerName: null, + selectedMovieTitle: null, errorMessage: null, } } @@ -51,7 +53,8 @@ class App extends Component { const selectedMovie = this.state.allMovies.find(movie => movie.id === movieId) console.log('movieId is', movieId) this.setState({ - movieId: selectedMovie.id + selectedMovieId: selectedMovie.id, + selectedMovieTitle: selectedMovie.title }); } @@ -59,7 +62,8 @@ class App extends Component { const selectedCustomer = this.state.allCustomers.find(customer => customer.id === customerId) console.log('customerId is', customerId) this.setState({ - customerId: selectedCustomer.id + selectedCustomerId: selectedCustomer.id, + selectedCustomerName: selectedCustomer.name }); } @@ -84,9 +88,11 @@ class App extends Component {
Current Selections: -

Customer: {this.state.customerId}

+

Customer ID: {this.state.selectedCustomerId}

+

Customer Name: {this.state.selectedCustomerName}

-

Movie: {this.state.movieId}

+

Movie ID: {this.state.selectedMovieId}

+

Movie Title: {this.state.selectedMovieTitle}

From 695c1589267a58e788ea747d324fbfed1e319b24 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Tue, 25 Jun 2019 16:59:24 -0700 Subject: [PATCH 14/39] can make post request to check out movie to customer --- src/App.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index e2c7b0ce4..0c16b74b8 100644 --- a/src/App.js +++ b/src/App.js @@ -67,6 +67,23 @@ class App extends Component { }); } + onCheckoutMovie = (selectedCustomerId, selectedMovieTitle) => { + let dueDate = Date.now() + 604800000 //2 weeks in milliseconds + const checkoutDataToSendToApi = { + customer_id: selectedCustomerId, + due_date: new Date(dueDate) + }; + axios.post(`http://localhost:3000/rentals/${selectedMovieTitle}/check-out`, checkoutDataToSendToApi) + .then((response) => { + // do something here + }) + .catch((error) => { + this.setState({ + errorMessage: error.message, + }); + }); + } + render() { return (
@@ -93,7 +110,11 @@ class App extends Component {

Movie ID: {this.state.selectedMovieId}

Movie Title: {this.state.selectedMovieTitle}

- +
From f8ce2b1f26b3ed52c1cba36222f06525a3375240 Mon Sep 17 00:00:00 2001 From: laneia Date: Wed, 26 Jun 2019 08:30:22 -0700 Subject: [PATCH 15/39] trying to get search working --- .env | 1 + package-lock.json | 14 +++- package.json | 3 + src/App.js | 104 +++++++---------------------- src/components/Customer.js | 54 +++++++-------- src/components/CustomerList.js | 82 ++++++++++++++--------- src/components/Movie.js | 24 +++---- src/components/MovieList.js | 74 +++++++++++++++------ src/components/Search.js | 118 +++++++++++++++++++++++++++++++++ src/components/Select.css | 0 src/components/Select.js | 23 +++++++ 11 files changed, 315 insertions(+), 182 deletions(-) create mode 100644 .env create mode 100644 src/components/Select.css create mode 100644 src/components/Select.js diff --git a/.env b/.env new file mode 100644 index 000000000..673a62fd4 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +REACT_APP_MOVIEDB_KEY=1b67decb1f6e3d4c83f4a0ed54b39388 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9bc9f54a4..5a2f65e3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4319,9 +4319,10 @@ } }, "dotenv": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", - "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==" + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.0.0.tgz", + "integrity": "sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==", + "dev": true }, "dotenv-expand": { "version": "4.2.0", @@ -10366,6 +10367,13 @@ "webpack-dev-server": "3.2.1", "webpack-manifest-plugin": "2.0.4", "workbox-webpack-plugin": "4.2.0" + }, + "dependencies": { + "dotenv": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", + "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==" + } } }, "read-pkg": { diff --git a/package.json b/package.json index eeff31f0a..f7843e159 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "dotenv": "^8.0.0" } } diff --git a/src/App.js b/src/App.js index 0c16b74b8..a743d11a4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,92 +1,35 @@ import React, { Component } from 'react'; import './App.css'; -import axios from 'axios'; import MovieList from './components/MovieList'; import CustomerList from './components/CustomerList'; +import Search from './components/Search'; +import Select from './components/Select'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; - class App extends Component { - constructor(props) { - super(props); + constructor(props) { + super(props) this.state = { - allMovies: [], - allCustomers: [], - tmdbId: null, - selectedCustomerId: null, - selectedMovieId: null, - selectedCustomerName: null, - selectedMovieTitle: null, - errorMessage: null, + selectedCustomer: null, + selectedMovie: null } } - componentDidMount() { - axios.get('http://localhost:3000/movies') - .then((response) => { - console.log('response.data is:', response.data); - this.setState({ - allMovies: response.data - }); - console.log('allMovies is:', this.state.allMovies) - }) - .catch((error) => { - this.setState({ - errorMessage: error.message - }) - }) - axios.get('http://localhost:3000/customers') - .then((response) => { - console.log('response.data is:', response.data); - this.setState({ - allCustomers: response.data - }); - console.log('allCustomers is:', this.state.allCustomers) - }) - .catch((error) => { - this.setState({ - errorMessage: error.message - }) - }) - } - - onSelectMovie = (movieId) => { - const selectedMovie = this.state.allMovies.find(movie => movie.id === movieId) - console.log('movieId is', movieId) + onSelectCustomer = (customer) => { + console.log(customer); this.setState({ - selectedMovieId: selectedMovie.id, - selectedMovieTitle: selectedMovie.title + selectedCustomer: customer, }); } - onSelectCustomer = (customerId) => { - const selectedCustomer = this.state.allCustomers.find(customer => customer.id === customerId) - console.log('customerId is', customerId) + onSelectMovie = (movie) => { + console.log(movie); this.setState({ - selectedCustomerId: selectedCustomer.id, - selectedCustomerName: selectedCustomer.name + selectedMovie: movie, }); } - onCheckoutMovie = (selectedCustomerId, selectedMovieTitle) => { - let dueDate = Date.now() + 604800000 //2 weeks in milliseconds - const checkoutDataToSendToApi = { - customer_id: selectedCustomerId, - due_date: new Date(dueDate) - }; - axios.post(`http://localhost:3000/rentals/${selectedMovieTitle}/check-out`, checkoutDataToSendToApi) - .then((response) => { - // do something here - }) - .catch((error) => { - this.setState({ - errorMessage: error.message, - }); - }); - } - render() { return ( -
    @@ -99,34 +42,35 @@ class App extends Component {
  • Customers
    • +
  • + Search +
Current Selections: -

Customer ID: {this.state.selectedCustomerId}

-

Customer Name: {this.state.selectedCustomerName}

- -

Movie ID: {this.state.selectedMovieId}

-

Movie Title: {this.state.selectedMovieTitle}

+

Customer: {this.state.selectedCustomer}

+

Movie: {this.state.selectedMovieId}

- } + render={(props) => } /> - } + } /> +
-
); } } diff --git a/src/components/Customer.js b/src/components/Customer.js index 295b6e06c..0b09db5cf 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,37 +1,31 @@ -import React from 'react'; +import React, {Component} from 'react'; import PropTypes from 'prop-types'; -const Customer = (props) => { - const {id, name, registered_at, address, city, state, postal_code, phone, account_credit, movies_checked_out_count, onSelectCustomer} = props; +class Customer extends Component { - return ( -
- -

Name: {name}

-

ID: {id}

-

Phone: {phone}

-

Account Credit: ${account_credit}

-

Movies Checked Out: {movies_checked_out_count}

-

Registed at: {registered_at}

-

Address: {address} {city} {state} {postal_code}

-
- ) -} + onClickButton = () => { + this.props.onSelectCustomerCallback(this.props); + } + + render() { + const {id, name, registered_at, address, city, state, postal_code, phone, account_credit, movies_checked_out_count} = this.props; -Customer.propTypes = { - name: PropTypes.string.isRequired, - id: PropTypes.number, - phone: PropTypes.string, - account_credit: PropTypes.number, - movies_checked_out_count: PropTypes.number, - registered_at: PropTypes.string, - address: PropTypes.string, - city: PropTypes.string, - state: PropTypes.string, - postal_code: PropTypes.string, + return ( +
+

Name: {name}

+

ID: {id}

+

Phone: {phone}

+

Account Credit: ${account_credit}

+

Movies Checked Out: {movies_checked_out_count}

+

Registed at: {registered_at}

+

Address: {address} {city} {state} {postal_code}

+ +
+ ) + } } export default Customer; \ No newline at end of file diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 906cb6134..71fc3a488 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,40 +1,58 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import './CustomersList.css'; import Customer from './Customer'; +class CustomerList extends Component { + constructor(props) { + super(props); + this.state = { + customers: [], + selectedCustomer: null + } + } + + customerCards() { + axios.get('http://localhost:3000/customers') + .then((response) => { + const allCustomers = response.data.map((customer) => { + return ( + < Customer + key={customer.id} + id= {customer.id} + registerd_at={customer.registerd_at} + name={customer.name} + address={customer.address} + city={customer.city} + state={customer.state} + postal_code={customer.postal_code} + phone={customer.phone} + account_credit={customer.account_credit} + movies_checked_out_count={customer.movies_checked_out_count} + onSelectCustomer={this.props.onSelectCustomer} + /> + ); + }); + this.setState({ + customers: allCustomers, + }); + }) + .catch((error) => { + console.log(error); + }); + } + componentDidMount() { + this.customerCards(); + } -const CustomerList = (props) => { - const {allCustomers, onSelectCustomer} = props; - - const customerCards = allCustomers.map((customer, i) => { + render () { + const allCustomers = this.state.customers; return ( - < Customer - key={i} - id={customer.id} - registerd_at={customer.registerd_at} - name={customer.name} - address={customer.address} - city={customer.city} - state={customer.state} - postal_code={customer.postal_code} - phone={customer.phone} - account_credit={customer.account_credit} - movies_checked_out_count={customer.movies_checked_out_count} - onSelectCustomer={onSelectCustomer} - /> - ) - }); - - return ( -
- {customerCards} -
- ) -} - -CustomerList.propTypes = { - allCustomers: PropTypes.array.isRequired, - onSelectCustomer: PropTypes.func, +
+ {allCustomers} +
+ ); + } } export default CustomerList; \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js index b201d18b6..32e50296a 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,27 +2,21 @@ import React from 'react'; import PropTypes from 'prop-types'; const Movie = (props) => { - const { title, overview, release_date, onSelectMovie, id } = props; + const { title, overview, release_date, onSelectMovieCallback, displayButton } = props; + + const onButtonClick = () => { + onSelectMovieCallback(props); + } return (
-

Title: {title}

Overview: {overview}

Release Date: {release_date}

+
- ) -} - -Movie.propTypes = { - title: PropTypes.string.isRequired, - overview: PropTypes.string, - release_date: PropTypes.string, - onSelectMovie: PropTypes.func, - id: PropTypes.number, -} + ); +}; export default Movie; \ No newline at end of file diff --git a/src/components/MovieList.js b/src/components/MovieList.js index ab5c7c30c..6557f0d33 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -1,34 +1,64 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import './MovieList.css'; import Movie from './Movie'; -const MovieList = (props) => { - const {allMovies, onSelectMovie} = props; +class MovieList extends Component { + constructor(props) { + super(props) + this.state = { + movies: [], + selectedMovie: "" + } + } - const movieCards = allMovies.map((movie, i) => { - return ( - < Movie - key={i} - id={movie.id} - title={movie.title} - overview={movie.overview} - release_date={movie.release_date} - onSelectMovie={onSelectMovie} - /> - ) + componentDidMount() { + axios.get('http://localhost:3000/movies') + .then((response) => { + console.log(response.data); + + const movieCards = response.data.map((movie) => { + const addMovie = { + id: movie.id, + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + } + return addMovie + }) + + console.log(movieCards); + this.setState({movies: movieCards}); + }) + .catch((error) => { + console.log(error); + }) + } + + render() { + const displayMovies = this.state.movieList.map((movie) => { + const { id, title, overview, release_date } = movie; + return ( +
+ +
); }); return (
- {movieCards} + {displayMovies}
- ) -} - -MovieList.propTypes = { - allMovies: PropTypes.array, - onSelectMovie: PropTypes.func, -} + ); + } + } export default MovieList; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js index e69de29bb..44ad6de3d 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -0,0 +1,118 @@ +import React, { Component } from 'react'; +import axios from 'axios'; +import PropTypes from 'prop-types'; +import Movie from './Movie'; + +class Search extends Component { + + constructor(props) { + super(props); + + this.cleared = { + query: "", + queryResults: [], + } + + this.state = { ...this.cleared} + } + + onFormInput = (e) => { + e.preventDefault(); + + const query = this.state.query; + console.log(query) + + this.onSubmit(query) + + this.setState({ ...this.cleared }); + } + + onSubmit = (query) => { + const KEY = process.env.REACT_APP_MOVIEDB_KEY + const URL = `https://api.themoviedb.org/3/search/movie?api_key=${KEY}&query=${query}` + + axios.get(URL) + + .then((response) => { + const currentSearch = response.data.results.map((movie) => { + + const searchedMovie = { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + external_id: movie.id, + inventory: movie.inventory + } + + return searchedMovie + }) + + this.setState({queryResults: currentSearch}); + console.log(response.data); + }) + + .catch((error) => { + console.log(error); + }) + } + + onInputChange = (e) => { + const updatedState = {}; + + const field = e.target.name; + const value = e.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + onSelectMovie = (movieId) => { + const selectedMovie = this.state.allMovies.find(movie => movie.id === movieId) + console.log('movieId is', movieId) + this.setState({ + selectedMovieId: selectedMovie.id, + selectedMovieTitle: selectedMovie.title + }); + } + + render() { + const displayMovie = this.state.searchResults.map((movie) => { + const { id, title, overview, release_date, external_id } = movie; + return ( +
+ +
); + }); + + return ( +
+
+
+ + +
+
+
{displayMovie}
+
+ ); + } +} + +export default Search; \ No newline at end of file diff --git a/src/components/Select.css b/src/components/Select.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Select.js b/src/components/Select.js new file mode 100644 index 000000000..0e3cad614 --- /dev/null +++ b/src/components/Select.js @@ -0,0 +1,23 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import './Select.css' + +class Select extends Component { + onRentalClick = () =>{ + console.log('Rent Movie'); + } + render() { + return ( +
+

Customer: {this.props.customer ? this.props.customer.name: "Please select customer."}

+

Movie: {this.props.movie ? this.props.movie.title: "Please select movie."}

+ +
+ + ) + } +} + +export default Select; From 35e021cd6f8871b359a4257bec3c86d0f4b619c4 Mon Sep 17 00:00:00 2001 From: laneia Date: Wed, 26 Jun 2019 08:43:43 -0700 Subject: [PATCH 16/39] fixed some bugs, not all --- src/components/Customer.js | 1 + src/components/CustomerList.js | 2 +- src/components/Search.js | 7 ++----- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index 0b09db5cf..d0c5914b5 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; +import './Customer.css' class Customer extends Component { diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 71fc3a488..9826ee185 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -29,7 +29,7 @@ class CustomerList extends Component { phone={customer.phone} account_credit={customer.account_credit} movies_checked_out_count={customer.movies_checked_out_count} - onSelectCustomer={this.props.onSelectCustomer} + onSelectCustomerCallback={this.props.onSelectCustomer} /> ); }); diff --git a/src/components/Search.js b/src/components/Search.js index 44ad6de3d..910786123 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -32,16 +32,13 @@ class Search extends Component { const URL = `https://api.themoviedb.org/3/search/movie?api_key=${KEY}&query=${query}` axios.get(URL) - .then((response) => { const currentSearch = response.data.results.map((movie) => { const searchedMovie = { title: movie.title, overview: movie.overview, - release_date: movie.release_date, - external_id: movie.id, - inventory: movie.inventory + release_date: movie.release_date } return searchedMovie @@ -76,7 +73,7 @@ class Search extends Component { } render() { - const displayMovie = this.state.searchResults.map((movie) => { + const displayMovie = this.state.queryResults.map((movie) => { const { id, title, overview, release_date, external_id } = movie; return (
From 4d9eb3822af114bdaedfe0a10d4c5b67e7fc6434 Mon Sep 17 00:00:00 2001 From: laneia Date: Wed, 26 Jun 2019 08:58:10 -0700 Subject: [PATCH 17/39] fixed display movies bug, still working on rental checkout and search --- src/App.js | 22 +++++++++++++++------- src/components/CustomerList.js | 2 +- src/components/MovieList.js | 4 ++-- src/components/Search.js | 2 +- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index a743d11a4..4a3b356bc 100644 --- a/src/App.js +++ b/src/App.js @@ -5,12 +5,16 @@ import CustomerList from './components/CustomerList'; import Search from './components/Search'; import Select from './components/Select'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; + +const Index = () => { + return (

home

); +} class App extends Component { constructor(props) { super(props) this.state = { - selectedCustomer: null, - selectedMovie: null + selectedCustomer: undefined, + selectedMovie: undefined } } @@ -48,18 +52,22 @@ class App extends Component {
- -
+ - {/*
+ +
Current Selections: -

Customer: {this.state.selectedCustomer}

-

Movie: {this.state.selectedMovie}

+ Date: Wed, 26 Jun 2019 11:24:40 -0700 Subject: [PATCH 20/39] checkout movie is working --- src/App.js | 5 +++-- src/components/Select.js | 15 ++++++++------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 7bdd1e7e5..5b53b2c55 100644 --- a/src/App.js +++ b/src/App.js @@ -76,12 +76,13 @@ class App extends Component { - - - - +
+ + + +
-
{displayMovie}
- + {this.state.queryResults && this.movieSearchList()} + ); } } + + //
+ // + + + export default Search; \ No newline at end of file From 60b704bc0ba65b73a13e5dad002ed332f4315cd7 Mon Sep 17 00:00:00 2001 From: laneia Date: Wed, 26 Jun 2019 15:48:01 -0700 Subject: [PATCH 24/39] adding in functions to make add to library from search possible, not working yet --- src/App.js | 18 +++++++++++++++++- src/components/Movie.js | 24 ++++++++++++++++++------ src/components/Search.js | 21 ++++----------------- 3 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 443487dc2..59794182e 100644 --- a/src/App.js +++ b/src/App.js @@ -55,11 +55,27 @@ class App extends Component { }); } else { this.setState({ - errorMessage: "Please select a user and movie" + errorMessage: "Please select a user and movie." }); } } + addMovie = (movie) => { + const movieInfo = { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + }; + + axios.post('http://localhost:3000/movies?', movieInfo) + .then(response => { + console.log('Movie added!', response); + }) + .catch((error) => { + console.log(error); + }) + } + render() { const errorSection = (this.state.errorMessage) ? (
diff --git a/src/components/Movie.js b/src/components/Movie.js index 32e50296a..3b328d6f6 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,19 +2,31 @@ import React from 'react'; import PropTypes from 'prop-types'; const Movie = (props) => { - const { title, overview, release_date, onSelectMovieCallback, displayButton } = props; + const { title, overview, release_date, addMovie, onSelectMovieCallback } = props; - const onButtonClick = () => { - onSelectMovieCallback(props); - } +// const addMovieButton = ( +// +// ); + +// const onSelectMovieButton = ( +// +// ); + +// const onButtonClick = () => { +// if (rails db movie list includes movie then) { +// return onSelectMovieButton } +// else if (movie is a new movie from api) { +// return addMovieButton } +// }; return (

Title: {title}

Overview: {overview}

Release Date: {release_date}

- + { onButtonClick }
); }; diff --git a/src/components/Search.js b/src/components/Search.js index 5841dc36d..d3b44d835 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -46,8 +46,7 @@ class Search extends Component { ); }); @@ -69,20 +68,8 @@ class Search extends Component { } } - - // - // - - +Search.propTypes = { + addMovie: PropTypes.func, +}; export default Search; \ No newline at end of file From 77a4afcccc28830c03b78205b06e37e6a41dea26 Mon Sep 17 00:00:00 2001 From: laneia Date: Thu, 27 Jun 2019 10:01:43 -0700 Subject: [PATCH 25/39] add movie to db works, but need to handle if movie is already in db --- src/App.js | 18 +------- src/components/Customer.js | 3 +- src/components/CustomerList.js | 2 +- src/components/Movie.js | 45 ++++++++----------- src/components/MovieList.js | 82 +++++++++++++++------------------- src/components/Search.js | 51 ++++++++++++++------- 6 files changed, 94 insertions(+), 107 deletions(-) diff --git a/src/App.js b/src/App.js index 59794182e..b297a4866 100644 --- a/src/App.js +++ b/src/App.js @@ -60,22 +60,6 @@ class App extends Component { } } - addMovie = (movie) => { - const movieInfo = { - title: movie.title, - overview: movie.overview, - release_date: movie.release_date, - }; - - axios.post('http://localhost:3000/movies?', movieInfo) - .then(response => { - console.log('Movie added!', response); - }) - .catch((error) => { - console.log(error); - }) - } - render() { const errorSection = (this.state.errorMessage) ? (
@@ -126,7 +110,7 @@ class App extends Component { } + render={(props) => } /> { @@ -18,7 +17,7 @@ class Customer extends Component {

Phone: {phone}

Account Credit: ${account_credit}

Movies Checked Out: {movies_checked_out_count}

-

Registed at: {registered_at}

+

Registered at: {registered_at}

Address: {address} {city} {state} {postal_code}

-// ); + onClickButton = () => { + this.props.onSelectMovieCallback(this.props); + } -// const onSelectMovieButton = ( -// -// ); + render () { + const { title, overview, release_date } = this.props; -// const onButtonClick = () => { -// if (rails db movie list includes movie then) { -// return onSelectMovieButton } -// else if (movie is a new movie from api) { -// return addMovieButton } -// }; - - return ( -
-

Title: {title}

-

Overview: {overview}

-

Release Date: {release_date}

- { onButtonClick } -
- ); + return ( +
+

Title: {title}

+

Overview: {overview}

+

Release Date: {release_date}

+ +
+ ) + } }; export default Movie; \ No newline at end of file diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 55a2aa405..9ae6d3485 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -5,60 +5,50 @@ import './MovieList.css'; import Movie from './Movie'; class MovieList extends Component { - constructor(props) { - super(props) - this.state = { - movies: [], - selectedMovie: "" - } - } - - componentDidMount() { - axios.get('http://localhost:3000/movies') - .then((response) => { - console.log(response.data); - - const movieCards = response.data.map((movie) => { - const addMovie = { - id: movie.id, - title: movie.title, - overview: movie.overview, - release_date: movie.release_date, - } - return addMovie - }) + constructor(props) { + super(props) + this.state = { + movies: [], + selectedMovie: undefined + } + } - console.log(movieCards); - this.setState({movies: movieCards}); - }) - .catch((error) => { - console.log(error); + MovieCards() { + axios.get('http://localhost:3000/movies') + .then((response) => { + const allMovies = response.data.map((movie) => { + return ( + < Movie + key={movie.id} + id= {movie.id} + title= {movie.title} + overview={movie.overview} + release_date= {movie.release_date} + onSelectMovieCallback={this.props.onSelectMovie} + /> + ); + }); + this.setState({ + movies: allMovies, + }); }) + .catch((error) => { + console.log(error); + }); } - render() { - const displayMovies = this.state.movies.map((movie) => { - const { id, title, overview, release_date } = movie; - return ( -
- -
); - }); + componentDidMount() { + this.MovieCards(); + } + render () { + const allMovies = this.state.movies; return (
- {displayMovies} + {allMovies}
- ); - } + ); } +} export default MovieList; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js index d3b44d835..faf10e364 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -2,16 +2,15 @@ import React, { Component } from 'react'; import axios from 'axios'; import PropTypes from 'prop-types'; import Movie from './Movie'; + class Search extends Component { constructor(props) { super(props); - this.cleared = { + this.state = { query: "", - queryResults: undefined, + queryResults: [], } - - this.state = { ...this.cleared } } searchMovies = () => { @@ -40,18 +39,44 @@ class Search extends Component { this.searchMovies(); }; + // TODO make map results list items movieSearchList = () => { - return this.state.queryResults.map(movie => { + return this.state.queryResults.map((movie) => { return ( - +
+

{movie.title}

+

{movie.overview}

+

{movie.release_date}

+ +
); }); }; + addMovie = (movie) => { + return () => { + const movieInfo = { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id, + inventory: 27 + }; + + axios.post('http://localhost:3000/movies', movieInfo) + .then(response => { + console.log('Movie added!', response); + }) + .catch((error) => { + console.log(error); + }) + let newState = this.state + newState.queryResults = []; + this.setState({newState}); + } + } + render() { return (
@@ -62,14 +87,10 @@ class Search extends Component {
- {this.state.queryResults && this.movieSearchList()} + {this.movieSearchList()} ); } } -Search.propTypes = { - addMovie: PropTypes.func, -}; - export default Search; \ No newline at end of file From 744ee26f227bdf1fc40bf8e96ceb2dea46a071de Mon Sep 17 00:00:00 2001 From: laneia Date: Thu, 27 Jun 2019 10:08:30 -0700 Subject: [PATCH 26/39] fixed bug in select movie --- src/components/MovieList.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 9ae6d3485..feac97976 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -11,6 +11,7 @@ class MovieList extends Component { movies: [], selectedMovie: undefined } + console.log(this.props) } MovieCards() { @@ -24,7 +25,7 @@ class MovieList extends Component { title= {movie.title} overview={movie.overview} release_date= {movie.release_date} - onSelectMovieCallback={this.props.onSelectMovie} + onSelectMovieCallback={this.props.onSelectMovieCallback} /> ); }); From 4205a0842eddd5cb45a38795cc8b3267ada5cd1d Mon Sep 17 00:00:00 2001 From: laneia Date: Thu, 27 Jun 2019 13:53:15 -0700 Subject: [PATCH 27/39] added movieLookUp method to MovieList.js --- src/App.js | 2 +- src/components/MovieList.js | 4 ++++ src/components/Search.js | 16 +++++++++++++--- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index b297a4866..ac1f94fbb 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,7 @@ import Select from './components/Select'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; const Index = () => { - return (

home

); + return (

); } class App extends Component { constructor(props) { diff --git a/src/components/MovieList.js b/src/components/MovieList.js index feac97976..ddf65757b 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -42,6 +42,10 @@ class MovieList extends Component { this.MovieCards(); } + movieLookUp = (movieID) => { + this.state.movies.find(movie => movie.id === movieID) + } + render () { const allMovies = this.state.movies; return ( diff --git a/src/components/Search.js b/src/components/Search.js index faf10e364..3defbd928 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import axios from 'axios'; import PropTypes from 'prop-types'; -import Movie from './Movie'; +import MovieList from './MovieList'; class Search extends Component { @@ -10,6 +10,7 @@ class Search extends Component { this.state = { query: "", queryResults: [], + customerMessage: "" } } @@ -56,6 +57,7 @@ class Search extends Component { addMovie = (movie) => { return () => { const movieInfo = { + key: movie.id, title: movie.title, overview: movie.overview, release_date: movie.release_date, @@ -65,8 +67,10 @@ class Search extends Component { }; axios.post('http://localhost:3000/movies', movieInfo) - .then(response => { - console.log('Movie added!', response); + .then((response) => { + this.setState({ + customerMessage: "Movie Added!", + }); }) .catch((error) => { console.log(error); @@ -78,6 +82,11 @@ class Search extends Component { } render() { + const messageSection = (this.state.customerMessage) ? + (
+ {this.state.customerMessage} +
) : null; + return (
@@ -88,6 +97,7 @@ class Search extends Component {
{this.movieSearchList()} + {messageSection}
); } From 05576d93e0946f13f3cc9e78e875ebde145ea468 Mon Sep 17 00:00:00 2001 From: laneia Date: Thu, 27 Jun 2019 14:15:50 -0700 Subject: [PATCH 28/39] moved movie state to app.js --- src/App.js | 16 +++++++-- src/components/MovieList.js | 65 +++++++++++++++++++------------------ src/components/Search.js | 5 +-- 3 files changed, 48 insertions(+), 38 deletions(-) diff --git a/src/App.js b/src/App.js index ac1f94fbb..2cecbc5dd 100644 --- a/src/App.js +++ b/src/App.js @@ -14,6 +14,7 @@ class App extends Component { constructor(props) { super(props) this.state = { + movies: [], selectedCustomer: null, selectedMovie: null, customerMessage: null, @@ -60,6 +61,17 @@ class App extends Component { } } + movieLookUp = (movieID) => { + this.state.movies.find(movie => movie.id === movieID) + } + + setMovieState = (allMovies) => { + console.log("in setMovieState") + this.setState({ + movies: allMovies, + }); + } + render() { const errorSection = (this.state.errorMessage) ? (
@@ -110,13 +122,13 @@ class App extends Component { } + render={(props) => } /> } /> - + diff --git a/src/components/MovieList.js b/src/components/MovieList.js index ddf65757b..33ac478d1 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -5,53 +5,54 @@ import './MovieList.css'; import Movie from './Movie'; class MovieList extends Component { - constructor(props) { + constructor(props) { super(props) - this.state = { - movies: [], - selectedMovie: undefined - } - console.log(this.props) + this.state = { + selectedMovie: undefined + } + console.log(this.props) } MovieCards() { + console.log("in axios") axios.get('http://localhost:3000/movies') .then((response) => { - const allMovies = response.data.map((movie) => { - return ( - < Movie - key={movie.id} - id= {movie.id} - title= {movie.title} - overview={movie.overview} - release_date= {movie.release_date} - onSelectMovieCallback={this.props.onSelectMovieCallback} - /> - ); - }); - this.setState({ - movies: allMovies, - }); + const allMovies = response.data + + console.log("**************************************************") + console.log(allMovies) + console.log("**************************************************") + + this.props.setMovieState(allMovies) + }) .catch((error) => { - console.log(error); + console.log("inside of error") + console.log(error); }); } componentDidMount() { - this.MovieCards(); - } - - movieLookUp = (movieID) => { - this.state.movies.find(movie => movie.id === movieID) + this.MovieCards(); } - render () { - const allMovies = this.state.movies; + render() { + const allMovies = this.props.movies.map((movie) => { + return ( + < Movie + key={movie.id} + id={movie.id} + title={movie.title} + overview={movie.overview} + release_date={movie.release_date} + onSelectMovieCallback={this.props.onSelectMovieCallback} + /> + ); + }); return ( -
- {allMovies} -
+
+ {allMovies} +
); } } diff --git a/src/components/Search.js b/src/components/Search.js index 3defbd928..e3d804fc3 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -10,7 +10,6 @@ class Search extends Component { this.state = { query: "", queryResults: [], - customerMessage: "" } } @@ -68,9 +67,7 @@ class Search extends Component { axios.post('http://localhost:3000/movies', movieInfo) .then((response) => { - this.setState({ - customerMessage: "Movie Added!", - }); + }) .catch((error) => { console.log(error); From fbcd02192cc6bcefe1700b79176c73724e678e85 Mon Sep 17 00:00:00 2001 From: laneia Date: Thu, 27 Jun 2019 14:45:09 -0700 Subject: [PATCH 29/39] movie search if already in database displays message instead of button, need to fix search so do not have to load movies first --- src/App.js | 8 ++++++-- src/components/MovieList.js | 6 ------ src/components/Search.js | 29 ++++++++++++++++++----------- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/App.js b/src/App.js index 2cecbc5dd..e9f8f01d1 100644 --- a/src/App.js +++ b/src/App.js @@ -62,7 +62,9 @@ class App extends Component { } movieLookUp = (movieID) => { - this.state.movies.find(movie => movie.id === movieID) + console.log(this.state.movies) + console.log(movieID) + return this.state.movies.find(movie => movie.external_id === movieID) } setMovieState = (allMovies) => { @@ -128,7 +130,9 @@ class App extends Component { path="/customers" render={(props) => } /> - + } + /> diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 33ac478d1..4bd791ed0 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -18,13 +18,7 @@ class MovieList extends Component { axios.get('http://localhost:3000/movies') .then((response) => { const allMovies = response.data - - console.log("**************************************************") - console.log(allMovies) - console.log("**************************************************") - this.props.setMovieState(allMovies) - }) .catch((error) => { console.log("inside of error") diff --git a/src/components/Search.js b/src/components/Search.js index e3d804fc3..1f7f3b2e3 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -24,8 +24,8 @@ class Search extends Component { }); }) .catch((error) => { - console.log(error); - }) + console.log(error); + }) }; onInput = event => { @@ -42,19 +42,26 @@ class Search extends Component { // TODO make map results list items movieSearchList = () => { return this.state.queryResults.map((movie) => { + console.log(`${movie.title}: ${this.props.movieLookUp(movie.id)}`) return (

{movie.title}

{movie.overview}

{movie.release_date}

- + { + this.props.movieLookUp(movie.external_id) ? ( +

Movie already in database.

+ ) : ( + + ) + }
); }); }; addMovie = (movie) => { - return () => { + return () => { const movieInfo = { key: movie.id, title: movie.title, @@ -66,15 +73,15 @@ class Search extends Component { }; axios.post('http://localhost:3000/movies', movieInfo) - .then((response) => { - - }) - .catch((error) => { - console.log(error); - }) + .then((response) => { + + }) + .catch((error) => { + console.log(error); + }) let newState = this.state newState.queryResults = []; - this.setState({newState}); + this.setState({ newState }); } } From 6b33f2fd1d933ee106aeb0885d7345d0ead02ca7 Mon Sep 17 00:00:00 2001 From: laneia Date: Thu, 27 Jun 2019 14:53:47 -0700 Subject: [PATCH 30/39] search can now load movies independently of clicking movies yay --- src/App.js | 2 +- src/components/MovieList.js | 3 --- src/components/Search.js | 12 ++++++++++-- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index e9f8f01d1..00bd4b7d3 100644 --- a/src/App.js +++ b/src/App.js @@ -131,7 +131,7 @@ class App extends Component { render={(props) => } /> } + render={(props) => } /> diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 4bd791ed0..4ae34895e 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -10,18 +10,15 @@ class MovieList extends Component { this.state = { selectedMovie: undefined } - console.log(this.props) } MovieCards() { - console.log("in axios") axios.get('http://localhost:3000/movies') .then((response) => { const allMovies = response.data this.props.setMovieState(allMovies) }) .catch((error) => { - console.log("inside of error") console.log(error); }); } diff --git a/src/components/Search.js b/src/components/Search.js index 1f7f3b2e3..3983da4e3 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -12,7 +12,7 @@ class Search extends Component { queryResults: [], } } - + searchMovies = () => { axios.get('http://localhost:3000/movies?query=' + this.state.query) .then(response => { @@ -41,6 +41,15 @@ class Search extends Component { // TODO make map results list items movieSearchList = () => { + axios.get('http://localhost:3000/movies') + .then((response) => { + const allMovies = response.data + this.props.setMovieState(allMovies) + }) + .catch((error) => { + console.log(error); + }); + return this.state.queryResults.map((movie) => { console.log(`${movie.title}: ${this.props.movieLookUp(movie.id)}`) return ( @@ -74,7 +83,6 @@ class Search extends Component { axios.post('http://localhost:3000/movies', movieInfo) .then((response) => { - }) .catch((error) => { console.log(error); From e6e5d7db490de73e3d347e7170c55ab1ddc6829b Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Thu, 27 Jun 2019 15:42:46 -0700 Subject: [PATCH 31/39] added back styling to master: --- src/App.js | 16 +++++++++------- src/components/Customer.js | 21 +++++++++------------ src/components/CustomerList.js | 12 ++++++++++-- src/components/Movie.js | 26 +++++++++++++++++--------- src/components/MovieList.css | 10 ++++++++++ src/components/MovieList.js | 3 ++- src/components/Select.js | 7 +++++-- src/index.js | 1 + 8 files changed, 63 insertions(+), 33 deletions(-) diff --git a/src/App.js b/src/App.js index 00bd4b7d3..978985e7c 100644 --- a/src/App.js +++ b/src/App.js @@ -76,12 +76,12 @@ class App extends Component { render() { const errorSection = (this.state.errorMessage) ? - (
+ (
Error: {this.state.errorMessage}
) : null; const messageSection = (this.state.customerMessage) ? - (
+ (
{this.state.customerMessage}
) : null; @@ -95,20 +95,22 @@ class App extends Component {
-
    -
  • +
    diff --git a/src/components/Customer.js b/src/components/Customer.js index 5cb7994f4..9f58dd674 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -11,19 +11,16 @@ class Customer extends Component { const {id, name, registered_at, address, city, state, postal_code, phone, account_credit, movies_checked_out_count} = this.props; return ( -
    -

    Name: {name}

    -

    ID: {id}

    -

    Phone: {phone}

    -

    Account Credit: ${account_credit}

    -

    Movies Checked Out: {movies_checked_out_count}

    -

    Registered at: {registered_at}

    -

    Address: {address} {city} {state} {postal_code}

    - -
    + + ) } } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 4a532f61a..35c0401f9 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -48,9 +48,17 @@ class CustomerList extends Component { render () { const allCustomers = this.state.customers; return ( -
    + + + + + + + + + {allCustomers} - +
    IDNameMovies Checked OutSelect
    ); } } diff --git a/src/components/Movie.js b/src/components/Movie.js index 524c6fc88..51ec35a14 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; class Movie extends Component { @@ -7,19 +7,27 @@ class Movie extends Component { this.props.onSelectMovieCallback(this.props); } - render () { - const { title, overview, release_date } = this.props; + render() { + const { title, overview, release_date, image_url } = this.props; return ( -
    -

    Title: {title}

    -

    Overview: {overview}

    -

    Release Date: {release_date}

    +
    +
    + movie +

    {title}

    +

    {parseInt(release_date)}

    -
    +

    {overview}

    +
    + + + ) } }; diff --git a/src/components/MovieList.css b/src/components/MovieList.css index e69de29bb..b65e1cb12 100644 --- a/src/components/MovieList.css +++ b/src/components/MovieList.css @@ -0,0 +1,10 @@ +.movie-cards { + display: flex; + flex-wrap: wrap; +} + +.card { + width: 16rem; + margin: 1rem; +} + diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 4ae34895e..e0bf940aa 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -37,11 +37,12 @@ class MovieList extends Component { overview={movie.overview} release_date={movie.release_date} onSelectMovieCallback={this.props.onSelectMovieCallback} + image_url={movie.image_url} /> ); }); return ( -
    +
    {allMovies}
    ); diff --git a/src/components/Select.js b/src/components/Select.js index c2ff04d81..52cbd754e 100644 --- a/src/components/Select.js +++ b/src/components/Select.js @@ -12,11 +12,14 @@ const Select = (props) => { } return ( -
    +
    +
    +

    Current Selection

    Customer: {customer ? customer.name: "Please select customer."}

    Movie: {movie ? movie.title: "Please select movie."}

    - +
    ) diff --git a/src/index.js b/src/index.js index fae3e3500..1349305c4 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; +import 'bootstrap/dist/css/bootstrap.css' ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); From 82b5433a81ba5c201456d0ef11163ce424d81050 Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Thu, 27 Jun 2019 16:30:55 -0700 Subject: [PATCH 32/39] fixed styling --- src/components/Customer.js | 4 +++- src/components/Movie.js | 6 ++---- src/components/Search.css | 4 ++++ src/components/Search.js | 35 ++++++++++++++++++++++------------- 4 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index 9f58dd674..d0674371b 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -8,7 +8,7 @@ class Customer extends Component { } render() { - const {id, name, registered_at, address, city, state, postal_code, phone, account_credit, movies_checked_out_count} = this.props; + const {id, name, movies_checked_out_count} = this.props; return ( @@ -25,4 +25,6 @@ class Customer extends Component { } } + + export default Customer; \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js index 51ec35a14..546b29db0 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -12,7 +12,7 @@ class Movie extends Component { return (
    -
    +
    movie @@ -24,10 +24,8 @@ class Movie extends Component { >Select Movie

    {overview}

    +
    - - - ) } }; diff --git a/src/components/Search.css b/src/components/Search.css index e69de29bb..46f922bcb 100644 --- a/src/components/Search.css +++ b/src/components/Search.css @@ -0,0 +1,4 @@ +.movie-cards { + display: flex; + flex-wrap: wrap; +} \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js index 3983da4e3..347f6d9cb 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -12,7 +12,7 @@ class Search extends Component { queryResults: [], } } - + searchMovies = () => { axios.get('http://localhost:3000/movies?query=' + this.state.query) .then(response => { @@ -53,18 +53,25 @@ class Search extends Component { return this.state.queryResults.map((movie) => { console.log(`${movie.title}: ${this.props.movieLookUp(movie.id)}`) return ( -
    -

    {movie.title}

    -

    {movie.overview}

    -

    {movie.release_date}

    - { - this.props.movieLookUp(movie.external_id) ? ( -

    Movie already in database.

    - ) : ( - - ) - } -
    + +
    +
    + movie +

    {movie.title}

    +

    {parseInt(movie.release_date)}

    +

    {movie.overview}

    + { + this.props.movieLookUp(movie.external_id) ? ( +

    Movie already in database.

    + ) : ( + + ) + } +
    +
    + ); }); }; @@ -108,7 +115,9 @@ class Search extends Component {
+
{this.movieSearchList()} +
{messageSection} ); From 391ffae862ff8c656ad6050149a9f6b333b2cce0 Mon Sep 17 00:00:00 2001 From: laneia Date: Thu, 27 Jun 2019 18:16:21 -0700 Subject: [PATCH 33/39] fixed addMovie bug --- src/components/Search.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Search.js b/src/components/Search.js index 347f6d9cb..44422483e 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -78,7 +78,7 @@ class Search extends Component { addMovie = (movie) => { return () => { - const movieInfo = { + axios.post('http://localhost:3000/movies', { key: movie.id, title: movie.title, overview: movie.overview, @@ -86,9 +86,7 @@ class Search extends Component { image_url: movie.image_url, external_id: movie.external_id, inventory: 27 - }; - - axios.post('http://localhost:3000/movies', movieInfo) + }) .then((response) => { }) .catch((error) => { From b426b00a74690c7cdf61adffa48886a30485fb4c Mon Sep 17 00:00:00 2001 From: Margaret Finnan Date: Thu, 27 Jun 2019 20:01:06 -0700 Subject: [PATCH 34/39] removed console logs, made selection card only render if a movie or user was selected --- src/App.css | 4 +-- src/App.js | 56 +++++++++++++++++----------------------- src/components/Movie.js | 2 +- src/components/Search.js | 1 - src/components/Select.js | 1 - 5 files changed, 27 insertions(+), 37 deletions(-) diff --git a/src/App.css b/src/App.css index c5c6e8a68..04977686a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,4 @@ -.App { +/* .App { text-align: center; } @@ -25,4 +25,4 @@ @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } -} +} */ diff --git a/src/App.js b/src/App.js index 978985e7c..8520274a0 100644 --- a/src/App.js +++ b/src/App.js @@ -7,9 +7,9 @@ import Search from './components/Search'; import Select from './components/Select'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -const Index = () => { - return (

); -} +// const Index = () => { +// return (

); +// } class App extends Component { constructor(props) { super(props) @@ -22,14 +22,12 @@ class App extends Component { } onSelectCustomer = (customer) => { - console.log(customer); this.setState({ selectedCustomer: customer, }); } onSelectMovie = (movie) => { - console.log(movie); this.setState({ selectedMovie: movie, }); @@ -62,16 +60,13 @@ class App extends Component { } movieLookUp = (movieID) => { - console.log(this.state.movies) - console.log(movieID) return this.state.movies.find(movie => movie.external_id === movieID) } setMovieState = (allMovies) => { - console.log("in setMovieState") this.setState({ movies: allMovies, - }); + }); } render() { @@ -96,34 +91,31 @@ class App extends Component {
-
-
- Current Selections: -