From 7f2507c346103793ac0fb2156197c05e78bc9dc6 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 15:37:53 -0700 Subject: [PATCH 01/47] files updated by the initial setup --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 951a38e2f..120e3bd86 100644 --- a/package.json +++ b/package.json @@ -13,4 +13,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} From db24a527bd64198eea9ed0aa3f15af390f16c3bd Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Mon, 18 Jun 2018 15:40:10 -0700 Subject: [PATCH 02/47] bundle install changes to package json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 951a38e2f..120e3bd86 100644 --- a/package.json +++ b/package.json @@ -13,4 +13,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} From 4a58ee7629deb789daab428b685b18a58f10fd70 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 15:49:55 -0700 Subject: [PATCH 03/47] created a components folder and created customer component js and css files --- src/components/Customer.css | 0 src/components/Customer.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/Customer.css create mode 100644 src/components/Customer.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/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..e69de29bb From 8e7982be25a0e85c740d6406b3121027f160d1f7 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 15:53:58 -0700 Subject: [PATCH 04/47] created files for the CustomerDetails and CustomerList components, both css and js --- src/components/CustomerDetails.css | 0 src/components/CustomerDetails.js | 0 src/components/CustomerList.css | 0 src/components/CustomerList.js | 0 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/CustomerDetails.css create mode 100644 src/components/CustomerDetails.js create mode 100644 src/components/CustomerList.css create mode 100644 src/components/CustomerList.js diff --git a/src/components/CustomerDetails.css b/src/components/CustomerDetails.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..e69de29bb From 6e9e61c2fc2421a5d260bdcb380aa26cf5592132 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 16:26:25 -0700 Subject: [PATCH 05/47] added logic to CustomerList to make api call to retrieve list of customers from our Rails api, and installed axios to package.json --- package-lock.json | 9 +++++ package.json | 1 + src/App.js | 9 +---- src/components/Customer.js | 20 ++++++++++ src/components/CustomerDetails.js | 19 +++++++++ src/components/CustomerList.js | 65 +++++++++++++++++++++++++++++++ 6 files changed, 116 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 79f52b34f..2bdc7a2f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "1.5.0", + "is-buffer": "1.1.6" + } + }, "axobject-query": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz", diff --git a/package.json b/package.json index 120e3bd86..b5d697449 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", "react-scripts": "1.1.4" diff --git a/src/App.js b/src/App.js index 203067e4d..731b99dda 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,13 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; +import CustomerList from './components/CustomerList'; class App extends Component { render() { return (
-
- logo -

Welcome to React

-
-

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

+
); } diff --git a/src/components/Customer.js b/src/components/Customer.js index e69de29bb..495ef0fb2 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './Customer.css'; +import CustomerDetails from './CustomerDetails'; + +class Customer extends Component { + render() { + + return ( +
+
+ ) + } + +} + + +export default Customer; diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js index e69de29bb..78b518956 100644 --- a/src/components/CustomerDetails.js +++ b/src/components/CustomerDetails.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './CustomerDetails.css'; + +class CustomerDetails extends Component { + render() { + + return ( +
+
+ ) + } + +} + + +export default CustomerDetails; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index e69de29bb..673278877 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -0,0 +1,65 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './CustomerList.css'; +import Customer from './Customer'; + +class CustomerList extends Component { + constructor() { + super(); + + this.state = { + customers: [] + } + } + + componentDidMount() { + axios.get("http://localhost:3000/customers") + .then((response) => { + const customers = this.state.customers; + response.data.forEach((customer) => { + const newCustomer = {}; + newCustomer.id = customer.id; + newCustomer.name = customer.name; + newCustomer.phone = customer.phone; + newCustomer.account_credit = customer.account_credit; + customers.push(newCustomer); + }) + + this.setState({ customers }) + }) + .catch((error) => { + this.setState({ message: error.message}) + }); + } + + seeState = () => { + console.log(this.state.customers) + } + render() { + const customerComponents = this.state.customers.map( (customer) => { + return( +
  • + +
    • ) + }); + return ( +
    +

    Find Customer

    +
      + { customerComponents } +
    +
    + ) + } + +} + + +export default CustomerList; From c2823ede79968d07fd9e98f2a9905b73ca23e0b3 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 16:30:45 -0700 Subject: [PATCH 06/47] added props validation and render content to the Customer Component --- src/components/Customer.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index 495ef0fb2..ac3519032 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -6,10 +6,22 @@ import './Customer.css'; import CustomerDetails from './CustomerDetails'; class Customer extends Component { - render() { + static propTypes = { + id: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + phone: PropTypes.string.isRequired, + credit: PropTypes.number.isRequired, + } + + render() { return (
    +
    ) } From 65a2d2d2a936541899969f669fa0f8e75ec42d6f Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 16:41:18 -0700 Subject: [PATCH 07/47] finished implementing logic for displaying basic customer details to the CustomerList --- src/components/CustomerDetails.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js index 78b518956..bd9fde446 100644 --- a/src/components/CustomerDetails.js +++ b/src/components/CustomerDetails.js @@ -5,11 +5,27 @@ import axios from 'axios'; import './CustomerDetails.css'; class CustomerDetails extends Component { + static propTypes = { + name: PropTypes.string.isRequired, + phone: PropTypes.string.isRequired, + credit: PropTypes.number.isRequired, + } + + displayCredit = () => { + if (this.props.credit.length == 0) { + return
    Account Credit: {this.props.credit}
    + } + + } + render() { return ( -
    -
    +
    +
    Name: { this.props.name }
    +
    Phone Number: {this.props.phone}
    + { this.displayCredit() } +
    ) } From f7f72dc5cf7ef01880881a060eec5a3fddfe2880 Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Mon, 18 Jun 2018 16:53:37 -0700 Subject: [PATCH 08/47] add movie and rental library component files --- src/components/Movie.css | 0 src/components/Movie.js | 30 ++++++++++++++ src/components/RentalLibrary.css | 1 + src/components/RentalLibrary.js | 70 ++++++++++++++++++++++++++++++++ 4 files changed, 101 insertions(+) create mode 100644 src/components/Movie.css create mode 100644 src/components/Movie.js create mode 100644 src/components/RentalLibrary.css create mode 100644 src/components/RentalLibrary.js 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..c530fa7b6 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './Movie.css'; + +class Movie extends Component { + + render() { + console.log('Rendering'); + return ( +
    +

    {this.props.url}

    +

    {this.props.title}

    +

    {this.props.release_date}

    +

    {this.props.inventory}

    +
    + ) + } +} + + +Movie.propTypes = { + title: PropTypes.string.isRequired, + // release_date: PropTypes.datetime.isRequired, + inventory: PropTypes.number.isRequired, + image_url: PropTypes.string.isRequired, + external_id: PropTypes.number.isRequired, +} + +export default Movie; diff --git a/src/components/RentalLibrary.css b/src/components/RentalLibrary.css new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/src/components/RentalLibrary.css @@ -0,0 +1 @@ + diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js new file mode 100644 index 000000000..91c40839e --- /dev/null +++ b/src/components/RentalLibrary.js @@ -0,0 +1,70 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import axios from 'axios'; + +import './RentalLibrary.css'; +import Movie from './Movie'; + +class RentalLibrary extends Component { + + constructor(props) { + super(props); + + this.state = { + movies: [], + } + } + + componentDidMount = () => { + console.log('Component did mount was called'); + + axios.get('') + .then( (response) => { + console.log( response.data ); + this.setState({ + movies: response.data + }); + } ) + .catch( (error) => { + console.log("got to the error"); + console.log(error); + this.setState({ + error: error.message + }); + } ); + } + + renderMovieList = () => { + console.log('Rendering Movie List'); + const componentList = this.state.movie.map((movie, index) => { + return ( + + ); + }); + + return componentList; + } + + render() { + return ( +
    +
    + {this.state.message ? this.state.message: "" } +
    + {this.renderMovieList()} +
    + ); + } +} + +RentalLibrary.propTypes = { +} + +export default RentalLibrary; From 6f5d9c36959eceb90a10679d83bb6b15b6a6fa9e Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Mon, 18 Jun 2018 16:59:22 -0700 Subject: [PATCH 09/47] small changes --- package-lock.json | 9 +++++++++ package.json | 1 + src/App.js | 2 ++ 3 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index 79f52b34f..2bdc7a2f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "1.5.0", + "is-buffer": "1.1.6" + } + }, "axobject-query": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz", diff --git a/package.json b/package.json index 120e3bd86..b5d697449 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", "react-scripts": "1.1.4" diff --git a/src/App.js b/src/App.js index 203067e4d..ec35dac8e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import RentalLibrary from './components/RentalLibrary'; import logo from './logo.svg'; import './App.css'; @@ -13,6 +14,7 @@ class App extends Component {

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

    + ); } From 49c611f7793d59b6ca3a0e8c43efc999120e298e Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 20:51:27 -0700 Subject: [PATCH 10/47] added navigation functionality to a Navigation component by allowing a click event to determine which component is displayed from CustomerList, RentalLibrary, and SearchBar, and began filling in the App component --- src/App.js | 40 ++++++++++++++++++++++++++++--- src/components/Customer.js | 4 ++-- src/components/CustomerDetails.js | 4 ++-- src/components/Navigation.css | 0 src/components/Navigation.js | 32 +++++++++++++++++++++++++ 5 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 src/components/Navigation.css create mode 100644 src/components/Navigation.js diff --git a/src/App.js b/src/App.js index 731b99dda..433760e4a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,48 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; + +import Navigation from './components/Navigation'; import CustomerList from './components/CustomerList'; class App extends Component { + + constructor() { + super(); + + this.state = { + index: 0 + } + } + + setComponent = (index) => { + this.setState({index}); + } + + renderComponent = () => { + if (this.state.index === 1) { + return

    Render: Search Bar

    ; + } else if (this.state.index === 2) { + return

    Render: Rental Library

    ; + } else if (this.state.index === 3) { + return < CustomerList/>; + } + } + + seeState = () => { + console.log(this.state.index); + } + render() { return ( -
    - -
    +
    +
    +

    NorthWest Movies

    + +
    + { this.renderComponent() } + { this.seeState() } +
    ); } } diff --git a/src/components/Customer.js b/src/components/Customer.js index ac3519032..d41f7b217 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -11,9 +11,9 @@ class Customer extends Component { id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, - credit: PropTypes.number.isRequired, + credit: PropTypes.number, } - + render() { return (
    diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js index bd9fde446..320b7ba4e 100644 --- a/src/components/CustomerDetails.js +++ b/src/components/CustomerDetails.js @@ -8,11 +8,11 @@ class CustomerDetails extends Component { static propTypes = { name: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, - credit: PropTypes.number.isRequired, + credit: PropTypes.number, } displayCredit = () => { - if (this.props.credit.length == 0) { + if ( this.props.credit ) { return
    Account Credit: {this.props.credit}
    } diff --git a/src/components/Navigation.css b/src/components/Navigation.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Navigation.js b/src/components/Navigation.js new file mode 100644 index 000000000..208f8a856 --- /dev/null +++ b/src/components/Navigation.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './Navigation.css'; + +class Navigation extends Component { + + static propTypes = { + setComponent: PropTypes.func.isRequired + } + + selectComponent = (event) => { + this.props.setComponent(event.target.value) + } + + render() { + return ( + + ) + } + +} + + +export default Navigation; From a2a1f9b6f70603ca401e9f234126146499054f9e Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 21:05:43 -0700 Subject: [PATCH 11/47] removed unused axios and PropTypes from the beginning of the different componenet files --- src/App.js | 8 ++++---- src/components/Customer.js | 1 - src/components/CustomerDetails.js | 1 - src/components/CustomerList.js | 5 +++-- src/components/Navigation.js | 1 - 5 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 433760e4a..d4832b2cc 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,9 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; import Navigation from './components/Navigation'; import CustomerList from './components/CustomerList'; +import RentalLibrary from './components/RentalLibrary'; class App extends Component { @@ -21,11 +21,11 @@ class App extends Component { renderComponent = () => { if (this.state.index === 1) { - return

    Render: Search Bar

    ; + return

    TO DO: Search Bar

    ; } else if (this.state.index === 2) { - return

    Render: Rental Library

    ; + return < RentalLibrary />; } else if (this.state.index === 3) { - return < CustomerList/>; + return < CustomerList />; } } diff --git a/src/components/Customer.js b/src/components/Customer.js index d41f7b217..09552f971 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './Customer.css'; import CustomerDetails from './CustomerDetails'; diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js index 320b7ba4e..c02b5e95c 100644 --- a/src/components/CustomerDetails.js +++ b/src/components/CustomerDetails.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './CustomerDetails.css'; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 673278877..4d2f8d0b0 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import axios from 'axios'; import './CustomerList.css'; @@ -10,7 +9,8 @@ class CustomerList extends Component { super(); this.state = { - customers: [] + customers: [], + pages: 0 } } @@ -18,6 +18,7 @@ class CustomerList extends Component { axios.get("http://localhost:3000/customers") .then((response) => { const customers = this.state.customers; + console.log(response.data) response.data.forEach((customer) => { const newCustomer = {}; newCustomer.id = customer.id; diff --git a/src/components/Navigation.js b/src/components/Navigation.js index 208f8a856..07bf59d94 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './Navigation.css'; From 3565f84822aea3b1fd491d765026d11c6321d1dd Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Mon, 18 Jun 2018 21:53:44 -0700 Subject: [PATCH 12/47] created needed components to finish rendering navigation. those components include MovieSearch and SearchBar with content but no functionality --- src/App.js | 4 +++- src/components/CustomerList.js | 2 +- src/components/MovieSearch.css | 0 src/components/MovieSearch.js | 18 ++++++++++++++++++ src/components/SearchBar.css | 0 src/components/SearchBar.js | 20 ++++++++++++++++++++ 6 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 src/components/MovieSearch.css create mode 100644 src/components/MovieSearch.js create mode 100644 src/components/SearchBar.css create mode 100644 src/components/SearchBar.js diff --git a/src/App.js b/src/App.js index d4832b2cc..65b076b05 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,8 @@ import './App.css'; import Navigation from './components/Navigation'; import CustomerList from './components/CustomerList'; import RentalLibrary from './components/RentalLibrary'; +import MovieSearch from './components/MovieSearch'; + class App extends Component { @@ -21,7 +23,7 @@ class App extends Component { renderComponent = () => { if (this.state.index === 1) { - return

    TO DO: Search Bar

    ; + return < MovieSearch />; } else if (this.state.index === 2) { return < RentalLibrary />; } else if (this.state.index === 3) { diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 4d2f8d0b0..eb7f4e267 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -15,7 +15,7 @@ class CustomerList extends Component { } componentDidMount() { - axios.get("http://localhost:3000/customers") + axios.get("http://localhost:3000/customers?p=1&n=200") .then((response) => { const customers = this.state.customers; console.log(response.data) diff --git a/src/components/MovieSearch.css b/src/components/MovieSearch.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js new file mode 100644 index 000000000..5bfd075d9 --- /dev/null +++ b/src/components/MovieSearch.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './MovieSearch.css'; +import SearchBar from './SearchBar' + +class MovieSearch extends Component { + + render() { + return ( + + ) + } + +} + + +export default MovieSearch; diff --git a/src/components/SearchBar.css b/src/components/SearchBar.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 000000000..2933fe8f4 --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './SearchBar.css'; + +class SearchBar extends Component { + + render() { + return ( +
    + + +
    + ) + } + +} + + +export default SearchBar; From cd9968df1facc9f0adeb2f4acd7270147fb07a3b Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Tue, 19 Jun 2018 09:58:10 -0700 Subject: [PATCH 13/47] revise movie components to render on app --- src/App.js | 5 +- src/components/Movie.js | 31 ++++++------ src/components/MovieDetails.css | 0 src/components/MovieDetails.js | 26 ++++++++++ src/components/RentalLibrary.js | 85 +++++++++++++++------------------ 5 files changed, 84 insertions(+), 63 deletions(-) create mode 100644 src/components/MovieDetails.css create mode 100644 src/components/MovieDetails.js diff --git a/src/App.js b/src/App.js index 731b99dda..77645870f 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,15 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import CustomerList from './components/CustomerList'; +import RentalLibrary from './components/RentalLibrary'; class App extends Component { render() { return (
    - + + +
    ); } diff --git a/src/components/Movie.js b/src/components/Movie.js index c530fa7b6..5f8f95aea 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,30 +1,29 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import './Movie.css'; +import MovieDetails from './MovieDetails'; class Movie extends Component { - render() { - console.log('Rendering'); + static propTypes = { + id: PropTypes.number.isRequired, + title: PropTypes.string.isRequired, + image_url: PropTypes.string.isRequired, + } + + render() { return ( -
    -

    {this.props.url}

    -

    {this.props.title}

    -

    {this.props.release_date}

    -

    {this.props.inventory}

    -
    +
    + +
    ) } } -Movie.propTypes = { - title: PropTypes.string.isRequired, - // release_date: PropTypes.datetime.isRequired, - inventory: PropTypes.number.isRequired, - image_url: PropTypes.string.isRequired, - external_id: PropTypes.number.isRequired, -} - export default Movie; diff --git a/src/components/MovieDetails.css b/src/components/MovieDetails.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieDetails.js b/src/components/MovieDetails.js new file mode 100644 index 000000000..144cf5428 --- /dev/null +++ b/src/components/MovieDetails.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './MovieDetails.css'; + +class MovieDetails extends Component { + static propTypes = { + title: PropTypes.string.isRequired, + image_url: PropTypes.string.isRequired, + } + + render() { + + return ( +
    +
    Title: {this.props.title}
    +
    {this.props.image_url}
    +
    + ) + } + +} + + +export default MovieDetails; diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js index 91c40839e..0ca00b3f7 100644 --- a/src/components/RentalLibrary.js +++ b/src/components/RentalLibrary.js @@ -1,15 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; - import axios from 'axios'; import './RentalLibrary.css'; import Movie from './Movie'; class RentalLibrary extends Component { - - constructor(props) { - super(props); + constructor() { + super(); this.state = { movies: [], @@ -17,54 +15,49 @@ class RentalLibrary extends Component { } componentDidMount = () => { - console.log('Component did mount was called'); + axios.get("http://localhost:3000/movies") + .then((response) => { + const movies = this.state.movies; + response.data.forEach((movie) => { + const newMovie = {}; + newMovie.id = movie.id; + newMovie.title = movie.title; + newMovie.image_url = movie.image_url; + movies.push(newMovie); + }) + + this.setState({ movies }) + }) + .catch((error) => { + this.setState({ message: error.message}) + }); + } - axios.get('') - .then( (response) => { - console.log( response.data ); - this.setState({ - movies: response.data - }); - } ) - .catch( (error) => { - console.log("got to the error"); - console.log(error); - this.setState({ - error: error.message - }); - } ); + seeState = () => { + console.log(this.state.movies) } - renderMovieList = () => { - console.log('Rendering Movie List'); - const componentList = this.state.movie.map((movie, index) => { - return ( + render() { + const movieComponents = this.state.movies.map( (movie) => { + return( +
  • - ); - }); - - return componentList; - } +
    • ) + }); + return ( +
    +

    Find Movie

    +
      + { movieComponents } +
    +
    + ) + } - render() { - return ( -
    -
    - {this.state.message ? this.state.message: "" } -
    - {this.renderMovieList()} -
    - ); } -} - -RentalLibrary.propTypes = { -} -export default RentalLibrary; + export default RentalLibrary; From 9793000aef1b21c883604d8a14758cec85fec9be Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Tue, 19 Jun 2018 09:59:36 -0700 Subject: [PATCH 14/47] minor spacing change --- src/components/Customer.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index ac3519032..09552f971 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './Customer.css'; import CustomerDetails from './CustomerDetails'; @@ -11,9 +10,9 @@ class Customer extends Component { id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, - credit: PropTypes.number.isRequired, + credit: PropTypes.number, } - + render() { return (
    From 0c8d80a0123b64b628afd9caeba0baf1564c28c0 Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Tue, 19 Jun 2018 10:23:08 -0700 Subject: [PATCH 15/47] added release date fields and image to movie components --- src/components/Movie.js | 4 ++++ src/components/MovieDetails.js | 5 ++++- src/components/RentalLibrary.js | 14 ++++++++++---- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 5f8f95aea..77e84b70c 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -11,6 +11,8 @@ class Movie extends Component { id: PropTypes.number.isRequired, title: PropTypes.string.isRequired, image_url: PropTypes.string.isRequired, + external_id: PropTypes.number.isRequired, + release_date: PropTypes.string.isRequired, } render() { @@ -19,6 +21,8 @@ class Movie extends Component {
    ) diff --git a/src/components/MovieDetails.js b/src/components/MovieDetails.js index 144cf5428..1b5663f1a 100644 --- a/src/components/MovieDetails.js +++ b/src/components/MovieDetails.js @@ -5,9 +5,11 @@ import axios from 'axios'; import './MovieDetails.css'; class MovieDetails extends Component { + static propTypes = { title: PropTypes.string.isRequired, image_url: PropTypes.string.isRequired, + release_date: PropTypes.string.isRequired, } render() { @@ -15,7 +17,8 @@ class MovieDetails extends Component { return (
    Title: {this.props.title}
    -
    {this.props.image_url}
    + {this.props.image_url}/ +
    Release date: {this.props.release_date}
    ) } diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js index 0ca00b3f7..81c6c83fd 100644 --- a/src/components/RentalLibrary.js +++ b/src/components/RentalLibrary.js @@ -23,6 +23,9 @@ class RentalLibrary extends Component { newMovie.id = movie.id; newMovie.title = movie.title; newMovie.image_url = movie.image_url; + newMovie.release_date = movie.release_date; + newMovie.external_id = movie.external_id; + newMovie.overview = movie.overview; movies.push(newMovie); }) @@ -45,15 +48,18 @@ class RentalLibrary extends Component { id={movie.id} title={movie.title} image_url={movie.image_url} + release_date={movie.release_date} + external_id={movie.external_id} + overview={movie.overview} /> ) }); return (
    -

    Find Movie

    -
      - { movieComponents } -
    +

    Find Movie

    +
      + { movieComponents } +
    ) } From c50c44dff77f0e01ff438d2cf0d22be20d59d773 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Tue, 19 Jun 2018 11:04:37 -0700 Subject: [PATCH 16/47] changed the initial state of the App so that the search element renders when you open the app --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 65b076b05..94899e9d1 100644 --- a/src/App.js +++ b/src/App.js @@ -13,7 +13,7 @@ class App extends Component { super(); this.state = { - index: 0 + index: 1 } } From 918ae39b59e0d9cd746160809d3641a521b0e0cd Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Tue, 19 Jun 2018 11:26:12 -0700 Subject: [PATCH 17/47] added the Checkout component to render customer and movie selection for implementing selecting a movie or customer from app lists --- src/App.js | 9 ++++++++- src/components/Checkout.css | 0 src/components/Checkout.js | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/components/Checkout.css create mode 100644 src/components/Checkout.js diff --git a/src/App.js b/src/App.js index 94899e9d1..553c1aa98 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import Navigation from './components/Navigation'; import CustomerList from './components/CustomerList'; import RentalLibrary from './components/RentalLibrary'; import MovieSearch from './components/MovieSearch'; +import Checkout from './components/Checkout'; class App extends Component { @@ -13,7 +14,9 @@ class App extends Component { super(); this.state = { - index: 1 + index: 1, + movie: null, + customer: null } } @@ -39,6 +42,10 @@ class App extends Component { return (
    +

    NorthWest Movies

    diff --git a/src/components/Checkout.css b/src/components/Checkout.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Checkout.js b/src/components/Checkout.js new file mode 100644 index 000000000..5b08113d7 --- /dev/null +++ b/src/components/Checkout.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './Checkout.css'; + +class Checkout extends Component { + static propTypes = { + movie: PropTypes.string, + customer: PropTypes.string + } + + renderSelection = (field) => { + return this.props[field]; + } + + render() { + return ( +
    +

    ~Rental Selection~

    +
    + +

    { this.renderSelection("movie") }

    + +

    { this.renderSelection("customer") }

    + +
    +
    + ) + } + +} + + +export default Checkout; From c6484039e7755e2377395d5670df6429e6bed4e3 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Tue, 19 Jun 2018 13:00:21 -0700 Subject: [PATCH 18/47] added selection button component to project then implemented a series on nested callback function to update the apps state for a selected customer from the onClick of the SelectionButton to the Customer to the Customer list to the App. the change in the App's state then updates the props that are sent to the Checkout component --- src/App.js | 11 ++++++++--- src/components/Checkout.js | 4 ++-- src/components/Customer.js | 9 +++++++++ src/components/CustomerList.js | 19 ++++++++++++++++--- src/components/SelectButton.css | 0 src/components/SelectButton.js | 27 +++++++++++++++++++++++++++ 6 files changed, 62 insertions(+), 8 deletions(-) create mode 100644 src/components/SelectButton.css create mode 100644 src/components/SelectButton.js diff --git a/src/App.js b/src/App.js index 553c1aa98..91520bd83 100644 --- a/src/App.js +++ b/src/App.js @@ -24,18 +24,24 @@ class App extends Component { this.setState({index}); } + setRentalSelection = (field, value) => { + const newState = {}; + newState[field] = value; + this.setState(newState); + } + renderComponent = () => { if (this.state.index === 1) { return < MovieSearch />; } else if (this.state.index === 2) { return < RentalLibrary />; } else if (this.state.index === 3) { - return < CustomerList />; + return < CustomerList getRentalSelection={ this.setRentalSelection }/>; } } seeState = () => { - console.log(this.state.index); + console.log(this.state); } render() { @@ -50,7 +56,6 @@ class App extends Component { { this.renderComponent() } - { this.seeState() }
    ); } diff --git a/src/components/Checkout.js b/src/components/Checkout.js index 5b08113d7..0fba991e3 100644 --- a/src/components/Checkout.js +++ b/src/components/Checkout.js @@ -18,9 +18,9 @@ class Checkout extends Component {

    ~Rental Selection~

    - +

    { this.renderSelection("movie") }

    - +

    { this.renderSelection("customer") }

    diff --git a/src/components/Customer.js b/src/components/Customer.js index 09552f971..5169bf367 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -3,14 +3,22 @@ import PropTypes from 'prop-types'; import './Customer.css'; import CustomerDetails from './CustomerDetails'; +import SelectButton from './SelectButton'; + class Customer extends Component { static propTypes = { + index: PropTypes.number.isRequired, id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, credit: PropTypes.number, + reportCustomer: PropTypes.func.isRequired + } + + reportCustomer = () => { + this.props.reportCustomer(this.props.index); } render() { @@ -21,6 +29,7 @@ class Customer extends Component { phone={this.props.phone} credit={this.props.account_credit} /> +
    ) } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index eb7f4e267..c87920d44 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import axios from 'axios'; +import PropTypes from 'prop-types'; import './CustomerList.css'; import Customer from './Customer'; @@ -14,11 +15,14 @@ class CustomerList extends Component { } } + static propTypes = { + getRentalSelection: PropTypes.func.isRequired + } + componentDidMount() { axios.get("http://localhost:3000/customers?p=1&n=200") .then((response) => { const customers = this.state.customers; - console.log(response.data) response.data.forEach((customer) => { const newCustomer = {}; newCustomer.id = customer.id; @@ -35,18 +39,26 @@ class CustomerList extends Component { }); } + reportCustomerSelection = (index) => { + const customerSelection = this.state.customers[index]; + + this.props.getRentalSelection('customer', customerSelection); + } + seeState = () => { console.log(this.state.customers) } render() { - const customerComponents = this.state.customers.map( (customer) => { + const customerComponents = this.state.customers.map( (customer, index) => { return( -
  • +
    • ) }); @@ -55,6 +67,7 @@ class CustomerList extends Component {

    Find Customer

      { customerComponents } + { this.seeState() }
    ) diff --git a/src/components/SelectButton.css b/src/components/SelectButton.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/SelectButton.js b/src/components/SelectButton.js new file mode 100644 index 000000000..615428584 --- /dev/null +++ b/src/components/SelectButton.js @@ -0,0 +1,27 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './SelectButton.css'; + +class SelectButton extends Component { + + static propTypes = { + field: PropTypes.string.isRequired, + reportSelection: PropTypes.func.isRequired + } + + reportSelection = () => { + this.props.reportSelection() + } + + render() { + + return ( + + ) + } + +} + + +export default SelectButton; From f302d635d11f351beb618b3881f32f7dc9fbca1c Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Tue, 19 Jun 2018 13:14:51 -0700 Subject: [PATCH 19/47] translated all logic used for costumer components to select a customer to the rentalLibrary to select a movie. We now save both a movie and a customer to the App state which populates the Checkout Component with a name and a title --- src/App.js | 2 +- src/components/Movie.js | 17 ++++++++++++----- src/components/RentalLibrary.js | 14 +++++++++++++- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 91520bd83..2e2a34c78 100644 --- a/src/App.js +++ b/src/App.js @@ -34,7 +34,7 @@ class App extends Component { if (this.state.index === 1) { return < MovieSearch />; } else if (this.state.index === 2) { - return < RentalLibrary />; + return < RentalLibrary getRentalSelection={ this.setRentalSelection }/>; } else if (this.state.index === 3) { return < CustomerList getRentalSelection={ this.setRentalSelection }/>; } diff --git a/src/components/Movie.js b/src/components/Movie.js index 77e84b70c..b3687bbac 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,29 +1,36 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './Movie.css'; import MovieDetails from './MovieDetails'; +import SelectButton from './SelectButton'; class Movie extends Component { static propTypes = { + index: PropTypes.number.isRequired, id: PropTypes.number.isRequired, title: PropTypes.string.isRequired, image_url: PropTypes.string.isRequired, external_id: PropTypes.number.isRequired, release_date: PropTypes.string.isRequired, + reportMovie: PropTypes.func.isRequired + } + + reportMovie = () => { + this.props.reportMovie(this.props.index); } render() { return (
    +
    ) } diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js index 81c6c83fd..eee0e53c0 100644 --- a/src/components/RentalLibrary.js +++ b/src/components/RentalLibrary.js @@ -14,6 +14,10 @@ class RentalLibrary extends Component { } } + static propTypes = { + getRentalSelection: PropTypes.func.isRequired + } + componentDidMount = () => { axios.get("http://localhost:3000/movies") .then((response) => { @@ -36,21 +40,29 @@ class RentalLibrary extends Component { }); } + reportMovieSelection = (index) => { + const movieSelection = this.state.movies[index]; + + this.props.getRentalSelection('movie', movieSelection); + } + seeState = () => { console.log(this.state.movies) } render() { - const movieComponents = this.state.movies.map( (movie) => { + const movieComponents = this.state.movies.map( (movie, index) => { return(
    • ) }); From ef621fd75e2f8cf4c0d3d6bbd7fc63b3dee694da Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Tue, 19 Jun 2018 14:49:03 -0700 Subject: [PATCH 20/47] add search functionality --- src/components/CustomerDetails.js | 5 +-- src/components/MovieResults.css | 0 src/components/MovieResults.js | 47 ++++++++++++++++++++++++++++ src/components/MovieSearch.js | 36 +++++++++++++++++++++- src/components/SearchBar.js | 51 +++++++++++++++++++++++++++++-- 5 files changed, 133 insertions(+), 6 deletions(-) create mode 100644 src/components/MovieResults.css create mode 100644 src/components/MovieResults.js diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js index c02b5e95c..bd9fde446 100644 --- a/src/components/CustomerDetails.js +++ b/src/components/CustomerDetails.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import './CustomerDetails.css'; @@ -7,11 +8,11 @@ class CustomerDetails extends Component { static propTypes = { name: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, - credit: PropTypes.number, + credit: PropTypes.number.isRequired, } displayCredit = () => { - if ( this.props.credit ) { + if (this.props.credit.length == 0) { return
    Account Credit: {this.props.credit}
    } diff --git a/src/components/MovieResults.css b/src/components/MovieResults.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/MovieResults.js b/src/components/MovieResults.js new file mode 100644 index 000000000..d73f052fb --- /dev/null +++ b/src/components/MovieResults.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import './MovieResults.css'; +import Movie from './Movie'; + +class MovieResults extends Component { + constructor(props){ + super(props); + } + + renderMovieResults = () => { + const resultList = this.props.results.map( (result) => { + return( +
  • + +
    • ) + }); + return resultList; + } + + render() { + + return ( +
    +
      + { this.renderMovieResults() } +
    +
    + ) + } + } + + MovieResults.propTypes = { + results: PropTypes.array.isRequired, + }; + + + export default MovieResults; diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 5bfd075d9..1731a0992 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -1,14 +1,48 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import './MovieSearch.css'; import SearchBar from './SearchBar' +import MovieResults from './MovieResults' + class MovieSearch extends Component { + constructor() { + super(); + + this.state = { + results: [], + } + } + + searchMovies = (searchTerm) => { + axios.get(`http://localhost:3000/movies?query=${searchTerm}`) + .then((response) => { + const results = this.state.results; + response.data.forEach((result) => { + const searchResult = {}; + searchResult.id = result.id; + searchResult.title = result.title; + searchResult.image_url = result.image_url; + searchResult.release_date = result.release_date; + searchResult.external_id = result.external_id; + searchResult.overview = result.overview; + results.push(searchResult); + }) + this.setState({results}) + }) + .catch((error) => { + this.setState({ message: error.message}); + }); + } render() { return ( - +
    + + +
    ) } diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 2933fe8f4..b794106ae 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -4,17 +4,62 @@ import PropTypes from 'prop-types'; import './SearchBar.css'; class SearchBar extends Component { + constructor () { + super(); + + this.state = { + searchTerm:'', + }; + } + + onFieldChange = (event) => { + const fieldName = event.target.name; + const fieldValue = event.target.value; + const updateState = {}; + updateState[fieldName] = fieldValue; + this.setState(updateState); + } + + valid = () => { + return this.state.text.length > 0 + } + + clearForm = () => { + this.setState({ + searchTerm:'', + }); + } + + onFormSubmit = (event) => { + event.preventDefault(); + + + this.props.searchCallback(this.state.searchTerm); + this.clearForm(); + + } render() { return ( -
    - - + + + +
    ) } } +SearchBar.propTypes = { + searchCallback: PropTypes.func.isRequired, +}; + export default SearchBar; From 670dec9de9785e1d7da585c7883114a9af5ddae9 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Tue, 19 Jun 2018 15:05:50 -0700 Subject: [PATCH 21/47] implemented basic logic to handle checking out a rental, still need to implement error handling --- src/App.js | 16 ++++++++++++++++ src/components/Checkout.js | 12 ++++++++++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 2e2a34c78..e6cff08b7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import './App.css'; +import axios from 'axios'; import Navigation from './components/Navigation'; import CustomerList from './components/CustomerList'; @@ -40,6 +41,20 @@ class App extends Component { } } + createRental = () => { + console.log(this.state.movie.title, this.state.customer.id) + axios.post(`http://localhost:3000/rentals/${this.state.movie.title}/check-out`, + {customer_id: this.state.customer.id}) + .then((response) => { + console.log(response.data) + console.log("Successfully saved Rental") + // this.setState({ customers }) + }) + .catch((error) => { + this.setState({ message: error.message}) + }); + } + seeState = () => { console.log(this.state); } @@ -51,6 +66,7 @@ class App extends Component {

    NorthWest Movies

    diff --git a/src/components/Checkout.js b/src/components/Checkout.js index 0fba991e3..4269d0d73 100644 --- a/src/components/Checkout.js +++ b/src/components/Checkout.js @@ -6,18 +6,26 @@ import './Checkout.css'; class Checkout extends Component { static propTypes = { movie: PropTypes.string, - customer: PropTypes.string + customer: PropTypes.string, + submitRental: PropTypes.func.isRequired } renderSelection = (field) => { return this.props[field]; } + submitForm = (event) => { + event.preventDefault(); + if (this.props.movie || this.props.customer) { + this.props.submitRental(); + } + } + render() { return (

    ~Rental Selection~

    -
    +

    { this.renderSelection("movie") }

    From bf66f291db0579eb15358ccd86611498a6980878 Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Tue, 19 Jun 2018 15:15:15 -0700 Subject: [PATCH 22/47] changed index.html title --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index ed0ebafa1..3ef6483d9 100644 --- a/public/index.html +++ b/public/index.html @@ -19,7 +19,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + NW Movies
    ) } diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js index bd9fde446..0c8384b34 100644 --- a/src/components/CustomerDetails.js +++ b/src/components/CustomerDetails.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './CustomerDetails.css'; @@ -8,11 +7,11 @@ class CustomerDetails extends Component { static propTypes = { name: PropTypes.string.isRequired, phone: PropTypes.string.isRequired, - credit: PropTypes.number.isRequired, + credit: PropTypes.number, } displayCredit = () => { - if (this.props.credit.length == 0) { + if (this.props.credit) { return
    Account Credit: {this.props.credit}
    } diff --git a/src/components/Movie.js b/src/components/Movie.js index b3687bbac..51c516fc8 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -30,7 +30,7 @@ class Movie extends Component { release_date={this.props.release_date} external_id={this.props.external_id} /> - + ) } diff --git a/src/components/MovieDetails.js b/src/components/MovieDetails.js index 1b5663f1a..7a9c64a66 100644 --- a/src/components/MovieDetails.js +++ b/src/components/MovieDetails.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './MovieDetails.css'; diff --git a/src/components/MovieResults.js b/src/components/MovieResults.js index d73f052fb..8020e40cb 100644 --- a/src/components/MovieResults.js +++ b/src/components/MovieResults.js @@ -1,14 +1,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; import './MovieResults.css'; import Movie from './Movie'; class MovieResults extends Component { - constructor(props){ - super(props); - } + renderMovieResults = () => { const resultList = this.props.results.map( (result) => { diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 1731a0992..171274d90 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import axios from 'axios'; import './MovieSearch.css'; From ad29335f104ec45deeca48f50c497bd8c6416c25 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Tue, 19 Jun 2018 15:19:36 -0700 Subject: [PATCH 24/47] removed unused imports from Movie Results component --- src/components/MovieResults.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MovieResults.js b/src/components/MovieResults.js index 8020e40cb..20a2dcfb9 100644 --- a/src/components/MovieResults.js +++ b/src/components/MovieResults.js @@ -6,7 +6,6 @@ import Movie from './Movie'; class MovieResults extends Component { - renderMovieResults = () => { const resultList = this.props.results.map( (result) => { return( From 2145283c546eb00cf38030801fc8b8262e19e0a0 Mon Sep 17 00:00:00 2001 From: Kaitlin Forsman Date: Tue, 19 Jun 2018 17:01:03 -0700 Subject: [PATCH 25/47] finished initial styling of the header of the app wich includes styling the navigation component and the checkout component --- public/index.html | 1 + src/App.css | 63 ++++++++++++++++++++++++++--------- src/App.js | 6 ++-- src/components/Checkout.css | 26 +++++++++++++++ src/components/Checkout.js | 19 ++++++----- src/components/Navigation.css | 20 +++++++++++ src/components/Navigation.js | 2 +- 7 files changed, 109 insertions(+), 28 deletions(-) diff --git a/public/index.html b/public/index.html index 3ef6483d9..d34d36251 100644 --- a/public/index.html +++ b/public/index.html @@ -20,6 +20,7 @@ Learn how to configure a non-root public URL by running `npm run build`. --> NW Movies +