From 2de5b0e956499ce6a40cc5a3f2b0cc72bac1e899 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Mon, 18 Jun 2018 16:12:01 -0700 Subject: [PATCH 01/38] adds components --- package.json | 2 +- src/components/Customer.js | 0 src/components/CustomerList.js | 0 src/components/LibraryList.js | 0 src/components/LibraryMovie.js | 0 src/components/Store.js | 0 6 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 src/components/Customer.js create mode 100644 src/components/CustomerList.js create mode 100644 src/components/LibraryList.js create mode 100644 src/components/LibraryMovie.js create mode 100644 src/components/Store.js 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 +} diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Store.js b/src/components/Store.js new file mode 100644 index 000000000..e69de29bb From ea1e11d6b2c0d3541804f0b97d23df2b7551179c Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 19 Jun 2018 08:54:53 -0700 Subject: [PATCH 02/38] adds LibraryMovie component --- src/components/LibraryMovie.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js index e69de29bb..cc5b8e758 100644 --- a/src/components/LibraryMovie.js +++ b/src/components/LibraryMovie.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +// import './LibraryMovie.css'; + +class LibraryMovie extends Component { + + addMovie = (event) => { + console.log(event.target.id); + event.preventDefault(); + this.props.addMovieToRental(this.props.id); + } + + render() { + console.log('Rendering a movie') + return ( +
+

I am a movie

