movie dispaly added

src/components/Header/Header.js

@@ -1,9 +1,8 @@
 import React from 'react'; 
-import SearchMovie from "../../containers/SearchMovie/SearchMovie"; 
 
 const header = () => (
    <header className="header">
-    {/* <SearchMovie /> */}
+    */}
    </header>
 ); 
 

src/containers/App.js

@@ -3,47 +3,42 @@ import Navigation from "./Navigation/Navigation"
 import Layout from './Layout/Layout'; 
 import axios from 'axios'; 
 import MovieRow from '../components/MovieRow/MovieRow'
-// import SearchMovie from './SearchMovie/SearchMovie'; 
+
+
 
 class App extends Component {
 
   state = {
     myVal: true,
-       //an array that will hold all of our movies component 
+    //an array that will hold all of our movies component 
     rows: []
   }
 
- myB = () => {
-   this.setState({
-     myVal: true
-   })
- }
-
-
-
-
 makeAipCall = (searchItem) => {
       const url = "https://api.themoviedb.org/3/search/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&page=1&query=" + searchItem;
       axios.get(url)
          .then(res => {
             // extract the data from json object 
+            console.log(res); 
             const movies = res.data.results;
+            // console.log(movies); 
             // Holds our movieComponent. 
             let movieRows = [];
             let total = 0; 
             movies.forEach((movie) => {
                // manually build our image url and set it on the movie object 
-               movie.posterSrc = "https://image.tmdb.org/t/p/w185" + movie.poster_path;
-              total+= 1; 
-               // pass in the movie object to our MovieRow component and keep it in a variable called 
-               // movieComponent 
-               const movieComponent = <MovieRow 
-                                          val={total}
-                                          key={movie.id} 
-                                          movie={movie} 
-                                          />
-               // push our movieComponent to our movieRows array; 
-               movieRows.push(movieComponent);
+               if (movie.poster_path !== null) {
+                 movie.posterSrc = "https://image.tmdb.org/t/p/w185" + movie.poster_path;
+                 // pass in the movie object to our MovieRow component and keep it in a variable called 
+                 // movieComponent 
+                  const movieComponent = <MovieRow
+                   val={total}
+                   key={movie.id}
+                   movie={movie}/>
+                 // push our movieComponent to our movieRows array; 
+                 movieRows.push(movieComponent);
+               } 
+            
             })
             // update state 
             this.setState({ rows: movieRows });
@@ -52,14 +47,27 @@ makeAipCall = (searchItem) => {
          });
    }
 
-  myF = (event) => {
-    
+  onSearchHandler = (event) => {
     this.setState({
       myVal: false
     }); 
     const userInput = event.target.value; 
     this.makeAipCall(userInput); 
     console.log(userInput);
+
+    if (userInput === "") {
+      this.setState({
+        myVal: true
+      }); 
+    } 
+  }
+
+  onChangeHandler = () => {
+    // this.setState({
+    //   myVal: true
+    // })
+
+    alert("hello")
   }
 
 
@@ -67,11 +75,11 @@ makeAipCall = (searchItem) => {
 
    render() {
 
-
       return (
          <div>  
-          <Navigation showMan={this.myF} />
-          {this.state.myVal ? <Layout /> : <div onClick={this.myB} className="search-container">{this.state.rows}</div>}
+          <Navigation showMovies={this.onSearchHandler} />
+          {this.state.myVal ? <Layout /> : <div onClick={this.onChangeHandler} 
+                                            className="search-container">{this.state.rows}</div>}
 
          </div>
          

src/containers/Layout/Layout.js

@@ -5,7 +5,6 @@ import MovieShowcase from '../MovieShowcase/MovieShowcase';
 import MovieOriginals from '../MovieOriginals/MovieOriginals'; 
 import Footer from '../../components/Footer/Footer'; 
 import { BrowserRouter } from "react-router-dom"; 
-import SearchMovie from '../../containers/SearchMovie/SearchMovie'; 
 
 
 class Layout extends Component {

src/containers/Navigation/Navigation.js

@@ -44,8 +44,9 @@ class navigation extends Component {
             
             <SearchLogo className="logo" />
             <input
+              onChange={this.props.showMovies}
               className="navigation__container--left__input"
-              onKeyDown={this.props.showMan}
+              // onKeyPress={this.props.showMan}
               type="text"
               placeholder="Title, genres, people" />
             
@@ -53,7 +54,6 @@ class navigation extends Component {
           <NavigationItem link="/">KIDS</NavigationItem>
           <NavigationItem link="/">DVD</NavigationItem>
         </ul>
-        {/* <NavigationItems /> */}
       </nav>
     )
   }

src/static/sass/base/_base.scss

@@ -70,7 +70,6 @@ html {
 	height: 150%;
 	padding-bottom: 10rem;
 	padding-left: 4rem;
-	transition: all 5s; 
 	
 
 }

src/static/sass/components/_movie.scss

@@ -1,4 +1,5 @@
 .movie {
+   // z-index: -1;
    flex: 1 1 auto; 
    padding-top: 6rem;
    display: inline-block;
@@ -6,6 +7,13 @@
    &__column-poster {
       height: 25rem;
       width: 17.5rem;
+      cursor: pointer;
+      transition: transform .3s;
+
+      &:hover {
+          z-index: -1;
+         transform: scale(1.4); 
+      }
 
    }