Search

.gitignore

@@ -15,6 +15,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "dotenv": "^8.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import CustomerList from './components/CustomerList';
 import RentalLibrary from './components/RentalLibrary';
+import Search from './components/Search';
 
 
 
@@ -13,8 +14,8 @@ class App extends Component {
       selectedMovie: "",
       selectedCustomer: "",
       allRentals: [],
-      showMovies: false,
-      showCustomers: false
+      // showMovies: false,
+      // showCustomers: false
     }
   }
 
@@ -30,18 +31,18 @@ class App extends Component {
   //   return <h2>Users</h2>;
   // }
 
-  showCustomerToggle = () => {
-    const status = !this.state.showCustomers;
-    this.setState({showCustomers: status,
-                  showMovies: !status
-    });
-  }
+  // showCustomerToggle = () => {
+  //   const status = !this.state.showCustomers;
+  //   this.setState({showCustomers: status,
+  //                 showMovies: !status
+  //   });
+  // }
 
-  showMovieToggle = () => {
-    const status = !this.state.showMovies;
-    this.setState({showMovies: status,
-                    showCustomers: !status});
-  }
+  // showMovieToggle = () => {
+  //   const status = !this.state.showMovies;
+  //   this.setState({showMovies: status,
+  //                   showCustomers: !status});
+  // }
 
   render() {
     return (
@@ -57,6 +58,9 @@ class App extends Component {
                 <li>
                   <Link to="/customers" className="customers">Customers</Link>
                 </li>
+                <li>
+                  <Link to="/search" className="search">Search</Link>
+                </li>
               {/* <button onClick={this.showMovieToggle}>Show Movies</button>
               <button onClick={this.showCustomerToggle}>Show Customers</button> */}
               </ul>
@@ -65,6 +69,7 @@ class App extends Component {
           <main>
             <Route path="/movies" component={RentalLibrary} />
             <Route path="/customers" component={CustomerList} />
+            <Route path="/search" component={Search} />
             {/* {this.state.showCustomers && <CustomerList />}
             {this.state.showMovies && <RentalLibrary />} */}
           </main>

src/components/Movie.js

@@ -6,19 +6,17 @@ const Movie = (props) => {
 
   return (
     <div className="movie">
-      <li>
         <div className="movie__section">
+          <h3 className="movie__title">{props.title}</h3>
             <img className="image" src={props.image_url} alt="this is an image"/>
-            <div class="middle">
-              <div class="text">{props.overview}</div>
+            <div className="middle">
+              <div className="text">{props.overview}</div>
             </div>
           <div className="movie__info">
             <span>
-            </span>
-            <h3 className="movie__title">{props.title}</h3>
+            </span> 
           </div>
         </div>
-      </li>
     </div>
   )
 }

src/components/Search.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Movie from './Movie'
+
+require('dotenv').config();
+
+class Search extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      result: [],
+      searchTitle: "",
+      errorMessage: "",
+    }
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  onSearch = (event) => {
+    event.preventDefault();
+
+    this.searchMovie(this.state.searchTitle);
+
+    this.setState({
+      searchTitle: "",
+    });
+  }
+
+  componentDidMount () {
+    this.searchMovie();
+  };
+
+  searchMovie = (searchTitle) => {
+    const URL = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchTitle}&page=1&include_adult=false`
+
+    axios.get(URL)
+    .then((response) => {
+      const movies = response.data.results.map((movie) => {
+        return {
+          id: movie.id,
+          key: movie.id,
+          title: movie.title,
+          overview: movie.overview,
+          release_date: movie.release_date,
+          image_url: `http://image.tmdb.org/t/p/w185//${movie.poster_path}`,
+          external_id: movie.external_id,
+        }
+      })
+      this.setState({
+        result: movies,
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessage: error.message,
+      })
+    })
+  }
+
+  render() {
+    const results = this.state.result.map((movie, i) => {
+
+      return <Movie
+            id={i}
+            key={i}
+            title={movie.title}
+            overview={movie.overview}
+            release_date={movie.release_date}
+            image_url={movie.image_url}
+            external_id={movie.external_id}
+      />
+    })
+    return (
+      <div>
+        <form className="search-movie-form" onSubmit={this.onSearch}>
+          <div className="search-movie">
+              <h3 className="search-movie__header">Search Movie</h3>
+          </div>
+          <div>
+              <label 
+                className="search-movie-form__form-label" 
+                htmlFor="title">Movie Title</label>
+              <input className="search-movie-form__form-input"
+                name="searchTitle"
+                onChange={this.onInputChange}
+                value={this.state.searchTitle}>
+              </input>
+          </div>
+
+          <input className="search-movie-form__form-button" type="submit" name="submit" value="Search Movie" />
+      </form>
+      <div>
+        {results}
+      </div>
+    </div>
+    )};
+  }
+
+  export default Search;
+