upgraded packages in package.json file and created useWithRouter hook

package.json

@@ -16,61 +16,61 @@
   "author": "Andres Alcocer",
   "license": "ISC",
   "dependencies": {
-    "axios": "^0.22.0",
+    "axios": "^1.2.0",
-    "dotenv": "^16.0.0",
+    "dotenv": "^16.0.3",
-    "firebase": "^9.1.2",
+    "firebase": "^9.14.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-player": "^2.9.0",
+    "react-player": "^2.11.0",
-    "react-redux": "^7.2.5",
+    "react-redux": "^8.0.5",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.4.3",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
-    "redux": "^4.1.1",
+    "redux": "^4.2.0",
     "redux-promise": "^0.6.0",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.2",
-    "swiper": "^7.0.8"
+    "swiper": "^8.4.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.20.2",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
+    "@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-env": "^7.20.2",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-react": "^7.18.6",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.1.0",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.3.0",
+    "css-loader": "^6.7.2",
-    "eslint": "^7.32.0",
+    "eslint": "^8.28.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "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-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.3.2",
+    "html-webpack-plugin": "^5.5.0",
-    "image-webpack-loader": "^8.0.1",
+    "image-webpack-loader": "^8.1.0",
-    "mini-css-extract-plugin": "^2.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
-    "node-sass": "^6.0.1",
+    "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",
+    "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.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": "^5.75.0",
-    "webpack-cli": "^4.8.0",
+    "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.3.1"
+    "webpack-dev-server": "^4.11.1"
   }
 }

src/AppRouter.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
+import { BrowserRouter, Redirect, Route, Routes } from 'react-router-dom'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 import Home from './pages/Home'
@@ -9,12 +9,12 @@ import Search from './pages/Search'
 const AppRouter = () => (
   <BrowserRouter>
     <Navbar />
-    <Switch>
+    <Routes>
-      <Route path='/' exact render={() => <Redirect to='/browse' />} />
+      <Route path='/' exact render={() => <Navigate to='/browse' />} />
       <Route path='/browse' component={Home} />
       <Route path='/search' component={Search} />
       <Route component={NotFound} />
-    </Switch>
+    </Routes>
     <Footer />
   </BrowserRouter>
 )

src/hooks/useWIthRouter.js

@@ -0,0 +1,17 @@
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
+
+/**
+ * @description  Provides react router dom props
+ * @param {*} Component React component - JSX Element
+ * @returns React component with route props
+ */
+export const withRouter = (Component) => {
+  const ComponentWithRouterProp = (props) => {
+    let location = useLocation()
+    let navigate = useNavigate()
+    let params = useParams()
+    return <Component {...props} router={{ location, navigate, params }} />
+  }
+
+  return ComponentWithRouterProp
+}

webpack.config.js

@@ -10,6 +10,7 @@ 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
+  console.log('ENV IS', dotenv.config())
   const envKeys = Object.keys(env).reduce((prev, next) => {
     prev[`process.env.${next}`] = JSON.stringify(env[next])
     return prev