search functionality bugs

src/components/Header/Header.js

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

src/components/MovieRow/MovieRow.js

@@ -3,17 +3,17 @@ import React from 'react';
 const movieRow = (props) => (
 
    <div className="movie">
-         <div className="movie__column-poster">
+         <div className="no movie__column-poster">
             <img src={props.movie.posterSrc} alt="" className="movie__poster" />
          </div>
       
-      <div className={"movie__column-overview " + (props.val % 2 == 0 ? 'even' : 'odd')}>
+      {/* <div className={"movie__column-overview " + (props.val % 2 == 0 ? 'even' : 'odd')}>
             <h1 className="movie__column-overview-heading">{props.movie.title}</h1>
             <p className="movie__column-overview-text">{props.movie.overview}</p>
             <a className="movie__column-overview-btn"
                onClick={() => { window.location.href = "https://www.themoviedb.org/movie/" + props.movie.id; }}>
                view</a>
-         </div>
+         </div> */}
    </div> 
 );
 

src/components/NavigationItems/NavigationItems.js

@@ -1,24 +1,58 @@
-import React from 'react'; 
+import React, { Component } from 'react'; 
+
 import NavigationItem from './NavigationItem/NavigationItem';
+import SearchLogo from '../../static/images/search-icon.svg'; 
+import SearchMovie from '../../containers/SearchMovie/SearchMovie'; 
 
 
-const navigationItems = props => (
+// const navigationItems = (props) => (
-  <ul className="navigation__container">
+//   <ul className="navigation__container">
-    <NavigationItem link="/" exact>Netflix</NavigationItem>
+//     <NavigationItem link="/" exact>Netflix</NavigationItem>
-    <NavigationItem link="/">Home</NavigationItem>
+//     <NavigationItem link="/">Home</NavigationItem>
-    <NavigationItem link="/">TV Shows</NavigationItem>
+//     <NavigationItem link="/">TV Shows</NavigationItem>
-    <NavigationItem link="/">Movies</NavigationItem>
+//     <NavigationItem link="/">Movies</NavigationItem>
-    <NavigationItem link="/">Recently Added</NavigationItem>
+//     <NavigationItem link="/">Recently Added</NavigationItem>
-    <NavigationItem link="/">My List</NavigationItem>
+//     <NavigationItem link="/">My List</NavigationItem>
     
-    <div className="navigation__container--left">
+//     <div className="navigation__container--left">
-      <input 
+//       <SearchLogo className="logo"/>
-        placeholder="Search movie..." 
+//       <SearchMovie />
-        type="text" />
+//       {/* <input 
-      {/* <p>hello</p>
+//         placeholder="Title, people, genres" 
-      <p>hello</p> */}
+//         type="text" /> */}
-    </div>
+//       {/* <p>hello</p>
-  </ul>
+//       <p>hello</p> */}
-);
+//     </div>
+//   </ul>
+// );
 
-export default navigationItems; 
+// export default navigationItems; 
+
+class NavigationItems extends Component {
+
+
+  render() {
+    return (
+      <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"/>
+       {/* <SearchMovie show={this.myF}/> */}
+       {/* <input 
+        placeholder="Title, people, genres" 
+         type="text" /> */}
+       {/* <p>hello</p>
+       <p>hello</p> */}
+     </div>
+   </ul>
+    ); 
+  }
+}
+
+export default NavigationItems; 

src/components/Search/Search.js

