removed Hoc component

src/components/Movie/MovieDetails.js

@@ -1,24 +1,23 @@
-import React from 'react';
+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 AddIcon from '../../static/images/add.svg'
+import PlayIcon from '../../static/images/play-button.svg'
 
 export default function MovieDetails(props) {
   return (
-    <Aux>
-      <div className="modal__container">
-        <h1 className="modal__title">
+    <div>
+      <div className='modal__container'>
+        <h1 className='modal__title'>
           {props.movie.title || props.movie.name}
         </h1>
-        <p className="modal__info">
-          <span className="modal__rating">
+        <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">
+        <p className='modal__episode'>
           {props.movie.number_of_episodes
             ? ' Episodes: ' + props.movie.number_of_episodes
             : ''}
@@ -26,16 +25,16 @@ export default function MovieDetails(props) {
             ? ' 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" />
+        <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" />
+        <button className='modal__btn'>
+          <AddIcon className='modal__btn--icon' />
           My List
         </button>
       </div>
-    </Aux>
-  );
+    </div>
+  )
 }

src/components/UI/Modal.js

@@ -1,25 +1,31 @@
-import React from 'react';
+import React from 'react'
 
-import Aux from '../../hoc/Aux';
-import Backdrop from './Backdrop';
+import Backdrop from './Backdrop'
 
-export default function Modal(props) {
+const Modal = ({
+  show,
+  modalClosed,
+  children,
+  movie: { backdrop_path, poster_path },
+}) => {
   const backgroundStyle = {
     backgroundSize: 'cover',
     backgroundImage: `url(https://image.tmdb.org/t/p/original/${
-      props.movie.backdrop_path || props.movie.poster_path
+      backdrop_path || poster_path
     })`,
-  };
+  }
 
   return (
-    <Aux>
-      <Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
+    <div>
+      <Backdrop show={show} toggleBackdrop={modalClosed} />
       <div
         style={backgroundStyle}
-        className={props.show ? 'modal show' : 'modal hide'}
+        className={show ? 'modal show' : 'modal hide'}
       >
-        {props.children}
+        {children}
       </div>
-    </Aux>
-  );
+    </div>
+  )
 }
+
+export default Modal

src/hoc/Aux.js

@@ -1,3 +0,0 @@
-const aux = (props) => props.children;
-
-export default aux;

src/pages/Home.js

@@ -1,43 +1,39 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react'
 
-import MainContent from '../components/MainContent';
-import Modal from '../components/UI/Modal';
-import MovieDetails from '../components/Movie/MovieDetails';
+import MainContent from '../components/MainContent'
+import Modal from '../components/UI/Modal'
+import MovieDetails from '../components/Movie/MovieDetails'
+
+const Home = () => {
+  const [toggleModal, setToggleModal] = useState(false)
+  const [movieOverview, setMovieOverview] = useState({})
 
-class Home extends Component {
-  state = {
-    /** Toggles the modal when a movie is clicked. */
-    toggleModal: false,
-    /** Holds the movie information for a single movie. */
-    movieOverview: {},
-  };
 
   /* Get the appropriate details for a specific movie that was clicked */
-  selectMovieHandler = async (movie) => {
-    this.setState({ toggleModal: true });
-    await this.setState({ movieOverview: movie });
-  };
-
-  closeModal = () => {
-    this.setState({ toggleModal: false });
-  };
-
-  render() {
-    return (
-      <>
-        <div className="main-content">
-          <MainContent selectMovieHandler={this.selectMovieHandler} />
-        </div>
-        <Modal
-          show={this.state.toggleModal}
-          modalClosed={this.closeModal}
-          movie={this.state.movieOverview}
-        >
-          <MovieDetails movie={this.state.movieOverview} />
-        </Modal>
-      </>
-    );
+  const selectMovieHandler = async (movie) => {
+    console.log('movei is', movie)
+    setToggleModal(true)
+    setMovieOverview(movie)
   }
+
+  const closeModal = () => {
+    setToggleModal(false)
+  }
+
+  return (
+    <>
+      <div className='main-content'>
+        <MainContent selectMovieHandler={selectMovieHandler} />
+      </div>
+      <Modal
+        show={toggleModal}
+        modalClosed={closeModal}
+        movie={movieOverview}
+      >
+        <MovieDetails movie={movieOverview} />
+      </Modal>
+    </>
+  )
 }
 
-export default Home;
+export default Home