Merge pull request #840 from L4Ph/upgrade-react-18

Migrate to React 18

package.json

@@ -9,8 +9,6 @@
     "@mui/material": "^5.15.19",
     "@mui/styles": "^5.15.19",
     "@pdf-lib/fontkit": "^1.1.1",
-    "@types/react-helmet-async": "^1.0.3",
-    "@types/react-image-gallery": "^1.0.4",
     "ajv": "^7.0.3",
     "axios": "^0.21.1",
     "date-fns": "^3.6.0",
@@ -22,13 +20,13 @@
     "pdf-lib": "^1.16.0",
     "prop-types": "^15.7.2",
     "qs": "^6.10.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-draggable": "^4.4.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.6",
     "react-google-charts": "^4.0.1",
-    "react-helmet-async": "^1.0.9",
-    "react-image-gallery": "^1.2.7",
-    "react-redux": "^7.2.2",
+    "react-helmet-async": "^2.0.5",
+    "react-image-gallery": "^1.3.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.2.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
@@ -85,9 +83,9 @@
     "@types/node": "^14.14.22",
     "@types/prop-types": "^15.7.4",
     "@types/qs": "^6.9.6",
-    "@types/react": "17.0.8",
-    "@types/react-dom": "17.0.11",
-    "@types/react-redux": "^7.1.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-image-gallery": "^1.2.4",
     "@types/react-router-dom": "^5.1.6",
     "@types/sinon": "^10.0.2",
     "@types/w3c-web-hid": "^1.0.1",

src/components/catalog/Catalog.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Button, CssBaseline } from '@mui/material';
 import Header from './header/Header.container';
 import Content from './content/Content.container';
-import { OptionsObject, ProviderContext, withSnackbar } from 'notistack';
+import { OptionsObject, ProviderContext, SnackbarKey, withSnackbar } from 'notistack';
 import { CatalogActionsType, CatalogStateType } from './Catalog.container';
 import { NotificationItem } from '../../actions/actions';
 import CloseIcon from '@mui/icons-material/Close';
@@ -49,7 +49,7 @@ function Catalog(props: CatalogProps) {
           removeDisplayedNotification(key as string);
         },
         // eslint-disable-next-line react/display-name
-        action: (key: number) => (
+        action: (key: SnackbarKey) => (
           <Button
             onClick={() => {
               // eslint-disable-next-line react/prop-types

src/components/configure/Configure.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import React, { useEffect, useState } from 'react';
 import './Configure.scss';
-import { OptionsObject, ProviderContext, withSnackbar } from 'notistack';
+import { OptionsObject, ProviderContext, SnackbarKey, withSnackbar } from 'notistack';
 import Header from './header/Header.container';
 import Content from './content/Content.container';
 import {
@@ -50,7 +50,7 @@ function Configure(props: ConfigureProps) {
           removeDisplayedNotification(key as string);
         },
         // eslint-disable-next-line react/display-name
-        action: (key: number) => (
+        action: (key: SnackbarKey) => (
           <Button
             onClick={() => {
               props.closeSnackbar(key);

src/components/keyboards/KeyboardDefinitionManagement.tsx

@@ -3,7 +3,7 @@ import {
   KeyboardDefinitionManagementActionsType,
   KeyboardDefinitionManagementStateType,
 } from './KeyboardDefinitionManagement.container';
-import { OptionsObject, ProviderContext, withSnackbar } from 'notistack';
+import { OptionsObject, ProviderContext, SnackbarKey, withSnackbar } from 'notistack';
 import { NotificationItem } from '../../actions/actions';
 import { Button, CssBaseline } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
@@ -50,7 +50,7 @@ function KeyboardDefinitionManagement(
           removeDisplayedNotification(key as string);
         },
         // eslint-disable-next-line react/display-name
-        action: (key: number) => (
+        action: (key: SnackbarKey) => (
           <Button
             onClick={() => {
               // eslint-disable-next-line react/prop-types

src/components/organizations/OrganizationManagement.tsx

@@ -2,7 +2,7 @@ import {
   OrganizationManagementActionsType,
   OrganizationManagementStateType,
 } from './OrganizationManagement.container';
-import { OptionsObject, ProviderContext, withSnackbar } from 'notistack';
+import { OptionsObject, ProviderContext, SnackbarKey, withSnackbar } from 'notistack';
 import { NotificationItem } from '../../actions/actions';
 import React, { useEffect, useState } from 'react';
 import { Button, CssBaseline } from '@mui/material';
@@ -48,7 +48,7 @@ function OrganizationManagement(props: OrganizationManagementProps) {
           removeDisplayedNotification(key as string);
         },
         // eslint-disable-next-line react/display-name
-        action: (key: number) => (
+        action: (key: SnackbarKey) => (
           <Button
             onClick={() => {
               // eslint-disable-next-line react/prop-types

src/index.tsx

@@ -11,15 +11,18 @@ import reportWebVitals from './reportWebVitals';
 import OGP from './components/common/ogp/OGP.container';
 import { HelmetProvider } from 'react-helmet-async';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createRoot } from "react-dom/client"
 
 const store = createStore(
   reducers,
   composeWithDevTools(applyMiddleware(thunk))
 );
 
 const theme = createTheme({});
+const container = document.getElementById('root');
+const root = createRoot(container!);
 
-ReactDOM.render(
+root.render(
   <Provider store={store}>
     <React.StrictMode>
       <HelmetProvider>
@@ -30,8 +33,6 @@ ReactDOM.render(
       </HelmetProvider>
     </React.StrictMode>
   </Provider>,
-  // eslint-disable-next-line no-undef
-  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function