set env variables config in webpack file

.eslintignore

@@ -0,0 +1,2 @@
+client/dist/
+node_modules/

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "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"]
+    }
+}

.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+.next
+node_modules/

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

package.json

@@ -4,12 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --open --mode development",
-    "build": "webpack -p"
+    "dev": "webpack-dev-server --mode development --config webpack.config.js --open",
+    "build": "webpack -p",
+    "lint": "eslint --fix . && echo 'Lint complete.'"
   },
   "engines": {
     "node": "10.1.0",
-    "npm": "6.4.1"
+    "npm": "6.4.1",
+    "watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src"
   },
   "author": "Andres Alcocer",
   "license": "ISC",
@@ -38,6 +40,14 @@
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.1",
     "dotenv": "^6.2.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^2.0.0",
     "html-loader": "^0.5.5",
@@ -46,11 +56,14 @@
     "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "^4.10.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "prettier": "^2.0.5",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "svg-inline-loader": "^0.8.0",
     "svg-react-loader": "^0.4.6",
+    "tap-nirvana": "^1.1.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
+    "watch": "^1.0.2",
     "webpack": "^4.25.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10"

src/axios-movies.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 /** base url to make requests to the the movie database */
 const instance = axios.create({
-  baseURL: "https://api.themoviedb.org/3"
+  baseURL: 'https://api.themoviedb.org/3',
 });
 
 export default instance;

src/components/DropdownContent.js

@@ -1,8 +1,6 @@
 import React from 'react';
 
-
 const dropdownContent = () => (
-
   <div className="dropdownContainer">
     <div className="navigation__container--userLogo">
       <div className="dropdownContent">
@@ -19,7 +17,6 @@ const dropdownContent = () => (
           <p className="dropdownContent--user-text">Luis</p>
         </div>
         <p className="dropdownContent-text">Manage Profiles</p>
-
       </div>
       <div className="dropdownContent dropdownContent--2">
         <p className="dropdownContent-textOutside">Account</p>
@@ -31,4 +28,3 @@ const dropdownContent = () => (
 );
 
 export default dropdownContent;
-

src/components/Footer.js

@@ -1,10 +1,14 @@
 import React from 'react';
 
 const footer = () => (
-  
   <footer className="footer">
     <div className="footer__copyright">
-      &copy; 2018 Made with ❤️ by <a className="footer__copyright--link" href="http://andresio.com"> Andres Alcocer</a></div>
+      &copy; 2018 Made with ❤️ by{' '}
+      <a className="footer__copyright--link" href="http://andresio.com">
+        {' '}
+        Andres Alcocer
+      </a>
+    </div>
   </footer>
 );
 

src/components/Header.js

@@ -3,19 +3,21 @@ import React from 'react';
 import PlayLogo from '../static/images/play-button.svg';
 import AddLogo from '../static/images/add.svg';
 
-
 export default function Header(props) {
   const backgroundStyle = {
-    backgroundSize: "cover",
+    backgroundSize: 'cover',
     backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`,
-    backgroundPosition: "center",
-  }
+    backgroundPosition: 'center',
+  };
 
   return (
     <header style={backgroundStyle} className="header">
       <div className="header__container">
         <h1 className="header__container-heading">{props.movie.name}</h1>
-        <button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
+        <button
+          onClick={() => alert('not a movie!')}
+          className="header__container-btnPlay"
+        >
           <PlayLogo className="header__container-btnMyList-play" />
           Play
         </button>
@@ -28,5 +30,5 @@ export default function Header(props) {
       </div>
       <div className="header--fadeBottom"></div>
     </header>
-  )
+  );
 }

src/components/Movie/MovieDetails.js

@@ -13,13 +13,18 @@ export default function MovieDetails(props) {
         </h1>
         <p className="modal__info">
           <span className="modal__rating">
-            Rating: {props.movie.vote_average * 10}%{" "}
+            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
+          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 : ""}
+          {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">

src/components/MovieGenreImage.js

@@ -1,16 +1,26 @@
-import React from 'react'
+import React from 'react';
 
 export default function MovieGenreImage(props) {
   let netflixUrl = false;
 
-   if (props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
+  if (
+    props.url ===
+    'https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213'
+  ) {
     netflixUrl = true;
   }
 
   return (
-      <div onClick={props.movieDetailsModal}
-         className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
-         <img src={props.posterUrl} className="movieShowcase__container--movie-image" />
+    <div
+      onClick={props.movieDetailsModal}
+      className={
+        'movieShowcase__container--movie' + (netflixUrl ? '__netflix' : '')
+      }
+    >
+      <img
+        src={props.posterUrl}
+        className="movieShowcase__container--movie-image"
+      />
     </div>
   );
 }

src/components/NavigationItem.js

@@ -2,8 +2,13 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 const navigationItem = (props) => (
-   <NavLink className="navigation__container-link" exact={props.exact}
-      to={props.link}>{props.children}</NavLink>
-)
+  <NavLink
+    className="navigation__container-link"
+    exact={props.exact}
+    to={props.link}
+  >
+    {props.children}
+  </NavLink>
+);
 
 export default navigationItem;

src/components/UI/Backdrop.js

@@ -1,9 +1,8 @@
 import React from 'react';
 
-const backdrop = (props) => (
-   props.show ? <div
-      onClick={props.toggleBackdrop}
-      className="backdrop"></div> : null
-);
+const backdrop = (props) =>
+  props.show ? (
+    <div onClick={props.toggleBackdrop} className="backdrop"></div>
+  ) : null;
 
 export default backdrop;

src/components/UI/Modal.js

@@ -1,23 +1,25 @@
-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 backgroundStyle = {
-      backgroundSize: "cover",
-      backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path || props.movie.poster_path})`,
-   }
+    backgroundSize: 'cover',
+    backgroundImage: `url(https://image.tmdb.org/t/p/original/${
+      props.movie.backdrop_path || props.movie.poster_path
+    })`,
+  };
 
   return (
     <Aux>
       <Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
       <div
         style={backgroundStyle}
-            className={(props.show ? "modal show" : "modal hide")}>
+        className={props.show ? 'modal show' : 'modal hide'}
+      >
         {props.children}
       </div>
     </Aux>
-   )
+  );
 }

