Refactor for React 18

Author: AntoineGautier

client/src/components/layouts/SidebarLayout.jsx

@@ -7,12 +7,9 @@ import { useLocation } from "react-router-dom";
 import { useStores } from "../../data";
 import { observer } from "mobx-react";
 
-import itl from "../../translations";
-
 const Sidebarlayout = observer(
   ({ contentLeft, contentRight, isFullScreen = true }) => {
     const { uiStore, projectStore } = useStores();
-    const projectDetails = projectStore.getProjectDetails();
 
     const [isDragging, setIsDragging] = useState(false);
     const [modalOpen, setModalOpen] = useState(false);

client/src/components/modal/EditDetailsModal.tsx

@@ -1,8 +1,6 @@
 // import { Field, Form, Formik } from "formik";
 import Modal, { ModalInterface } from "./Modal";
-import itl from "../../translations";
 import { useStores } from "../../data";
-import { getFormData } from "../../utils/dom-utils";
 import { observer } from "mobx-react";
 import { ChangeEvent, SyntheticEvent, useState } from "react";
 import { ProjectDetailInterface } from "../../data/project";
@@ -19,7 +17,6 @@ import {
 import {
   applyValueModifiers,
   applyVisibilityModifiers,
-  Modifiers,
   ConfigValues,
 } from "../../utils/modifier-helpers";
 
@@ -318,7 +315,7 @@ const EditDetailsModal = observer(
                 defaultValue={formInputs.size}
               />
             </label>*/}
-            
+
           {/*<div className="grid">
             <label htmlFor="units">
               {itl.terms.units}

client/src/components/steps/Configs/Config.tsx

@@ -7,7 +7,7 @@ import SlideOut from "./SlideOut";
 import { useStores } from "../../../data";
 
 import { OptionInterface, TemplateInterface } from "../../../data/template";
-import { Modifiers, ConfigValues } from "../../../utils/modifier-helpers";
+import { ConfigValues } from "../../../utils/modifier-helpers";
 import { ConfigInterface } from "../../../data/config";
 import Spinner from "../../Spinner";
 
@@ -21,11 +21,6 @@ const Config = observer(({ configId }: ConfigProps) => {
   const template = templateStore.getTemplateByPath(
     config.templatePath,
   ) as TemplateInterface;
-  const templateOptions: OptionInterface[] =
-    templateStore.getOptionsForTemplate(template?.modelicaPath);
-  const templateModifiers: Modifiers = templateStore.getModifiersForTemplate(
-    template?.modelicaPath,
-  );
   const selections: ConfigValues = configStore.getConfigSelections(configId);
   const allOptions: { [key: string]: OptionInterface } =
     templateStore.getAllOptions();

client/src/index.jsx

@@ -1,13 +1,14 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from "react-router-dom";
 import App from "./App";
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <React.StrictMode>
     <Router>
       <App />
     </Router>
-  </React.StrictMode>,
-  document.getElementById("root"),
+  </React.StrictMode>
 );

client/src/utils/expression-helpers.ts

@@ -1,6 +1,5 @@
-import { storeHooks } from "./store-helpers";
 import { deepCopy } from "./utils";
-import { Modifiers, applyPathModifiers } from "./modifier-helpers";
+import { applyPathModifiers } from "./modifier-helpers";
 import { OptionInterface } from "../data/template";
 
 export type Literal = boolean | string | number;