search functionality bugs

src/containers/App.js

@@ -1,17 +1,28 @@
 import React, { Component } from 'react';
-import axios from 'axios'; 
-
+import Navigation from "./Navigation/Navigation"
 import Layout from './Layout/Layout'; 
-import MovieRow from '../components/MovieRow/MovieRow'; 
+import axios from 'axios'; 
+import MovieRow from '../components/MovieRow/MovieRow'
+// import SearchMovie from './SearchMovie/SearchMovie'; 
 
 class App extends Component {
 
-   state = {
-      // an array that will hold all of our movies component 
-      rows: []      
-   }
+  state = {
+    myVal: true,
+       //an array that will hold all of our movies component 
+    rows: []
+  }
 
-   makeAipCall = (searchItem) => {
+ 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 => {
@@ -42,17 +53,33 @@ class App extends Component {
    }
 
    // get the user input and pass it to the makeAPICall function 
-   searchHandler = (event) => {
-      const searchItem = event.target.value; 
-      this.makeAipCall(searchItem); 
-   }
+  //  searchHandler = (event) => {
+  //     // const searchItem = event.target.value; 
+  //     // this.makeAipCall(searchItem); 
+  //     alert("Hello");
+  //  }
+
+
+  myF = (event) => {
+    this.setState({
+      myVal: false
+    }); 
+    const userInput = event.target.value; 
+    this.makeAipCall(userInput); 
+    console.log(userInput);
+  }
+
+
+
 
    render() {
+
+
       return (
-         <div>       
-           <Layout />
-            {/* <Search onSearch={this.searchHandler}/>
-            {this.state.rows} */}
+         <div>  
+          <Navigation showMan={this.myF} />
+          {this.state.myVal ? <Layout /> : <div onClick={this.myB} className="no">{this.state.rows}</div>}
+
          </div>
          
       );

src/containers/Layout/Layout.js

@@ -1,32 +1,27 @@
 import React, { Component } from 'react';
 
-import Navigation from '../Navigation/Navigation'; 
 import Header from '../../components/Header/Header'; 
 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'; 
 
 
-   // < Navigation />
-   // <Header />
-   // <MovieShowcase />
-   // <MovieOriginals />
-   // <Footer />
 class Layout extends Component {
 
 
+
    render() {
 
 
       return (
       <BrowserRouter>
           <div className="container">
-            <Navigation />
             <Header />
             <MovieShowcase />
             <MovieOriginals />
-            <Footer />
+           <Footer /> 
           </div>
         </BrowserRouter>)
    }

src/containers/Navigation/Navigation.js

@@ -25,11 +25,22 @@ class navigation extends Component {
     }
   }
 
+ 
+
+
   render () {
 
     return (
       <nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
-       <NavigationItems />
+       
+        <input
+          onKeyDown={this.props.showMan}
+          // onClick={this.props.showMan}
+          // onChange={props.onSearch}
+          // onClick={props.onShow}
+          type="text"
+          placeholder="Title, genres, people" />
+        <NavigationItems />
       </nav>
     )
   }

src/containers/SearchMovie/SearchMovie.js

@@ -0,0 +1,75 @@
+// import React, { Component } from 'react';
+// import axios from "axios"; 
+// // import Search from '../../components/Search/Search'; 
+// import MovieRow from '../../components/MovieRow/MovieRow'; 
+// import Layout from '../Layout/Layout';
+
+
+// class SearchMovie extends Component {
+
+//  state = {
+//       // an array that will hold all of our movies component 
+//       rows: [],
+//       myVal: false      
+//    }
+
+//    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 
+//             const movies = res.data.results;
+//             // 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);
+//             })
+//             // update state 
+//             this.setState({ rows: movieRows });
+//          }).catch(error => {
+//             console.log(error);
+//          });
+//    }
+
+
+
+//    // get the user input and pass it to the makeAPICall function 
+//    searchHandler = (event) => {
+//       // const searchItem = event.target.value; 
+//       // this.makeAipCall(searchItem); 
+//       alert("Hello");
+//    }
+
+
+//    render() {
+
+
+
+//       return (
+//       <div>
+//                   <input
+//                         onKeyPress={this.searchHandler}
+//                         onClick={this.props.show}
+//                         type="text"
+//                         placeholder="Title, genres, people" />
+//         {/* <Search onSearch={this.searchHandler} onShow={this.onChangeHandler} showAll={this.state.myVal}/> */}
+//         {event.key}
+//       </div>
+         
+//       );
+//    }
+// }
+
+// export default SearchMovie;