updated folder structure

.eslintignore

@@ -1,3 +0,0 @@
-client/dist/
-node_modules/
-webpack.config.js

.eslintrc.json

@@ -1,25 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es6": true,
-        "node": true
-    },
-    "plugins": [
-        "react",
-        "react-hooks"
-    ],
-    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2018
-    },
-    "settings": {
-        "react": {
-            "version": "detect"
-        }
-    },
-    "rules": {
-        "linebreak-style": ["error", "unix"]
-    }
-}

.prettierrc

@@ -1,3 +1,5 @@
 {
+  "jsxSingleQuote": true,
+  "semi": false,
   "singleQuote": true
-}
+}

src/AppRouter.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
+
+import Home from './pages/Home'
+import NotFound from './pages/NotFound'
+import Search from './pages/Search'
+import Navbar from './components/Navbar'
+
+const AppRouter = () => (
+  <BrowserRouter>
+    <Navbar />
+    <Switch>
+      <Route path='/' exact component={Home} />
+      <Route path='/search' component={Search} />
+      <Route component={NotFound} />
+    </Switch>
+  </BrowserRouter>
+)
+
+export default AppRouter

src/components/MainContent.js

@@ -3,8 +3,8 @@ import axios from 'axios';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import Header from '../components/Header';
+import Header from './Header';
-import Footer from '../components/Footer';
+import Footer from './Footer';
 import {
   fetchNetflixOriginals,
   fetchTrending,
@@ -12,13 +12,11 @@ import {
   fetchActionMovies,
   fetchComedyMovies,
   fetchDocumentaries,
-  fetchHorrorMovies
+  fetchHorrorMovies,
 } from '../store/actions/index';
 import DisplayMovieRow from './DisplayMovieRow';
 
-
 class MainContent extends Component {
-
   state = {
     /** Will hold our chosen movie to display on the header */
     selectedMovie: {},
@@ -73,29 +71,29 @@ class MainContent extends Component {
 
     const newMoviesArray = this.state.movieInfo.map((movie) => {
       if (movie.title === 'Netflix Originals') {
-        movie.movies.push(...this.props.netflixOriginals.data)
+        movie.movies.push(...this.props.netflixOriginals.data);
       }
       if (movie.title === 'Trending Now') {
-        movie.movies.push(...this.props.trending.data)
+        movie.movies.push(...this.props.trending.data);
       }
       if (movie.title === 'Top Rated') {
-        movie.movies.push(...this.props.topRated.data)
+        movie.movies.push(...this.props.topRated.data);
       }
       if (movie.title === 'Action Movies') {
-        movie.movies.push(...this.props.actionMovies.data)
+        movie.movies.push(...this.props.actionMovies.data);
       }
       if (movie.title === 'Comedy Movies') {
-        movie.movies.push(...this.props.comedyMovies.data)
+        movie.movies.push(...this.props.comedyMovies.data);
       }
       if (movie.title === 'Documentaries') {
-        movie.movies.push(...this.props.documentaries.data)
+        movie.movies.push(...this.props.documentaries.data);
       }
       if (movie.title === 'Horror Movies') {
-        movie.movies.push(...this.props.horrorMovies.data)
+        movie.movies.push(...this.props.horrorMovies.data);
       }
-      return movie
+      return movie;
-    })
+    });
-    await this.setState({ movieInfo: newMoviesArray })
+    await this.setState({ movieInfo: newMoviesArray });
   };
 
   getMovie = () => {
@@ -105,11 +103,11 @@ class MainContent extends Component {
     const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=${process.env.API_KEY}`;
     axios
       .get(url)
-      .then(res => {
+      .then((res) => {
         const movieData = res.data;
         this.setState({ selectedMovie: movieData });
       })
-      .catch(error => {
+      .catch((error) => {
         console.log(error);
       });
   };
@@ -119,20 +117,19 @@ class MainContent extends Component {
       <div className="container">
         <Header movie={this.state.selectedMovie} />
         <div className="movieShowcase">
-          {
+          {this.state.movieInfo.map((info) => {
-            this.state.movieInfo.map((info) => {
+            if (info.movies.length > 0) {
-              if (info.movies.length > 0) {
+              return (
-                return (
+                <DisplayMovieRow
-                  <DisplayMovieRow
+                  selectMovieHandler={this.props.selectMovieHandler}
-                    selectMovieHandler={this.props.selectMovieHandler}
+                  key={info.title}
-                    key={info.title}
+                  title={info.title}
-                    title={info.title}
+                  url={info.url}
-                    url={info.url}
+                  movies={info.movies}
-                    movies={info.movies}
+                />
-                  />)
+              );
-              }
+            }
-            })
+          })}
-          }
         </div>
         <Footer />
       </div>
@@ -148,23 +145,23 @@ const mapStateToProps = (state) => {
     actionMovies: state.action,
     comedyMovies: state.comedy,
     documentaries: state.documentary,
-    horrorMovies: state.horror
+    horrorMovies: state.horror,
   };
 };
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({
+  return bindActionCreators(
-    fetchNetflixOriginals,
+    {
-    fetchTrending,
+      fetchNetflixOriginals,
-    fetchTopRated,
+      fetchTrending,
-    fetchActionMovies,
+      fetchTopRated,
-    fetchComedyMovies,
+      fetchActionMovies,
-    fetchDocumentaries,
+      fetchComedyMovies,
-    fetchHorrorMovies
+      fetchDocumentaries,
-  }, dispatch);
+      fetchHorrorMovies,
-}
+    },
+    dispatch
+  );
+};
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(MainContent);
-  mapStateToProps,
-  mapDispatchToProps
-)(MainContent); 

src/containers/App.js

@@ -1,5 +0,0 @@
-import React from 'react';
-import AppRouter from './AppRouter';
-
-const App = () => <AppRouter />;
-export default App;

src/containers/AppRouter.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
-
-import Home from './Home';
-import NotFound from './NotFound';
-import Search from './Search';
-import Navbar from './Navbar';
-
-const AppRouter = () => (
-  <BrowserRouter>
-    <>
-      <Navbar />
-      <Switch>
-        <Route path="/" exact component={Home} />
-        <Route path="/search" component={Search} />
-        <Route component={NotFound} />
-      </Switch>
-    </>
-  </BrowserRouter>
-);
-
-export default AppRouter;

src/index.js

@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
-import reducers from './store/reducers';
 import promise from 'redux-promise';
 import '@babel/polyfill';
 
-import App from './containers/App';
+import reducers from './store/reducers';
+import AppRouter from './AppRouter';
+
 // Import Swiper styles
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -18,7 +19,7 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
 const app = (
   <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
+    <AppRouter />
   </Provider>
 );
 

src/pages/Home.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import MainContent from './MainContent';
+import MainContent from '../components/MainContent';
 import Modal from '../components/UI/Modal';
 import MovieDetails from '../components/Movie/MovieDetails';
 
@@ -10,18 +10,17 @@ class Home extends Component {
     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 (
@@ -29,9 +28,11 @@ class Home extends Component {
         <div className="main-content">
           <MainContent selectMovieHandler={this.selectMovieHandler} />
         </div>
-        <Modal show={this.state.toggleModal}
+        <Modal
+          show={this.state.toggleModal}
           modalClosed={this.closeModal}
-          movie={this.state.movieOverview}>
+          movie={this.state.movieOverview}
+        >
           <MovieDetails movie={this.state.movieOverview} />
         </Modal>
       </>
@@ -39,4 +40,4 @@ class Home extends Component {
   }
 }
 
-export default Home;
+export default Home;

src/static/sass/components/_movieShowcase.scss

@@ -3,10 +3,6 @@
   top: 0 !important;
   height: 2rem !important;
   text-align: right !important;
-  //   padding-right: 24rem !important;
-  //   margin-right: 12rem !important;
-  //   right: 3rem;
-  //   position: relative;
 }
 
 .swiper-pagination-bullet {