fix: warning about UNSAFE_componentWillMount using react-helmet-asy…

…nc (#1322)
graasp · Jul 5, 2024 · d425527 · d425527
1 parent 4fda73c
commit d425527
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "react-csv": "2.2.2",
     "react-dom": "18.3.1",
     "react-ga4": "2.1.0",
-    "react-helmet": "6.1.0",
+    "react-helmet-async": "2.0.5",
     "react-i18next": "14.1.2",
     "react-image-crop": "11.0.5",
     "react-qr-code": "2.0.15",
@@ -117,7 +117,6 @@
     "@types/react": "18.3.3",
     "@types/react-csv": "1.1.10",
     "@types/react-dom": "18.3.0",
-    "@types/react-helmet": "^6.1.11",
     "@types/uuid": "10.0.0",
     "@types/validator": "13.11.10",
     "@typescript-eslint/eslint-plugin": "7.14.1",

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -6,6 +6,7 @@ import 'katex/dist/katex.min.css';
 import 'react-quill/dist/quill.snow.css';
 import 'react-toastify/dist/ReactToastify.css';
 
+import { HelmetProvider } from 'react-helmet-async';
 import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
@@ -29,28 +30,30 @@ import { FilterItemsContextProvider } from './context/FilterItemsContext';
 import ModalProviders from './context/ModalProviders';
 
 const Root = (): JSX.Element => (
-  <QueryClientProvider client={queryClient}>
-    <I18nextProvider i18n={i18nConfig}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <ToastContainer stacked position="bottom-right" theme="colored" />
-        <Router>
-          <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
-            <ModalProviders>
-              <CurrentUserContextProvider>
-                <FilterItemsContextProvider>
-                  <App />
-                </FilterItemsContextProvider>
-              </CurrentUserContextProvider>
-            </ModalProviders>
-          </Sentry.ErrorBoundary>
-        </Router>
-      </ThemeProvider>
-    </I18nextProvider>
-    {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
-      <ReactQueryDevtools position="bottom-right" />
-    )}
-  </QueryClientProvider>
+  <HelmetProvider>
+    <QueryClientProvider client={queryClient}>
+      <I18nextProvider i18n={i18nConfig}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <ToastContainer stacked position="bottom-right" theme="colored" />
+          <Router>
+            <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+              <ModalProviders>
+                <CurrentUserContextProvider>
+                  <FilterItemsContextProvider>
+                    <App />
+                  </FilterItemsContextProvider>
+                </CurrentUserContextProvider>
+              </ModalProviders>
+            </Sentry.ErrorBoundary>
+          </Router>
+        </ThemeProvider>
+      </I18nextProvider>
+      {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
+        <ReactQueryDevtools position="bottom-right" />
+      )}
+    </QueryClientProvider>
+  </HelmetProvider>
 );
 
 export default Root;
diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx
@@ -1,4 +1,4 @@
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import { Box, Divider, Typography, styled } from '@mui/material';
 

diff --git a/src/components/pages/BookmarkedItemsScreen.tsx b/src/components/pages/BookmarkedItemsScreen.tsx
@@ -1,4 +1,4 @@
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import { Box } from '@mui/material';
 

diff --git a/src/components/pages/HomeScreen.tsx b/src/components/pages/HomeScreen.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import { Box, LinearProgress } from '@mui/material';
 

diff --git a/src/components/pages/PublishedItemsScreen.tsx b/src/components/pages/PublishedItemsScreen.tsx
@@ -1,4 +1,4 @@
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import { Box } from '@mui/material';
 

diff --git a/src/components/pages/RecycledItemsScreen.tsx b/src/components/pages/RecycledItemsScreen.tsx
@@ -1,4 +1,4 @@
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import { Box } from '@mui/material';
 

diff --git a/yarn.lock b/yarn.lock
@@ -3330,15 +3330,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-helmet@npm:^6.1.11":
-  version: 6.1.11
-  resolution: "@types/react-helmet@npm:6.1.11"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/e329d8ad82c365fec7dd7d91c8b6d167faac30cef0d9f1e27d7e895172a0ebfa65829fb4acabbe79283b01cbbe5840a845caeb50148ceef6f3fad42b3c2c4bdc
-  languageName: node
-  linkType: hard
-
 "@types/react-redux@npm:^7.1.20":
   version: 7.1.33
   resolution: "@types/react-redux@npm:7.1.33"
@@ -7188,7 +7179,6 @@ __metadata:
     "@types/react": "npm:18.3.3"
     "@types/react-csv": "npm:1.1.10"
     "@types/react-dom": "npm:18.3.0"
-    "@types/react-helmet": "npm:^6.1.11"
     "@types/uuid": "npm:10.0.0"
     "@types/validator": "npm:13.11.10"
     "@typescript-eslint/eslint-plugin": "npm:7.14.1"
@@ -7228,7 +7218,7 @@ __metadata:
     react-csv: "npm:2.2.2"
     react-dom: "npm:18.3.1"
     react-ga4: "npm:2.1.0"
-    react-helmet: "npm:6.1.0"
+    react-helmet-async: "npm:2.0.5"
     react-i18next: "npm:14.1.2"
     react-image-crop: "npm:11.0.5"
     react-qr-code: "npm:2.0.15"
@@ -10949,7 +10939,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.1.1":
+"react-fast-compare@npm:^3.2.2":
   version: 3.2.2
   resolution: "react-fast-compare@npm:3.2.2"
   checksum: 10/a6826180ba75cefba1c8d3ac539735f9b627ca05d3d307fe155487f5d0228d376dac6c9708d04a283a7b9f9aee599b637446635b79c8c8753d0b4eece56c125c
@@ -10963,17 +10953,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helmet@npm:6.1.0":
-  version: 6.1.0
-  resolution: "react-helmet@npm:6.1.0"
+"react-helmet-async@npm:2.0.5":
+  version: 2.0.5
+  resolution: "react-helmet-async@npm:2.0.5"
   dependencies:
-    object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.7.2"
-    react-fast-compare: "npm:^3.1.1"
-    react-side-effect: "npm:^2.1.0"
+    invariant: "npm:^2.2.4"
+    react-fast-compare: "npm:^3.2.2"
+    shallowequal: "npm:^1.1.0"
   peerDependencies:
-    react: ">=16.3.0"
-  checksum: 10/eff25231384bb0a229870a0552839953a59af17f0ff5e8bca1b8c8fdf19a329e4c00c7fa2fcedc8be5d73f5c7bebb30cf9a32ea58efc7c8f726a10dba51f48a2
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/03a8fbf4779c90899012809da09a6b174a2e11e2db4c7f4e61672903dd4e2f3bb732619da4254fc874c502251a07c8da01c752ed7d6df429c7718cf8451d176a
   languageName: node
   linkType: hard
 
@@ -11247,15 +11236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-side-effect@npm:^2.1.0":
-  version: 2.1.2
-  resolution: "react-side-effect@npm:2.1.2"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/8c31aaec5b383d942ff1775b12c45022239d1250d1a00a238bac3c07e0fe266c71991e2814ae16a5d9b855bcd96ba95817d48ab3f34738f0bb32036ebb1abb1a
-  languageName: node
-  linkType: hard
-
 "react-text-mask@npm:5.5.0":
   version: 5.5.0
   resolution: "react-text-mask@npm:5.5.0"
@@ -11873,6 +11853,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shallowequal@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "shallowequal@npm:1.1.0"
+  checksum: 10/f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"