JS Doc

src/components/Header/Header.js

@@ -7,6 +7,7 @@ class Header extends Component {
 
   render() {
 
+    /** Background image for the header component */
     const backgroundStyle = {
       backgroundSize: "cover",
       backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`,
@@ -15,17 +16,18 @@ class Header extends Component {
 
     return (
       <header style={backgroundStyle} className="header">
-
           <div className="header__container">
-              <h1 className="header__container-heading">{this.props.movie.name}</h1>
+            <h1 className="header__container-heading">{this.props.movie.name}</h1>
-          <button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
+
-            <PlayLogo className="header__container-btnMyList-play" />
+            <button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
-            Play
+              <PlayLogo className="header__container-btnMyList-play" />
-          </button>
+              Play
-          <button className="header__container-btnMyList">
+            </button>
-            <AddLogo className="header__container-btnMyList-add" />
+
-            My List
+            <button className="header__container-btnMyList">
-          </button>
+              <AddLogo className="header__container-btnMyList-add" />
+              My List
+            </button>
               <p className="header__container-overview">{this.props.movie.overview}</p>
           </div>    
         <div className="header--fadeBottom"></div>

src/components/UI/Modal/Modal.js

@@ -3,11 +3,8 @@ import Aux from '../../../hoc/Aux/Aux';
 import Backdrop from '../Backdrop/Backdrop'
 
 
-
-
 class Modal extends Component {
 
-
    render() {
       const backgroundStyle = {
          backgroundSize: "cover",
@@ -18,7 +15,7 @@ class Modal extends Component {
             <Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
                <div
                   style={backgroundStyle}
-               className={(this.props.show ? "modal show" : "modal hide")}>
+                  className={(this.props.show ? "modal show" : "modal hide")}>
                   {this.props.children} 
                </div>
          </Aux>

src/containers/Layout/Layout.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import axios from "axios"; 
 
 import Navbar from '../Navbar/Navbar'; 
-import MainContent from './MainContent/MainContent'; 
+import MainContent from '../Layout/MainContent/MainContent'; 
 import Movie from '../../components/Movie/Movie'; 
 import Modal from '../../components/UI/Modal/Modal'; 
 import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails';
@@ -10,53 +10,63 @@ import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails';
 class Layout extends Component {
 
   state = {
+    /** Toggles the movie list when the user starts typing. */
     toggleMovieList: true,
-    //an array that will hold all of our movies component 
+    /** An array that will hold all of our movie Components. */
-    rows: [],
+    MovieList: [],
+    /** Toggles the modal when a movie is clicked. */
     toggleModal: false,
-    movieDetails: {},
+    /** Holds the movie information for a single movie. */
+    movieOverview: {},
   }
 
+  /** Make API call as soon as the user starts typing.  */
   makeAipCall = (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 
         const results = res.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 object 
+          /** 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;
-            // pass in the movie object to our MovieRow component and keep it in a variable called 
+
-            // movieComponent 
+            /** Set the movie object to our Movie component */
             const movieComponent = <Movie
-              movieDetails={() => this.selectMovieHandler(movie)}
+            movieDetails={() => this.selectMovieHandler(movie)}
-              key={movie.id}
+            key={movie.id}
-              movieImage={movieImageUrl}
+            movieImage={movieImageUrl}
-              movie={movie} />
+            movie={movie} />
-            // push our movieComponent to our movieRows array; 
+
+            /** Push our movie component to our movieRows array */
             movieRows.push(movieComponent);
           }
-
         })
-        // update state 
+        /** Set our MovieList array to the movieRows array */
-        this.setState({ rows: movieRows });
+        this.setState({ MovieList: movieRows });
       }).catch(error => {
         console.log(error);
       });
   }
 
+  /** Get the user input  */
   onSearchHandler = (event) => {
+    /** Display the movie list. */
     this.setState({
       toggleMovieList: false
     });
+
     const userInput = event.target.value;
+    /** Pass in the user input to make the API call. */
     this.makeAipCall(userInput);
 
-
+    /** If the input is empty don't display the movie list. */
     if (userInput === "") {
       this.setState({
         toggleMovieList: true
@@ -69,10 +79,12 @@ class Layout extends Component {
     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;
       console.log(movie.id);
       url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
+
     } else if (movie.media_type === "tv") {
       const tvId = movie.id
       url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
@@ -80,12 +92,10 @@ class Layout extends Component {
 
     axios.get(url)
       .then(res => {
-        console.log(res);
         const movieData = res.data;
-        // console.log(movieData); 
+        
-        this.setState({ movieDetails: movieData });
+        this.setState({ movieOverview: movieData });
       }).catch(error => {
-
         console.log(error);
       });
 
@@ -100,10 +110,16 @@ class Layout extends Component {
     return (
       <div>
         <Navbar showMovies={this.onSearchHandler} />
-        {this.state.toggleMovieList ? <MainContent /> : <div
+        {
-          className="search-container">{this.state.rows}</div>}
+          this.state.toggleMovieList ? <MainContent /> : <div
-        <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
+          className="search-container">{this.state.MovieList}</div>
-          <MovieDetails movie={this.state.movieDetails} />
+        }
+
+        <Modal show={this.state.toggleModal} 
+               modalClosed={this.closeModal} 
+               movie={this.state.movieOverview}>
+          
+          <MovieDetails movie={this.state.movieOverview} />
         </Modal>
       </div>
 

src/containers/Layout/MainContent/MainContent.js

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import Header from '../../../components/Header/Header';
-import MovieShowcase from '../MovieShowcase/MovieShowcase';
+import MovieGenreRow from '../../MovieGenreRow/MovieGenreRow';
 import Footer from '../../../components/Footer/Footer';
 import { BrowserRouter } from "react-router-dom";
 
 
 class MainContent extends Component {
+
   state = {
+    /** Will hold our chosen movie to display on the header */
     selectedMovie: {}
   };
 
@@ -17,11 +19,9 @@ class MainContent extends Component {
 
 
   getMovie = () => {
-    /**
+    /** Movie Id for the Narcos series  */
-     * @param movieId narcos netflix series id 
-     */
     const movieId = 63351;
-
+    /** Make Api call to retrieve the details for a single movie  */
     const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
     axios
       .get(url)
@@ -39,7 +39,7 @@ class MainContent extends Component {
       <BrowserRouter>
         <div className="container">
           <Header movie={this.state.selectedMovie} />
-          <MovieShowcase />
+          <MovieGenreRow />
           <Footer />
         </div>
       </BrowserRouter>

src/containers/MovieGenreRow/MovieGenreRow.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import axios from 'axios'; 
 import MovieGenre from './MovieGenre'; 
 import Modal from "../../components/UI/Modal/Modal"; 
-import MovieSummary from '../../components/MovieRow/MovieSummary/MovieSummary'; 
+import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; 
 
 class MovieGenreRow extends Component {
 
@@ -258,7 +258,7 @@ class MovieGenreRow extends Component {
           </div>
         
           <Modal show={this.state.toggle} modalClosed={this.closeModal} movie={this.state.movieDetails}>
-            <MovieSummary movie={this.state.movieDetails}/>
+            <MovieDetails movie={this.state.movieDetails}/>
           </Modal>
         </div>
       );

src/static/sass/components/_movie.scss

@@ -13,7 +13,6 @@
        &:hover {
          transform: scale(1.25);
        }
-
    }
 
     &__poster {