updated branch

src/containers/Home.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+
+import MainContent from './MainContent'
+import Modal from '../components/UI/Modal'
+import MovieDetails from '../components/Movie/MovieDetails'
+
+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>
+      </>
+    )
+  }
+}
+
+export default Home

src/index.js

@@ -5,6 +5,7 @@ import { createStore, applyMiddleware } from 'redux'
 import ReduxThunk from 'redux-thunk'
 import '@babel/polyfill'
 
+<<<<<<< HEAD
 import reducers from './store/reducers'
 import AppRouter from './AppRouter'
 
@@ -14,6 +15,11 @@ import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 // Import main sass file to apply global styles
 import './static/sass/style.scss'
+=======
+import App from './containers/App';
+import 'swiper/swiper-bundle.min.css';
+import './static/sass/style.scss';
+>>>>>>> 4ee9fd3d7103a246e24a324f01ff488928ad864c
 
 const store = createStore(reducers, applyMiddleware(ReduxThunk))