From 899ece230bda953461d64eaf43bf51b5d4a4622c Mon Sep 17 00:00:00 2001 From: Mello-Cello <celloelle@gmail.com> Date: Thu, 27 Jun 2019 14:53:55 -0700 Subject: [PATCH] Cleaned up small errors. Uncomment later if components are needed. --- src/App.js | 28 ++++++++++++------------- src/components/CustomerList.js | 4 ++-- src/components/Library.js | 32 ++++++++++++++-------------- src/components/SearchTMDB.js | 38 +++++++++++++++++++--------------- src/components/Selected.js | 14 ++++++------- 5 files changed, 60 insertions(+), 56 deletions(-) diff --git a/src/App.js b/src/App.js index 048c75c7d..ece3c364f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +// import logo from './logo.svg'; import './App.css'; import CustomerList from './components/CustomerList'; import Library from './components/Library'; @@ -14,7 +14,7 @@ class App extends Component { this.state = { selectedMovie: '', - selectedCustomer: '', + selectedCustomer: '', message: '', } } @@ -28,8 +28,8 @@ selectedMovieObject = (movie) => { } selectedCustomerObject = (customer) => { //this.setState updates the state and re-renders - this.setState({ - selectedCustomer: customer, + this.setState({ + selectedCustomer: customer, }) } @@ -37,7 +37,7 @@ selectedCustomerObject = (customer) => { console.log(this.state) return ( <section> - + <Router> <div> <nav> @@ -47,7 +47,7 @@ selectedCustomerObject = (customer) => { </li> <li> <Link to="/search">Search Page</Link> - </li> + </li> <li> <Link to="/customers">Customer List</Link> </li> @@ -56,26 +56,26 @@ selectedCustomerObject = (customer) => { </li> </ul> </nav> - + <Route path="/search" component={SearchTMDB}/> <Route path="/customers" - render={(props) => - <CustomerList selectedCustomerCallback={this.selectedCustomerObject} + render={(props) => + <CustomerList selectedCustomerCallback={this.selectedCustomerObject} isAuthed={true} /> } /> - <Route path="/library" - render={(props) => - <Library selectedMovieCallback={this.selectedMovieObject} + <Route path="/library" + render={(props) => + <Library selectedMovieCallback={this.selectedMovieObject} isAuthed={true} /> } /> </div> </Router> - <div> - <Selected showMovie={this.state.selectedMovie} + <div> + <Selected showMovie={this.state.selectedMovie} showCustomer={this.state.selectedCustomer} /> </div> diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index b5516879a..775c445ff 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +// import PropTypes from 'prop-types'; import axios from 'axios'; -import { createDecipher } from 'crypto'; // do we need this? +// import { createDecipher } from 'crypto'; // do we need this? class CustomerList extends Component { //pass in props? diff --git a/src/components/Library.js b/src/components/Library.js index 8c195b128..e4b2b4586 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,13 +1,13 @@ import React, {Component} from 'react'; -import PropTypes from 'prop-types'; +// import PropTypes from 'prop-types'; import axios from 'axios'; -import { createDecipher } from 'crypto'; +// import { createDecipher } from 'crypto'; class Library extends Component { //change Library to functional component //pass in props //make a variable movies = props to pull movies array from App - //set another variable 'allmovies' and loop through map and return + //set another variable 'allmovies' and loop through map and return constructor() { super(); @@ -18,7 +18,7 @@ class Library extends Component { } componentDidMount() { - const moviesURL = 'http://localhost:3001/movies'; + const moviesURL = 'http://localhost:3001/movies'; axios.get(moviesURL) .then((response) => { const movies = response.data.map((movieInfo) => { @@ -28,8 +28,8 @@ class Library extends Component { overview: movieInfo.overview, release_date: movieInfo.release_date, image_url: movieInfo.image_url, - extrenal_id: movieInfo.extrenal_id, - } + extrenal_id: movieInfo.extrenal_id, + } }) this.setState({ movies: movies, @@ -50,29 +50,29 @@ class Library extends Component { // make a callback function for selectedHandler // selectedHandlerCallback=selectedHandler - + render() { const eachMovie = this.state.movies.map((movie, i) => { return ( - <div> + <div key={i}> {movie.title} <button onClick={()=>this.handleMovieSelection(movie)}> Select Movie </button> - </div> + </div> ) }) - - + + const errors = this.state.error; return ( - <section> - <h1>All Movies</h1> + <section> + <h1>All Movies</h1> {eachMovie} </section> ) } - - + + } -export default Library; \ No newline at end of file +export default Library; diff --git a/src/components/SearchTMDB.js b/src/components/SearchTMDB.js index 2095c89f0..e50045b8e 100644 --- a/src/components/SearchTMDB.js +++ b/src/components/SearchTMDB.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +// import PropTypes from 'prop-types'; import axios from 'axios'; @@ -25,12 +25,12 @@ class SearchTMDB extends Component { onSearchButtonHandler = () => { - + if (this.state.searchMovie) { axios.get('http://localhost:3001/movies?query=' + this.state.searchMovie) .then((response) => { const updatedMovieList = response.data - + this.setState({ searchResults: updatedMovieList }); @@ -40,13 +40,13 @@ class SearchTMDB extends Component { apiError: error.message }) }); - + } - + } onAddtoRentalButtonHandler = (movie) => { - console.log(movie) + // console.log(movie) const movieDataToSendToApi ={ "movie": { "title": movie.title, @@ -57,16 +57,20 @@ class SearchTMDB extends Component { "inventory": 1 } } - + axios.post('http://localhost:3001/movies',movieDataToSendToApi) .then((response) => { + console.log(response) const successMessage = `Succesfully added ${response.data.movie.title}` this.setState({ apiSuccess: successMessage }) }) .catch((error) => { + // console.log("in catch *******"); + this.setState({ + apiError: error.message }) }); @@ -75,16 +79,16 @@ class SearchTMDB extends Component { render() { const eachMovie = this.state.searchResults.map((movie, i) => { return ( - <div> + <div key={i}> <article key={i}> <p >{movie.title}</p> - <button + <button onClick={() => {this.onAddtoRentalButtonHandler(movie)}}> Add To Rental Library - </button> + </button> </article> - </div> - ) + </div> + ) }) const successSection = (this.state.apiSuccess) ? (<section> Yay!{this.state.apiSuccess}</section>) : null; const errorSection = (this.state.apiError) ? (<section> Error: {this.state.apiError}</section>) : null; @@ -92,13 +96,13 @@ class SearchTMDB extends Component { <main> <h2>Movie Search Page</h2> <p>To find a movie by title, type the movie title in the search bar</p> - <lable> + <label> Movie Title: - <input - type="text" + <input + type="text" onChange={this.onSearchChange}> </input> - </lable> + </label> <input type="submit" name="submit" value="Search" onClick={this.onSearchButtonHandler} /> {errorSection} {successSection} @@ -108,4 +112,4 @@ class SearchTMDB extends Component { } } -export default SearchTMDB; \ No newline at end of file +export default SearchTMDB; diff --git a/src/components/Selected.js b/src/components/Selected.js index 9feddf744..71d0175df 100644 --- a/src/components/Selected.js +++ b/src/components/Selected.js @@ -1,7 +1,7 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import CustomerList from './CustomerList'; -import Library from './Library'; +// import PropTypes from 'prop-types'; +// import CustomerList from './CustomerList'; +// import Library from './Library'; import './Selected.css'; function Selected(props) { @@ -12,13 +12,13 @@ function Selected(props) { <section> <div className='SelectedObjectsWrapper'> <h3>Customer: {displayCustomer}</h3> - <h3>Current Movie: {displaySelection}</h3> - </div> - </section> + <h3>Current Movie: {displaySelection}</h3> + </div> + </section> ) // } else { // return null // } } -export default Selected; \ No newline at end of file +export default Selected;