chore: replace deprecated react-helmet with react-helmet-async for st…

…rict mode
determined-ai · Apr 26, 2021 · 9908322 · 9908322
1 parent 5f2a486
commit 9908322
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 38 deletions.
diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json
diff --git a/webui/react/package.json b/webui/react/package.json
@@ -35,7 +35,7 @@
     "query-string": "^6.13.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^1.0.9",
     "react-monaco-editor": "^0.37.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
@@ -82,7 +82,6 @@
     "@types/plotly.js": "^1.50.21",
     "@types/react": "^16.9.52",
     "@types/react-dom": "^16.9.8",
-    "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-transition-group": "^4.4.0",
     "@types/resize-observer-browser": "^0.1.4",

diff --git a/webui/react/src/App.tsx b/webui/react/src/App.tsx
@@ -1,5 +1,6 @@
 import { Button, notification } from 'antd';
 import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 
 import { setupAnalytics } from 'Analytics';
 import Link from 'components/Link';
@@ -74,9 +75,11 @@ const AppView: React.FC = () => {
 
 const App: React.FC = () => {
   return (
-    <StoreProvider>
-      <AppView />
-    </StoreProvider>
+    <HelmetProvider>
+      <StoreProvider>
+        <AppView />
+      </StoreProvider>
+    </HelmetProvider>
   );
 };
 

diff --git a/webui/react/src/components/Page.tsx b/webui/react/src/components/Page.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 import PageHeader from 'components/PageHeader';
 import { useStore } from 'contexts/Store';

diff --git a/webui/react/src/pages/SignIn.tsx b/webui/react/src/pages/SignIn.tsx
@@ -1,7 +1,6 @@
 import { notification } from 'antd';
 import queryString from 'query-string';
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';
 
 import AuthToken from 'components/AuthToken';
@@ -75,11 +74,8 @@ const SignIn: React.FC = () => {
    * accessing a page from the browser when the user is already verified.
    */
   return auth.checked ? (
-    <Page>
+    <Page docTitle="Sign In - Determined">
       <div className={css.base}>
-        <Helmet>
-          <title>Sign In - Determined</title>
-        </Helmet>
         <div className={css.content}>
           <Logo type={LogoTypes.OnLightVertical} />
           <DeterminedAuth canceler={canceler} />