implemented the modal

src/components/Header/Header.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const header = () => (
    <header className="header">
-    */}
+    
    </header>
 ); 
 

src/components/MovieRow/MovieRow.js

@@ -1,11 +1,14 @@
 import React from 'react';
  
+
+
 const movieRow = (props) => (
 
    <div className="movie">
          <div className="movie__column-poster">
             <img src={props.movie.posterSrc} alt="" className="movie__poster" />
          </div>
+         <button onClick={props.movieDetails}>hellooo</button>
    </div> 
 );
 

src/components/MovieRow/MovieSummary/MovieSummary.js

@@ -0,0 +1,26 @@
+import React from 'react'; 
+import Aux from '../../../hoc/Aux/Aux'; 
+
+const movieSummary = (props) => (
+
+   // // map object into an array of jsx elemenst 
+   // const movieDetails = Object.keys(props.movies)
+   //    .map(movieKey => {
+   //       return <p>{movieKey}: {props.movies[movieKey]}</p>
+   //    }); 
+   
+
+   <Aux>
+      {/* <img src="" alt=""/> */}
+      <h1>Movie Title</h1>
+      <p>rating: 45% realease-date: 2018 runtime: 100m </p>
+      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, delectus! Veniam error perferendis pariatur atque facere? Repudiandae, quia mollitia sapiente 
+         necessitatibus vitae error assumenda maiores perferendis quaerat excepturi voluptatum quidem?</p>
+       <button>Play</button>  
+       <button>My list</button>  
+       <p>staring: mdf gglo bool emmy djf </p>
+       <p>Genres: mdf gglo bool emmy djf </p>
+   </Aux>
+); 
+
+export default movieSummary; 

src/components/UI/Backdrop/Backdrop.js

@@ -0,0 +1,11 @@
+import React from 'react'; 
+
+
+
+const backdrop = (props) => (
+   props.show ? <div 
+                  onClick={props.toggleBackdrop}
+                  className="backdrop"></div> : null 
+); 
+
+export default backdrop; 

src/components/UI/Modal/Modal.js

@@ -0,0 +1,15 @@
+import React from 'react'; 
+import Aux from '../../../hoc/Aux/Aux'; 
+import Backdrop from '../Backdrop/Backdrop'
+
+const modal = (props) => (
+   <Aux>
+      <Backdrop show={props.show} toggleBackdrop={props.modalClosed}/>
+      <div 
+         className={"modal " + (props.show ? "show" : "hide")}>
+         {props.children}
+      </div>
+   </Aux>
+); 
+
+export default modal; 

src/containers/App.js

@@ -3,15 +3,18 @@ import Navigation from "./Navigation/Navigation"
 import Layout from './Layout/Layout'; 
 import axios from 'axios'; 
 import MovieRow from '../components/MovieRow/MovieRow'
+import Modal from '../components/UI/Modal/Modal'; 
+import MovieSummary from '../components/MovieRow/MovieSummary/MovieSummary'; 
 
 
 
 class App extends Component {
 
   state = {
-    myVal: true,
+    toggleMovieList: true,
     //an array that will hold all of our movies component 
-    rows: []
+    rows: [],
+    toggleModal: false
   }
 
 makeAipCall = (searchItem) => {
@@ -32,6 +35,7 @@ makeAipCall = (searchItem) => {
                  // pass in the movie object to our MovieRow component and keep it in a variable called 
                  // movieComponent 
                   const movieComponent = <MovieRow
+                  movieDetails={this.selectMovieHandler}
                    val={total}
                    key={movie.id}
                    movie={movie}/>
@@ -49,7 +53,7 @@ makeAipCall = (searchItem) => {
 
   onSearchHandler = (event) => {
     this.setState({
-      myVal: false
+      toggleMovieList: false
     }); 
     const userInput = event.target.value; 
     this.makeAipCall(userInput); 
@@ -57,30 +61,30 @@ makeAipCall = (searchItem) => {
 
     if (userInput === "") {
       this.setState({
-        myVal: true
+        toggleMovieList: true
       }); 
     } 
   }
 
-  onChangeHandler = () => {
-    // this.setState({
-    //   myVal: true
-    // })
+  selectMovieHandler = () => {
+    this.setState({toggleModal: true}); 
     
-    alert("hello")
   }
 
-
-
+  closeModal = () => {
+    this.setState({ toggleModal: false }); 
+  }
 
    render() {
 
       return (
          <div>  
           <Navigation showMovies={this.onSearchHandler} />
-          {this.state.myVal ? <Layout /> : <div onClick={this.onChangeHandler} 
+          {this.state.toggleMovieList ? <Layout /> : <div //onClick={this.onChangeHandler} 
                                             className="search-container">{this.state.rows}</div>}
-
+          <Modal show={this.state.toggleModal} modalClosed={this.closeModal}>
+            <MovieSummary />
+          </Modal>  
          </div>
          
       );
@@ -88,3 +92,17 @@ makeAipCall = (searchItem) => {
 }
 
 export default App; 
+
+
+
+// get primary information about movie  
+//const url =
+//   "https://api.themoviedb.org/3/search/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&page=1&query=" +
+//   searchItem;
+
+// curl --request GET \
+// --url 'https://api.themoviedb.org/3/movie/503314?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US' \
+// --data '{}'
+
+// https://api.themoviedb.org/3/movie/{movie_id}?api_key=<<api_key>>&language=en-US
+

src/hoc/Aux/Aux.js

@@ -0,0 +1,3 @@
+const aux = (props) => props.children;
+
+export default aux;

src/static/sass/components/_backdrop.scss

@@ -0,0 +1,9 @@
+.backdrop {
+   width: 100%; 
+   height: 100%;
+   position: fixed; 
+   z-index: 100; 
+   left: 0; 
+   top: 0; 
+   background-color: rgba($color-background, .5); 
+}

src/static/sass/components/_modal.scss

@@ -0,0 +1,25 @@
+.modal {
+   position: fixed;
+   z-index: 500; 
+   width: 100%;
+   top: 30%; 
+   left: 0; 
+   height: 42rem;
+   background: yellowgreen;
+   transition: all 1s; 
+   transform: scale(0);
+}
+
+.show {
+   // transform: 50%
+   transition: transform 1s;
+   transform: scale(1); 
+   opacity: 1;
+}
+
+.hide {
+
+   transform: translateY(-100vh); 
+   display: none;
+}
+

src/static/sass/style.scss

@@ -7,6 +7,8 @@
 @import "base/typography";
 @import "base/utils";
 
+@import "components/backdrop"; 
+@import "components/modal";
 @import "components/search";
 @import "components/movie";
 @import "components/movieOriginals";