src/containers/ActionMovies.js

@@ -1,41 +1,39 @@
-import React, { Component } from 'react'
-import { bindActionCreators } from "redux";
+import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { fetchActionMovies } from '../store/actions/index';
 import { getMovieRows } from '../getMovie';
 
 class ActionMovies extends Component {
-
   componentWillMount() {
     this.props.fetchActionMovies();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.actionMovies.data) {
-      const url = "/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=28";
+      const url =
+        '/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=28';
       movies = getMovieRows(this.props.actionMovies.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">Action Movies</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
 const mapStateToProps = (state) => {
-  return { actionMovies: state.action }
-}
+  return { actionMovies: state.action };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchActionMovies }, dispatch)
-}
+  return bindActionCreators({ fetchActionMovies }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(ActionMovies);

src/containers/App.js

@@ -1,13 +1,9 @@
 import React, { Component } from 'react';
 import Layout from './Layout';
 
-
 class App extends Component {
-
   render() {
-    return (
-      <Layout />
-    )
+    return <Layout />;
   }
 }
 

src/containers/ComedyMovies.js

@@ -1,42 +1,39 @@
 import React, { Component } from 'react';
-import { bindActionCreators } from "redux";
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { getMovieRows } from '../getMovie';
 import { fetchComedyMovies } from '../store/actions/index';
 
 class ComedyMovies extends Component {
-
   componentWillMount() {
     this.props.fetchComedyMovies();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.movies.data) {
-      const url = '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=35';
+      const url =
+        '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=35';
       movies = getMovieRows(this.props.movies.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">Comedy Movies</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
-
 const mapStateToProps = (state) => {
-  return { movies: state.comedy }
-}
+  return { movies: state.comedy };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchComedyMovies }, dispatch)
-}
+  return bindActionCreators({ fetchComedyMovies }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(ComedyMovies);

src/containers/Documentaries.js

@@ -1,42 +1,39 @@
 import React, { Component } from 'react';
-import { bindActionCreators } from "redux";
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { getMovieRows } from '../getMovie';
 import { fetchDocumentaries } from '../store/actions/index';
 
 class Documentaries extends Component {
-
   componentWillMount() {
     this.props.fetchDocumentaries();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.movies.data) {
-      const url = '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=99';
+      const url =
+        '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=99';
       movies = getMovieRows(this.props.movies.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">Documentaries</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
-
 const mapStateToProps = (state) => {
-  return { movies: state.documentary }
-}
+  return { movies: state.documentary };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchDocumentaries }, dispatch)
-}
+  return bindActionCreators({ fetchDocumentaries }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Documentaries);

src/containers/HorrorMovies.js

@@ -1,42 +1,39 @@
 import React, { Component } from 'react';
-import { bindActionCreators } from "redux";
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { getMovieRows } from '../getMovie';
 import { fetchHorrorMovies } from '../store/actions/index';
 
 class HorrorMovies extends Component {
-
   componentWillMount() {
     this.props.fetchHorrorMovies();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.movies.data) {
-      const url = '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=27';
+      const url =
+        '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=27';
       movies = getMovieRows(this.props.movies.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">Horror Movies</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
-
 const mapStateToProps = (state) => {
-  return { movies: state.horror }
-}
+  return { movies: state.horror };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchHorrorMovies }, dispatch)
-}
+  return bindActionCreators({ fetchHorrorMovies }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(HorrorMovies);

src/containers/Layout.js

@@ -113,7 +113,6 @@ class Layout extends Component {
           this.state.toggleMovieList ? <MainContent /> : <div
             className="search-container">{this.state.MovieList}</div>
         }
-
         <Modal show={this.state.toggleModal}
           modalClosed={this.closeModal}
           movie={this.state.movieOverview}>

src/containers/NetflixOriginals.js

@@ -1,42 +1,39 @@
 import React, { Component } from 'react';
-import { bindActionCreators } from "redux";
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { getMovieRows } from '../getMovie';
 import { fetchNetflixOriginals } from '../store/actions/index';
 
 class NetflixOriginals extends Component {
-
   componentWillMount() {
     this.props.fetchNetflixOriginals();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.movies.data) {
-      const url = '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213';
+      const url =
+        '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213';
       movies = getMovieRows(this.props.movies.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
-
 const mapStateToProps = (state) => {
-  return { movies: state.netflixOriginals }
-}
+  return { movies: state.netflixOriginals };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchNetflixOriginals }, dispatch)
-}
+  return bindActionCreators({ fetchNetflixOriginals }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(NetflixOriginals);

src/containers/RomanceMovies.js

@@ -1,42 +1,39 @@
 import React, { Component } from 'react';
-import { bindActionCreators } from "redux";
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { getMovieRows } from '../getMovie';
 import { fetchRomanceMovies } from '../store/actions/index';
 
 class RomanceMovies extends Component {
-
   componentWillMount() {
     this.props.fetchRomanceMovies();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.movies.data) {
-      const url = '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=10749';
+      const url =
+        '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=10749';
       movies = getMovieRows(this.props.movies.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">Romance Movies</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
-
 const mapStateToProps = (state) => {
-  return { movies: state.romance }
-}
+  return { movies: state.romance };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchRomanceMovies }, dispatch)
-}
+  return bindActionCreators({ fetchRomanceMovies }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(RomanceMovies);

src/containers/TopRated.js

@@ -1,41 +1,39 @@
-import React, { Component } from 'react'
-import { bindActionCreators } from "redux";
+import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { fetchTopRated } from '../store/actions/index';
 import { getMovieRows } from '../getMovie';
 
 class TopRated extends Component {
-
   componentWillMount() {
     this.props.fetchTopRated();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.topRated.data) {
-      const url = "/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
+      const url =
+        '/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US';
       movies = getMovieRows(this.props.topRated.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">Top Rated</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
 const mapStateToProps = (state) => {
-  return { topRated: state.topRated }
-}
+  return { topRated: state.topRated };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchTopRated }, dispatch)
-}
+  return bindActionCreators({ fetchTopRated }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(TopRated);

src/containers/TrendingMovies.js

@@ -1,41 +1,39 @@
-import React, { Component } from 'react'
-import { bindActionCreators } from "redux";
+import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { fetchTrending } from '../store/actions/index';
 import { getMovieRows } from '../getMovie';
 
 class TrendingMovies extends Component {
-
   componentWillMount() {
     this.props.fetchTrending();
   }
 
   render() {
-    let movies
+    let movies;
     // Call getMoviesRows function only when we get the data back
     // from the API through redux
     if (this.props.trending.data) {
-      const url = '/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US';
+      const url =
+        '/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US';
       movies = getMovieRows(this.props.trending.data, url);
     }
     return (
       <>
         <h1 className="movieShowcase__heading">Trending Now</h1>
-        <div className="movieShowcase__container">
-          {movies}
-        </div>
+        <div className="movieShowcase__container">{movies}</div>
       </>
-    )
+    );
   }
 }
 
 const mapStateToProps = (state) => {
-  return { trending: state.trending }
-}
+  return { trending: state.trending };
+};
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ fetchTrending }, dispatch)
-}
+  return bindActionCreators({ fetchTrending }, dispatch);
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(TrendingMovies);

src/getMovie.js

@@ -3,21 +3,29 @@ import React from 'react';
 
 export function getMovieRows(movies, url) {
   const movieRow = movies.map((movie) => {
-    let movieImageUrl = "https://image.tmdb.org/t/p/w500/" + movie.backdrop_path;
-    if (url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
-      movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
+    let movieImageUrl =
+      'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
+    if (
+      url ===
+      '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213'
+    ) {
+      movieImageUrl =
+        'https://image.tmdb.org/t/p/original/' + movie.poster_path;
     }
 
     if (movie.poster_path && movie.backdrop_path !== null) {
-      const movieComponent = <MovieGenre
+      const movieComponent = (
+        <MovieGenre
           key={movie.id}
           url={url}
           posterUrl={movieImageUrl}
-        movie={movie} />
+          movie={movie}
+        />
+      );
 
       return movieComponent;
     }
   });
 
-  return movieRow
+  return movieRow;
 }

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 import reducers from './store/reducers';

src/store/actions/index.js

@@ -12,73 +12,89 @@ export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES';
 const API_KEY = '224ce27b38a3805ecf6f6c36eb3ba9d0';
 
 export function fetchTrending() {
-  const request = axios.get(`/trending/all/week?api_key=${API_KEY}&language=en-US`);
+  const request = axios.get(
+    `/trending/all/week?api_key=${API_KEY}&language=en-US`
+  );
 
   return {
     type: FETCH_TRENDING,
-    payload: request
-  }
+    payload: request,
+  };
 }
 
 export function fetchNetflixOriginals() {
-  const request = axios.get(`/discover/tv?api_key=${API_KEY}&with_networks=213`);
+  const request = axios.get(
+    `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
+  );
 
   return {
     type: FETCH_NETFLIX_ORIGINALS,
-    payload: request
-  }
+    payload: request,
+  };
 }
 
 export function fetchTopRated() {
-  const request = axios.get(`/movie/top_rated?api_key=${API_KEY}&language=en-US`)
+  const request = axios.get(
+    `/movie/top_rated?api_key=${API_KEY}&language=en-US`
+  );
 
   return {
     type: FETCH_TOP_RATED,
-    payload: request
-  }
+    payload: request,
+  };
 }
 
 export function fetchActionMovies() {
-  const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=28`)
+  const request = axios.get(
+    `/discover/movie?api_key=${API_KEY}&with_genres=28`
+  );
 
   return {
     type: FETCH_ACTION_MOVIES,
-    payload: request
-  }
+    payload: request,
+  };
 }
 
 export function fetchComedyMovies() {
-  const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=35`)
+  const request = axios.get(
+    `/discover/movie?api_key=${API_KEY}&with_genres=35`
+  );
 
   return {
     type: FETCH_COMEDY_MOVIES,
-    payload: request
-  }
+    payload: request,
+  };
 }
 
 export function fetchHorrorMovies() {
-  const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=27`)
+  const request = axios.get(
+    `/discover/movie?api_key=${API_KEY}&with_genres=27`
+  );
 
   return {
     type: FETCH_HORROR_MOVIES,
-    payload: request
-  }
+    payload: request,
+  };
 }
 
 export function fetchRomanceMovies() {
-  const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=10749`)
+  const request = axios.get(
+    `/discover/movie?api_key=${API_KEY}&with_genres=10749`
+  );
 
   return {
     type: FETCH_ROMANCE_MOVIES,
-    payload: request
-  }
+    payload: request,
+  };
 }
 
 export function fetchDocumentaries() {
-  const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=99`)
+  const request = axios.get(
+    `/discover/movie?api_key=${API_KEY}&with_genres=99`
+  );
 
   return {
     type: FETCH_DOCUMENTARIES,
-    payload: request
-  }
+    payload: request,
+  };
 }

