Merge pull request #1 from kaseea/search

Search

.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -26,5 +26,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "dotenv": "^8.0.0"
   }
 }

src/App.js

@@ -5,10 +5,20 @@ import NavBar from './components/NavBar';
 import CustomerCollection from './components/CustomerCollection';
 import axios from 'axios';
 import './App.css';
+import Search from './components/Search';
 
 
 class App extends Component {
+  constructor() {
+    super();
 
+    this.state = {
+      movies: [],
+      customers: [],
+      selectedCustomer: null,
+      selectedMovie: null,
+    };
+  }
 
 
   // addCardCallback = (card) => {

src/components/NavBar.js

@@ -10,72 +10,71 @@ import './NavBar.css';
 
 class NavBar extends Component {
     constructor() {
-        super();
-    
-        this.state = {
-          movies: [],
-          errorMessage: null,
-          customers: [],
-          selectedCustomer: null,
-          selectedMovie: null,
-        };
-      }
+      super();
+
+      this.state = {
+        movies: [],
+        errorMessage: null,
+        customers: [],
+        selectedCustomer: null,
+        selectedMovie: null,
+      };
+    }
 
     onSelectCustomer = (customerId) => {
-        // console.log(this.state.customers)
-        // console.log(customerId);
-        const customer = this.state.customers.find(customer => customer.id === customerId)
-        console.log(customer);
-        this.setState({
-            selectedCustomer: customer
-        });
-        console.log(customer.name)
+      // console.log(this.state.customers)
+      // console.log(customerId);
+      const customer = this.state.customers.find(customer => customer.id === customerId)
+      console.log(customer);
+      this.setState({
+          selectedCustomer: customer
+      });
+      console.log(customer.name)
     }
 
     onSelectMovie = (movieId) => {
-        // console.log(this.state.movies)
-        // console.log(movieId);
-        const movie = this.state.movies.find(movie => movie.id === movieId)
-        console.log(movie);
-        this.setState({
-            selectedMovie: movie
-        });
+      // console.log(this.state.movies)
+      // console.log(movieId);
+      const movie = this.state.movies.find(movie => movie.id === movieId)
+      console.log(movie);
+      this.setState({
+          selectedMovie: movie
+      });
     }
 
     componentDidMount() {
-        // const localUrl = this.props.url + this.props.boardName + "/cards"
-        const localUrl = 'http://localhost:3007/movies'
-        console.log(localUrl);
-        // is this needed and why?
-        // const cards = this.state.cards
-        axios.get(localUrl)
-            .then((response) => {
-            console.log("in axios!");
-            console.log(response.data)
-            this.setState({ 
-
-              movies: response.data,
-                })
+      // const localUrl = this.props.url + this.props.boardName + "/cards"
+      const localUrl = 'http://localhost:3007/movies'
+      console.log(localUrl);
+      // is this needed and why?
+      // const cards = this.state.cards
+      axios.get(localUrl)
+        .then((response) => {
+        console.log("in axios!");
+        console.log(response.data)
+        this.setState({ 
+
+          movies: response.data,
             })
-            .catch((error) => {
-            this.setState({ errorMessage: error.message });
-            });
-        const localUrl2 = 'http://localhost:3007/customers'
-        // is this needed and why?
-        // const cards = this.state.cards
-        axios.get(localUrl2)
-            .then((response) => {
-            console.log("in axios!");
-            console.log(response.data)
-            let updatedCustomers = response.data;
-                this.setState({             
-                    customers: updatedCustomers,
-                })
+        })
+        .catch((error) => {
+        this.setState({ errorMessage: error.message });
+        });
+      const localUrl2 = 'http://localhost:3007/customers'
+      // is this needed and why?
+      // const cards = this.state.cards
+      axios.get(localUrl2)
+        .then((response) => {
+        console.log("in axios!");
+        console.log(response.data)
+        let updatedCustomers = response.data;
+            this.setState({             
+                customers: updatedCustomers,
             })
-            .catch((error) => {
-            this.setState({ errorMessage: error.message });
-            });
-
+        })
+        .catch((error) => {
+        this.setState({ errorMessage: error.message });
+        });    
     }
 
 

src/components/Search.js

@@ -1,23 +1,120 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import './Search.css';
+import axios from 'axios';
+
+require('dotenv').config();
 
 class Search extends Component {
+  constructor(props) {
+      super(props);
+
+      this.state = {
+      result: [],
+      titleSearch: '',
+      errorMessage: '',
+      };
+    }
 
+  onChangeHandler = (event) => {
+    const field = {}
+    field[event.target.name] = event.target.value;
+
+    this.setState(field);
+  }
+
+  searchMovie = (event) => {
+    event.preventDefault();
 
+    this.searchMovieResults(this.state.titleSearch);
 
-render() {
-    return (
-        <div>
-        { console.log(this.props.customer) }
-        <h2>THIS IS A SEARCH</h2>
-        </div>
-    )
-    }
-}
+    this.setState({
+      titleSearch: '',
+    });
+  }
+
+  componentDidMount () {
+    this.searchMovieResults();
+  }
 
-Search.propTypes = {
+  searchMovieResults = (titleSearch) => {
+    const externalUrl = `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${titleSearch}&page=1&include_adult=false`;
+    console.log(externalUrl);
+      axios.get(externalUrl)
+        .then((response) => {
+          const movies = response.data.map((movie) => {
+            return {
+              id: movie.id,
+              title: movie.title,
+              overview: movie.overview,
+              release_date: movie.release_date,
+              image_url: movie.image_url,
+              external_id: movie.external_id,
+            }
+          })
+          this.setState({
+            result: movies,
+          });
+        })
+        .catch((error) => {
+          this.setState({
+            errorMessage: `${error.message} when retrieving movies.`,
+          });
+        });
+  }
 
-};
+    // addMovie = (movieId) => {
+    //   console.log(this.state);
+    //   const addedMovie = this.state.searchResults.find(movie => movie.external_id === movieId)
+    //   const addedMovieInfo = {
+    //     title: addedMovie.title,
+    //     overview: addedMovie.overview,
+    //     release_date: addedMovie.release_date,
+    //     image_url: addedMovie.image_url,
+    //     external_id: addedMovie.external_id,
+    //     inventory: 5
+    //   }
+
+    //   axios.post('http://localhost:3000/movies/', addedMovieInfo)
+    //    .then((response) => {
+    //      this.props.searchCallback(`Successfully added ${addedMovieData.title} to library`)
+    //    })
+    //    .catch((error) => {
+    //      console.log(`Error: ${error.message}`);
+    //    })
+    // }
+
+    render() {
+      // const result = this.state.result.map((movie, i) => {
+      //   return 
+      //   <div>
+      //     <p><movie.title></p>
+      //   </div>
 
-export default Search;
+      // });
+      return (
+        <form className="search-movie-form" onSubmit={this.searchMovie}>
+          <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="titleSearch"
+                onChange={this.onChangeHandler}
+                value={this.state.titleSearch}>
+              </input>
+          </div>
+          <input className="search-movie-form__form-button" type="submit" name="submit" value="Search Movie" />
+      </form>
+      )};
+  }
+
+  Search.propTypes = {
+      searchMovieResults: PropTypes.func.isRequired,
+    };
+
+  export default Search;