refactored Search component

src/components/ModalMovieDetails.js

@@ -1,37 +1,45 @@
-import React from 'react';
-import Aux from '../hoc/Aux';
-import AddIcon from '../static/images/add.svg';
-import PlayIcon from '../static/images/play-button.svg';
-
 import React from 'react'
 
-export default function ModalMovieDetails(props) {
+import AddIcon from '../static/images/add.svg'
+import PlayIcon from '../static/images/play-button.svg'
+
+const MovieDetails = ({
+  movie: {
+    title,
+    name,
+    vote_average,
+    release_date,
+    first_air_date,
+    runtime,
+    episode_run_time,
+    number_of_episodes,
+    number_of_seasons,
+    overview,
+  },
+}) => {
   return (
-    <Aux>
-      <div className="modal__container">
-        <h1 className="modal__title">
-          {props.movie.title || props.movie.name}
-        </h1>
-        <p className="modal__info">
-          <span className="modal__rating">
-            Rating: {props.movie.vote_average * 10}%{" "}
-          </span>
-          Release date: {props.movie.release_date || props.movie.first_air_date}  Runtime: {props.movie.runtime || props.movie.episode_run_time}m
-        </p>
-        <p className="modal__episode">
-          {props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
-          {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
-        </p>
-        <p className="modal__overview">{props.movie.overview}</p>
-        <button className="modal__btn modal__btn--red">
-          <PlayIcon className="modal__btn--icon" />
-          Play
-        </button>
-        <button className="modal__btn">
-          <AddIcon className="modal__btn--icon" />
-          My List
-        </button>
-      </div>
-    </Aux>
-  );
-}
+    <div className='modal__container'>
+      <h1 className='modal__title'>{title || name}</h1>
+      <p className='modal__info'>
+        <span className='modal__rating'>Rating: {vote_average * 10}% </span>
+        Release date: {release_date || first_air_date} Runtime:{' '}
+        {runtime || episode_run_time}m
+      </p>
+      <p className='modal__episode'>
+        {number_of_episodes ? ' Episodes: ' + number_of_episodes : ''}
+        {number_of_seasons ? ' Seasons: ' + number_of_seasons : ''}
+      </p>
+      <p className='modal__overview'>{overview}</p>
+      <button className='modal__btn modal__btn--red'>
+        <PlayIcon className='modal__btn--icon' />
+        Play
+      </button>
+      <button className='modal__btn'>
+        <AddIcon className='modal__btn--icon' />
+        My List
+      </button>
+    </div>
+  )
+}
+
+export default MovieDetails

src/components/Movie/MovieDetails.js

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import AddIcon from '../../static/images/add.svg'
-import PlayIcon from '../../static/images/play-button.svg'
-
-export default function MovieDetails({
-  movie: {
-    title,
-    name,
-    vote_average,
-    release_date,
-    first_air_date,
-    runtime,
-    episode_run_time,
-    number_of_episodes,
-    number_of_seasons,
-    overview,
-  },
-}) {
-  return (
-    <div>
-      <div className='modal__container'>
-        <h1 className='modal__title'>{title || name}</h1>
-        <p className='modal__info'>
-          <span className='modal__rating'>Rating: {vote_average * 10}% </span>
-          Release date: {release_date || first_air_date} Runtime:{' '}
-          {runtime || episode_run_time}m
-        </p>
-        <p className='modal__episode'>
-          {number_of_episodes ? ' Episodes: ' + number_of_episodes : ''}
-          {number_of_seasons ? ' Seasons: ' + number_of_seasons : ''}
-        </p>
-        <p className='modal__overview'>{overview}</p>
-        <button className='modal__btn modal__btn--red'>
-          <PlayIcon className='modal__btn--icon' />
-          Play
-        </button>
-        <button className='modal__btn'>
-          <AddIcon className='modal__btn--icon' />
-          My List
-        </button>
-      </div>
-    </div>
-  )
-}

src/components/UI/Modal.js

@@ -2,17 +2,10 @@ import React from 'react'
 
 import Backdrop from './Backdrop'
 
-const Modal = ({
-  show,
-  modalClosed,
-  children,
-  movie: { backdrop_path, poster_path },
-}) => {
+const Modal = ({ show, modalClosed, children, backgroundImage }) => {
   const backgroundStyle = {
     backgroundSize: 'cover',
-    backgroundImage: `url(https://image.tmdb.org/t/p/original/${
-      backdrop_path || poster_path
-    })`,
+    backgroundImage: `url(https://image.tmdb.org/t/p/original/${backgroundImage})`,
   }
 
   return (

src/pages/Home.js

@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 
 import MainContent from '../components/MainContent'
 import Modal from '../components/UI/Modal'
-import MovieDetails from '../components/Movie/MovieDetails'
+import ModalMovieDetails from '../components/ModalMovieDetails'
 
 const Home = () => {
   const [toggleModal, setToggleModal] = useState(false)
-  const [movieOverview, setMovieOverview] = useState({})
+  const [movieDetails, setMovieDetails] = useState({})
 
   const selectMovieHandler = async (movie) => {
     setToggleModal(true)
-    setMovieOverview(movie)
+    setMovieDetails(movie)
   }
 
   const closeModal = () => {
@@ -25,9 +25,9 @@ const Home = () => {
       <Modal
         show={toggleModal}
         modalClosed={closeModal}
-        movie={movieOverview}
+        backgroundImage={movieDetails.backdrop_path || movieDetails.poster_path}
       >
-        <MovieDetails movie={movieOverview} />
+        <ModalMovieDetails movie={movieDetails} />
       </Modal>
     </>
   )

src/pages/Search.js

@@ -5,8 +5,8 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useDebounce } from '../hooks/useDebounce'
 import * as movieActions from '../store/actions'
 import Modal from '../components/UI/Modal'
-import MovieDetails from '../components/Movie/MovieDetails'
-import Movie from '../components/Movie/Movie'
+import ModalMovieDetails from '../components/ModalMovieDetails'
+import Movie from '../components/Movie'
 
 // A custom hook that builds on useLocation to parse
 // the query string for you.
@@ -42,12 +42,10 @@ const Search = () => {
       <>
         <div className='search-container'>
           {searchResults.map((movie) => {
-            let movieRows = []
-            let movieImageUrl
             if (movie.poster_path !== null && movie.media_type !== 'person') {
-              movieImageUrl =
+              const movieImageUrl =
                 'https://image.tmdb.org/t/p/w500' + movie.poster_path
-              const movieComponent = (
+              return (
                 <Movie
                   movieDetails={() => onSelectMovieHandler(movie)}
                   key={movie.id}
@@ -55,18 +53,17 @@ const Search = () => {
                   movie={movie}
                 />
               )
-              movieRows.push(movieComponent)
             }
-            return movieRows
           })}
         </div>
         <Modal
-          Modal
           show={isToggleModal}
           modalClosed={onCloseModalHandler}
-          movie={movieDetails}
+          backgroundImage={
+            movieDetails.backdrop_path || movieDetails.poster_path
+          }
         >
-          <MovieDetails movie={movieDetails} />
+          <ModalMovieDetails movie={movieDetails} />
         </Modal>
       </>
     ) : (