Merge pull request #52 from devandres-tech/react-router-dom-v6-upgrade

React router dom v6 upgrade
2022-11-24 15:30:53 -05:00
parent c67f6359ff d7db85c1ae
commit 65f64f7c77
8 changed files with 8288 additions and 8486 deletions
--- a/README.md
+++ b/README.md
@@ -4,6 +4,16 @@

 This project is a simplified front end clone of Netflix. It was created with React and CSS (Grid and Flexbox). It uses [The MovieDB Api](https://www.themoviedb.org/documentation/api) to search for movies and display details. Feel free to contribute!

+### TODO's
+
+- [ ] Implement Not Found page styles
+- [ ] Implement navigation header links functionality
+- [ ] Update modal to current styling
+- [ ] Update carousel to current styling
+- [ ] Create movie page screen
+- [ ] Migrate to Typescript
+- [ ] Implement dynamic code splitting with dynamic imports
+
 ### Tools used

 - Webpack
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,8 +4,10 @@
  "description": "",
  "main": "index.js",
  "scripts": {
-    "dev": "webpack-dev-server --mode development --config webpack.config.js --open",
-    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development --config webpack.config.js",
+    "build:prod": "webpack --mode development",
+    "run:dev": "webpack serve --mode development --config webpack.config.js --open",
+    "run:prod": "webpack serve --mode production --open",
    "lint": "eslint --fix . && echo 'Lint complete.'"
  },
  "engines": {
@@ -16,61 +18,61 @@
  "author": "Andres Alcocer",
  "license": "ISC",
  "dependencies": {
-    "axios": "^0.22.0",
-    "dotenv": "^16.0.0",
-    "firebase": "^9.1.2",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-player": "^2.9.0",
-    "react-redux": "^7.2.5",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "^5.0.0",
-    "redux": "^4.1.1",
+    "axios": "^1.2.0",
+    "dotenv": "^16.0.3",
+    "firebase": "^9.14.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-player": "^2.11.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.4.3",
+    "react-scripts": "^5.0.1",
+    "redux": "^4.2.0",
    "redux-promise": "^0.6.0",
-    "redux-thunk": "^2.3.0",
-    "swiper": "^7.0.8"
+    "redux-thunk": "^2.4.2",
+    "swiper": "^8.4.5"
  },
  "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
-    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-proposal-throw-expressions": "^7.18.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/polyfill": "^7.0.0-beta.51",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "babel-loader": "^8.2.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.3.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.2",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "^5.3.2",
-    "image-webpack-loader": "^8.0.1",
-    "mini-css-extract-plugin": "^2.4.1",
-    "node-sass": "^6.0.1",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "image-webpack-loader": "^8.1.0",
+    "mini-css-extract-plugin": "^2.7.0",
+    "node-sass": "^8.0.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.8.0",
    "react-owl-carousel2": "^0.3.0",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.3.0",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
    "svg-inline-loader": "^0.8.2",
    "svg-react-loader": "^0.4.6",
    "tap-nirvana": "^1.1.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "watch": "^1.0.2",
-    "webpack": "^5.57.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.3.1"
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1"
  }
 }
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@@ -1,21 +1,32 @@
 import React from 'react'
-import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
+import { BrowserRouter, Route, Routes, Outlet } from 'react-router-dom'
+
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 import Home from './pages/Home'
 import NotFound from './pages/NotFound'
 import Search from './pages/Search'

+const Layout = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+      <Footer />
+    </>
+  )
+}
+
 const AppRouter = () => (
  <BrowserRouter>
-    <Navbar />
-    <Switch>
-      <Route path='/' exact render={() => <Redirect to='/browse' />} />
-      <Route path='/browse' component={Home} />
-      <Route path='/search' component={Search} />
-      <Route component={NotFound} />
-    </Switch>
-    <Footer />
+    <Routes>
+      <Route path='/' element={<Layout />}>
+        <Route index element={<Home />} />
+        <Route path='/browse' element={<Home />} />
+        <Route path='/search' element={<Search />} />
+        <Route path='*' element={<NotFound />} />
+      </Route>
+    </Routes>
  </BrowserRouter>
 )

--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 import { NavLink } from 'react-router-dom'
-import { withRouter } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'

 import { useScroll } from '../hooks/useScroll'
 import SearchLogo from '../static/images/search-icon.svg'
@@ -9,7 +9,8 @@ import BellLogo from '../static/images/bell-logo.svg'
 import DropdownArrow from '../static/images/drop-down-arrow.svg'
 import DropdownContent from '../components/DropdownContent'

-const Navbar = ({ history }) => {
+const Navbar = () => {
+  const navigate = useNavigate()
  const searchInput = React.useRef(null)
  const [userInput, setUserInput] = useState('')
  const [scrollDimensions] = useScroll()
@@ -24,9 +25,9 @@ const Navbar = ({ history }) => {
      document.activeElement === searchInput.current &&
      userInput.length === 0
    ) {
-      history.push('/browse')
+      navigate('/browse')
    }
-    if (userInput.length > 0) history.push(`/search?q=${userInput}`)
+    if (userInput.length > 0) navigate(`/search?q=${userInput}`)
  }, [userInput, searchInput])

  const onLogoClick = () => {
@@ -75,4 +76,4 @@ const Navbar = ({ history }) => {
  )
 }

-export default withRouter(Navbar)
+export default Navbar
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -0,0 +1,6 @@
+import { useDebounce } from './useDebounce'
+import { useScroll } from './useScroll'
+import { useViewport } from './useViewport'
+import { useWithRouter } from './useWithRouter'
+
+export { useDebounce, useScroll, useViewport, useWithRouter }
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import * as ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { createStore, applyMiddleware } from 'redux'
 import ReduxThunk from 'redux-thunk'
@@ -23,4 +23,4 @@ const app = (
  </Provider>
 )

-ReactDOM.render(app, document.getElementById('app'))
+ReactDOM.createRoot(document.getElementById('app')).render(app)
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,24 +4,38 @@ 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')
+const prod =
+  (process.env.NODE_ENV ? process.env.NODE_ENV : '').trim() === 'production'
+const path = require('path')

 module.exports = () => {
-  // call dotenv and it will return an Object with a parsed key
-  const env = dotenv.config().parsed
-  // reduce env variables to an oject
-  const envKeys = Object.keys(env).reduce((prev, next) => {
-    prev[`process.env.${next}`] = JSON.stringify(env[next])
-    return prev
-  }, {})
+  dotenv.config({
+    path: './.env',
+  })

  return {
    entry: './src/index.js',
    output: {
+      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
-      filename: 'bundle.js',
-      publicPath: '/',
+      clean: true,
    },
+    optimization: {
+      runtimeChunk: 'single',
+      moduleIds: 'deterministic',
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'vendors',
+            chunks: 'all',
+          },
+        },
+      },
+    },
+    mode: prod ? 'production' : 'development',
+    // Enable sourcemaps for debugging webpack's output.
+    devtool: prod ? 'none' : 'eval-source-map',
    module: {
      rules: [
        {
@@ -78,7 +92,9 @@ module.exports = () => {
      global: true,
    },
    plugins: [
-      new webpack.DefinePlugin(envKeys),
+      new webpack.DefinePlugin({
+        'process.env': JSON.stringify(process.env),
+      }),
      new HtmlWebPackPlugin({
        template: './src/index.html',
        filename: './index.html',