From db92ce8a5211a9e277c232a0a2be45cde20a5277 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Mon, 24 Jun 2019 14:10:11 -0700 Subject: [PATCH 01/39] imported react-router-dom into App.js --- package-lock.json | 102 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 13 ++++++ src/App.js | 54 ++++++++++++++++++------ 3 files changed, 157 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2207e63b9..3e0662036 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5603,6 +5603,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -5777,6 +5782,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz", + "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^2.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^0.4.0" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -5787,6 +5805,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", @@ -8134,6 +8160,16 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -10194,6 +10230,52 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-router": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz", + "integrity": "sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.1.tgz", + "integrity": "sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.0.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz", @@ -10575,6 +10657,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -11685,6 +11772,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz", + "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==" + }, + "tiny-warning": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz", + "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -12122,6 +12219,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index e7e4a7c62..d63126caa 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", + "react-router-dom": "^5.0.1", "react-scripts": "3.0.1" }, "scripts": { @@ -12,5 +13,17 @@ "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/src/App.js b/src/App.js index 203067e4d..5318af681 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,51 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; class App extends Component { + + + Index = () => { + return

Home

; + } + + About = () => { + return

About

; + } + + Users = () => { + return

Users

; + } + render() { - return ( -
-
- logo -

Welcome to React

-
-

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

-
- ); + return ( +
+ +
+ + + {/* + + */} +
+ +
+ ); } } export default App; + + From 4cef164940afd0a15b3ae5214f1b9bdc7a9be189 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Tue, 25 Jun 2019 14:30:05 -0700 Subject: [PATCH 02/39] skeleton of app layout created --- src/App.js | 100 +++++++++++++++++++++++++++++++++++------------------ 1 file changed, 66 insertions(+), 34 deletions(-) diff --git a/src/App.js b/src/App.js index 5318af681..dab942a85 100644 --- a/src/App.js +++ b/src/App.js @@ -3,47 +3,79 @@ import './App.css'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; class App extends Component { - - - Index = () => { - return

Home

; + constructor() { + this.state = { + selectedMovie: "", + selectedCustomer: "", + allRentals: [], + showMovies: true, + showCustomers: false + } } - About = () => { - return

About

; + // Index = () => { + // return

Home

; + // } + + // About = () => { + // return

About

; + // } + + // Users = () => { + // return

Users

; + // } + + showCustomerToggle = () => { + const status = !this.state.showCustomers; + this.setState({showCustomers: status}); } - Users = () => { - return

Users

; + showMovieToggle = () => { + const status = !this.state.showMovies; + this.setState({showMovies: status}); } render() { - return ( -
- -
- - - {/* - - */} -
- -
- ); - } + return ( +
+
+ + + +
+
+ {this.state.showCustomers && } + {this.state.showMovies && } +
+
+ ); + // return ( + //
+ // + //
+ // + + // {/* + // + // */} + //
+ // + //
+ // ); + // } +} } export default App; From f0b6507f2e4b9a8360c3a8cf8c4842229d5bdaac Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Tue, 25 Jun 2019 16:18:39 -0700 Subject: [PATCH 03/39] added customer and customerlist components --- src/App.js | 14 ++++++---- src/components/Customer.js | 15 +++++++++++ src/components/CustomerList.js | 48 ++++++++++++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 src/components/Customer.js create mode 100644 src/components/CustomerList.js diff --git a/src/App.js b/src/App.js index dab942a85..5722cc99e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,19 @@ import React, { Component } from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import CustomerList from './components/CustomerList' + + class App extends Component { - constructor() { + constructor(props) { + super(props) this.state = { selectedMovie: "", selectedCustomer: "", allRentals: [], showMovies: true, - showCustomers: false + showCustomers: true } } @@ -39,13 +43,13 @@ class App extends Component { return (
- - + {/* */} + {/* */}
{this.state.showCustomers && } - {this.state.showMovies && } + {/* {this.state.showMovies && } */}
); diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..db337c8fb --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,15 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Customer = (props) => { + return ( +
+ +
+ ) + + + + +} +export default Customer; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..efe3de63d --- /dev/null +++ b/src/components/CustomerList.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import axios from 'axios'; +import Customer from './Customer' + +class CustomerList extends Component { + constructor(props) { + super(props); + + this.state = { + customerList: [], + } + } + + + componentDidMount() { + axios.get('http://localhost:3000/customers') + .then((response) => { + console.log(response.data); + this.setState( [{customerList: response.data}]) + // const customers = response.data.map(customer => { + // return
  • + // Name: {customer.name} + //
    • + // }); + + // this.setState( {customerList: customers}) + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }) + }) + + } + + render() { + return ( +
    {this.state.customerList}
    + ) + } + + +} + +export default CustomerList; + + From af089fe73397059a7f281df6025a6acb07d71ca6 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Tue, 25 Jun 2019 20:14:34 -0700 Subject: [PATCH 04/39] added showrentals functionality, added rentalLibrary and Movie components --- src/App.js | 11 +++--- src/components/Movie.js | 48 +++++++++++++++++++++++++ src/components/RentalLibrary.js | 63 +++++++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 src/components/Movie.js create mode 100644 src/components/RentalLibrary.js diff --git a/src/App.js b/src/App.js index 5722cc99e..e723a550c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -import CustomerList from './components/CustomerList' +import CustomerList from './components/CustomerList'; +import RentalLibrary from './components/RentalLibrary'; @@ -12,8 +13,8 @@ class App extends Component { selectedMovie: "", selectedCustomer: "", allRentals: [], - showMovies: true, - showCustomers: true + showMovies: false, + showCustomers: false } } @@ -44,12 +45,12 @@ class App extends Component {
    {/* */} - {/* */} +
    {this.state.showCustomers && } - {/* {this.state.showMovies && } */} + {this.state.showMovies && }
    ); diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..944794145 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +const Movie = (props) => { + + const onClickMovie = () => { + props.getMovieTitleCallback(props.title, props.id) + } + + + return ( +
    +
  • +
    + this is an image +
    +
    {props.overview}
    +
    +
    + + + +

    {props.title}

    +
    +
    +
    • +
    + ) +} + +// onClick={() => props.deleteCardCallback(props.id)} + +Movie.propTypes = { + id:PropTypes.number, + title:PropTypes.string, + overview:PropTypes.string, + release_date:PropTypes.string, + image_url:PropTypes.string, + external_id:PropTypes.number, + buttonClassname:PropTypes.string, + grabMovieTitleCallback:PropTypes.func, +}; + +export default Movie; diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js new file mode 100644 index 000000000..c3532b2d5 --- /dev/null +++ b/src/components/RentalLibrary.js @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import Movie from './Movie'; + +class RentalLibrary extends Component { + constructor(props) { + super(props); + + this.state = { + movies: [], + moreMovies: '', + }; + } + + componentDidMount() { + this.getMovies() + } + + getMovies = () => { + axios.get('http://localhost:3000/movies') + .then((response) => { + this.setState({ + movies: response.data, + }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + + + render() { + const allRentals = this.state.movies.map((movie) => { + return + + }); + + + return ( +
    +
    + {allRentals} +
    +
    + ) + } +} + +RentalLibrary.propTypes = { + getMovieTitleCallback:PropTypes.func, +}; + +export default RentalLibrary; From ea1c7e0abf3f0dca09aee14a919761c2bb1d9164 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Tue, 25 Jun 2019 20:44:05 -0700 Subject: [PATCH 05/39] added show customer functionality (mostly just fixed the customer component --- src/components/Customer.js | 41 +++++++++++++++++++++++++++++----- src/components/CustomerList.js | 29 ++++++++++++++++++++---- 2 files changed, 60 insertions(+), 10 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index db337c8fb..c31607c7d 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,15 +1,44 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; const Customer = (props) => { - return ( -
    - -
    - ) + const onClickCustomer = () => { + props.getCustomerNameCallback(props.name, props.id) + } + return ( +
    +
    +
    {props.name}
    +
    {props.address}
    +
    {props.city}, {props.state}
    +
    {props.postal}
    +
    {props.phone}
    +
    ${props.account_credit} account credit
    +
    + {/* */} +
    + + ) } + +Customer.propTypes = { + id:PropTypes.number, + name:PropTypes.string, + address:PropTypes.string, + city:PropTypes.string, + state:PropTypes.string, + postal:PropTypes.string, + phone:PropTypes.string, + account_credit:PropTypes.number, + created_at:PropTypes.instanceOf(Date), + getCustomerNameCallback:PropTypes.func, +}; + export default Customer; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index efe3de63d..587873ea1 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios'; import Customer from './Customer' +import PropTypes from 'prop-types' class CustomerList extends Component { constructor(props) { @@ -17,7 +18,7 @@ class CustomerList extends Component { axios.get('http://localhost:3000/customers') .then((response) => { console.log(response.data); - this.setState( [{customerList: response.data}]) + this.setState( {customerList: response.data}) // const customers = response.data.map(customer => { // return
  • // Name: {customer.name} @@ -29,20 +30,40 @@ class CustomerList extends Component { .catch((error) => { this.setState({ errorMessage: error.message - }) - }) + }); + }); } render() { + const customers = this.state.customerList.map((customer) => { + return + }); + return ( -
    {this.state.customerList}
    +
    + {customers} +
    ) } } +CustomerList.propTypes = { + getCustomerNameCallback:PropTypes.func, +} + export default CustomerList; From 26beca0eebd3314aef853c09ff7b67e8478fa9eb Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Tue, 25 Jun 2019 20:58:50 -0700 Subject: [PATCH 06/39] formatting changes --- src/App.js | 7 +++++-- src/components/Movie.js | 12 +----------- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index e723a550c..2553ea084 100644 --- a/src/App.js +++ b/src/App.js @@ -32,12 +32,15 @@ class App extends Component { showCustomerToggle = () => { const status = !this.state.showCustomers; - this.setState({showCustomers: status}); + this.setState({showCustomers: status, + showMovies: !status + }); } showMovieToggle = () => { const status = !this.state.showMovies; - this.setState({showMovies: status}); + this.setState({showMovies: status, + showCustomers: !status}); } render() { diff --git a/src/components/Movie.js b/src/components/Movie.js index 944794145..e4344ce82 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -4,11 +4,6 @@ import PropTypes from 'prop-types'; const Movie = (props) => { - const onClickMovie = () => { - props.getMovieTitleCallback(props.title, props.id) - } - - return (
  • @@ -19,10 +14,6 @@ const Movie = (props) => {
    -

    {props.title}

    @@ -32,7 +23,6 @@ const Movie = (props) => { ) } -// onClick={() => props.deleteCardCallback(props.id)} Movie.propTypes = { id:PropTypes.number, @@ -42,7 +32,7 @@ Movie.propTypes = { image_url:PropTypes.string, external_id:PropTypes.number, buttonClassname:PropTypes.string, - grabMovieTitleCallback:PropTypes.func, + getMovieTitleCallback:PropTypes.func, }; export default Movie; From ff5ff00a3f806cc3ccef7bfef6114bd2fcc6ebd5 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Tue, 25 Jun 2019 21:05:36 -0700 Subject: [PATCH 07/39] merged customerlibrary branch into this branch, cleaned up formatting --- src/components/Customer.js | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index c31607c7d..be081119f 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -3,26 +3,19 @@ import PropTypes from 'prop-types'; const Customer = (props) => { - const onClickCustomer = () => { - props.getCustomerNameCallback(props.name, props.id) - } return (
    -
    {props.name}
    -
    {props.address}
    -
    {props.city}, {props.state}
    -
    {props.postal}
    +
      {props.name}
    +
  • {props.address}
    • +
  • {props.city}, {props.state}
    • +
    {props.postal}
    -
    {props.phone}
    -
    ${props.account_credit} account credit
    +
  • {props.phone}
    • +
  • ${props.account_credit} account credit
    • - {/* */} ) @@ -37,7 +30,6 @@ Customer.propTypes = { postal:PropTypes.string, phone:PropTypes.string, account_credit:PropTypes.number, - created_at:PropTypes.instanceOf(Date), getCustomerNameCallback:PropTypes.func, }; From 31913285a3f0cea77d778bd1c66f2f3106d58671 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Tue, 25 Jun 2019 21:19:34 -0700 Subject: [PATCH 08/39] refactored app to use react-router --- src/App.js | 32 +++++++++++++++++++++++--------- src/components/Customer.js | 2 -- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 2553ea084..deb93bd72 100644 --- a/src/App.js +++ b/src/App.js @@ -46,15 +46,29 @@ class App extends Component { render() { return (
    -
    - {/* */} - - -
    -
    - {this.state.showCustomers && } - {this.state.showMovies && } -
    + +
    + +
    +
    + + + {/* {this.state.showCustomers && } + {this.state.showMovies && } */} +
    +
    ); // return ( diff --git a/src/components/Customer.js b/src/components/Customer.js index be081119f..a879dfbef 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -3,8 +3,6 @@ import PropTypes from 'prop-types'; const Customer = (props) => { - - return (
    From 120c3feda416ccdf2244bae1268740e32fb2dfc5 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 09:26:07 -0700 Subject: [PATCH 09/39] added search functionality/component --- .gitignore | 1 + package-lock.json | 45 ++++++++++++++++++-- package.json | 2 + src/App.js | 31 ++++++++------ src/components/Search.js | 92 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 155 insertions(+), 16 deletions(-) create mode 100644 src/components/Search.js diff --git a/.gitignore b/.gitignore index d30f40ef4..fbc176002 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ .env.development.local .env.test.local .env.production.local +.env npm-debug.log* yarn-debug.log* diff --git a/package-lock.json b/package-lock.json index 3e0662036..5adc4b8ab 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", @@ -4287,9 +4319,9 @@ } }, "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==" }, "dotenv-expand": { "version": "4.2.0", @@ -10334,6 +10366,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 d63126caa..12575d78b 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.19.0", + "dotenv": "^8.0.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", diff --git a/src/App.js b/src/App.js index deb93bd72..71df8aaf7 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import CustomerList from './components/CustomerList'; import RentalLibrary from './components/RentalLibrary'; +import Search from './components/Search'; @@ -13,8 +14,8 @@ class App extends Component { selectedMovie: "", selectedCustomer: "", allRentals: [], - showMovies: false, - showCustomers: false + // showMovies: false, + // showCustomers: false } } @@ -30,18 +31,18 @@ class App extends Component { // return

    Users

    ; // } - showCustomerToggle = () => { - const status = !this.state.showCustomers; - this.setState({showCustomers: status, - showMovies: !status - }); - } + // showCustomerToggle = () => { + // const status = !this.state.showCustomers; + // this.setState({showCustomers: status, + // showMovies: !status + // }); + // } - showMovieToggle = () => { - const status = !this.state.showMovies; - this.setState({showMovies: status, - showCustomers: !status}); - } + // showMovieToggle = () => { + // const status = !this.state.showMovies; + // this.setState({showMovies: status, + // showCustomers: !status}); + // } render() { return ( @@ -57,6 +58,9 @@ class App extends Component {
  • Customers
    • +
  • + Search +
    • {/* */} @@ -65,6 +69,7 @@ class App extends Component {
    + {/* {this.state.showCustomers && } {this.state.showMovies && } */}
    diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..30d14d7c4 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,92 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +require('dotenv').config(); + +class Search extends Component { + constructor(props) { + super(props); + + this.state = { + result: [], + searchTitle: "", + errorMessage: "", + } + } + + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + onSearch = (event) => { + event.preventDefault(); + + this.searchMovie(this.state.searchTitle); + + this.setState({ + searchTitle: "", + }); + } + + componentDidMount () { + this.searchMovie(); + }; + + searchMovie = (searchTitle) => { + const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}page=1&include_adult=false` + + axios.get(URL) + .then((response) => { + console.log(URL) + const movies = response.data.map((movie) => { + return { + id: movie.id, + key: movie.id, + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id + } + }) + this.setState({ + result: movies, + }); + }) + .catch((error) => { + this.setState({ + errorMessage: error.message, + }) + }) + } + + render() { + return ( +
    +
    +

    Search Movie

    +
    +
    + + + +
    + +
    + )}; + } + + export default Search; + From 7d71cc5ae67e1c44b8bca3611d14b80153c98824 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 10:38:05 -0700 Subject: [PATCH 10/39] added rendering of search results with photo within search component --- src/components/Movie.js | 10 +++---- src/components/Search.js | 60 ++++++++++++++++++++++++++-------------- 2 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index e4344ce82..9c7c363c5 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -6,19 +6,17 @@ const Movie = (props) => { return (
    -
  • +

    {props.title}

    this is an image -
    -
    {props.overview}
    +
    +
    {props.overview}
    - -

    {props.title}

    +
    -
    • ) } diff --git a/src/components/Search.js b/src/components/Search.js index 30d14d7c4..31cb3e483 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; +import Movie from './Movie' require('dotenv').config(); @@ -40,20 +41,19 @@ class Search extends Component { }; searchMovie = (searchTitle) => { - const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}page=1&include_adult=false` + const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}&page=1&include_adult=false` axios.get(URL) .then((response) => { - console.log(URL) - const movies = response.data.map((movie) => { + const movies = response.data.results.map((movie) => { return { id: movie.id, key: movie.id, title: movie.title, overview: movie.overview, release_date: movie.release_date, - image_url: movie.image_url, - external_id: movie.external_id + image_url: `http://image.tmdb.org/t/p/w185//${movie.poster_path}`, + external_id: movie.external_id, } }) this.setState({ @@ -68,23 +68,41 @@ class Search extends Component { } render() { + const results = this.state.result.map((movie, i) => { + + return + }) return ( -
    -
    -

    Search Movie

    -
    -
    - - - -
    - -
    +
    +
    +
    +

    Search Movie

    +
    +
    + + + +
    + + +
    +
    + {results} +
    +
    )}; } From 752fd6b1f8f2c1818c9b0cbcf267e65ff7efc5eb Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Wed, 26 Jun 2019 11:00:29 -0700 Subject: [PATCH 11/39] select customer in state --- src/App.js | 66 ++++++---------------------------- src/components/Customer.js | 6 +++- src/components/CustomerList.js | 20 ++++------- 3 files changed, 22 insertions(+), 70 deletions(-) diff --git a/src/App.js b/src/App.js index deb93bd72..d5790deb2 100644 --- a/src/App.js +++ b/src/App.js @@ -13,34 +13,17 @@ class App extends Component { selectedMovie: "", selectedCustomer: "", allRentals: [], - showMovies: false, - showCustomers: false + customerList: [], } } - // Index = () => { - // return

    Home

    ; - // } - - // About = () => { - // return

    About

    ; - // } - - // Users = () => { - // return

    Users

    ; - // } - - showCustomerToggle = () => { - const status = !this.state.showCustomers; - this.setState({showCustomers: status, - showMovies: !status - }); + getCustomers = (customers) => { + this.setState( {customerList: customers}) } - showMovieToggle = () => { - const status = !this.state.showMovies; - this.setState({showMovies: status, - showCustomers: !status}); + onSelectCustomer = (customerId) => { + const customer = this.state.customerList.find(customer => customer.id === customerId); + this.setState({selectedCustomer: customer}); } render() { @@ -57,47 +40,20 @@ class App extends Component {
  • Customers
    • - {/* - */}
    - - {/* {this.state.showCustomers && } - {this.state.showMovies && } */} + } + />
    ); - // return ( - //
    - // - //
    - // - - // {/* - // - // */} - //
    - //     - //
    - // ); - // } -} + } } export default App; diff --git a/src/components/Customer.js b/src/components/Customer.js index a879dfbef..5eee9bfa7 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -2,6 +2,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; const Customer = (props) => { + const selectCustomer = () => { + return props.selectedCustomerCallback(props.id) + } return (
    @@ -13,6 +16,7 @@ const Customer = (props) => {
  • {props.phone}
  • ${props.account_credit} account credit
    • +
  • Select Customer
    • @@ -28,7 +32,7 @@ Customer.propTypes = { postal:PropTypes.string, phone:PropTypes.string, account_credit:PropTypes.number, - getCustomerNameCallback:PropTypes.func, + selectedCustomerCallback: PropTypes.func, }; export default Customer; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 587873ea1..f23bc24bd 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import axios from 'axios'; import Customer from './Customer' import PropTypes from 'prop-types' @@ -13,26 +12,21 @@ class CustomerList extends Component { } } - componentDidMount() { axios.get('http://localhost:3000/customers') .then((response) => { - console.log(response.data); this.setState( {customerList: response.data}) - // const customers = response.data.map(customer => { - // return
  • - // Name: {customer.name} - //
    • - // }); - - // this.setState( {customerList: customers}) + this.props.getCustomerCallback(this.state.customerList); }) .catch((error) => { this.setState({ errorMessage: error.message }); }); + } + selectCustomerCallback = (id) => { + this.props.selectCustomerCallback(id); } render() { @@ -46,7 +40,7 @@ class CustomerList extends Component { state={customer.state} postal_code={customer.phone} account_credit={customer.account_credit} - getCustomerNameCallback={this.props.getCustomerNameCallback} + selectedCustomerCallback={this.selectCustomerCallback} /> }); @@ -56,12 +50,10 @@ class CustomerList extends Component { ) } - - } CustomerList.propTypes = { - getCustomerNameCallback:PropTypes.func, + selectCustomerCallback: PropTypes.func, } export default CustomerList; From 57fed6d30c9303da41a9f05bcd3875866c17889c Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Wed, 26 Jun 2019 11:07:22 -0700 Subject: [PATCH 12/39] fixed search link --- src/App.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 9168b1a01..cd69d3c78 100644 --- a/src/App.js +++ b/src/App.js @@ -34,7 +34,9 @@ class App extends Component {
    - + } + /> } diff --git a/src/components/Customer.js b/src/components/Customer.js index 5eee9bfa7..e2eb27601 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; const Customer = (props) => { const selectCustomer = () => { - return props.selectedCustomerCallback(props.id) + return props.selectCustomerCallback(props.id) } return ( @@ -32,7 +32,7 @@ Customer.propTypes = { postal:PropTypes.string, phone:PropTypes.string, account_credit:PropTypes.number, - selectedCustomerCallback: PropTypes.func, + selectCustomerCallback: PropTypes.func, }; export default Customer; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index f23bc24bd..0a9892d82 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -40,7 +40,7 @@ class CustomerList extends Component { state={customer.state} postal_code={customer.phone} account_credit={customer.account_credit} - selectedCustomerCallback={this.selectCustomerCallback} + selectCustomerCallback={this.selectCustomerCallback} /> }); diff --git a/src/components/Movie.js b/src/components/Movie.js index 9c7c363c5..49d7b1e3e 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -3,6 +3,9 @@ import PropTypes from 'prop-types'; const Movie = (props) => { + const selectMovie = () => { + return props.selectMovieCallback(props.id) + } return (
    @@ -13,8 +16,7 @@ const Movie = (props) => {
    {props.overview}
    - - +
  • Select Movie
    • @@ -30,7 +32,7 @@ Movie.propTypes = { image_url:PropTypes.string, external_id:PropTypes.number, buttonClassname:PropTypes.string, - getMovieTitleCallback:PropTypes.func, + selectMovieCallback:PropTypes.func, }; export default Movie; diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js index c3532b2d5..335a672ec 100644 --- a/src/components/RentalLibrary.js +++ b/src/components/RentalLibrary.js @@ -9,26 +9,25 @@ class RentalLibrary extends Component { this.state = { movies: [], - moreMovies: '', }; } componentDidMount() { - this.getMovies() - } - - getMovies = () => { axios.get('http://localhost:3000/movies') .then((response) => { - this.setState({ - movies: response.data, - }); + this.setState( {movies: response.data} ); + this.props.getMovieCallback(this.state.movies); }) .catch((error) => { - this.setState({ error: error.message }); + this.setState({ + error: error.message + }); }); } + selectMovieCallback = (id) => { + this.props.selectMovieCallback(id); + } render() { const allRentals = this.state.movies.map((movie) => { @@ -40,12 +39,11 @@ class RentalLibrary extends Component { release_date={movie.release_date} image_url={movie.image_url} external_id={movie.external_id} - getMovieTitleCallback={this.props.getMovieTitleCallback} + selectMovieCallback={this.selectMovieCallback} /> }); - return (
    @@ -57,7 +55,8 @@ class RentalLibrary extends Component { } RentalLibrary.propTypes = { - getMovieTitleCallback:PropTypes.func, + selectMovieCallback:PropTypes.func, + getMovieCallback:PropTypes.func, }; export default RentalLibrary; From 7a3164858cc02b4842cec602611c6d5779371b38 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 13:19:59 -0700 Subject: [PATCH 14/39] working on addMovie functionality --- src/components/Result.js | 39 +++++++++++++++++++++++++++++++++++++++ src/components/Search.js | 18 +++++++++++------- 2 files changed, 50 insertions(+), 7 deletions(-) create mode 100644 src/components/Result.js diff --git a/src/components/Result.js b/src/components/Result.js new file mode 100644 index 000000000..74f80664c --- /dev/null +++ b/src/components/Result.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +const Result = (props) => { + + return ( +
    +
    +

    {props.title}

    + this is an image +
    +
    {props.overview}
    +
    +
    + + + +
    +
    +
    + ) +} + + +Result.propTypes = { + id:PropTypes.number, + title:PropTypes.string, + overview:PropTypes.string, + release_date:PropTypes.string, + image_url:PropTypes.string, + external_id:PropTypes.number, + buttonClassname:PropTypes.string, + getResultTitleCallback:PropTypes.func, +}; + +export default Result; diff --git a/src/components/Search.js b/src/components/Search.js index 31cb3e483..f3962135c 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; -import Movie from './Movie' +import Result from './Result' require('dotenv').config(); @@ -36,6 +36,10 @@ class Search extends Component { }); } + addMovie = (movieId) => { + console.log(movieId) + } + componentDidMount () { this.searchMovie(); }; @@ -45,15 +49,15 @@ class Search extends Component { axios.get(URL) .then((response) => { - const movies = response.data.results.map((movie) => { + const movies = response.data.results.map((movie, i) => { return { - id: movie.id, - key: movie.id, + id: i, + key: i, title: movie.title, overview: movie.overview, release_date: movie.release_date, image_url: `http://image.tmdb.org/t/p/w185//${movie.poster_path}`, - external_id: movie.external_id, + external_id: movie.id, } }) this.setState({ @@ -69,8 +73,8 @@ class Search extends Component { render() { const results = this.state.result.map((movie, i) => { - - return Date: Wed, 26 Jun 2019 13:28:56 -0700 Subject: [PATCH 15/39] using internal api to query external api --- src/components/Search.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Search.js b/src/components/Search.js index f3962135c..ff6250ceb 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -45,19 +45,19 @@ class Search extends Component { }; searchMovie = (searchTitle) => { - const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}&page=1&include_adult=false` + const URL = `http://localhost:3000/movies?query=${searchTitle}` axios.get(URL) .then((response) => { - const movies = response.data.results.map((movie, i) => { + const movies = response.data.map((movie, i) => { return { id: i, key: i, title: movie.title, overview: movie.overview, release_date: movie.release_date, - image_url: `http://image.tmdb.org/t/p/w185//${movie.poster_path}`, - external_id: movie.id, + image_url: movie.image_url, + external_id: movie.external_id, } }) this.setState({ From 73d043f914bedb648e608c7e6249b566eca107f8 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 14:09:04 -0700 Subject: [PATCH 16/39] working on creating post endpoint in rails API. pushing react portion so we can work on rails portion --- src/App.js | 14 ++++++++++++-- src/components/Search.js | 33 ++++++++++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index d97cf0f20..74db8e2c6 100644 --- a/src/App.js +++ b/src/App.js @@ -28,7 +28,7 @@ class App extends Component { } getMovies = (movies) => { - console.log(movies) + this.setState( {movieList: movies}) } @@ -37,6 +37,14 @@ class App extends Component { this.setState({selectedMovie: movie}); } + addMovie = (movie) => { + console.log(this.state.movieList) + const list = [...this.state.movieList] + list.push(movie); + + this.setState({movieList: list}); + } + render() { return (
    @@ -65,7 +73,9 @@ class App extends Component { path="/customers" render={(props) => } /> - + } + />
    diff --git a/src/components/Search.js b/src/components/Search.js index ff6250ceb..dcd3c1b97 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; import Result from './Result' +import Movie from './Movie' require('dotenv').config(); @@ -36,8 +37,34 @@ class Search extends Component { }); } - addMovie = (movieId) => { - console.log(movieId) + addMovieCallback = (movieID) => { + // const movieData = { + // title: movie.title, + // overview: movie.overview, + // release_date: movie.release_date, + // image_url: movie.image_url, + // external_id: movie.external_id, + // inventory: 15 + // } + + axios.post('http://localhost:3000/movies', movieID) + .then((response) => { + const newMovie = response.data.map((movie, i) => { + return + }) + this.props.addMovieCallback(newMovie) + }) + + } componentDidMount () { @@ -74,7 +101,7 @@ class Search extends Component { render() { const results = this.state.result.map((movie, i) => { return Date: Wed, 26 Jun 2019 14:30:50 -0700 Subject: [PATCH 17/39] changed addMovieCallback function back to what it was before --- src/components/Result.js | 2 +- src/components/Search.js | 23 ++++++++++++----------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/Result.js b/src/components/Result.js index 74f80664c..dabde01ea 100644 --- a/src/components/Result.js +++ b/src/components/Result.js @@ -14,7 +14,7 @@ const Result = (props) => {
    - diff --git a/src/components/Search.js b/src/components/Search.js index dcd3c1b97..4ee2bae4a 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -37,17 +37,18 @@ class Search extends Component { }); } - addMovieCallback = (movieID) => { - // const movieData = { - // title: movie.title, - // overview: movie.overview, - // release_date: movie.release_date, - // image_url: movie.image_url, - // external_id: movie.external_id, - // inventory: 15 - // } + addMovieCallback = (movie) => { + const movieData = { + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id, + inventory: 15 + } - axios.post('http://localhost:3000/movies', movieID) + axios.post('http://localhost:3000/movies', movieData) + .then((response) => { const newMovie = response.data.map((movie, i) => { return Date: Wed, 26 Jun 2019 15:13:06 -0700 Subject: [PATCH 18/39] addMovie Post request --- src/components/Search.js | 45 +++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/Search.js b/src/components/Search.js index 4ee2bae4a..921102b23 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -39,31 +39,34 @@ class Search extends Component { addMovieCallback = (movie) => { const movieData = { - title: movie.title, - overview: movie.overview, - release_date: movie.release_date, - image_url: movie.image_url, - external_id: movie.external_id, - inventory: 15 + movie:{ + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id, + inventory: 15 + } } axios.post('http://localhost:3000/movies', movieData) - - .then((response) => { - const newMovie = response.data.map((movie, i) => { - return + + .then((response) => { + console.log(response.data); + const newMovie = response.data.map((movie, i) => { + return + }) + this.props.addMovieCallback(newMovie) }) - this.props.addMovieCallback(newMovie) - }) } From cf7335443ca50f93138ae46291cce63a2683822a Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 15:30:56 -0700 Subject: [PATCH 19/39] fixed addmovie function. successfully adding movies --- src/components/Search.js | 40 +++++++++++++++------------------------- 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/src/components/Search.js b/src/components/Search.js index 921102b23..172dbc40d 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -39,34 +39,24 @@ class Search extends Component { addMovieCallback = (movie) => { const movieData = { - movie:{ - title: movie.title, - overview: movie.overview, - release_date: movie.release_date, - image_url: movie.image_url, - external_id: movie.external_id, - inventory: 15 - } + title: movie.title, + overview: movie.overview, + release_date: movie.release_date, + image_url: movie.image_url, + external_id: movie.external_id, + inventory: 15 } axios.post('http://localhost:3000/movies', movieData) - - .then((response) => { - console.log(response.data); - const newMovie = response.data.map((movie, i) => { - return - }) - this.props.addMovieCallback(newMovie) - }) + + .then((response) => { + console.log(response.data) + + console.log(`successfully added ${response.data.title}`) + }) + .catch((error) => { + this.setState({errorMessage: error.message}) + }) } From e219073a32b25b0ac05432fdbf995d2b9a5fb6c2 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Wed, 26 Jun 2019 15:51:23 -0700 Subject: [PATCH 20/39] added ability to see currently selected movie and customer --- src/App.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/App.js b/src/App.js index 74db8e2c6..b519c2d20 100644 --- a/src/App.js +++ b/src/App.js @@ -45,6 +45,16 @@ class App extends Component { this.setState({movieList: list}); } + getTitle = () => { + const movie = this.state.selectedMovie.title + return movie + } + + getName = () => { + const customer = this.state.selectedCustomer.name + return customer + } + render() { return (
    @@ -61,6 +71,12 @@ class App extends Component {
  • Customers
    • +
  • + This Movie is Currently Selected: {this.getTitle()} +
    • +
  • + This Customer is Currently Selected: {this.getName()} +
    • @@ -78,6 +94,7 @@ class App extends Component { /> +
    ); } From 335dfa36d151959074230f013f06a9f2b94cb035 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Wed, 26 Jun 2019 16:47:08 -0700 Subject: [PATCH 21/39] movie rental --- src/App.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index b519c2d20..fcd037999 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import CustomerList from './components/CustomerList'; import RentalLibrary from './components/RentalLibrary'; import Search from './components/Search'; +import axios from 'axios'; @@ -55,6 +56,29 @@ class App extends Component { return customer } + checkout = () => { + const date = new Date(); + let sevenDays = date.setDate(date.getDate() + 7) + sevenDays = new Date(sevenDays).toISOString() + console.log(date) + const params = { + customer_id: this.state.selectedCustomer.id, + title: this.state.selectedMovie.title, + due_date: sevenDays + } + console.log(params.due_date); + + axios.post(`http://localhost:3000/rentals/${this.state.selectedMovie.title}/check-out`, params) + .then((response) => { + console.log("success"); + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }); + }); + } + render() { return (
    @@ -66,7 +90,7 @@ class App extends Component { Search
  • - Movies + Movies
  • Customers @@ -77,6 +101,7 @@ class App extends Component {
  • This Customer is Currently Selected: {this.getName()}
    • +
  • Checkout
    • From b81946d7ba0f4d28bb6454c887508260d98198fc Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Thu, 27 Jun 2019 09:02:19 -0700 Subject: [PATCH 22/39] homepage rendering --- src/App.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/App.js b/src/App.js index fcd037999..6cdf0623a 100644 --- a/src/App.js +++ b/src/App.js @@ -86,6 +86,9 @@ class App extends Component {
    + ( +
    +

    Welcome to Double A Video Rentals

    +

    Select Customers or Movies at the top to start the checkout process!

    +
    + )}/> + } From 32042362bab3d779673eeb04b35816f8b616323b Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Thu, 27 Jun 2019 10:36:54 -0700 Subject: [PATCH 23/39] organize nav, checkout, and added search image --- package-lock.json | 5 +++++ package.json | 1 + src/App.css | 8 +++++++- src/App.js | 20 ++++++++++---------- src/index.js | 1 + 5 files changed, 24 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5adc4b8ab..52e5306bc 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 12575d78b..2b6042543 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "axios": "^0.19.0", + "bootstrap": "^4.3.1", "dotenv": "^8.0.0", "react": "^16.8.6", "react-dom": "^16.8.6", diff --git a/src/App.css b/src/App.css index c5c6e8a68..9c74ff535 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,4 @@ -.App { +/* .App { text-align: center; } @@ -25,4 +25,10 @@ @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } +} */ + +.checkout { + display: flex; + flex-direction: column; + align-items: flex-end; } diff --git a/src/App.js b/src/App.js index 6cdf0623a..b72d1bd75 100644 --- a/src/App.js +++ b/src/App.js @@ -6,8 +6,6 @@ import RentalLibrary from './components/RentalLibrary'; import Search from './components/Search'; import axios from 'axios'; - - class App extends Component { constructor(props) { super(props) @@ -85,24 +83,26 @@ class App extends Component {
    @@ -99,7 +99,7 @@ class App extends Component {
  • Selected Customer: {this.getName()}
    • -
  • Checkout
    • +
    -

    Search Movie

    +

    Search for new Movie