Migrate codebase to typescript (#57)

Signed-off-by: Tristan Chuine <[email protected]>
Co-authored-by: Joris Mancini <[email protected]>

README.md

@@ -1,7 +1,7 @@
 # GridXXX-App
 
-Template app that bootstraps the creation of gridsuite apps.
-The template setup the authentication mechanism and provide a configured empty application.
+Template app that bootstraps the creation of GridSuite apps.
+This template setup the authentication mechanism and provides a configured empty application.
 
 To customize this repository for an app, search and replace the string `XXX` with the name of the app. For example, GridXXX -> GridFoo, gridXXX-app -> gridfoo-app.
 
@@ -10,4 +10,4 @@ Create a new view in study-server and replace `yyy` with the new token in rest a
 ## Typescript config
 
 Files tsconfig.json and src/react-app-env.d.ts both results from create-react-app typescript template (version 5).
-Some property values have been changed to meet the project needs (ex: target, baseUrl,...).
+Some property values have been changed to meet the project needs (ex: target, baseUrl, ...).

package.json

@@ -4,6 +4,10 @@
     "license": "MPL-2.0",
     "homepage": ".",
     "private": true,
+    "engines": {
+        "node": ">=18",
+        "npm": "^10.2.0"
+    },
     "dependencies": {
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
@@ -13,9 +17,6 @@
         "@mui/lab": "^5.0.0-alpha.75",
         "@mui/material": "^5.5.3",
         "@reduxjs/toolkit": "^1.2.3",
-        "@types/node": "^20.2.5",
-        "@types/react": "^18.2.9",
-        "@types/react-dom": "^18.2.4",
         "core-js": "^3.6.4",
         "notistack": "^3.0.0",
         "prop-types": "^15.7.2",
@@ -30,19 +31,23 @@
         "reconnecting-websocket": "^4.4.0",
         "redux": "^4.0.5",
         "typeface-roboto": "^1.0.0",
-        "typescript": "^5.1.3",
         "yup": "^1.2.0"
     },
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test --watchAll=false --transformIgnorePatterns \"node_modules/(?!@gridsuite/commons-ui)/\"",
+        "test": "react-scripts test --watchAll=false",
+        "test:watch": "react-scripts test",
+        "test:coverage": "react-scripts test --coverage",
         "eject": "react-scripts eject"
     },
     "jest": {
         "moduleNameMapper": {
             "\\.svg": "<rootDir>/src/__mocks__/svgrMock.js"
-        }
+        },
+        "transformIgnorePatterns": [
+            "node_modules/(?!@gridsuite/commons-ui)/"
+        ]
     },
     "eslintConfig": {
         "extends": [
@@ -67,9 +72,20 @@
         ]
     },
     "devDependencies": {
+        "@types/core-js": "^2.5.8",
+        "@types/eslint-config-prettier": "^6.11.3",
+        "@types/eslint-plugin-prettier": "^3.1.3",
+        "@types/jest": "^27.5.1",
+        "@types/node": "^18.19.3",
+        "@types/prettier": "^2.0.2",
+        "@types/prop-types": "^15.7.11",
+        "@types/react": "^18.2.9",
+        "@types/react-dom": "^18.2.4",
+        "@types/react-window": "^1.8.8",
         "eslint-config-prettier": "^8.0.0",
         "eslint-plugin-prettier": "^4.0.0",
         "http-proxy-middleware": "^2.0.0",
-        "prettier": "^2.0.0"
+        "prettier": "^2.0.0",
+        "typescript": "^5.1.3"
     }
 }

src/components/app-top-bar.js → src/components/app-top-bar.tsx

@@ -4,41 +4,60 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import React, { useEffect, useState } from 'react';
+
+import React, {
+    FunctionComponent,
+    useCallback,
+    useEffect,
+    useState,
+} from 'react';
 import { LIGHT_THEME, logout, TopBar } from '@gridsuite/commons-ui';
 import Parameters, { useParameterState } from './parameters';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchAppsAndUrls, fetchVersion } from '../utils/rest-api';
+import {
+    fetchAppsAndUrls,
+    fetchVersion,
+    MetadataJson,
+} from '../utils/rest-api';
 import { getServersInfos } from '../rest/study';
-import PropTypes from 'prop-types';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as PowsyblLogo } from '../images/powsybl_logo.svg';
 import AppPackage from '../../package.json';
+import { AppState } from '../redux/reducer';
 
-const AppTopBar = ({ user, userManager }) => {
+export type AppTopBarProps = {
+    user?: AppState['user'];
+    userManager: {
+        instance: unknown | null;
+        error: string | null;
+    };
+};
+const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
     const navigate = useNavigate();
 
     const dispatch = useDispatch();
 
-    const [appsAndUrls, setAppsAndUrls] = useState([]);
+    const [appsAndUrls, setAppsAndUrls] = useState<MetadataJson[]>([]);
 
-    const theme = useSelector((state) => state[PARAM_THEME]);
+    const theme = useSelector((state: AppState) => state[PARAM_THEME]);
 
     const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME);
 
     const [languageLocal, handleChangeLanguage] =
         useParameterState(PARAM_LANGUAGE);
 
     const [showParameters, setShowParameters] = useState(false);
+    const displayParameters = useCallback(() => setShowParameters(true), []);
+    const hideParameters = useCallback(() => setShowParameters(false), []);
 
     useEffect(() => {
-        if (user !== null) {
+        if (props.user !== null) {
             fetchAppsAndUrls().then((res) => {
                 setAppsAndUrls(res);
             });
         }
-    }, [user]);
+    }, [props.user]);
 
     return (
         <>
@@ -54,10 +73,12 @@ const AppTopBar = ({ user, userManager }) => {
                 }
                 appVersion={AppPackage.version}
                 appLicense={AppPackage.license}
-                onParametersClick={() => setShowParameters(true)}
-                onLogoutClick={() => logout(dispatch, userManager.instance)}
-                onLogoClick={() => navigate.replace('/')}
-                user={user}
+                onParametersClick={displayParameters}
+                onLogoutClick={() =>
+                    logout(dispatch, props.userManager.instance)
+                }
+                onLogoClick={() => navigate('/', { replace: true })}
+                user={props.user}
                 appsAndUrls={appsAndUrls}
                 globalVersionPromise={() =>
                     fetchVersion().then((res) => res?.deployVersion)
@@ -70,15 +91,9 @@ const AppTopBar = ({ user, userManager }) => {
             />
             <Parameters
                 showParameters={showParameters}
-                hideParameters={() => setShowParameters(false)}
+                hideParameters={hideParameters}
             />
         </>
     );
 };
-
-AppTopBar.propTypes = {
-    user: PropTypes.object,
-    userManager: PropTypes.object.isRequired,
-};
-
 export default AppTopBar;