@@ -1,16 +1,12 @@
 import React from 'react';
 
 const search = (props) => (
-   <div className="search">
    
-      <input 
+   <input
-         onChange={props.onSearch}
+      onChange={props.onSearch}
-         type="text" 
+      onClick={props.onShow}
-         placeholder="Search movie..." 
+      type="text"
-         className="search__input"/>
+      placeholder="Title, genres, people" />
-   
+)
-   </div>
-   
-);
 
 export default search;

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 = {
+  state = {
-      // an array that will hold all of our movies component 
+    myVal: true,
-      rows: []      
+       //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) => {
+  //  searchHandler = (event) => {
-      const searchItem = event.target.value; 
+  //     // const searchItem = event.target.value; 
-      this.makeAipCall(searchItem); 
+  //     // 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 />
+          <Navigation showMan={this.myF} />
-            {/* <Search onSearch={this.searchHandler}/>
+          {this.state.myVal ? <Layout /> : <div onClick={this.myB} className="no">{this.state.rows}</div>}
-            {this.state.rows} */}
+
          </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; 

src/static/sass/base/_base.scss

@@ -59,3 +59,22 @@ html {
 	grid-template-rows: 47vw min-content min-content min-content; 
 	grid-template-columns:  4% repeat(10, 1fr) 4%;
 }
+
+.searchContent {
+	height: 100vh;
+	background-color: $color-background;
+}
+
+.no {
+	background-color: $color-background;
+	height: 150%;
+	padding-bottom: 10rem;
+	display: flex;
+	
+
+}
+
+.yes {
+	background-color: purple; 
+	height: 100vh;
+}

src/static/sass/components/_movie.scss

@@ -0,0 +1,83 @@
+.movie {
+   // margin-top: 5rem;
+   // padding-left: 16rem;
+   // padding-right: 6rem;
+   // padding-bottom: 6rem;
+   margin-top: 15rem;
+   height: 1rem;
+   display: inline-block;
+
+   display: flex;
+   justify-content: center;
+
+   * > img {
+       width: 25rem;
+       padding-right: 2rem;
+       
+   }
+
+   &__column-poster {
+      height: 25rem;
+      
+   }
+
+   &__column-overview {
+      padding-left: 3.5rem;
+      text-align: left;
+      width: 60%;
+      padding-top: .5rem;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start; 
+
+      &-heading {
+         font-size: 3rem;
+         font-family: 'Fjalla One', sans-serif;
+         color: $color-white;
+      }
+
+      &-text {
+         color: $color-white;
+         font-family: 'Nanum Gothic', sans-serif;
+         text-align: left;
+         font-size: 1.6rem;      
+         line-height: 1.5;
+
+      }
+
+      &-btn { 
+         margin-bottom: 1rem;
+         color: $color-green;
+         cursor: pointer;
+         border-radius: 5rem;
+         // padding: .5rem;
+         padding: .8rem 2rem .8rem 2rem;
+         font-family: 'Nanum Gothic', sans-serif;
+         font-size: 1.5rem;
+         border: solid 1.7px $color-green;
+         transition: all .2s; 
+
+         &:hover {
+            background-color: $color-green; 
+            color: #fff;
+         }
+
+      }
+
+   }
+
+   &__poster {
+      height: 100%;
+   }
+}
+
+.even {
+   background-color: $color-purple;
+}
+
+.odd {
+   background-color: $color-light-blue-2;
+
+}

src/static/sass/layout/_navigation.scss

@@ -39,17 +39,22 @@
          padding-right: 4.6rem;
          display: flex;
          justify-content: flex-end;
-
       }
    }
 
 }
 
+ ::placeholder {
+    color: rgb(167, 166, 166);
+    opacity: 1;
+    /* Firefox */
+ }
+
 input[type="text"] {
-   // display: none;
+   font-size: 1.4rem;
-   // color: #fff;
    border: none;
    outline: none;
+   background-color: red;
    width: 0px;
    padding: 10px;
    padding-right: 2rem;
@@ -59,12 +64,14 @@ input[type="text"] {
 }
 
 input[type="text"]:focus:hover {
+   z-index: 2;
    border-bottom: 1px solid #BBB;
    color: #fff;
 }
 
 input[type="text"]:focus {
    width: 22rem;
+   color: #fff;
    z-index: 1;
    background-color: #000;
    border: 1px solid #fff;
@@ -75,7 +82,6 @@ input[type="submit"] {
    height: 67px;
    width: 63px;
 
-   color: red;
    text-indent: -10000px;
    border: none;
    position: absolute;
@@ -85,3 +91,11 @@ input[type="submit"] {
    cursor: pointer;
    transition: opacity .4s ease;
 }
+
+.logo {
+   z-index: -1;
+   width: 2rem;
+   height: 2rem;
+   transform: translateX(2.4rem) translateY(.5rem);
+   cursor: pointer;
+}