implemented the 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,34 +61,48 @@ makeAipCall = (searchItem) => {
 
     if (userInput === "") {
       this.setState({
-        myVal: true
+        toggleMovieList: true
       }); 
     } 
   }
 
-  onChangeHandler = () => {
-    // this.setState({
-    //   myVal: true
-    // })
-
-    alert("hello")
+  selectMovieHandler = () => {
+    this.setState({toggleModal: true}); 
+    
   }
 
-
-
+  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>
          
       );
    }
 }
 
-export default App; 
+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
+