first commit

src/containers/App.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import axios from 'axios'; 
+
+import Layout from './Layout/Layout'; 
+import MovieRow from '../components/MovieRow/MovieRow'; 
+
+class App extends Component {
+
+   state = {
+      // an array that will hold all of our movies component 
+      rows: []      
+   }
+
+   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); 
+   }
+
+   render() {
+      return (
+         <div>       
+           <Layout />
+            {/* <Search onSearch={this.searchHandler}/>
+            {this.state.rows} */}
+         </div>
+         
+      );
+   }
+}
+
+export default App; 

src/containers/Layout/Layout.js

@@ -0,0 +1,35 @@
+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"; 
+
+
+   // < Navigation />
+   // <Header />
+   // <MovieShowcase />
+   // <MovieOriginals />
+   // <Footer />
+class Layout extends Component {
+
+
+   render() {
+
+
+      return (
+      <BrowserRouter>
+          <div className="container">
+            <Navigation />
+            <Header />
+            <MovieShowcase />
+            <MovieOriginals />
+            <Footer />
+          </div>
+        </BrowserRouter>)
+   }
+}
+
+export default Layout; 

src/containers/MovieOriginals/MovieOriginals.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+class MovieOriginals extends Component {
+   render() {
+      return (
+         <div className="movieOriginals">
+            <h1>Netflix Originals</h1>
+            <div className="movieOriginals__container">
+               <div className="movieOriginals__container--movie">movie 1</div>
+               <div className="movieOriginals__container--movie">movie 2</div>
+               <div className="movieOriginals__container--movie">movie 3</div>
+               <div className="movieOriginals__container--movie">movie 4</div>
+               <div className="movieOriginals__container--movie">movie 5</div>
+               <div className="movieOriginals__container--movie">movie 6</div>
+            </div>
+         </div>
+
+      );
+   }
+}
+
+export default MovieOriginals; 

src/containers/MovieShowcase/MovieShowcase.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+
+class MovieShowcase extends Component {
+   render() {
+      return (
+         <div className="movieShowcase">
+          <h1 className="movieShowcase__heading">New Releases</h1>
+          <div className="movieShowcase__container">
+            <div className="movieShowcase__container--movie">movie 1</div>
+            <div className="movieShowcase__container--movie">movie 2</div>
+            <div className="movieShowcase__container--movie">movie 3</div>
+            <div className="movieShowcase__container--movie">movie 4</div>
+            <div className="movieShowcase__container--movie">movie 5</div>
+            <div className="movieShowcase__container--movie">movie 6</div>
+          </div>
+
+          <h1 className="movieShowcase__heading">Trending Now</h1>
+          <div className="movieShowcase__container">
+            <div className="movieShowcase__container--movie">movie 1</div>
+            <div className="movieShowcase__container--movie">movie 2</div>
+            <div className="movieShowcase__container--movie">movie 3</div>
+            <div className="movieShowcase__container--movie">movie 4</div>
+            <div className="movieShowcase__container--movie">movie 5</div>
+            <div className="movieShowcase__container--movie">movie 6</div>
+          </div>
+        </div>
+        )
+   }
+}
+
+export default MovieShowcase; 

src/containers/Navigation/Navigation.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+import NavigationItems from '../../components/NavigationItems/NavigationItems';
+
+
+class navigation extends Component {
+ state = {
+   scrolling: false
+ }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll); 
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll); 
+  }
+
+  handleScroll = (event) => {
+    if (window.scrollY === 0 ) {
+      this.setState({ scrolling: false });
+    }
+    else if (window.scrollY > 50) {
+      this.setState({ scrolling: true });
+    }
+  }
+
+  render () {
+
+    return (
+      <nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
+       <NavigationItems />
+      </nav>
+    )
+  }
+} 
+
+export default navigation;