security patches and dependencies updates

- fix: security patches - SNYK-JS-BRACES-6838727 and SNYK-JS-MICROMATCH-6838728 (#77) - chore: update React to v18 - chore: update other deps to latest versions
cloudinary · May 22, 2024 · ff1bce6 · ff1bce6
1 parent a407936
commit ff1bce6
Show file tree

Hide file tree

Showing 5 changed files with 674 additions and 1,288 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "web-speed-test",
   "description": "web-speed-test Image Performance Analysis Client App",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/CloudinaryLtd/web-speed-test-client.git"
@@ -46,35 +46,36 @@
     ]
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "@vitejs/plugin-react": "^4.2.1",
-    "classnames": "^2.3.2",
-    "cloudinary-core": "^2.13.0",
+    "classnames": "^2.5.1",
+    "cloudinary-core": "^2.13.1",
     "cloudinary-react": "^1.8.1",
-    "i18next": "^23.2.1",
-    "numbro": "^2.3.6",
+    "i18next": "^23.11.5",
+    "numbro": "^2.5.0",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-disqus-comments": "^1.4.0",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^12.3.1",
-    "react-router-dom": "^5.3.4",
-    "react-share": "^4.4.1",
-    "react-tabs": "^3.2.3",
-    "vite": "^5.0.12",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.1",
+    "react-router-dom": "^6.23.1",
+    "react-share": "^5.1.0",
+    "react-tabs": "^6.0.2",
+    "vite": "^5.2.11",
     "vite-plugin-minify": "^1.5.2",
-    "vite-tsconfig-paths": "^4.3.1",
-    "web-vitals": "^1.1.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "web-vitals": "^4.0.1"
   },
   "devDependencies": {
     "async": "^3.2.5",
     "cloudinary": "^1.41.3",
-    "dotenv": "^16.3.2",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.8",
-    "sass": "^1.70.0"
-  }
+    "dotenv": "^16.4.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
+    "sass": "^1.77.2"
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { CloudinaryContext } from 'cloudinary-react';
 // import GoogleTagManager from './GoogleTagManager/GoogleTagManager'
 // import ReactGA from 'react-ga';
@@ -26,15 +26,19 @@ function App(props) {
       <div className="webspeedtest page-container">
         <Header />
 
-        <Switch>
-          <Route exact path={['/results/:testId', '/']}>
-            <WebSpeedPage />
-          </Route>
+        <Routes>
+          {['/results/:testId', '/'].map(path => (
+              <Route
+                  key="WebSpeedPage"
+                  path={path}
+                  element={<WebSpeedPage />}
+              />
+          ))}
           <Route
-            path="/:page"
-            render={(props) => <StaticPage page={props.match.params.page} />}
+              path="/:page"
+              render={(props) => <StaticPage page={props.match.params.page} />}
           />
-        </Switch>
+        </Routes>
 
         <PreFooter />
         <Footer />

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { StoreProvider } from './store/context';
 import App from './App';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
   <React.StrictMode>
     <StoreProvider>
       <Router>
         <App />
       </Router>
     </StoreProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
diff --git a/src/views/WebSpeedPage/WebSpeedPage.jsx b/src/views/WebSpeedPage/WebSpeedPage.jsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useEffect, useRef } from 'react';
-import { useLocation, useHistory, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 // import ReactGA from 'react-ga';
 import { useStore } from 'store/context';
 
@@ -24,7 +24,7 @@ function WebSpeedPage(props) {
   } = useStore();
 
   const { search, pathname } = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { testId: paramTestId } = useParams();
   const storeTestId = webspeedtest.testId;
 
@@ -35,7 +35,7 @@ function WebSpeedPage(props) {
     const locationTestId = locationParams.get('testId');
     const testId = paramTestId ? paramTestId : locationTestId;
     if (locationTestId && !paramTestId) {
-      history.push({
+      navigate({
         pathname: pathname + 'results/' + locationTestId
       });
     }
@@ -48,15 +48,15 @@ function WebSpeedPage(props) {
       fetchTestDataIfNeeded(testId, dispatch, webspeedtest);
       testIdRef.current = testId;
     }
-  }, [webspeedtest, search, pathname, paramTestId, dispatch, history]);
+  }, [webspeedtest, search, pathname, paramTestId, dispatch, navigate]);
 
   useEffect(() => {
     if (storeTestId && pathname.indexOf('results') === -1) {
-      history.push({
+      navigate({
         pathname: pathname + 'results/' + storeTestId
       });
     }
-  }, [storeTestId, pathname, history]);
+  }, [storeTestId, pathname, navigate]);
 
   return (
     <Fragment>