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/assets/files/build-info.json

@@ -1 +1 @@
-{ "buildNumber": 265 }
+{ "buildNumber": 266 }

src/components/catalog/Catalog.tsx

@@ -2,7 +2,7 @@
 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 @@
           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 @@
           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 @@
   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 @@
           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 @@
   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 @@
           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

@@ -1,5 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.scss';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
@@ -11,15 +11,18 @@
 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>
@@ -29,9 +32,7 @@
         </ThemeProvider>
       </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

src/services/hid/KeyCategoryList.ts

@@ -13,6 +13,7 @@ import { LayerTapToggleComposition } from './compositions/LayerTapToggleComposit
 import { LooseKeycodeComposition } from './compositions/LooseKeycodeComposition';
 import { ViaUserKeyComposition } from './compositions/ViaUserKeyComposition';
 import { AsciiComposition } from './compositions/AsciiComposition';
+import { LayerModComposition } from './compositions/LayerModComposition';
 
 export class KeyCategory {
   private static _basic: { [pos: string]: IKeymap[] } = {};
@@ -128,6 +129,7 @@ export class KeyCategory {
     const keymaps: IKeymap[] = [
       ...ToComposition.genKeymaps(layerCount),
       ...ToggleLayerComposition.genKeymaps(layerCount),
+      ...LayerModComposition.genKeymaps(layerCount),
       ...LayerTapToggleComposition.genKeymaps(layerCount),
       ...MomentaryComposition.genKeymaps(layerCount),
       ...OneShotLayerComposition.genKeymaps(layerCount),