fixed onMovie click function

src/containers/Home.js

@@ -9,10 +9,6 @@ import MovieDetails from '../components/Movie/MovieDetails';
 
 class Home extends Component {
   state = {
-    /** Toggles the movie list when the user starts typing. */
-    toggleMovieList: true,
-    /** An array that will hold all of our movie Components. */
-    // MovieList: [],
     /** Toggles the modal when a movie is clicked. */
     toggleModal: false,
     /** Holds the movie information for a single movie. */
@@ -21,29 +17,28 @@ class Home extends Component {
 
 
   /* Get the appropriate details for a specific movie that was clicked */
-  selectMovieHandler = (movie) => {
-    this.setState({ toggleModal: true });
+  // 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}`;
+  //   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}`;
-    }
+  //   } 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);
-      });
-
-  }
+  //   axios.get(url)
+  //     .then(res => {
+  //       const movieData = res.data;
+  //       this.setState({ movieOverview: movieData });
+  //     }).catch(error => {
+  //       console.log(error);
+  //     });
+  // }
 
   closeModal = () => {
     this.setState({ toggleModal: false });

src/containers/Navbar.js

@@ -16,7 +16,6 @@ class Navbar extends Component {
     super(props)
     this.state = {
       scrolling: false,
-      movieList: [],
       userInput: ''
     }
     // use to debounce api call
@@ -54,42 +53,18 @@ class Navbar extends Component {
       this.props.history.push('/')
       return
     }
-
     const url = `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchItem}`;
     const response = await axios.get(url);
     const results = response.data.results;
-    let movieImageUrl;
-    /** Will hold all our movies Components */
-    let movieRows = [];
-
-    /** Loop through all the movies */
-    results.forEach((movie) => {
-      /** Manually build our image url and set it on the Movie component. */
-      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);
-      }
-    })
-    /** Set our MovieList array to the movieRows array */
-    await this.setState({ movieList: movieRows });
     this.props.history.push({
       pathname: '/search',
-      movieRows: this.state.movieList,
+      movieRows: results,
       userInput: searchItem
     });
   }
 
   onLogoClick = () => {
-    // reset state
+    // reset input state
     this.setState({ userInput: '' })
   }
 

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>
       </>
     );
   }

src/index.js

@@ -16,6 +16,7 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 // - fix styling issue
 // - implement carousel
 // - fix modal backdrop bug
+// - fix search movie onClickFunction
 const app = (
   <Provider store={createStoreWithMiddleware(reducers)}>
     <App />