installed react-router-dom

package.json

@@ -16,7 +16,7 @@
   "author": "Andres Alcocer",
   "license": "ISC",
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "^0.18.1",
     "prop-types": "^15.6.2",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
@@ -54,7 +54,7 @@
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^4.5.0",
     "mini-css-extract-plugin": "^0.4.4",
-    "node-sass": "^4.10.0",
+    "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "prettier": "^2.0.5",
     "sass-loader": "^7.1.0",
@@ -64,8 +64,8 @@
     "tap-nirvana": "^1.1.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "watch": "^1.0.2",
-    "webpack": "^4.25.1",
+    "webpack": "^4.43.0",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.1.10"
+    "webpack-dev-server": "^3.11.0"
   }
-}
+}

src/components/NavigationItem.js

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

src/containers/App.js

@@ -1,10 +1,5 @@
-import React, { Component } from 'react';
+import React from 'react';
-import Layout from './Layout';
+import AppRouter from './AppRouter';
-
-class App extends Component {
-  render() {
-    return <Layout />;
-  }
-}
 
+const App = () => <AppRouter />;
 export default App;

src/containers/AppRouter.js

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

src/containers/Layout.js

@@ -92,7 +92,6 @@ class Layout extends Component {
     axios.get(url)
       .then(res => {
         const movieData = res.data;
-
         this.setState({ movieOverview: movieData });
       }).catch(error => {
         console.log(error);
@@ -105,25 +104,18 @@ class Layout extends Component {
   }
 
   render() {
-
     return (
       <div>
         <Navbar showMovies={this.onSearchHandler} />
-        {
+        <MainContent />
-          this.state.toggleMovieList ? <MainContent /> : <div
-            className="search-container">{this.state.MovieList}</div>
-        }
         <Modal show={this.state.toggleModal}
           modalClosed={this.closeModal}
           movie={this.state.movieOverview}>
-
           <MovieDetails movie={this.state.movieOverview} />
         </Modal>
       </div>
-
     );
   }
-
 }
 
 export default Layout; 

src/containers/Navbar.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { NavLink } from 'react-router-dom';
+
 import NavigationItem from '../components/NavigationItem'
 import SearchLogo from '../static/images/search-icon.svg';
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png';
@@ -30,7 +32,6 @@ class navigation extends Component {
     }
   }
 
-
   render() {
     const { scrolling } = this.state;
     const { showMovies } = this.props;
@@ -38,7 +39,9 @@ class navigation extends Component {
     return (
       <nav className={"navigation " + (scrolling ? "black" : "")} >
         <ul className="navigation__container">
-          <NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt="" /></NavigationItem>
+          <NavLink to="/">
+            <img className="navigation__container--logo" src={NetflixLogo} alt="" />
+          </NavLink>
           <DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
           <div className="navigation__container-link pseudo-link">Home</div>
           <div className="navigation__container-link pseudo-link">TV Shows</div>
@@ -46,16 +49,13 @@ class navigation extends Component {
           <div className="navigation__container-link pseudo-link">Recently Added</div>
           <div className="navigation__container-link pseudo-link">My List</div>
 
-
           <div className="navigation__container--left">
             <SearchLogo className="logo" />
-
             <input
               onChange={showMovies}
               className="navigation__container--left__input"
               type="text"
               placeholder="Title, genres, people" />
-
           </div>
 
           <div className="navigation__container-link pseudo-link">KIDS</div>
@@ -64,11 +64,10 @@ class navigation extends Component {
 
           <DropdownContent />
           <DropdownArrow className="navigation__container--downArrow" />
-
         </ul>
       </nav>
     )
   }
 }
 
-export default navigation; 
+export default navigation; 

src/containers/NotFound.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h1>NOT FOUND</h1>
+    </div>
+  );
+}

src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 import reducers from './store/reducers';
@@ -20,9 +19,7 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 // - add routing and 404 page
 const app = (
   <Provider store={createStoreWithMiddleware(reducers)}>
-    <BrowserRouter>
+    <App />
-      <App />
-    </BrowserRouter>
   </Provider>
 );
 

webpack.config.js

@@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const dotenv = require('dotenv');
 const webpack = require('webpack');
+var path = require('path');
 
 module.exports = () => {
   // call dotenv and it will return an Object with a parsed key
@@ -20,7 +21,9 @@ module.exports = () => {
   return {
     entry: './src/index.js',
     output: {
+      path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js',
+      publicPath: '/',
     },
     module: {
       rules: [
@@ -66,6 +69,9 @@ module.exports = () => {
         },
       ],
     },
+    devServer: {
+      historyApiFallback: true,
+    },
     node: {
       fs: 'empty',
     },