upgrade all the things!

babel/helper-builder-react-jsx held back because of babel/babel#14886, can be upgraded once the fix is released svgr needs to stay @v5: gregberge/svgr#665 (comment) "We are moving forward, not backward. If you use webpack 4, then you should stick to SVGR v5." eslint-loader -> eslint-webpack-plugin @ v2 from https://www.npmjs.com/package/eslint-loader "This loader has been deprecated. Please use eslint-webpack-plugin" from https://webpack.js.org/plugins/eslint-webpack-plugin/ "This is eslint-webpack-plugin 3.0 which works only with webpack 5. For the webpack 4, see the 2.x branch." TODO: still need to do "babel-eslint": "^10.1.0", -> "@babel/eslint-parser": "^7.0.0" + "@babel/eslint-plugin": "^7.0.0", eslint 7 -> 8 didn't work easily for me..
gridsuite · Aug 29, 2022 · 886c468 · 886c468
1 parent 09ec92c
commit 886c468
Show file tree

Hide file tree

Showing 8 changed files with 4,004 additions and 3,814 deletions.
diff --git a/demo/src/app.js b/demo/src/app.js
@@ -30,10 +30,10 @@ import {
     LIGHT_THEME,
     logout,
 } from '../../src';
-import { useRouteMatch } from 'react-router';
+import { useMatch } from 'react-router';
 import { IntlProvider, useIntl } from 'react-intl';
 
