fixed onMovie click function

src/containers/Search.js

@@ -1,10 +1,18 @@
 import React, { Component } from 'react';
 
+import Modal from '../components/UI/Modal';
+import MovieDetails from '../components/Movie/MovieDetails';
+import Movie from '../components/Movie/Movie';
+import axios from '../axios-movies';
+
 export default class Search extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      movies: []
+      movies: [],
+      toggleModal: false,
+      /** Holds the movie information for a single movie. */
+      movieOverview: {},
     }
   }
 
@@ -23,6 +31,34 @@ export default class Search extends Component {
     }
   }
 
+  closeModal = () => {
+    this.setState({ toggleModal: false });
+  }
+
+  /* Get the appropriate details for a specific movie that was clicked */
+  selectMovieHandler = (movie) => {
+    this.setState({ toggleModal: true });
+
+    let url;
+    /** Make the appropriate API call to get the details for a single movie or tv show. */
+    if (movie.media_type === "movie") {
+      const movieId = movie.id;
+      url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`;
+
+    } else if (movie.media_type === "tv") {
+      const tvId = movie.id
+      url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`;
+    }
+
+    axios.get(url)
+      .then(res => {
+        const movieData = res.data;
+        this.setState({ movieOverview: movieData });
+      }).catch(error => {
+        console.log(error);
+      });
+  }
+
   render() {
     const { movies } = this.state
     const { userInput } = this.props.location
@@ -30,9 +66,28 @@ export default class Search extends Component {
     return (
       <>
         {
-          this.state.movies.length > 0 ? (
+          movies.length > 0 ? (
             <div className="search-container">
-              {this.state.movies}
+              {
+                movies.map((movie) => {
+                  let movieRows = []
+                  let movieImageUrl;
+                  if (movie.poster_path !== null && movie.media_type !== "person") {
+                    movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
+
+                    /** Set the movie object to our Movie component */
+                    const movieComponent = <Movie
+                      movieDetails={() => this.selectMovieHandler(movie)}
+                      key={movie.id}
+                      movieImage={movieImageUrl}
+                      movie={movie} />
+
+                    /** Push our movie component to our movieRows array */
+                    movieRows.push(movieComponent);
+                  }
+                  return movieRows
+                })
+              }
             </div>
           ) : (
               <div className="no-results">
@@ -49,6 +104,11 @@ export default class Search extends Component {
               </div>
             )
         }
+        <Modal Modal show={this.state.toggleModal}
+          modalClosed={this.closeModal}
+          movie={this.state.movieOverview} >
+          <MovieDetails movie={this.state.movieOverview} />
+        </Modal>
       </>
     );
   }