Merge pull request #5 from Mello-Cello/smallWarningFixes

Cleaned up small errors. Uncomment later if components are needed.

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,16 +28,16 @@ selectedMovieObject = (movie) => {
 }
 selectedCustomerObject = (customer) => {
   //this.setState updates the state and re-renders
-  this.setState({   
-    selectedCustomer: customer, 
+  this.setState({
+    selectedCustomer: customer,
   })
 
 }
   render() {
     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>

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?

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;
+export default Library;

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,30 +79,30 @@ 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;
     return (
         <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;
+export default SearchTMDB;

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;
+export default Selected;