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>
-    <Switch>
-      <Route path="/" exact component={Layout} />
-      <Router component={Search} />
-      <Route component={NotFound} />
-    </Switch>
+    <>
+      <Navbar />
+      <Switch>
+        <Route path="/" exact component={Home} />
+        <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({
-      toggleMovieList: false
-    });
+    // navigate to search comp
+    // 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} />
-        <MainContent />
+        {/* <Navbar showMovies={this.onSearchHandler} /> */}
+        {
+          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,42 +33,97 @@ class navigation extends Component {
     }
   }
 
-  render() {
-    const { scrolling } = this.state;
-    const { showMovies } = this.props;
+  /** 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
+    // });
 
-    return (
-      <nav className={"navigation " + (scrolling ? "black" : "")} >
-        <ul className="navigation__container">
-          <NavLink to="/">
-            <img className="navigation__container--logo" src={NetflixLogo} alt="" />
-          </NavLink>
-          <DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
-          <div className="navigation__container-link pseudo-link">Home</div>
-          <div className="navigation__container-link pseudo-link">TV Shows</div>
-          <div className="navigation__container-link pseudo-link">Movies</div>
-          <div className="navigation__container-link pseudo-link">Recently Added</div>
-          <div className="navigation__container-link pseudo-link">My List</div>
+    const userInput = event.target.value;
+    console.log('user input', userInput)
+    /** Pass in the user input to make the API call. */
+    // this.makeAipCall(userInput);
 
-          <div className="navigation__container--left">
-            <SearchLogo className="logo" />
-            <input
-              onChange={showMovies}
-              className="navigation__container--left__input"
-              type="text"
-              placeholder="Title, genres, people" />
-          </div>
-
-          <div className="navigation__container-link pseudo-link">KIDS</div>
-          <div className="navigation__container-link pseudo-link">DVD</div>
-          <BellLogo className="navigation__container--bellLogo" />
-
-          <DropdownContent />
-          <DropdownArrow className="navigation__container--downArrow" />
-        </ul>
-      </nav>
-    )
+    /** If the input is empty don't display the movie list. */
+    if (userInput === "") {
+      this.props.history.push('/')
+    }
   }
-}
 
-export default navigation; 
+  /** 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, showMovies } = this.state;
+
+      return (
+        <nav className={"navigation " + (scrolling ? "black" : "")} >
+          <ul className="navigation__container">
+            <NavLink to="/">
+              <img className="navigation__container--logo" src={NetflixLogo} alt="" />
+            </NavLink>
+            <DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
+            <div className="navigation__container-link pseudo-link">Home</div>
+            <div className="navigation__container-link pseudo-link">TV Shows</div>
+            <div className="navigation__container-link pseudo-link">Movies</div>
+            <div className="navigation__container-link pseudo-link">Recently Added</div>
+            <div className="navigation__container-link pseudo-link">My List</div>
+
+            <div className="navigation__container--left">
+              <SearchLogo className="logo" />
+              <input
+                onChange={() => this.onSearchHandler(event)}
+                className="navigation__container--left__input"
+                type="text"
+                placeholder="Title, genres, people" />
+            </div>
+
+            <div className="navigation__container-link pseudo-link">KIDS</div>
+            <div className="navigation__container-link pseudo-link">DVD</div>
+            <BellLogo className="navigation__container--bellLogo" />
+
+            <DropdownContent />
+            <DropdownArrow className="navigation__container--downArrow" />
+          </ul>
+        </nav>
+      )
+    }
+  }
+
+  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>;
+  }
+}