search icon functionality

src/containers/Navigation/Navigation.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-
-import NavigationItems from '../../components/NavigationItems/NavigationItems';
-
+import NavigationItem from '../../components/NavigationItems/NavigationItem/NavigationItem'
+import SearchLogo from '../../static/images/search-icon.svg'; 
 
 class navigation extends Component {
  state = {
@@ -32,15 +31,24 @@ class navigation extends Component {
 
     return (
       <nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
-       
-        <input
-          onKeyDown={this.props.showMan}
-          // onClick={this.props.showMan}
-          // onChange={props.onSearch}
-          // onClick={props.onShow}
-          type="text"
-          placeholder="Title, genres, people" />
-        <NavigationItems />
+      
+        <ul className="navigation__container">
+          <NavigationItem link="/" exact>Netflix</NavigationItem>
+          <NavigationItem link="/">Home</NavigationItem>
+          <NavigationItem link="/">TV Shows</NavigationItem>
+          <NavigationItem link="/">Movies</NavigationItem>
+          <NavigationItem link="/">Recently Added</NavigationItem>
+          <NavigationItem link="/">My List</NavigationItem>
+
+          <div className="navigation__container--left">
+            <SearchLogo className="logo" />
+            <input
+              onKeyDown={this.props.showMan}
+              type="text"
+              placeholder="Title, genres, people" />
+          </div>
+        </ul>
+        {/* <NavigationItems /> */}
       </nav>
     )
   }

src/containers/SearchMovie/SearchMovie.js

@@ -1,75 +0,0 @@
-// 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;