+ +
+ ) + } + } + + Card.propTypes = { + text: PropTypes.string.isRequired, + image_url: PropTypes.string, + + id: PropTypes.number.isRequired, + }; + + export default LibraryMovie; From 45793b62f89c664cc3d42937b5470f0919080547 Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Tue, 19 Jun 2018 09:43:09 -0700 Subject: [PATCH 03/38] added Customer component and CustomerList component. Customer component styles a customers name and the amount of rentals. CustomerList makes call to Rails Api and populates a list of Customer components. --- package-lock.json | 9 ++++++ package.json | 1 + src/App.js | 5 ++++ src/components/Customer.js | 29 ++++++++++++++++++ src/components/CustomerList.js | 55 ++++++++++++++++++++++++++++++++++ 5 files changed, 99 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..a0cb6b2cd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import Customer from './components/Customer.js' +import CustList from './components/CustomerList.js' import logo from './logo.svg'; import './App.css'; @@ -13,6 +15,9 @@ class App extends Component {

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..b31a3c035 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class Customer extends Component { + //1. button for number of rentals in the Customer list + // Method - onclick function that will be linked (reserve submit button). Will be linked to a method that increases the count of a specific customer. Function will modify state of a customer. + + constructor(){ + super(); + this.state = { + numberOfrentals: 0, + } + } + + render(){ + return( +
+

{this.props.name}

+

Number of rentals: {this.state.numberOfrentals}

+
+ ) + } +} + +Customer.propTypes = { + name: PropTypes.string.isRequired +} + +export default Customer; diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index e69de29bb..cf3e962c8 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -0,0 +1,55 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import Customer from './Customer.js' + +class CustomerList extends Component { + +constructor(){ + super(); + this.state = { + customers:[] + } +} + +componentDidMount = () => { + axios.get('http://localhost:3000/customers') + .then( (response) => { + // console.log(response.data) + this.setState({ + customers: response.data + }); + } ) + .catch( (error) => { + console.log("got to the error"); + console.log(error); + this.setState({ + error: error.message + }); + } ); +} + +customerList = () => { + console.log('Pulling list of customers') + const customerList = this.state.customers.map((aCustomer, index) => { + return ( + + ); +}); + return customerList; +} + + render() { + return( +
+ {this.customerList()} +
+ ) + } +} + + +export default CustomerList; From 8b3e979c22b6cea4492050c59b43dafbe2d50ba9 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 19 Jun 2018 10:10:54 -0700 Subject: [PATCH 04/38] adds LibraryList component - prints all library movies to screen --- src/App.js | 2 ++ src/components/LibraryList.js | 58 ++++++++++++++++++++++++++++++++++ src/components/LibraryMovie.js | 12 ++++--- 3 files changed, 68 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index a0cb6b2cd..2eebd4d5b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import Customer from './components/Customer.js' import CustList from './components/CustomerList.js' +import LibraryList from './components/LibraryList.js' import logo from './logo.svg'; import './App.css'; @@ -17,6 +18,7 @@ class App extends Component {

+

); diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js index e69de29bb..2ce202298 100644 --- a/src/components/LibraryList.js +++ b/src/components/LibraryList.js @@ -0,0 +1,58 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import LibraryMovie from './LibraryMovie.js' + +class LibraryList extends Component { + +constructor(){ + super(); + this.state = { + movies:[] + } +} + +componentDidMount = () => { + axios.get('http://localhost:3000/movies') + .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 + }); + } ); +} + +libraryList = () => { + console.log('Pulling list of movies') + const libraryList = this.state.movies.map((aMovie, index) => { + return ( + + ); +}); + return libraryList; +} + + render() { + return( +
+ {this.libraryList()} +
+ ) + } +} + + +export default LibraryList; diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js index cc5b8e758..9cae75f5c 100644 --- a/src/components/LibraryMovie.js +++ b/src/components/LibraryMovie.js @@ -14,17 +14,21 @@ class LibraryMovie extends Component { console.log('Rendering a movie') return (
-

I am a movie

+

{this.props.title}

+ movie image +

Release Date: {this.props.release_date}

+

Overview:

+

Overview: {this.props.overview}

+
) } } - Card.propTypes = { - text: PropTypes.string.isRequired, + LibraryMovie.propTypes = { + title: PropTypes.string.isRequired, image_url: PropTypes.string, - id: PropTypes.number.isRequired, }; From 5a626a0a94e897716bd76589c5f63e8777f7270c Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 19 Jun 2018 11:05:27 -0700 Subject: [PATCH 05/38] adds movie search functionality --- .gitignore | 1 + src/App.js | 2 + src/components/LibraryMovie.js | 3 ++ src/components/Movie.js | 39 ++++++++++++++++++ src/components/MovieSearch.js | 60 ++++++++++++++++++++++++++++ src/components/MovieSearchForm.js | 66 +++++++++++++++++++++++++++++++ 6 files changed, 171 insertions(+) create mode 100644 src/components/Movie.js create mode 100644 src/components/MovieSearch.js create mode 100644 src/components/MovieSearchForm.js diff --git a/.gitignore b/.gitignore index d30f40ef4..b0bca842c 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ /build # misc +.env .DS_Store .env.local .env.development.local diff --git a/src/App.js b/src/App.js index 2eebd4d5b..9721229b5 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import Customer from './components/Customer.js' import CustList from './components/CustomerList.js' import LibraryList from './components/LibraryList.js' +import MovieSearch from './components/MovieSearch.js' import logo from './logo.svg'; import './App.css'; @@ -17,6 +18,7 @@ class App extends Component { To get started, edit src/App.js and save to reload.

+

diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js index 9cae75f5c..945ee6b7b 100644 --- a/src/components/LibraryMovie.js +++ b/src/components/LibraryMovie.js @@ -30,6 +30,9 @@ class LibraryMovie extends Component { title: PropTypes.string.isRequired, image_url: PropTypes.string, id: PropTypes.number.isRequired, + release_date: PropTypes.string, + overview: PropTypes.string, + addMovieToRental: PropTypes.func.isRequired }; export default LibraryMovie; diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..8e88223e4 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +// import './LibraryMovie.css'; + +class LibraryMovie extends Component { + + addMovieToLibrary = (event) => { + console.log(event.target.id); + event.preventDefault(); + this.props.addMovieToLibrary(this.props.id); + } + + render() { + console.log('Rendering a movie') + return ( +
+

{this.props.title}

+ movie image +

Release Date: {this.props.release_date}

+

Overview:

+

Overview: {this.props.overview}

+ + +
+ ) + } + } + + LibraryMovie.propTypes = { + title: PropTypes.string.isRequired, + image_url: PropTypes.string, + id: PropTypes.number.isRequired, + poster_path: PropTypes.string, + release_date: PropTypes.string, + overview: PropTypes.string, + addMovieToLibrary: PropTypes.func.isRequired + }; + + export default LibraryMovie; diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js new file mode 100644 index 000000000..3c77d9cd3 --- /dev/null +++ b/src/components/MovieSearch.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import Movie from './Movie.js' +import MovieSearchForm from './MovieSearchForm.js' + +class MovieSearch extends Component { + +constructor(){ + super(); + this.state = { + movies:[] + } +} + +searchMovieAPI = (title) => { + axios.get(`https://api.themoviedb.org/3/search/movie?api_key=c880315e20c6b7ec240bbd68aff8f201&query=${title}`) + .then( (response) => { + // console.log(response.data) + this.setState({ + movies: response.data.results + }); + } ) + .catch( (error) => { + console.log("got to the error"); + console.log(error); + this.setState({ + error: error.message + }); + } ); +} + +movieSearchShow = () => { + console.log('Pulling list of customers') + const movieList = this.state.movies.map((movie, index) => { + return ( + + ); +}); +return movieList +} + + render() { + return( +
+ + {this.movieSearchShow()} +
+ ) + } +} + + +export default MovieSearch; diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js new file mode 100644 index 000000000..0d19f12a2 --- /dev/null +++ b/src/components/MovieSearchForm.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + + + +class MovieSearchForm extends Component { + constructor() { + super(); + + this.state = { + text:'', + }; + } + + onFieldChange = (event) => { + const fieldName = event.target.name; + const fieldValue = event.target.value; + const updateState = {}; + updateState[fieldName] = fieldValue; + this.setState(updateState); + } + + + clearForm = () => { + this.setState({ + text: '', + emoji: '', + }) + } + + onFormSubmit = (event) => { + event.preventDefault(); + this.props.searchMovieAPI(this.state) + this.clearForm() + } + + render() { + return( +
+

Search for Movie by Title:

+
+
+ + +
+
+ +
+
+
+ ); + } + +} + +MovieSearchForm.propTypes = { + searchMovieCallBack: PropTypes.func.isRequired, +} + +export default MovieSearchForm; From b09ccce2ee5eb23c1a74d6fc927ae96bdba1d757 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 19 Jun 2018 12:50:10 -0700 Subject: [PATCH 06/38] changed front end to talk to Rails file and not get movie search from MovieDB directly --- src/components/Movie.js | 15 ++++++++------- src/components/MovieSearch.js | 17 ++++++++++------- src/components/MovieSearchForm.js | 24 +++++++++++++++--------- 3 files changed, 33 insertions(+), 23 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 8e88223e4..4dacb88c4 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; // import './LibraryMovie.css'; -class LibraryMovie extends Component { +class Movie extends Component { addMovieToLibrary = (event) => { console.log(event.target.id); @@ -12,10 +12,11 @@ class LibraryMovie extends Component { render() { console.log('Rendering a movie') + console.log(this.props) return (
-

{this.props.title}

- movie image +

{this.props.name}

+

Release Date: {this.props.release_date}

Overview:

Overview: {this.props.overview}

@@ -26,14 +27,14 @@ class LibraryMovie extends Component { } } - LibraryMovie.propTypes = { - title: PropTypes.string.isRequired, + Movie.propTypes = { + name: PropTypes.string.isRequired, image_url: PropTypes.string, id: PropTypes.number.isRequired, - poster_path: PropTypes.string, + image_url: PropTypes.string, release_date: PropTypes.string, overview: PropTypes.string, addMovieToLibrary: PropTypes.func.isRequired }; - export default LibraryMovie; + export default Movie; diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 3c77d9cd3..fe485cff3 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -6,19 +6,20 @@ import MovieSearchForm from './MovieSearchForm.js' class MovieSearch extends Component { -constructor(){ - super(); +constructor(props) { + super(props); this.state = { movies:[] } } searchMovieAPI = (title) => { - axios.get(`https://api.themoviedb.org/3/search/movie?api_key=c880315e20c6b7ec240bbd68aff8f201&query=${title}`) + axios.get(`http://localhost:3000/movies?query=${ title }`) .then( (response) => { - // console.log(response.data) + console.log(response) this.setState({ - movies: response.data.results + movies: response.data, + message: `Found ${response.data.length} results for "${title}" ` }); } ) .catch( (error) => { @@ -37,7 +38,7 @@ movieSearchShow = () => { @@ -49,7 +50,9 @@ return movieList render() { return(
- + +

{this.state.error}

+

{this.state.message}

{this.movieSearchShow()}
) diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 0d19f12a2..6b0e35525 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -9,7 +9,7 @@ class MovieSearchForm extends Component { super(); this.state = { - text:'', + title:'', }; } @@ -21,18 +21,24 @@ class MovieSearchForm extends Component { this.setState(updateState); } + valid = () => { + return this.state.title.length > 0; + } + clearForm = () => { this.setState({ - text: '', - emoji: '', + title: '', }) } onFormSubmit = (event) => { event.preventDefault(); - this.props.searchMovieAPI(this.state) - this.clearForm() + console.log(this.state); + if (this.valid()) { + this.props.searchForMovie(this.state.title) + this.clearForm(); + } } render() { @@ -41,10 +47,10 @@ class MovieSearchForm extends Component {

Search for Movie by Title:

- + @@ -60,7 +66,7 @@ class MovieSearchForm extends Component { } MovieSearchForm.propTypes = { - searchMovieCallBack: PropTypes.func.isRequired, + searchForMovie: PropTypes.func.isRequired, } export default MovieSearchForm; From bf11cc502d6c87da332d396baa13fd1e8869dfda Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Tue, 19 Jun 2018 15:16:17 -0700 Subject: [PATCH 07/38] user is able to click on button underneath customer and have a customer's name tracked before a reservation. --- src/App.js | 36 +++++++++++++++++++++++- src/components/Customer.js | 12 +++++++- src/components/CustomerList.js | 10 ++++++- src/components/CustomerRentalButton.js | 25 +++++++++++++++++ src/components/Rental.js | 38 ++++++++++++++++++++++++++ 5 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 src/components/CustomerRentalButton.js create mode 100644 src/components/Rental.js diff --git a/src/App.js b/src/App.js index 2eebd4d5b..a99125dd3 100644 --- a/src/App.js +++ b/src/App.js @@ -3,9 +3,36 @@ import Customer from './components/Customer.js' import CustList from './components/CustomerList.js' import LibraryList from './components/LibraryList.js' import logo from './logo.svg'; +import Rental from './components/Rental.js' import './App.css'; class App extends Component { + // App needs to know which person has been selectedCustomer// + //pass that name down to the Rental .js file + + //have the state of the customer and the movie + //updated by the individual components + //pass the values into the lower level components as + //props. + constructor(){ + super(); + this.state = { + selectedCustomer: '', + selectedMovie:'' + } + } + + appLevelcustomer = (aCustomer) =>{ + this.setState({ + selectedCustomer: aCustomer + }) + } + + + + + + render() { return (
@@ -13,11 +40,18 @@ class App extends Component { 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 b31a3c035..ce89c06a2 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; - +import CustRentButton from './CustomerRentalButton.js' class Customer extends Component { //1. button for number of rentals in the Customer list // Method - onclick function that will be linked (reserve submit button). Will be linked to a method that increases the count of a specific customer. Function will modify state of a customer. @@ -12,11 +12,21 @@ class Customer extends Component { } } + selectedCustomerfromButton = () =>{ + this.props.custTolist(this.props.name) + } + render(){ return(

{this.props.name}

Number of rentals: {this.state.numberOfrentals}

+

+ +

) } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index cf3e962c8..242bf977c 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -15,7 +15,6 @@ constructor(){ componentDidMount = () => { axios.get('http://localhost:3000/customers') .then( (response) => { - // console.log(response.data) this.setState({ customers: response.data }); @@ -29,6 +28,13 @@ componentDidMount = () => { } ); } +selectedCustomer = (anEvent) => { + this.props.appCustomer(anEvent) +} + + + + customerList = () => { console.log('Pulling list of customers') const customerList = this.state.customers.map((aCustomer, index) => { @@ -36,12 +42,14 @@ customerList = () => { ); }); return customerList; } + render() { return(
diff --git a/src/components/CustomerRentalButton.js b/src/components/CustomerRentalButton.js new file mode 100644 index 000000000..c26566026 --- /dev/null +++ b/src/components/CustomerRentalButton.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class CustomerRentalButton extends Component { + +//onclick - pass into parent function + + + render(){ + return( + + ) + } +} + + + +CustomerRentalButton.propTypes ={ + rentalCustomer:PropTypes.string.isRequired +} + + +export default CustomerRentalButton; diff --git a/src/components/Rental.js b/src/components/Rental.js new file mode 100644 index 000000000..030baac92 --- /dev/null +++ b/src/components/Rental.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Cust from './Customer.js' + +class Rental extends Component { + + // clickedUser = (user) =>{ + // this.setState( + // {userName:user} + // ) + // } + // + // clickedMovieName = (movie) =>{ + // this.setState( + // {movieName:movie} + // ) + // } + + render(){ + return( + +
+ + +
+
+ +
+ + ) + } +} + +Rental.propTypes = { + customerName: PropTypes.string.isRequired, + movieName: PropTypes.string.isRequired +} +export default Rental; From de094a6a89782a81b374f913bae61bd0d5bc03f1 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 19 Jun 2018 15:21:29 -0700 Subject: [PATCH 08/38] working on functionality to add movie to the library video list --- src/components/LibraryList.js | 40 +++++++++++++++++++++++++++++------ src/components/Movie.js | 9 ++++---- src/components/MovieSearch.js | 28 ++++++++++++++++++++++-- 3 files changed, 64 insertions(+), 13 deletions(-) diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js index 2ce202298..ac63f6c1f 100644 --- a/src/components/LibraryList.js +++ b/src/components/LibraryList.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; import LibraryMovie from './LibraryMovie.js' +import Movie from './Movie.js' class LibraryList extends Component { @@ -12,6 +13,8 @@ constructor(){ } } + + componentDidMount = () => { axios.get('http://localhost:3000/movies') .then( (response) => { @@ -33,22 +36,45 @@ libraryList = () => { console.log('Pulling list of movies') const libraryList = this.state.movies.map((aMovie, index) => { return ( - + + ); }); return libraryList; } +// addMovieToLibrary = (movie) => { +// const movies = this.state.movies; +// axios.post(`http://localhost:3000/movies/`, movie) +// .then((response) => { +// movie.id = response.data.id; +// movies.push(movie); +// console.log(movie); +// this.setState({ +// movies, +// message: `Successfully Added a new Movie to the Rental Library` +// }); +// }) +// .catch((error) => { +// console.log(error) +// this.setState({ +// message: error.message, +// }); +// }); +// } + + render() { return(
{this.libraryList()} +
) } diff --git a/src/components/Movie.js b/src/components/Movie.js index 4dacb88c4..a59e1f501 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import LibraryList from './LibraryList.js' // import './LibraryMovie.css'; class Movie extends Component { @@ -7,7 +8,7 @@ class Movie extends Component { addMovieToLibrary = (event) => { console.log(event.target.id); event.preventDefault(); - this.props.addMovieToLibrary(this.props.id); + this.props.addMovie(this.props.movie); } render() { @@ -19,9 +20,9 @@ class Movie extends Component {

Release Date: {this.props.release_date}

Overview:

-

Overview: {this.props.overview}

+

{this.props.overview}

- +
) } @@ -34,7 +35,7 @@ class Movie extends Component { image_url: PropTypes.string, release_date: PropTypes.string, overview: PropTypes.string, - addMovieToLibrary: PropTypes.func.isRequired + addMovie: PropTypes.func.isRequired }; export default Movie; diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index fe485cff3..7ef0ada6b 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -31,6 +31,26 @@ searchMovieAPI = (title) => { } ); } +addMovieToLibrary = (movie) => { + const movies = this.state.movies; + axios.post(`http://localhost:3000/movies/`, movie) + .then((response) => { + movie.id = response.data.id; + movies.push(movie); + console.log(movie); + this.setState({ + movies, + message: `Successfully Added a new Movie to the Rental Library` + }); + }) + .catch((error) => { + console.log(error) + this.setState({ + message: error.message, + }); + }); + } + movieSearchShow = () => { console.log('Pulling list of customers') const movieList = this.state.movies.map((movie, index) => { @@ -41,18 +61,22 @@ movieSearchShow = () => { image_url={movie.image_url} release_date={movie.release_date} overview={movie.overview} + addMovie={this.addMovieToLibrary} + movie={movie} /> ); }); return movieList } + + render() { return(
-

{this.state.error}

-

{this.state.message}

+

{this.state.error}

+

{this.state.message}

{this.movieSearchShow()}
) From 159c2ea5072fca58d8784aee11f1583c4e79ca19 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 19 Jun 2018 17:24:32 -0700 Subject: [PATCH 09/38] small change to movie.js --- package-lock.json | 72 +++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 3 -- src/components/LibraryList.js | 26 +---------- src/components/Movie.js | 19 +++++--- src/components/MovieSearch.js | 21 +-------- src/components/MovieSearchForm.js | 2 +- 7 files changed, 88 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2bdc7a2f0..cdd05bc6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4666,6 +4666,28 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=" }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "resolve-pathname": "2.2.0", + "value-equal": "0.4.0", + "warning": "3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.3.1" + } + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -4676,6 +4698,11 @@ "minimalistic-crypto-utils": "1.0.1" } }, + "hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8818,6 +8845,33 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz", "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, + "react-router": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", + "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", + "requires": { + "history": "4.7.2", + "hoist-non-react-statics": "2.5.5", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "path-to-regexp": "1.7.0", + "prop-types": "15.6.1", + "warning": "4.0.1" + } + }, + "react-router-dom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", + "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", + "requires": { + "history": "4.7.2", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "prop-types": "15.6.1", + "react-router": "4.3.1", + "warning": "4.0.1" + } + }, "react-scripts": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz", @@ -9240,6 +9294,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=" }, + "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", @@ -10573,6 +10632,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", @@ -10609,6 +10673,14 @@ "makeerror": "1.0.11" } }, + "warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "requires": { + "loose-envify": "1.3.1" + } + }, "watch": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz", diff --git a/package.json b/package.json index b5d697449..d170d92c8 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", + "react-router-dom": "^4.3.1", "react-scripts": "1.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index c77190ef7..8aaeea687 100644 --- a/src/App.js +++ b/src/App.js @@ -46,9 +46,6 @@ class App extends Component { customerName={this.state.selectedCustomer} />

-

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

diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js index ac63f6c1f..741199213 100644 --- a/src/components/LibraryList.js +++ b/src/components/LibraryList.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import axios from 'axios'; import LibraryMovie from './LibraryMovie.js' import Movie from './Movie.js' @@ -13,8 +12,6 @@ constructor(){ } } - - componentDidMount = () => { axios.get('http://localhost:3000/movies') .then( (response) => { @@ -49,32 +46,11 @@ libraryList = () => { return libraryList; } -// addMovieToLibrary = (movie) => { -// const movies = this.state.movies; -// axios.post(`http://localhost:3000/movies/`, movie) -// .then((response) => { -// movie.id = response.data.id; -// movies.push(movie); -// console.log(movie); -// this.setState({ -// movies, -// message: `Successfully Added a new Movie to the Rental Library` -// }); -// }) -// .catch((error) => { -// console.log(error) -// this.setState({ -// message: error.message, -// }); -// }); -// } - - render() { return(

{this.libraryList()} - +
) } diff --git a/src/components/Movie.js b/src/components/Movie.js index a59e1f501..d1253c714 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,15 +1,21 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import LibraryList from './LibraryList.js' +import axios from 'axios'; // import './LibraryMovie.css'; class Movie extends Component { - addMovieToLibrary = (event) => { - console.log(event.target.id); - event.preventDefault(); - this.props.addMovie(this.props.movie); - } + + addMovieToLibrary = () => { + const URL = `http://localhost:3000/movies/` + axios.post(URL + `?title=${this.props.name}&release_date=${this.props.release_date}&image_url=${this.props.image_url}&overview=${this.props.overview}`) + .then((response) => { + console.log(response) + }) + .catch((error) => { + console.log(error); + }); + } render() { console.log('Rendering a movie') @@ -32,7 +38,6 @@ class Movie extends Component { name: PropTypes.string.isRequired, image_url: PropTypes.string, id: PropTypes.number.isRequired, - image_url: PropTypes.string, release_date: PropTypes.string, overview: PropTypes.string, addMovie: PropTypes.func.isRequired diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 7ef0ada6b..74442b981 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 Movie from './Movie.js' import MovieSearchForm from './MovieSearchForm.js' @@ -31,25 +30,7 @@ searchMovieAPI = (title) => { } ); } -addMovieToLibrary = (movie) => { - const movies = this.state.movies; - axios.post(`http://localhost:3000/movies/`, movie) - .then((response) => { - movie.id = response.data.id; - movies.push(movie); - console.log(movie); - this.setState({ - movies, - message: `Successfully Added a new Movie to the Rental Library` - }); - }) - .catch((error) => { - console.log(error) - this.setState({ - message: error.message, - }); - }); - } + movieSearchShow = () => { console.log('Pulling list of customers') diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 6b0e35525..99f021418 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -44,7 +44,7 @@ class MovieSearchForm extends Component { render() { return(
-

Search for Movie by Title:

+

Search for Movie by Title:

From a68bc9510b7773c4ef71436cd9a827d6514406e1 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 20 Jun 2018 14:22:23 -0700 Subject: [PATCH 10/38] working with Movie component, trying to get a message to flash when adding movie from DB to library - not working yet --- src/App.js | 5 +++++ src/components/Movie.js | 1 + 2 files changed, 6 insertions(+) diff --git a/src/App.js b/src/App.js index 8aaeea687..b6444208a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,9 @@ import React, { Component } from 'react'; +import { + BrowserRouter as Router, + Route, + Link +} from 'react-router-dom'; import Customer from './components/Customer.js' import CustList from './components/CustomerList.js' import LibraryList from './components/LibraryList.js' diff --git a/src/components/Movie.js b/src/components/Movie.js index d1253c714..f165788c9 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -11,6 +11,7 @@ class Movie extends Component { axios.post(URL + `?title=${this.props.name}&release_date=${this.props.release_date}&image_url=${this.props.image_url}&overview=${this.props.overview}`) .then((response) => { console.log(response) + `Successfully added "${this.props.name}" to the Video Store Library` }) .catch((error) => { console.log(error); From 75099194b57be40ab60857ad1e062cb8ece5c09f Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Wed, 20 Jun 2018 14:51:35 -0700 Subject: [PATCH 11/38] a user is able to click on a customer and a movie and post said rental to the API. --- src/App.js | 17 +++++++--- src/components/Customer.js | 8 +++-- src/components/CustomerList.js | 15 ++++----- src/components/LibraryList.js | 4 +++ src/components/LibraryMovie.js | 15 ++++++--- src/components/Movie.js | 5 +-- src/components/MovieRentalButton.js | 18 +++++++++++ src/components/Rental.js | 48 +++++++++++++++++++---------- 8 files changed, 92 insertions(+), 38 deletions(-) create mode 100644 src/components/MovieRentalButton.js diff --git a/src/App.js b/src/App.js index c77190ef7..c5b0c81cc 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import LibraryList from './components/LibraryList.js' import MovieSearch from './components/MovieSearch.js' import logo from './logo.svg'; import Rental from './components/Rental.js' +import MovieRentalButton from './components/MovieRentalButton.js'; import './App.css'; class App extends Component { @@ -30,7 +31,11 @@ class App extends Component { } - +appLevelmovie = (aMovie) =>{ + this.setState({ + selectedMovie: aMovie + }) +} @@ -43,7 +48,8 @@ class App extends Component {

@@ -51,14 +57,15 @@ class App extends Component {

- - - +

+
); } diff --git a/src/components/Customer.js b/src/components/Customer.js index ce89c06a2..788496c1c 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -13,14 +13,14 @@ class Customer extends Component { } selectedCustomerfromButton = () =>{ - this.props.custTolist(this.props.name) + this.props.custTolist({name:this.props.name, rentals: this.props.rentals, id: this.props.id}) } render(){ return(

{this.props.name}

-

Number of rentals: {this.state.numberOfrentals}

+

Number of rentals: {this.props.rentals}

{ this.setState({ customers: response.data }); + console.log(response.data) } ) .catch( (error) => { console.log("got to the error"); @@ -33,17 +34,17 @@ selectedCustomer = (anEvent) => { } - - customerList = () => { console.log('Pulling list of customers') const customerList = this.state.customers.map((aCustomer, index) => { return ( - + ); }); return customerList; diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js index ac63f6c1f..d70cf1f50 100644 --- a/src/components/LibraryList.js +++ b/src/components/LibraryList.js @@ -13,6 +13,9 @@ constructor(){ } } +movieFromlibrary = (aMovie) => { + this.props.appMovie(aMovie) +} componentDidMount = () => { @@ -42,6 +45,7 @@ libraryList = () => { image_url={aMovie.image_url} release_date={aMovie.release_date} overview={aMovie.overview} + rentalFun={this.movieFromlibrary} /> ); diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js index 945ee6b7b..1fe09628e 100644 --- a/src/components/LibraryMovie.js +++ b/src/components/LibraryMovie.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; // import './LibraryMovie.css'; - +import MovieRentalButton from './MovieRentalButton.js' class LibraryMovie extends Component { addMovie = (event) => { @@ -10,6 +10,12 @@ class LibraryMovie extends Component { this.props.addMovieToRental(this.props.id); } + selectedCustomerfromButton = () =>{ + return this.props.rentalFun(this.props.title) + } + + + render() { console.log('Rendering a movie') return ( @@ -18,9 +24,10 @@ class LibraryMovie extends Component { movie image

Release Date: {this.props.release_date}

Overview:

-

Overview: {this.props.overview}

- - +

{this.props.overview}

+

+ +

) } diff --git a/src/components/Movie.js b/src/components/Movie.js index a59e1f501..e1884c829 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import LibraryList from './LibraryList.js' +import LibraryList from './LibraryList.js'; // import './LibraryMovie.css'; class Movie extends Component { @@ -11,6 +11,8 @@ class Movie extends Component { this.props.addMovie(this.props.movie); } + + render() { console.log('Rendering a movie') console.log(this.props) @@ -21,7 +23,6 @@ class Movie extends Component {

Release Date: {this.props.release_date}

Overview:

{this.props.overview}

-
) diff --git a/src/components/MovieRentalButton.js b/src/components/MovieRentalButton.js new file mode 100644 index 000000000..58114903a --- /dev/null +++ b/src/components/MovieRentalButton.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + +class MovieRentalButton extends Component { + + render(){ + return( + + ) + } +} + + + +export default MovieRentalButton; diff --git a/src/components/Rental.js b/src/components/Rental.js index 030baac92..06b23931d 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -1,38 +1,52 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Cust from './Customer.js' - +import axios from 'axios'; class Rental extends Component { - // clickedUser = (user) =>{ - // this.setState( - // {userName:user} - // ) - // } - // - // clickedMovieName = (movie) =>{ - // this.setState( - // {movieName:movie} - // ) - // } +addRental = () => { + let time = new Date(); + + let year = time.getFullYear() + let month = time.getMonth() + 1 + let day = time.getDate() + let rentalDate = `${year}-${month}-${day + 7}`; + let movie = this.props.movieName; + + axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) + .then((response) => { + console.log(response) + }) + .catch((error) => { + console.log(error.message); + }); +} + + +onFormSubmit = (event) => { + event.preventDefault(); + this.addRental(); +} render(){ return( - +
- - + +
- + +
+ ) } } Rental.propTypes = { - customerName: PropTypes.string.isRequired, + customer: PropTypes.string, movieName: PropTypes.string.isRequired } export default Rental; From c3fe610d09cbdb426359b217a6462556ba91bdc2 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 20 Jun 2018 16:20:34 -0700 Subject: [PATCH 12/38] adds react router functionality for static view - looks awesome --- src/App.js | 72 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 51 insertions(+), 21 deletions(-) diff --git a/src/App.js b/src/App.js index 21192ca33..f27e39630 100644 --- a/src/App.js +++ b/src/App.js @@ -45,30 +45,60 @@ appLevelmovie = (aMovie) =>{ render() { + + const home = () => { + return (

Welcome to Selam and Angela's video rental store!

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

Welcome to React

-
-

- -

-

- - + //

+ //
+ // logo + //

Welcome to React

+ //
+ //

+ // + //

+ //

+ // + // + // + // + //

+ // + //
+ +
+
    +
  • Home
    • +
  • Search the Database
    • +
  • Rental Library
    • +
  • Customers
    • +
    • +
- -

+
-
+ + + } + /> + } + /> + + ); } } From b3132cc3c18ae9ab2d0693fc95ff4552998c5aba Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Wed, 20 Jun 2018 16:28:35 -0700 Subject: [PATCH 13/38] display success/error messages on rental --- src/App.js | 6 +----- src/components/Rental.js | 20 +++++++++++++++++--- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 21192ca33..b2ad086ee 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,5 @@ import React, { Component } from 'react'; -import { - BrowserRouter as Router, - Route, - Link -} from 'react-router-dom'; + import Customer from './components/Customer.js' import CustList from './components/CustomerList.js' import LibraryList from './components/LibraryList.js' diff --git a/src/components/Rental.js b/src/components/Rental.js index 06b23931d..675f2746a 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -3,7 +3,13 @@ import PropTypes from 'prop-types'; import Cust from './Customer.js' import axios from 'axios'; class Rental extends Component { - + constructor() { + super(); + this.state = { + success: '', + error: '' + }; + } addRental = () => { let time = new Date(); @@ -15,10 +21,14 @@ addRental = () => { axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) .then((response) => { - console.log(response) + this.setState({ + success: `Success: ${movie} has been checked out and is due on ${rentalDate}.` + }) }) .catch((error) => { - console.log(error.message); + this.setState({ + error:error.message + }) }); } @@ -30,6 +40,9 @@ onFormSubmit = (event) => { render(){ return( +
+

{this.state.error}

+

{this.state.success}

@@ -41,6 +54,7 @@ onFormSubmit = (event) => {
+
) } } From dec93c396372bc779555ee230f6873c0ca4e5a54 Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Wed, 20 Jun 2018 16:37:20 -0700 Subject: [PATCH 14/38] updated small merge conflict issue --- src/App.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index c4c7536b6..f27e39630 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,9 @@ import React, { Component } from 'react'; - +import { + BrowserRouter as Router, + Route, + Link +} from 'react-router-dom'; import Customer from './components/Customer.js' import CustList from './components/CustomerList.js' import LibraryList from './components/LibraryList.js' From b7bfebfda19600c47f92774c6a06222fff6145a1 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 20 Jun 2018 17:44:42 -0700 Subject: [PATCH 15/38] adds customer name to rental message after checkout --- src/components/Rental.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Rental.js b/src/components/Rental.js index 675f2746a..381da161a 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -18,11 +18,12 @@ addRental = () => { let day = time.getDate() let rentalDate = `${year}-${month}-${day + 7}`; let movie = this.props.movieName; + let customer = this.props.customer.name axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) .then((response) => { this.setState({ - success: `Success: ${movie} has been checked out and is due on ${rentalDate}.` + success: `Success: ${movie} has been checked out by ${customer} and is due on ${rentalDate}.` }) }) .catch((error) => { From 7a504823188f64e2f8690d1bdcbab788e9d5bb0d Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 20 Jun 2018 18:26:41 -0700 Subject: [PATCH 16/38] playing around with Rental messages --- src/components/Rental.js | 67 +++++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 31 deletions(-) diff --git a/src/components/Rental.js b/src/components/Rental.js index 381da161a..690117baf 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -7,54 +7,59 @@ class Rental extends Component { super(); this.state = { success: '', - error: '' + error: '', }; } -addRental = () => { - let time = new Date(); - let year = time.getFullYear() - let month = time.getMonth() + 1 - let day = time.getDate() - let rentalDate = `${year}-${month}-${day + 7}`; - let movie = this.props.movieName; - let customer = this.props.customer.name + addRental = () => { + let time = new Date(); - axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) + let year = time.getFullYear() + let month = time.getMonth() + 1 + let day = time.getDate() + let rentalDate = `${year}-${month}-${day + 7}`; + let movie = this.props.movieName; + let customer = this.props.customer.name + + axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) .then((response) => { this.setState({ success: `Success: ${movie} has been checked out by ${customer} and is due on ${rentalDate}.` - }) + }); + }) .catch((error) => { this.setState({ - error:error.message - }) + error: error.message + }); + }); -} + } + + + onFormSubmit = (event) => { + event.preventDefault(); + this.addRental(); + } -onFormSubmit = (event) => { - event.preventDefault(); - this.addRental(); -} render(){ return(
-

{this.state.error}

-

{this.state.success}

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

{this.state.error}

+

{this.state.success}

) } From 400bcbff840d42c60f6c58005eef804d763a49bb Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Wed, 20 Jun 2018 18:27:36 -0700 Subject: [PATCH 17/38] user is able to track the number of rentals per customer --- src/App.js | 7 ------- src/components/Customer.js | 19 +++++++++++-------- src/components/CustomerList.js | 8 ++++++-- src/components/Rental.js | 4 +++- 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index f27e39630..92a5efc49 100644 --- a/src/App.js +++ b/src/App.js @@ -14,13 +14,6 @@ import MovieRentalButton from './components/MovieRentalButton.js'; import './App.css'; class App extends Component { - // App needs to know which person has been selectedCustomer// - //pass that name down to the Rental .js file - - //have the state of the customer and the movie - //updated by the individual components - //pass the values into the lower level components as - //props. constructor(){ super(); this.state = { diff --git a/src/components/Customer.js b/src/components/Customer.js index 788496c1c..e98b81028 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -5,21 +5,20 @@ class Customer extends Component { //1. button for number of rentals in the Customer list // Method - onclick function that will be linked (reserve submit button). Will be linked to a method that increases the count of a specific customer. Function will modify state of a customer. - constructor(){ - super(); - this.state = { - numberOfrentals: 0, - } - } - selectedCustomerfromButton = () =>{ this.props.custTolist({name:this.props.name, rentals: this.props.rentals, id: this.props.id}) } + + render(){ return(

{this.props.name}

+

{this.props.address}

+

{this.props.city}

+

{this.props.postal}

+

{this.props.phone}

Number of rentals: {this.props.rentals}

{ return ( ); }); diff --git a/src/components/Rental.js b/src/components/Rental.js index 675f2746a..2c293422d 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -18,6 +18,8 @@ addRental = () => { let day = time.getDate() let rentalDate = `${year}-${month}-${day + 7}`; let movie = this.props.movieName; + // console.log('checelkdjflskdjflskjd') + // console.log(this.props.customer.rentals) axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) .then((response) => { @@ -32,7 +34,7 @@ addRental = () => { }); } - + onFormSubmit = (event) => { event.preventDefault(); this.addRental(); From 8d8e372459ea83061d2d38280062a66b90efa38d Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 20 Jun 2018 19:35:26 -0700 Subject: [PATCH 18/38] added status bar functionality --- src/App.js | 56 +++++++++++++++------------------- src/components/CustomerList.js | 10 ++++-- src/components/LibraryList.js | 11 ++++--- src/components/Movie.js | 12 +++++--- src/components/MovieSearch.js | 9 +++++- src/components/Rental.js | 25 ++------------- src/components/StatusBar.css | 35 +++++++++++++++++++++ src/components/StatusBar.js | 38 +++++++++++++++++++++++ src/components/Store.js | 0 9 files changed, 131 insertions(+), 65 deletions(-) create mode 100644 src/components/StatusBar.css create mode 100644 src/components/StatusBar.js delete mode 100644 src/components/Store.js diff --git a/src/App.js b/src/App.js index 92a5efc49..d348ecdb9 100644 --- a/src/App.js +++ b/src/App.js @@ -4,11 +4,10 @@ import { Route, Link } from 'react-router-dom'; -import Customer from './components/Customer.js' +import StatusBar from './components/StatusBar'; import CustList from './components/CustomerList.js' import LibraryList from './components/LibraryList.js' import MovieSearch from './components/MovieSearch.js' -import logo from './logo.svg'; import Rental from './components/Rental.js' import MovieRentalButton from './components/MovieRentalButton.js'; import './App.css'; @@ -18,7 +17,10 @@ class App extends Component { super(); this.state = { selectedCustomer: '', - selectedMovie:'' + selectedMovie:'', + status: { + message: '', + } } } @@ -35,38 +37,26 @@ appLevelmovie = (aMovie) =>{ }) } +// thanks for the inspiration Dan! +setStatus = (message, type) => { + this.setState({ + status: { message, type } + }); +} + +clearStatus = () => { + this.setState({ status: { message: '' }}) +} + render() { const home = () => { - return (

Welcome to Selam and Angela's video rental store!

); + return (

Welcome to Selam and Angelas video rental store!

); }; return ( - //
- //
- // logo - //

Welcome to React

- //
- //

- // - //

- //

- // - // - // - // - //

- // - //
    @@ -77,20 +67,24 @@ appLevelmovie = (aMovie) =>{
-
- +
+ +
} + render={(props) => } /> } + render={(props) => } /> +
+ ); } diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 39faf177a..16d465c64 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -13,16 +13,19 @@ constructor(){ } componentDidMount = () => { + this.props.setStatus('Loading customers...', 'pending'); axios.get('http://localhost:3000/customers') .then( (response) => { + this.setState({ customers: response.data }); - console.log(response.data) + this.props.setStatus(`Loaded ${response.data.length} customers`, 'success'); } ) .catch( (error) => { console.log("got to the error"); console.log(error); + this.props.setStatus(`Failed to load customers: ${error.message}`, 'error'); this.setState({ error: error.message }); @@ -64,5 +67,8 @@ customerList = () => { } } - +CustomerList.propTypes = { + setStatus: PropTypes.func.isRequired, + appCustomer: PropTypes.func.isRequired, +} export default CustomerList; diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js index 6d8f71851..7322a02d5 100644 --- a/src/components/LibraryList.js +++ b/src/components/LibraryList.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import axios from 'axios'; +import PropTypes from 'prop-types'; import LibraryMovie from './LibraryMovie.js' import Movie from './Movie.js' @@ -20,14 +21,13 @@ movieFromlibrary = (aMovie) => { componentDidMount = () => { axios.get('http://localhost:3000/movies') .then( (response) => { - // console.log(response.data) + this.props.setStatus(`Successfully loaded ${response.data.length} movies from the rental library`, 'success'); this.setState({ movies: response.data }); } ) .catch( (error) => { - console.log("got to the error"); - console.log(error); + this.props.setStatus(`Failed to load movies: ${error.message}`, 'success'); this.setState({ error: error.message }); @@ -62,5 +62,8 @@ libraryList = () => { } } - +LibraryList.propTypes = { + setStatus: PropTypes.func.isRequired, + appMovie: PropTypes.func.isRequired, +} export default LibraryList; diff --git a/src/components/Movie.js b/src/components/Movie.js index 7ad9f7124..88fad8f1b 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -9,14 +9,17 @@ class Movie extends Component { addMovieToLibrary = () => { + this.props.setStatus(`Adding movie "${this.props.name}" to rental library...`, 'pending'); const URL = `http://localhost:3000/movies/` axios.post(URL + `?title=${this.props.name}&release_date=${this.props.release_date}&image_url=${this.props.image_url}&overview=${this.props.overview}`) .then((response) => { - console.log(response) - `Successfully added "${this.props.name}" to the Video Store Library` + this.props.setStatus( + `Successfully added "${this.props.name}" to library`, 'success'); }) .catch((error) => { - console.log(error); + this.props.setStatus( + `Could not add "${this.props.name}" to library: ${error.message}`, 'error'); + console.log('failure response'); }); } @@ -44,7 +47,8 @@ class Movie extends Component { id: PropTypes.number.isRequired, release_date: PropTypes.string, overview: PropTypes.string, - addMovie: PropTypes.func.isRequired + addMovie: PropTypes.func.isRequired, + setStatus: PropTypes.func.isRequired }; export default Movie; diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 74442b981..0738f66df 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -1,9 +1,13 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import axios from 'axios'; import Movie from './Movie.js' import MovieSearchForm from './MovieSearchForm.js' class MovieSearch extends Component { + static propTypes = { + setStatus: PropTypes.func.isRequired + } constructor(props) { super(props); @@ -13,9 +17,10 @@ constructor(props) { } searchMovieAPI = (title) => { + this.props.setStatus(`Searching for "${title}"...`, 'pending'); axios.get(`http://localhost:3000/movies?query=${ title }`) .then( (response) => { - console.log(response) + this.props.setStatus(`Found ${response.data.length} results for ${title}`, 'success'); this.setState({ movies: response.data, message: `Found ${response.data.length} results for "${title}" ` @@ -24,6 +29,7 @@ searchMovieAPI = (title) => { .catch( (error) => { console.log("got to the error"); console.log(error); + this.props.setStatus(`Could not search for "${title}": ${error.message}`, 'error'); this.setState({ error: error.message }); @@ -44,6 +50,7 @@ movieSearchShow = () => { overview={movie.overview} addMovie={this.addMovieToLibrary} movie={movie} + setStatus={this.setStatus} /> ); }); diff --git a/src/components/Rental.js b/src/components/Rental.js index 6863c308f..0bd9955a1 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -5,10 +5,6 @@ import axios from 'axios'; class Rental extends Component { constructor() { super(); - this.state = { - success: '', - error: '', - }; } addRental = () => { @@ -23,16 +19,10 @@ class Rental extends Component { axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) .then((response) => { - this.setState({ - success: `Success: ${movie} has been checked out by ${customer} and is due on ${rentalDate}.` - }); - + this.props.setStatus(`Success: ${movie} has been checked out by ${customer} and is due on ${rentalDate}.`, 'success'); }) .catch((error) => { - this.setState({ - error: error.message - }); - + this.props.setStatus(`Unable to create Rental: ${error.message}`, 'error'); }); } @@ -42,15 +32,6 @@ class Rental extends Component { this.addRental(); } -<<<<<<< HEAD - -onFormSubmit = (event) => { - event.preventDefault(); - this.addRental(); -} -======= - ->>>>>>> 7a504823188f64e2f8690d1bdcbab788e9d5bb0d render(){ return( @@ -66,8 +47,6 @@ onFormSubmit = (event) => {
-

{this.state.error}

-

{this.state.success}

) } diff --git a/src/components/StatusBar.css b/src/components/StatusBar.css new file mode 100644 index 000000000..b4aee63fa --- /dev/null +++ b/src/components/StatusBar.css @@ -0,0 +1,35 @@ +.status-bar { + display: -ms-flexbox; + display: flex; + justify-content: space-between; + +} + +.status-bar--hide { + display: none; +} + +.status-bar--error { + color: white; + background-color: #A41A1A; +} + +.status-bar--success { + background-color: #1AEEAE; +} + +.status-bar--pending { + color: white; + background-color: #B039DD; +} + +.status-bar__text { + margin: .4em; +} + +.status-bar__button { + background-color: inherit; + color: inherit; + border: none; + cursor: pointer; +} diff --git a/src/components/StatusBar.js b/src/components/StatusBar.js new file mode 100644 index 000000000..83a453e79 --- /dev/null +++ b/src/components/StatusBar.js @@ -0,0 +1,38 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +import './StatusBar.css'; + +class StatusBar extends React.Component { + + render() { + console.log(this.props); + let className = "status-bar " + if (this.props.message.length === 0) { + className += "status-bar--hide" + } else { + className += `status-bar--${this.props.type}`; + } + return( +
+

+ {this.props.message} +

+ +
+ ); + } +} + +StatusBar.propTypes = { + message: PropTypes.string.isRequired, + type: PropTypes.oneOf(['error', 'success', 'pending']), + clearStatus: PropTypes.func.isRequired, +}; + +export default StatusBar; diff --git a/src/components/Store.js b/src/components/Store.js deleted file mode 100644 index e69de29bb..000000000 From dce3c26feff1e1564273b5cbd39c863eb4519b7c Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 20 Jun 2018 19:43:44 -0700 Subject: [PATCH 19/38] adds props to Movie from MovieSearch from App - WHOA --- src/App.js | 4 +++- src/components/MovieSearch.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index d348ecdb9..bec62c85c 100644 --- a/src/App.js +++ b/src/App.js @@ -75,7 +75,9 @@ clearStatus = () => {
- + } + /> } /> diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 0738f66df..5bb4051e6 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -50,7 +50,7 @@ movieSearchShow = () => { overview={movie.overview} addMovie={this.addMovieToLibrary} movie={movie} - setStatus={this.setStatus} + setStatus={this.props.setStatus} /> ); }); From efdb4aec53ad175b33535fcd49cdbdfa9f9c81be Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Wed, 20 Jun 2018 19:44:46 -0700 Subject: [PATCH 20/38] labels are diabled to prevent a user from inputting individual customers. Future feature would be to implement a searching feature for movies/customer. Until then, this is more obvious to the user in how to use the site. Also, form will clear after a user submits a rental. --- src/App.js | 4 +++- src/components/LibraryMovie.js | 2 +- src/components/Rental.js | 22 ++++++++-------------- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 92a5efc49..d4358044f 100644 --- a/src/App.js +++ b/src/App.js @@ -22,6 +22,7 @@ class App extends Component { } } + appLevelcustomer = (aCustomer) =>{ this.setState({ selectedCustomer: aCustomer @@ -76,7 +77,8 @@ appLevelmovie = (aMovie) =>{
  • Customers
    • diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js index 1fe09628e..9f5d5b671 100644 --- a/src/components/LibraryMovie.js +++ b/src/components/LibraryMovie.js @@ -11,7 +11,7 @@ class LibraryMovie extends Component { } selectedCustomerfromButton = () =>{ - return this.props.rentalFun(this.props.title) + return this.props.rentalFun({id:this.props.id,title:this.props.title}) } diff --git a/src/components/Rental.js b/src/components/Rental.js index 6863c308f..c55fe83ca 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import Cust from './Customer.js' import axios from 'axios'; class Rental extends Component { + constructor() { super(); this.state = { @@ -18,7 +19,7 @@ class Rental extends Component { let month = time.getMonth() + 1 let day = time.getDate() let rentalDate = `${year}-${month}-${day + 7}`; - let movie = this.props.movieName; + let movie = this.props.movie.title; let customer = this.props.customer.name axios.post( `http://localhost:3000/rentals/${movie}/check-out?customer_id=${this.props.customer.id}&due_date=${rentalDate}`) @@ -40,17 +41,10 @@ class Rental extends Component { onFormSubmit = (event) => { event.preventDefault(); this.addRental(); + this.props.customer.name = '' + this.props.movie.title = '' } -<<<<<<< HEAD - -onFormSubmit = (event) => { - event.preventDefault(); - this.addRental(); -} -======= - ->>>>>>> 7a504823188f64e2f8690d1bdcbab788e9d5bb0d render(){ return( @@ -58,11 +52,11 @@ onFormSubmit = (event) => {
    - +
    - +
    @@ -74,7 +68,7 @@ onFormSubmit = (event) => { } Rental.propTypes = { - customer: PropTypes.string, - movieName: PropTypes.string.isRequired + customer: PropTypes.string.isRequired, + movie: PropTypes.string.isRequired } export default Rental; From 970b993afaeeba96a7059dbc170f6565c870df3f Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 20 Jun 2018 19:51:26 -0700 Subject: [PATCH 21/38] adds giphy sticker to homepage --- src/App.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index bec62c85c..2af327cb0 100644 --- a/src/App.js +++ b/src/App.js @@ -53,7 +53,12 @@ clearStatus = () => { render() { const home = () => { - return (

    Welcome to Selam and Angelas video rental store!

    ); + return ( +
    +

    Welcome to Selam and Angelas video rental store!

    +

    +
    + ); }; return ( From c081c41aac2cdac3c348ad28c6f2524b733044f8 Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Thu, 21 Jun 2018 09:17:39 -0700 Subject: [PATCH 22/38] fixed small bug --- src/App.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 7ea227fa1..6493fc461 100644 --- a/src/App.js +++ b/src/App.js @@ -29,6 +29,8 @@ class App extends Component { this.setState({ selectedCustomer: aCustomer }) + console.log('afasdfasdf') + console.log(aCustomer) } @@ -72,7 +74,7 @@ clearStatus = () => {
  • Customers
    • From e0f1c796abee4bcb77a995379b2fb84ae5a1b981 Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Thu, 21 Jun 2018 15:20:22 -0700 Subject: [PATCH 23/38] first draft styling of customer , rental library, db library, nav bar, and homepage. --- src/App.css | 67 ++++++++++++++++++++++++++++++++++ src/App.js | 16 +++++--- src/components/Customer.js | 2 - src/components/CustomerList.js | 4 +- src/components/LibraryList.js | 14 +++++-- src/components/Movie.js | 1 - src/components/MovieSearch.js | 2 + src/components/Rental.css | 22 +++++++++++ src/components/Rental.js | 12 ++++-- 9 files changed, 123 insertions(+), 17 deletions(-) create mode 100644 src/components/Rental.css diff --git a/src/App.css b/src/App.css index c5c6e8a68..147daa326 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,73 @@ text-align: center; } +/* navigation bar */ + +.nav-bar{ + display:flex; + flex-wrap:nowrap; + justify-content: space-around; +} + +.nav-bar li{ + list-style-type: none; +} + +/* customer list */ + +.customer-list{ + display:flex; + flex-wrap: wrap; +} + +.customer-list > *{ + margin: 30px; + +} + +.customer-list > div { + /* background-color: red; */ + /* flex-basis: 75px; + flex-grow: 0; + height: 25px; + width: 2300px; + text-align: center; */ + border: 1px solid black; + padding:10px; +} + +/* library move list */ + +.library-list{ + display:flex; + flex-wrap: wrap; +} + +.library-list > *{ + flex-grow: 0; + flex-basis: 0; + width: auto; + margin: 10px; +} + +/* database movie list */ +.db-movie-search-list{ + display:flex; + flex-wrap: wrap; +} + +.db-movie-search-list > *{ + flex-grow: 0; + flex-basis: 0; + width: auto; + margin: 10px; +} + + + + + + .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; diff --git a/src/App.js b/src/App.js index 6493fc461..f2920365d 100644 --- a/src/App.js +++ b/src/App.js @@ -67,18 +67,20 @@ clearStatus = () => { return (
    -
      +
      • Home
      • Search the Database
      • Rental Library
      • Customers
        • -
      +
      + +
      @@ -89,10 +91,12 @@ clearStatus = () => { } /> + } /> +
    diff --git a/src/components/Customer.js b/src/components/Customer.js index e98b81028..5168ffe9f 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -9,8 +9,6 @@ class Customer extends Component { this.props.custTolist({name:this.props.name, rentals: this.props.rentals, id: this.props.id}) } - - render(){ return(
    diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 16d465c64..923cac2ea 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -60,8 +60,10 @@ customerList = () => { render() { return( -
    +
    + {this.customerList()} +
    ) } diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js index 7322a02d5..f9954df40 100644 --- a/src/components/LibraryList.js +++ b/src/components/LibraryList.js @@ -37,7 +37,7 @@ componentDidMount = () => { libraryList = () => { console.log('Pulling list of movies') const libraryList = this.state.movies.map((aMovie, index) => { - return ( + return( { overview={aMovie.overview} rentalFun={this.movieFromlibrary} /> - ); }); return libraryList; } + +moviesFromsearch = () => { + const movies = this.state.movies.map((movie) =>{ + return( + {title:movie.title, image: movie.image_url} + ) + }) + return movies; +} render() { return( -
    +
    {this.libraryList()}
    diff --git a/src/components/Movie.js b/src/components/Movie.js index 88fad8f1b..c459c72fa 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -7,7 +7,6 @@ import axios from 'axios'; class Movie extends Component { - addMovieToLibrary = () => { this.props.setStatus(`Adding movie "${this.props.name}" to rental library...`, 'pending'); const URL = `http://localhost:3000/movies/` diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 5bb4051e6..dd643e001 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -65,7 +65,9 @@ return movieList

    {this.state.error}

    {this.state.message}

    +
    {this.movieSearchShow()} +
    ) } diff --git a/src/components/Rental.css b/src/components/Rental.css new file mode 100644 index 000000000..03129a997 --- /dev/null +++ b/src/components/Rental.css @@ -0,0 +1,22 @@ +h3{ + margin-top:0px; + margin-left: 5px; +} + + +.rental-labels{ + display:flex; +} + +.rental-labels div{ + margin-left: 10px; +} + +.submit-button{ + margin-left: 10px; +} + +.check-out-section{ + background-color: red; + margin-top: 0px; +} diff --git a/src/components/Rental.js b/src/components/Rental.js index cb05039be..9e967adad 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Cust from './Customer.js' import axios from 'axios'; +import './Rental.css'; class Rental extends Component { constructor() { @@ -38,17 +39,20 @@ class Rental extends Component { render(){ return( -
    +
    +

    Checkout a customer

    +
    - +
    - +
    - +
    +
    ) From c64730ffccfd9df628a01ff65a0b220e1721ddc6 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Thu, 21 Jun 2018 15:29:07 -0700 Subject: [PATCH 24/38] merge conflict fix --- src/components/MovieSearch.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MovieSearch.js b/src/components/MovieSearch.js index 5bb4051e6..3396895a2 100644 --- a/src/components/MovieSearch.js +++ b/src/components/MovieSearch.js @@ -23,7 +23,6 @@ searchMovieAPI = (title) => { this.props.setStatus(`Found ${response.data.length} results for ${title}`, 'success'); this.setState({ movies: response.data, - message: `Found ${response.data.length} results for "${title}" ` }); } ) .catch( (error) => { From e161115a75ac196e64e48e61271c5dfd4fea7a93 Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Thu, 21 Jun 2018 15:50:03 -0700 Subject: [PATCH 25/38] added some more designs oh yaaahhhh --- src/components/Rental.css | 5 +++-- src/components/Rental.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Rental.css b/src/components/Rental.css index 03129a997..fa1e90fa4 100644 --- a/src/components/Rental.css +++ b/src/components/Rental.css @@ -3,20 +3,21 @@ h3{ margin-left: 5px; } - .rental-labels{ display:flex; } .rental-labels div{ margin-left: 10px; + padding-bottom: 10px; } .submit-button{ margin-left: 10px; + margin-bottom: 10px; } .check-out-section{ - background-color: red; + margin-top: 0px; } diff --git a/src/components/Rental.js b/src/components/Rental.js index 9e967adad..74b54ad07 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -40,7 +40,6 @@ class Rental extends Component { render(){ return(
    -

    Checkout a customer

    @@ -51,9 +50,10 @@ class Rental extends Component {
    -
    +
    +
    ) } From 21dae4c70a48f14f1e59ddd4dc5cc5f18db70073 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Thu, 21 Jun 2018 17:25:07 -0700 Subject: [PATCH 26/38] barely any css accomplished but we have a logo --- src/App.css | 9 +++- src/App.js | 112 ++++++++++++++++++++-------------------- src/components/Home.css | 0 src/components/Home.js | 18 +++++++ 4 files changed, 83 insertions(+), 56 deletions(-) create mode 100644 src/components/Home.css create mode 100644 src/components/Home.js diff --git a/src/App.css b/src/App.css index 147daa326..17837862e 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,13 @@ text-align: center; } +.router { + background-image: url('https://images.unsplash.com/photo-1504587614488-3259c5c1d9b7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7aa9d6f4ba64dfeb28ddb06af263dfa9&auto=format&fit=crop&w=2734&q=80'); + background-repeat: no-repeat; + background-position: top center; + background-attachment: fixed; +} + /* navigation bar */ .nav-bar{ @@ -11,7 +18,7 @@ } .nav-bar li{ - list-style-type: none; + list-style-type: none; } /* customer list */ diff --git a/src/App.js b/src/App.js index f2920365d..976fe2c35 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,7 @@ import LibraryList from './components/LibraryList.js' import MovieSearch from './components/MovieSearch.js' import Rental from './components/Rental.js' import MovieRentalButton from './components/MovieRentalButton.js'; +import Home from './components/Home.js'; import './App.css'; class App extends Component { @@ -30,74 +31,75 @@ class App extends Component { selectedCustomer: aCustomer }) console.log('afasdfasdf') - console.log(aCustomer) + console.log(aCustomer) } -appLevelmovie = (aMovie) =>{ - this.setState({ - selectedMovie: aMovie - }) -} + appLevelmovie = (aMovie) =>{ + this.setState({ + selectedMovie: aMovie + }) + } -// thanks for the inspiration Dan! -setStatus = (message, type) => { - this.setState({ - status: { message, type } - }); -} + // thanks for the inspiration Dan! + setStatus = (message, type) => { + this.setState({ + status: { message, type } + }); + } -clearStatus = () => { - this.setState({ status: { message: '' }}) -} + clearStatus = () => { + this.setState({ status: { message: '' }}) + } render() { - const home = () => { - return ( -
    -

    Welcome to Selam and Angelas video rental store!

    -

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

    Welcome to Selam and Angelas video rental store!

    + //

    + //
    + // ); + // }; return ( -
    -
      -
    • Home
      • -
    • Search the Database
      • -
    • Rental Library
      • -
    • Customers
      • -
    -
    -
    - -
    -
    - -
    - - } - /> - } - /> - - } - /> - - -
    +
    +
      +
    • Home
      • +
    • Search the Database
      • +
    • Rental Library
      • +
    • Customers
      • +
    +
    +
    + +
    +
    + +
    +
    + + } + /> + } + /> + + } + /> +
    + +
    ); diff --git a/src/components/Home.css b/src/components/Home.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Home.js b/src/components/Home.js new file mode 100644 index 000000000..64f0c9581 --- /dev/null +++ b/src/components/Home.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; + +class Home extends Component { + + + render() { + console.log('Rendering a movie') + return ( +
    +

    logo

    +
    + ) + } + } + + + + export default Home; From a9bed7fe4342eabc8effd9f25ffc2f9787c20a45 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Thu, 21 Jun 2018 17:35:00 -0700 Subject: [PATCH 27/38] removed some css styling code that was not working --- src/App.css | 11 ++++------- src/App.js | 2 +- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index 17837862e..3cd4bea39 100644 --- a/src/App.css +++ b/src/App.css @@ -2,13 +2,6 @@ text-align: center; } -.router { - background-image: url('https://images.unsplash.com/photo-1504587614488-3259c5c1d9b7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7aa9d6f4ba64dfeb28ddb06af263dfa9&auto=format&fit=crop&w=2734&q=80'); - background-repeat: no-repeat; - background-position: top center; - background-attachment: fixed; -} - /* navigation bar */ .nav-bar{ @@ -21,6 +14,10 @@ list-style-type: none; } +.fixed { + position: fixed; +} + /* customer list */ .customer-list{ diff --git a/src/App.js b/src/App.js index 976fe2c35..a0ed5dd58 100644 --- a/src/App.js +++ b/src/App.js @@ -98,7 +98,7 @@ class App extends Component { render={(props) => } />
    - + From d98c505a2592d5318f2ac77821e27f7e3605431d Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Thu, 21 Jun 2018 17:42:41 -0700 Subject: [PATCH 28/38] updated nav bar with images and search for movie with search image --- src/App.css | 1 + src/App.js | 11 +++++------ src/components/LibraryList.js | 2 -- src/components/LibraryMovie.js | 6 +++--- src/components/MovieSearchForm.css | 7 +++++++ src/components/MovieSearchForm.js | 9 +++++++-- src/components/Rental.css | 6 ++++-- src/components/Rental.js | 4 ++-- 8 files changed, 29 insertions(+), 17 deletions(-) create mode 100644 src/components/MovieSearchForm.css diff --git a/src/App.css b/src/App.css index 147daa326..cb1a3184c 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,7 @@ text-align: center; } + /* navigation bar */ .nav-bar{ diff --git a/src/App.js b/src/App.js index f2920365d..87b93d962 100644 --- a/src/App.js +++ b/src/App.js @@ -29,8 +29,6 @@ class App extends Component { this.setState({ selectedCustomer: aCustomer }) - console.log('afasdfasdf') - console.log(aCustomer) } @@ -68,10 +66,11 @@ clearStatus = () => {
      -
    • Home
      • -
    • Search the Database
      • -
    • Rental Library
      • -
    • Customers
      • +
    • link to homepage
      • + +
    • link to database of movies
      • +
    • link to rental library
      • +
    • link to Customers
    diff --git a/src/components/LibraryList.js b/src/components/LibraryList.js index f9954df40..66505b219 100644 --- a/src/components/LibraryList.js +++ b/src/components/LibraryList.js @@ -17,7 +17,6 @@ movieFromlibrary = (aMovie) => { this.props.appMovie(aMovie) } - componentDidMount = () => { axios.get('http://localhost:3000/movies') .then( (response) => { @@ -51,7 +50,6 @@ libraryList = () => { return libraryList; } - moviesFromsearch = () => { const movies = this.state.movies.map((movie) =>{ return( diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js index 9f5d5b671..cf2125fb7 100644 --- a/src/components/LibraryMovie.js +++ b/src/components/LibraryMovie.js @@ -22,12 +22,12 @@ class LibraryMovie extends Component {

    {this.props.title}

    movie image -

    Release Date: {this.props.release_date}

    -

    Overview:

    -

    {this.props.overview}

    +

    Release Date:{this.props.release_date}

    +

    Overview:

     +

    {this.props.overview}

    ) } diff --git a/src/components/MovieSearchForm.css b/src/components/MovieSearchForm.css new file mode 100644 index 000000000..4a6e699d6 --- /dev/null +++ b/src/components/MovieSearchForm.css @@ -0,0 +1,7 @@ +.search-movie-labels{ + display:flex; +} + +.search-movie-labels div{ + margin-left: 10px; +} diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 99f021418..8021aae6f 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; - +import './MovieSearchForm.css'; @@ -45,7 +45,10 @@ class MovieSearchForm extends Component { return(

    Search for Movie by Title:

    + +
    +
    - +
    +
    ); diff --git a/src/components/Rental.css b/src/components/Rental.css index fa1e90fa4..01d0576f4 100644 --- a/src/components/Rental.css +++ b/src/components/Rental.css @@ -5,6 +5,7 @@ h3{ .rental-labels{ display:flex; + margin-left: 70%; } .rental-labels div{ @@ -14,10 +15,11 @@ h3{ .submit-button{ margin-left: 10px; - margin-bottom: 10px; + margin-bottom: 5px; + margin-right: 20px; + margin-top: 5px; } .check-out-section{ - margin-top: 0px; } diff --git a/src/components/Rental.js b/src/components/Rental.js index 74b54ad07..37dd8e68d 100644 --- a/src/components/Rental.js +++ b/src/components/Rental.js @@ -50,8 +50,8 @@ class Rental extends Component {
    - -
    + +
    From 0735d3df3251ed91223aaafb65e85dd26114b344 Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Thu, 21 Jun 2018 17:56:36 -0700 Subject: [PATCH 29/38] small change to get image to show on home --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 8a00e4f62..9ba882570 100644 --- a/src/App.js +++ b/src/App.js @@ -84,7 +84,7 @@ class App extends Component {
    - + } /> From 29ca03b4e807bb205b3e3a440056a11465032bcf Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Thu, 21 Jun 2018 18:09:22 -0700 Subject: [PATCH 30/38] centers logo --- src/components/Home.css | 6 ++++++ src/components/Home.js | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Home.css b/src/components/Home.css index e69de29bb..d2555f5eb 100644 --- a/src/components/Home.css +++ b/src/components/Home.css @@ -0,0 +1,6 @@ +.center { + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} diff --git a/src/components/Home.js b/src/components/Home.js index 64f0c9581..0a5355f75 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import './Home.css'; class Home extends Component { @@ -7,7 +8,7 @@ class Home extends Component { console.log('Rendering a movie') return (
    -

    logo

    +

    logo

    ) } From 54a1a18895da8cc3b19a5bd4d829fb8b15f953e4 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Thu, 21 Jun 2018 18:51:22 -0700 Subject: [PATCH 31/38] getting css to do what i want is the worst --- src/App.css | 10 ++++-- src/App.js | 77 +++++++++++++++++++---------------------- src/components/Movie.js | 2 +- 3 files changed, 43 insertions(+), 46 deletions(-) diff --git a/src/App.css b/src/App.css index d3c7b76d1..0c2372664 100644 --- a/src/App.css +++ b/src/App.css @@ -9,15 +9,19 @@ display:flex; flex-wrap:nowrap; justify-content: space-around; + } .nav-bar li{ list-style-type: none; } -.fixed { - position: fixed; -} + + + + + + /* customer list */ diff --git a/src/App.js b/src/App.js index 9ba882570..a2dbb3494 100644 --- a/src/App.js +++ b/src/App.js @@ -54,50 +54,43 @@ class App extends Component { render() { - const home = () => { - return ( -
    -

    Welcome to Selam and Angelas video rental store!

    -

    -
    - ); - }; - return ( -
    -
      -
    • link to homepage
      • - -
    • link to database of movies
      • -
    • link to rental library
      • -
    • link to Customers
      • -
    -
    -
    - -
    -
    - -
    - - } - /> - } - /> - - } - /> - - -
    +
    +
    + +
    +
      +
    • link to homepage
      • + +
    • link to database of movies
      • +
    • link to rental library
      • +
    • link to Customers
      • +
    +
    +
    + +
    + + + + } + /> + } + /> + + } + /> + + +
    ); diff --git a/src/components/Movie.js b/src/components/Movie.js index c459c72fa..e62867720 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -31,10 +31,10 @@ class Movie extends Component {

    {this.props.name}

    +

    Release Date: {this.props.release_date}

    Overview:

    {this.props.overview}

    -
    ) } From 9c1c60386eabb5a4ee91336de772bb6129fd2da7 Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Thu, 21 Jun 2018 20:48:34 -0700 Subject: [PATCH 32/38] added styling on lib and movie pg --- src/App.css | 18 +++++++++--------- src/App.js | 7 ++----- src/components/LibraryMovie.css | 18 ++++++++++++++++++ src/components/LibraryMovie.js | 6 +++--- src/components/Movie.js | 3 +-- src/components/Rental.css | 10 ++++++++++ 6 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 src/components/LibraryMovie.css diff --git a/src/App.css b/src/App.css index d3c7b76d1..1f6b92840 100644 --- a/src/App.css +++ b/src/App.css @@ -3,6 +3,13 @@ } + + +.nav-bar{ + background-color:white; + padding: 25px; +} + /* navigation bar */ .nav-bar{ @@ -12,11 +19,7 @@ } .nav-bar li{ - list-style-type: none; -} - -.fixed { - position: fixed; + list-style-type: none; } /* customer list */ @@ -42,7 +45,7 @@ padding:10px; } -/* library move list */ +/* library movie list */ .library-list{ display:flex; @@ -71,9 +74,6 @@ - - - .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; diff --git a/src/App.js b/src/App.js index 9ba882570..d21ad50f2 100644 --- a/src/App.js +++ b/src/App.js @@ -51,9 +51,7 @@ class App extends Component { } - render() { - const home = () => { return (
    @@ -68,12 +66,12 @@ class App extends Component {
    • link to homepage
      • -
    • link to database of movies
    • link to rental library
    • link to Customers
    +
    } /> - - +
    diff --git a/src/components/LibraryMovie.css b/src/components/LibraryMovie.css new file mode 100644 index 000000000..ec9777f4c --- /dev/null +++ b/src/components/LibraryMovie.css @@ -0,0 +1,18 @@ +.movie{ + padding: 30px; + border: solid; + min-width: 300px; + min-height: 200px; + text-align: center; + background-color: #DDD9FD +} + +.scroll{ + width: 250px; + height: 110px; + border-top: solid; + overflow-y: scroll; + scroll-behavior:smooth; + text-align:left; + margin-top:10px; +} diff --git a/src/components/LibraryMovie.js b/src/components/LibraryMovie.js index cf2125fb7..0558dd1c1 100644 --- a/src/components/LibraryMovie.js +++ b/src/components/LibraryMovie.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; // import './LibraryMovie.css'; import MovieRentalButton from './MovieRentalButton.js' +import './LibraryMovie.css' class LibraryMovie extends Component { addMovie = (event) => { @@ -25,9 +26,8 @@ class LibraryMovie extends Component {

    -

    Release Date:{this.props.release_date}

    -

    Overview:

     -

    {this.props.overview}

    +

    Release Date: {this.props.release_date}

    +

    {this.props.overview}

    ) } diff --git a/src/components/Movie.js b/src/components/Movie.js index c459c72fa..029ac45aa 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -32,8 +32,7 @@ class Movie extends Component {

    {this.props.name}

    Release Date: {this.props.release_date}

    -

    Overview:

    -

    {this.props.overview}

    +

    {this.props.overview}

    ) diff --git a/src/components/Rental.css b/src/components/Rental.css index 01d0576f4..dbc75c07f 100644 --- a/src/components/Rental.css +++ b/src/components/Rental.css @@ -8,6 +8,16 @@ h3{ margin-left: 70%; } +form{ + margin-top:15px; +} +form div{ + margin-top:15px; +} +.check-out-section{ + background-color:gray; +} + .rental-labels div{ margin-left: 10px; padding-bottom: 10px; From 64a26b22551beade38234644e3e53fc3e164884d Mon Sep 17 00:00:00 2001 From: SelamawitA Date: Fri, 22 Jun 2018 11:44:46 -0700 Subject: [PATCH 33/38] cleaned up css styling for tiles on customers and movies --- src/App.css | 10 +--------- src/App.js | 1 - src/components/Customer.css | 8 ++++++++ src/components/Customer.js | 3 ++- src/components/LibraryMovie.css | 2 ++ src/components/Movie.js | 1 - 6 files changed, 13 insertions(+), 12 deletions(-) create mode 100644 src/components/Customer.css diff --git a/src/App.css b/src/App.css index 441c03c41..ab3069e60 100644 --- a/src/App.css +++ b/src/App.css @@ -2,9 +2,6 @@ text-align: center; } - - - .nav-bar{ background-color:white; padding: 25px; @@ -35,12 +32,6 @@ } .customer-list > div { - /* background-color: red; */ - /* flex-basis: 75px; - flex-grow: 0; - height: 25px; - width: 2300px; - text-align: center; */ border: 1px solid black; padding:10px; } @@ -50,6 +41,7 @@ .library-list{ display:flex; flex-wrap: wrap; + margin-left: 30px; } .library-list > *{ diff --git a/src/App.js b/src/App.js index 33006f4e4..bdde3f9a6 100644 --- a/src/App.js +++ b/src/App.js @@ -25,7 +25,6 @@ class App extends Component { } } - appLevelcustomer = (aCustomer) =>{ this.setState({ selectedCustomer: aCustomer diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..fd24aea0b --- /dev/null +++ b/src/components/Customer.css @@ -0,0 +1,8 @@ +.customer-card{ + padding: 30px; + border: solid; + min-width: 300px; + min-height: 200px; + text-align: center; + background-color: #d9d9d9 +} diff --git a/src/components/Customer.js b/src/components/Customer.js index 5168ffe9f..88dddef93 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import CustRentButton from './CustomerRentalButton.js' +import './Customer.css' class Customer extends Component { //1. button for number of rentals in the Customer list // Method - onclick function that will be linked (reserve submit button). Will be linked to a method that increases the count of a specific customer. Function will modify state of a customer. @@ -11,7 +12,7 @@ class Customer extends Component { render(){ return( -
    +

    {this.props.name}

    {this.props.address}

    {this.props.city}

    diff --git a/src/components/LibraryMovie.css b/src/components/LibraryMovie.css index ec9777f4c..d8b198549 100644 --- a/src/components/LibraryMovie.css +++ b/src/components/LibraryMovie.css @@ -11,8 +11,10 @@ width: 250px; height: 110px; border-top: solid; + border-length: 300px; overflow-y: scroll; scroll-behavior:smooth; text-align:left; margin-top:10px; + padding:15px; } diff --git a/src/components/Movie.js b/src/components/Movie.js index bfa97648a..a65f847c7 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -34,7 +34,6 @@ class Movie extends Component {

    Release Date: {this.props.release_date}

    {this.props.overview}

    -
    ) } From 38013af19e3183b61dc7e6d88c9390b1fbf3b36e Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Fri, 22 Jun 2018 11:44:47 -0700 Subject: [PATCH 34/38] worked on nav bar to get fixed position --- src/App.css | 7 +++++++ src/App.js | 4 +++- src/components/Rental.css | 2 +- src/components/Rental.js | 3 ++- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index 441c03c41..57b509d9b 100644 --- a/src/App.css +++ b/src/App.css @@ -2,12 +2,19 @@ text-align: center; } +.fixed { + position: sticky; + left: 0; + top: 0; + background-color: white; +} .nav-bar{ background-color:white; padding: 25px; + } /* navigation bar */ diff --git a/src/App.js b/src/App.js index 33006f4e4..0fab9b499 100644 --- a/src/App.js +++ b/src/App.js @@ -56,6 +56,7 @@ class App extends Component { return (
    +
    @@ -66,7 +67,6 @@ class App extends Component {
  • link to Customers
    • -
    +
    +
    Movie:
    - +
    From 1e4c38ae72562571f87511936bb87461d7416949 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Fri, 22 Jun 2018 13:12:39 -0700 Subject: [PATCH 35/38] css styling for nav nav --- src/App.js | 2 +- src/components/Rental.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 0fdfb0ba4..e6ed9b350 100644 --- a/src/App.js +++ b/src/App.js @@ -65,7 +65,7 @@ class App extends Component {
  • link to rental library
  • link to Customers
    • -
    +
    Date: Fri, 22 Jun 2018 13:27:24 -0700 Subject: [PATCH 36/38] adjusted formatting on tiles to center them on the page --- src/App.css | 6 ++++++ src/components/MovieSearchForm.css | 6 +++++- src/components/MovieSearchForm.js | 5 +---- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/App.css b/src/App.css index 1cc2a5ea6..31220ec01 100644 --- a/src/App.css +++ b/src/App.css @@ -31,6 +31,9 @@ } /* customer list */ +.customer-list{ + margin-left:30px; +} .customer-list{ display:flex; flex-wrap: wrap; @@ -62,6 +65,9 @@ } /* database movie list */ +.db-movie-search-list{ + margin-left: 25px; +} .db-movie-search-list{ display:flex; flex-wrap: wrap; diff --git a/src/components/MovieSearchForm.css b/src/components/MovieSearchForm.css index 4a6e699d6..6ccb3a451 100644 --- a/src/components/MovieSearchForm.css +++ b/src/components/MovieSearchForm.css @@ -3,5 +3,9 @@ } .search-movie-labels div{ - margin-left: 10px; + padding-left: 30px; +} + +h3{ + margin-right:30px; } diff --git a/src/components/MovieSearchForm.js b/src/components/MovieSearchForm.js index 8021aae6f..dcdb9300e 100644 --- a/src/components/MovieSearchForm.js +++ b/src/components/MovieSearchForm.js @@ -44,13 +44,10 @@ class MovieSearchForm extends Component { render() { return(
    -

    Search for Movie by Title:

    - - +

    Search for Movie by Title

    - Date: Fri, 22 Jun 2018 13:39:33 -0700 Subject: [PATCH 37/38] more small css styling, centers customer, library, and db lists --- src/App.css | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index 31220ec01..2f103ece1 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,7 @@ text-align: center; } +<<<<<<< HEAD .fixed { position: sticky; left: 0; @@ -9,8 +10,6 @@ background-color: white; } - - .nav-bar{ background-color:white; padding: 25px; @@ -31,9 +30,10 @@ } /* customer list */ -.customer-list{ - margin-left:30px; +.customer-list { + margin-left: 10%; } + .customer-list{ display:flex; flex-wrap: wrap; @@ -54,7 +54,7 @@ .library-list{ display:flex; flex-wrap: wrap; - margin-left: 30px; + margin-left: 10%; } .library-list > *{ @@ -65,12 +65,10 @@ } /* database movie list */ -.db-movie-search-list{ - margin-left: 25px; -} .db-movie-search-list{ display:flex; flex-wrap: wrap; + margin-left: 10%; } .db-movie-search-list > *{ From 9d73d778519d058320d65279174c96f1deb6b607 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Fri, 22 Jun 2018 13:41:47 -0700 Subject: [PATCH 38/38] fixed nav bar stickiness --- src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 2f103ece1..2c24c5083 100644 --- a/src/App.css +++ b/src/App.css @@ -2,7 +2,7 @@ text-align: center; } -<<<<<<< HEAD + .fixed { position: sticky; left: 0;