created search component

src/containers/AppRouter.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
-import Layout from './Layout';
+import Home from './Home';
 import NotFound from './NotFound';
+import Search from './Search';
+import Navbar from './Navbar';
 
 const AppRouter = () => (
   <BrowserRouter>
+    <>
+      <Navbar />
       <Switch>
-      <Route path="/" exact component={Layout} />
+        <Route path="/" exact component={Home} />
-      <Router component={Search} />
+        <Route path="/search" component={Search} />
         <Route component={NotFound} />
       </Switch>
+    </>
   </BrowserRouter>
 );
 

src/containers/Home.js

@@ -7,13 +7,12 @@ import Movie from '../components/Movie/Movie';
 import Modal from '../components/UI/Modal';
 import MovieDetails from '../components/Movie/MovieDetails';
 
-class Layout extends Component {
+class Home extends Component {
-
   state = {
     /** Toggles the movie list when the user starts typing. */
     toggleMovieList: true,
     /** An array that will hold all of our movie Components. */
-    MovieList: [],
+    // MovieList: [],
     /** Toggles the modal when a movie is clicked. */
     toggleModal: false,
     /** Holds the movie information for a single movie. */
@@ -58,9 +57,12 @@ class Layout extends Component {
   /** Get the user input  */
   onSearchHandler = (event) => {
     /** Display the movie list. */
-    this.setState({
+    // navigate to search comp
-      toggleMovieList: false
+    // this.props.history.push('/search)
-    });
+    this.props.history.push('/search')
+    // this.setState({
+    //   toggleMovieList: false
+    // });
 
     const userInput = event.target.value;
     /** Pass in the user input to make the API call. */
@@ -106,8 +108,11 @@ class Layout extends Component {
   render() {
     return (
       <div>
-        <Navbar showMovies={this.onSearchHandler} />
+        {/* <Navbar showMovies={this.onSearchHandler} /> */}
-        <MainContent />
+        {
+          this.state.toggleMovieList ? <MainContent /> : <div
+            className="search-container">{this.state.MovieList}</div>
+        }
         <Modal show={this.state.toggleModal}
           modalClosed={this.closeModal}
           movie={this.state.movieOverview}>
@@ -118,4 +123,4 @@ class Layout extends Component {
   }
 }
 
-export default Layout; 
+export default Home;

src/containers/Navbar.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 import NavigationItem from '../components/NavigationItem'
 import SearchLogo from '../static/images/search-icon.svg';
@@ -9,7 +10,7 @@ import DropdownArrow from '../static/images/drop-down-arrow.svg';
 import DropdownContent from "../components/DropdownContent";
 
 
-class navigation extends Component {
+class Navbar extends Component {
   state = {
     scrolling: false
   }
@@ -32,9 +33,64 @@ class navigation extends Component {
     }
   }
 
+  /** Get the user input  */
+  onSearchHandler = (event) => {
+    /** Display the movie list. */
+    // navigate to search comp
+    // this.props.history.push('/search)
+    this.props.history.push('/search')
+    // this.setState({
+    //   toggleMovieList: false
+    // });
+
+    const userInput = event.target.value;
+    console.log('user input', userInput)
+    /** Pass in the user input to make the API call. */
+    // this.makeAipCall(userInput);
+
+    /** If the input is empty don't display the movie list. */
+    if (userInput === "") {
+      this.props.history.push('/')
+    }
+  }
+
+  /** Make API call as soon as the user starts typing.  */
+  makeAipCall = (searchItem) => {
+    const url = `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchItem}`;
+
+    axios.get(url)
+      .then(res => {
+        const results = res.data.results;
+        let movieImageUrl;
+        /** Will hold all our movies Components */
+        let movieRows = [];
+
+        /** Loop through all the movies */
+        results.forEach((movie) => {
+          /** Manually build our image url and set it on the Movie component. */
+          if (movie.poster_path !== null && movie.media_type !== "person") {
+            movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
+
+            /** Set the movie object to our Movie component */
+            const movieComponent = <Movie
+              movieDetails={() => this.selectMovieHandler(movie)}
+              key={movie.id}
+              movieImage={movieImageUrl}
+              movie={movie} />
+
+            /** Push our movie component to our movieRows array */
+            movieRows.push(movieComponent);
+          }
+        })
+        /** Set our MovieList array to the movieRows array */
+        this.setState({ MovieList: movieRows });
+      }).catch(error => {
+        console.log(error);
+      });
+
+
     render() {
-    const { scrolling } = this.state;
+      const { scrolling, showMovies } = this.state;
-    const { showMovies } = this.props;
 
       return (
         <nav className={"navigation " + (scrolling ? "black" : "")} >
@@ -52,7 +108,7 @@ class navigation extends Component {
             <div className="navigation__container--left">
               <SearchLogo className="logo" />
               <input
-              onChange={showMovies}
+                onChange={() => this.onSearchHandler(event)}
                 className="navigation__container--left__input"
                 type="text"
                 placeholder="Title, genres, people" />
@@ -68,6 +124,6 @@ class navigation extends Component {
         </nav>
       )
     }
-}
+  }
 
-export default navigation; 
+  export default withRouter(Navbar); 

src/containers/Search.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class Search extends Component {
+  state = {
+    movieList: [];
+  }
+
+  render() {
+    return <div className="search-container">{this.state.movieList}</div>;
+  }
+}