removed Hoc component

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