src/store/reducers/index.js

@@ -8,7 +8,6 @@ import HorrorMoviesReducer from './reducerHorrorMovies';
 import RomanceMoviesReducer from './reducerRomanceMovies';
 import DocumentaryReducer from './reducerDocumentary';
 
-
 const rootReducer = combineReducers({
   trending: TrendingReducer,
   netflixOriginals: NetflixOriginalsReducer,
@@ -17,7 +16,7 @@ const rootReducer = combineReducers({
   comedy: ComedyMoviesReducer,
   horror: HorrorMoviesReducer,
   romance: RomanceMoviesReducer,
-  documentary: DocumentaryReducer
+  documentary: DocumentaryReducer,
 });
 
 export default rootReducer;

src/store/reducers/reducerActionMovies.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_ACTION_MOVIES:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

src/store/reducers/reducerComedyMovies.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_COMEDY_MOVIES:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

src/store/reducers/reducerDocumentary.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_DOCUMENTARIES:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

src/store/reducers/reducerHorrorMovies.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_HORROR_MOVIES:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

src/store/reducers/reducerNetflixOriginals.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_NETFLIX_ORIGINALS:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

src/store/reducers/reducerRomanceMovies.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_ROMANCE_MOVIES:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

src/store/reducers/reducerTopRated.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_TOP_RATED:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

src/store/reducers/reducerTrending.js

@@ -4,7 +4,7 @@ export default function (state = {}, action) {
   switch (action.type) {
     case FETCH_TRENDING:
       const data = action.payload.data.results;
-      return { ...state, data }
+      return { ...state, data };
     default:
       return state;
   }

webpack.config.js

@@ -1,14 +1,26 @@
-const HtmlWebPackPlugin = require("html-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const dotenv = require('dotenv');
+const webpack = require('webpack');
 
+module.exports = () => {
+  // call dotenv and it will return an Object with a parsed key
+  const env = dotenv.config().parsed;
 
-module.exports = {
+  // reduce env variables to an oject
+  const envKeys = Object.keys(env).reduce((prev, next) => {
+    prev[`process.env.${next}`] = JSON.stringify(env[next]);
+    return prev;
+  }, {});
 
-   entry: "./src/index.js",
+  console.log('keys', envKeys);
+
+  return {
+    entry: './src/index.js',
     output: {
-      filename: "bundle.js",
+      filename: 'bundle.js',
     },
     module: {
       rules: [
@@ -16,16 +28,15 @@ module.exports = {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
-               loader: "babel-loader"
-            }
+            loader: 'babel-loader',
+          },
         },
         {
           test: /\.svg$/,
           exclude: /node_modules/,
           use: {
-               loader: 'svg-react-loader'
-            }
-
+            loader: 'svg-react-loader',
+          },
         },
         {
           test: /\.scss$/,
@@ -33,12 +44,12 @@ module.exports = {
             {
               loader: MiniCssExtractPlugin.loader,
               options: {
-                     publicPath: '../'
-                  }
+                publicPath: '../',
+              },
             },
             'css-loader',
-               'sass-loader'
-            ]
+            'sass-loader',
+          ],
         },
         {
           test: /\.(gif|png|jpe?g)$/i,
@@ -52,23 +63,27 @@ module.exports = {
               },
             },
           ],
-         }
-      ]
+        },
+      ],
     },
     node: {
-      fs: "empty"
+      fs: 'empty',
     },
     plugins: [
+      new webpack.DefinePlugin(envKeys),
       new HtmlWebPackPlugin({
-         template: "./src/index.html",
-         filename: "./index.html"
+        template: './src/index.html',
+        filename: './index.html',
       }),
-      new CopyWebpackPlugin([{ from: 'src/static/images', to: 'static/images' }]),
+      new CopyWebpackPlugin([
+        { from: 'src/static/images', to: 'static/images' },
+      ]),
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
         // both options are optional
-         filename: "main.css"
+        filename: 'main.css',
       }),
       new CleanWebpackPlugin(['dist']),
-   ]
+    ],
+  };
 };