fix CVEs

package.json

@@ -6,20 +6,20 @@
     "ReactJs"
   ],
   "dependencies": {
-    "@analytics/google-analytics": "^0.4.0",
+    "@analytics/google-analytics": "^1.0.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.29",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^5.13.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@fortawesome/react-fontawesome": "^0.2.0",
-    "analytics": "^0.5.2",
+    "analytics": "^0.8.1",
-    "bulma": "^0.9.0",
+    "bulma": "^0.9.4",
-    "firebase": "^7.15.5",
+    "firebase": "^9.9.1",
-    "node-sass": "^7.0.0",
+    "node-sass": "^7.0.1",
-    "query-string": "^6.13.1",
+    "query-string": "^7.1.1",
-    "react": "^16.13.1",
+    "react": "^18.2.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^18.2.0",
-    "react-rainbow-components": "^1.16.0",
+    "react-rainbow-components": "^1.30.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/pages/_app.jsx

@@ -14,7 +14,7 @@ import ChangepassPage from "./changepass";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 
-import { Switch, Route, Router } from "../util/router.js";
+import { Routes, Route, Router } from "../util/router.js";
 import { ProvideAuth } from "../util/auth.js";
 import * as ROUTES from "../global/routes";
 import "../util/analytics.js";
@@ -29,7 +29,7 @@ const App = () => (
           logo="https://uploads.divjoy.com/logo.svg"
         />
 
-        <Switch>
+        <Routes>
           <Route exact path={ROUTES.HOME} component={IndexPage} />
           <Route exact path={ROUTES.ABOUT} component={AboutPage} />
           <Route exact path={ROUTES.FAQ} component={FaqPage} />
@@ -55,7 +55,7 @@ const App = () => (
               );
             }}
           />
-        </Switch>
+        </Routes>
 
         <Footer
           color="light"

src/util/auth.js

@@ -1,7 +1,10 @@
 import React, { useState, useEffect, useContext, createContext } from "react";
 import queryString from "query-string";
-import * as firebase from "firebase/app";
+// import * as firebase from "firebase/app";
-import "firebase/auth";
+// import "firebase/auth";
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+import 'firebase/compat/firestore';
 
 if (!firebase.apps.length) {
   // Replace with your own Firebase credentials

src/util/router.js

@@ -9,8 +9,8 @@ import {
   Router as RouterOriginal,
   useParams,
   useLocation,
-  useHistory,
+  useNavigate,
-  useRouteMatch
+  useMatch
 } from "react-router-dom";
 import queryString from "query-string";
 
@@ -37,8 +37,8 @@ export function Router({ children }) {
 export function useRouter() {
   const params = useParams();
   const location = useLocation();
-  const history = useHistory();
+  const history = useNavigate();
-  const match = useRouteMatch();
+  const match = useMatch();
 
   // Return our custom router object
   // Memoize so that a new object is only returned if something changes
@@ -76,11 +76,11 @@ function ScrollToTop() {
 
 export {
   Route,
-  Switch,
+  Routes,
   Link,
   NavLink,
   useParams,
   useLocation,
-  useHistory,
+  useNavigate,
-  useRouteMatch
+  useMatch
 } from "react-router-dom";