-import { BrowserRouter, useHistory, useLocation } from 'react-router-dom';
+import { BrowserRouter, useNavigate, useLocation } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
 
 import {
@@ -213,7 +213,7 @@ const MyButton = (props) => {
 };
 
 const AppContent = ({ language, onLanguageClick }) => {
-    const history = useHistory();
+    const navigate = useNavigate();
     const location = useLocation();
     const intl = useIntl();
     const equipmentClasses = useEquipmentStyles();
@@ -236,12 +236,9 @@ const AppContent = ({ language, onLanguageClick }) => {
         setOpenTreeViewFinderDialogCustomDialog,
     ] = React.useState(false);
 
-    // Can't use lazy initializer because useRouteMatch is a hook
+    // Can't use lazy initializer because useMatch is a hook
     const [initialMatchSilentRenewCallbackUrl] = useState(
-        useRouteMatch({
-            path: '/silent-renew-callback',
-            exact: true,
-        })
+        useMatch('/silent-renew-callback')
     );
 
     // TreeViewFinder data
@@ -686,7 +683,7 @@ const AppContent = ({ language, onLanguageClick }) => {
                                     userManager={userManager}
                                     signInCallbackError={null}
                                     dispatch={dispatch}
-                                    history={history}
+                                    navigate={navigate}
                                     location={location}
                                 />
                             )}

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -6,8 +6,10 @@
  */
 
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './app';
 
-render(<App />, document.querySelector('#demo'));
+const container = document.querySelector('#demo');
+const root = createRoot(container);
+root.render(<App />);
diff --git a/nwb.config.js b/nwb.config.js
@@ -1,22 +1,22 @@
 process.env.CHROME_BIN = require('puppeteer').executablePath();
 
+const ESLintPlugin = require('eslint-webpack-plugin');
+const myEslintOptions = {
+  extensions: [`js`],
+  exclude: [`node_modules`],
+};
+
 var extraWebpackConfig = {
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                enforce: 'pre',
-                loader: 'eslint-loader',
-                exclude: /node_modules/,
-            },
-        ],
-    },
+    plugins: [
+      new ESLintPlugin(myEslintOptions),
+    ],
 };
 
 module.exports = {
     type: 'react-component',
     karma: {
         browsers: ['ChromeHeadless'],
+        testContext: 'tests.webpack.js'
     },
     npm: {
         esModules: false,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,13 +23,12 @@
         "test:watch": "nwb test-react --server"
     },
     "dependencies": {
-        "@svgr/webpack": "^5.4.0",
         "autosuggest-highlight": "^3.2.0",
         "clsx": "^1.0.4",
         "jwt-decode": "^3.0.0",
-        "memoize-one": "^5.1.1",
+        "memoize-one": "^6.0.0",
         "oidc-client": "^1.10.1",
-        "prop-types": "15.7.2",
+        "prop-types": "^15.7.2",
         "react-csv-downloader": "^2.7.0",
         "react-request-fullscreen": "^1.1.2",
         "react-virtualized": "^9.21.2"
@@ -42,11 +41,10 @@
         "@mui/material": "^5.5.0",
         "@mui/styles": "^5.5.0",
         "notistack": "^2.0.3",
-        "react-router": "^5.1.2",
-        "react-router-dom": "^5.1.2",
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0",
-        "react-intl": "^5.0.0"
+        "react-router-dom": "^6.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-intl": "^6.0.0"
     },
     "devDependencies": {
         "@emotion/react": "^11.8.1",
@@ -55,28 +53,28 @@
         "@mui/lab": "^5.0.0-alpha.72",
         "@mui/material": "^5.5.0",
         "@mui/styles": "^5.5.0",
+        "@babel/helper-builder-react-jsx": "7.15.4",
+        "@svgr/webpack": "^5.4.0",
         "babel-eslint": "^10.1.0",
         "bufferutil": "^4.0.1",
         "eslint": "^7.9.0",
         "eslint-config-prettier": "^8.0.0",
         "eslint-config-react-app": "^6.0.0",
-        "eslint-loader": "^4.0.2",
+        "eslint-webpack-plugin": "^2.0.0",
         "eslint-plugin-flowtype": "^5.2.0",
         "eslint-plugin-import": "^2.22.0",
         "eslint-plugin-jsx-a11y": "^6.3.1",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.21.0",
         "eslint-plugin-react-hooks": "^4.1.2",
-        "inferno": "^7.4.2",
         "notistack": "^2.0.3",
         "nwb": "^0.25.x",
         "prettier": "^2.0.0",
-        "puppeteer": "^10.0.0",
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0",
-        "react-intl": "^5.0.0",
-        "react-router": "^5.1.2",
-        "react-router-dom": "^5.1.2",
+        "puppeteer": "^17.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-intl": "^6.0.0",
+        "react-router-dom": "^6.0.0",
         "type-fest": "^2.0.0",
         "utf-8-validate": "^5.0.2",
         "webpack-plugin-serve": "^1.0.1"

diff --git a/src/components/AuthenticationRouter/AuthenticationRouter.js b/src/components/AuthenticationRouter/AuthenticationRouter.js
@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import SignInCallbackHandler from '../SignInCallbackHandler';
 import {
     handleSigninCallback,
@@ -20,12 +20,12 @@ const AuthenticationRouter = ({
     userManager,
     signInCallbackError,
     dispatch,
-    history,
+    navigate,
     location,
 }) => {
     const handleSigninCallbackClosure = useCallback(
-        () => handleSigninCallback(dispatch, history, userManager.instance),
-        [dispatch, history, userManager.instance]
+        () => handleSigninCallback(dispatch, navigate, userManager.instance),
+        [dispatch, navigate, userManager.instance]
     );
     const handleSilentRenewCallbackClosure = useCallback(
         () => handleSilentRenewCallback(userManager.instance),
@@ -41,35 +41,42 @@ const AuthenticationRouter = ({
                     Error : SignIn Callback Error; {signInCallbackError.message}
                 </h1>
             )}
-            <Switch>
-                <Route exact path="/sign-in-callback">
-                    <SignInCallbackHandler
-                        userManager={userManager.instance}
-                        handleSignInCallback={handleSigninCallbackClosure}
-                    />
-                </Route>
-                <Route exact path="/silent-renew-callback">
-                    <SilentRenewCallbackHandler
-                        userManager={userManager.instance}
-                        handleSilentRenewCallback={
-                            handleSilentRenewCallbackClosure
-                        }
-                    />
-                </Route>
-                <Route exact path="/logout-callback">
-                    <Redirect to="/" />
-                </Route>
-                <Route>
-                    {userManager.error === null && (
-                        <Login
-                            disabled={userManager.instance === null}
-                            onLoginClick={() =>
-                                login(location, userManager.instance)
+            <Routes>
+                <Route
+                    path="sign-in-callback"
+                    element={
+                        <SignInCallbackHandler
+                            userManager={userManager.instance}
+                            handleSignInCallback={handleSigninCallbackClosure}
+                        />
+                    }
+                />
+                <Route
+                    path="silent-renew-callback"
+                    element={
+                        <SilentRenewCallbackHandler
+                            userManager={userManager.instance}
+                            handleSilentRenewCallback={
+                                handleSilentRenewCallbackClosure
                             }
                         />
-                    )}
-                </Route>
-            </Switch>
+                    }
+                />
+                <Route path="logout-callback" element={<Navigate to="/" />} />
+                <Route
+                    path="*"
+                    element={
+                        userManager.error === null && (
+                            <Login
+                                disabled={userManager.instance === null}
+                                onLoginClick={() =>
+                                    login(location, userManager.instance)
+                                }
+                            />
+                        )
+                    }
+                />
+            </Routes>
         </React.Fragment>
     );
 };

diff --git a/src/components/TopBar/TopBar.test.js b/src/components/TopBar/TopBar.test.js
@@ -7,7 +7,7 @@
 
 import expect from 'expect';
 import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 
@@ -28,7 +28,6 @@ beforeEach(() => {
 
 afterEach(() => {
     // cleanup on exiting
-    unmountComponentAtNode(container);
     container.remove();
     container = null;
 });
@@ -47,8 +46,9 @@ const theme = createTheme({
 });
 
 it('renders', () => {
+    const root = createRoot(container);
     act(() => {
-        render(
+        root.render(
             <ThemeProvider theme={theme}>
                 <IntlProvider locale="en" messages={top_bar_en}>
                     <TopBar
@@ -64,9 +64,11 @@ it('renders', () => {
                         <p>testchild</p>
                     </TopBar>
                 </IntlProvider>
-            </ThemeProvider>,
-            container
+            </ThemeProvider>
         );
     });
     expect(container.textContent).toContain('GridDemotestchildJD');
+    act(() => {
+        root.unmount();
+    });
 });
diff --git a/src/utils/AuthService.js b/src/utils/AuthService.js
@@ -187,13 +187,13 @@ function getPreLoginPath() {
     return sessionStorage.getItem(pathKey);
 }
 
-function handleSigninCallback(dispatch, history, userManagerInstance) {
+function handleSigninCallback(dispatch, navigate, userManagerInstance) {
     userManagerInstance
         .signinRedirectCallback()
         .then(function () {
             dispatch(setSignInCallbackError(null));
             const previousPath = getPreLoginPath();
-            history.replace(previousPath);
+            navigate(previousPath);
         })
         .catch(function (e) {
             dispatch(setSignInCallbackError(e));