search items functionality

src/components/MovieRow/MovieRow.js

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

src/components/MovieRow/MovieSummary/MovieSummary.js

@@ -5,18 +5,13 @@ import MovieRow from '../MovieRow';
 
 const movieSummary = (props) => (
 
- // get movieid and make api call 
-
- // render data dynamically 
-   
-
    <Aux>
-    
-      {/* <img src="" alt=""/> */}
-      <h1>Movie Title: {props.movieInfo.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>
+      <h1 className="modal__title">{props.movie.title}</h1>
+      <p className="modal__info">
+         <span className="modal__rating">Rating: {props.movie.vote_average * 10}%  </span> 
+         Release date: {props.movie.release_date}  Runtime: {props.movie.runtime}m
+      </p>
+      <p className="modal__overview">{props.movie.overview}</p>
        <button>Play</button>  
        <button>My list</button>  
        <p>staring: mdf gglo bool emmy djf </p>

src/containers/App.js

@@ -15,36 +15,34 @@ class App extends Component {
     //an array that will hold all of our movies component 
     rows: [],
     toggleModal: false,
-    movieDetails: {}
+    movieDetails: {},
   }
 
 makeAipCall = (searchItem) => {
-      const url = "https://api.themoviedb.org/3/search/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&page=1&query=" + searchItem;
+  const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`;
       axios.get(url)
          .then(res => {
+            console.log(res.data.results); 
             // extract the data from json object 
-            // console.log(res); 
-            const movies = res.data.results;
-            // console.log(movies); 
-            // Holds our movieComponent. 
+            const results = res.data.results;
+            let movieImageUrl; 
             let movieRows = [];
-            movies.forEach((movie) => {
+            results.forEach((movie) => {
                // manually build our image url and set it on the movie object 
-               if (movie.poster_path !== null) {
-                 movie.posterSrc = "https://image.tmdb.org/t/p/w185" + movie.poster_path;
+               if (movie.poster_path !== null && movie.media_type !== "person") {
+                  movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
                  // pass in the movie object to our MovieRow component and keep it in a variable called 
                  // movieComponent 
-                  const movieComponent = <MovieRow
-                  getMovie={this.getMovieDetailsHandler}
-                  movieDetails={this.selectMovieHandler}
+                 const movieComponent = <MovieRow
+                   movieDetails={() => this.selectMovieHandler(movie.id)}
                    key={movie.id}
-                   movie={movie}/>
+                   movieImage={movieImageUrl}
+                   movie={movie} />
                  // push our movieComponent to our movieRows array; 
                  movieRows.push(movieComponent);
                } 
-            
+              
             })
-
             // update state 
             this.setState({ rows: movieRows });
          }).catch(error => {
@@ -67,28 +65,10 @@ makeAipCall = (searchItem) => {
     } 
   }
 
-  selectMovieHandler = () => {
+  selectMovieHandler = (movieId) => {
     this.setState({toggleModal: true}); 
- 
-  
-    // const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US`;
-    // axios.get(url)
-    //   .then(res => {
-
-    //     console.log(res.data)
-    //   }).catch(error => {
-    //     console.log(error);
-    //   }); 
-  }
-
-  closeModal = () => {
-    this.setState({ toggleModal: false }); 
-  }
-
-  // get movie details 
-  // return object 
-  getMovieDetailsHandler = (movieId) => {
-    const url = `https://api.themoviedb.org/3/movie/${503314}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US`;
+    console.log(movieId); 
+    const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&append_to_response=tv,videos`;
     axios.get(url)
       .then(res => {
 
@@ -99,17 +79,12 @@ makeAipCall = (searchItem) => {
 
         console.log(error); 
       }); 
+  
   }
 
-
-
-
-
-
-
-
-
-
+  closeModal = () => {
+    this.setState({ toggleModal: false }); 
+  }
 
    render() {
 
@@ -119,10 +94,10 @@ makeAipCall = (searchItem) => {
           {this.state.toggleMovieList ? <Layout /> : <div //onClick={this.onChangeHandler} 
                                             className="search-container">{this.state.rows}</div>}
           <Modal show={this.state.toggleModal} modalClosed={this.closeModal}>
-            <MovieSummary movieInfo={this.state.movieDetails}/>
+            <MovieSummary movie={this.state.movieDetails}/>
           </Modal>  
          </div>
-         
+
       );
    }
 }
@@ -131,14 +106,11 @@ 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
-
+// --url 'https://api.themoviedb.org/3/find/ur95210597?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&external_source=imdb_id' \
+//   --data '{}'

src/static/sass/abstracts/_variables.scss

@@ -1,8 +1,11 @@
 $color-dark: #171818;
 $color-background: #141414;
+$color-background-modal: #000000;
 $color-white: rgb(221, 218, 218);
 
 $color-green: #1cb831; 
+$color-green-modal: rgb(92, 223, 92); 
+$color-modal-grey: rgb(172, 171, 171);
 
 $color-red: #e21221;
 

src/static/sass/components/_modal.scss

@@ -1,13 +1,36 @@
 .modal {
+   padding-left: 4rem;
+   padding-top: 2rem;
    position: fixed;
    z-index: 500; 
    width: 100%;
    top: 30%; 
    left: 0; 
-   height: 42rem;
-   background: yellowgreen;
+   color: white;
+   height: 44rem;
+   background: $color-background-modal;
    transition: all 1s; 
    transform: scale(0);
+
+   &__title {
+      font-size: 4rem;
+   }
+
+   &__rating {
+      font-size: 2rem;
+      color: $color-green-modal;
+   }
+
+   &__info {
+      padding-top: 1.6rem;
+      font-size: 2rem;
+   }
+
+   &__overview {
+      color: $color-modal-grey;
+      padding-top: 2rem;
+      font-size: 2rem;
+   }
 }
 
 .show {