Apply latest template

Use TypeScript template instead

Author: Tristan-WorkGH

README.md

@@ -1,11 +1,11 @@
 # 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.
 
 ## 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-lock.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,12 @@
         "@mui/lab": "^5.0.0-alpha.75",
         "@mui/material": "^5.5.3",
         "@reduxjs/toolkit": "^1.2.3",
-        "@types/node": "^20.2.5",
+        "@types/core-js": "^2.5.8",
+        "@types/node": "^18.19.3",
+        "@types/prop-types": "^15.7.11",
         "@types/react": "^18.2.9",
         "@types/react-dom": "^18.2.4",
+        "@types/react-window": "^1.8.8",
         "core-js": "^3.6.4",
         "notistack": "^3.0.0",
         "prop-types": "^15.7.2",
@@ -36,13 +43,18 @@
     "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,6 +79,10 @@
         ]
     },
     "devDependencies": {
+        "@types/eslint-config-prettier": "^6.11.3",
+        "@types/eslint-plugin-prettier": "^3.1.3",
+        "@types/jest": "^27.5.1",
+        "@types/prettier": "^2.0.2",
         "eslint-config-prettier": "^8.0.0",
         "eslint-plugin-prettier": "^4.0.0",
         "http-proxy-middleware": "^2.0.0",

package.json

@@ -4,26 +4,37 @@
  * 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, 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 { 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';
+import { UserManager } from 'oidc-client';
 
-const AppTopBar = ({ user, userManager }) => {
+export type AppTopBarProps = {
+    user?: AppState['user'];
+    userManager: {
+        instance: UserManager | null;
+        error: string | null;
+    };
+};
+const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
     const navigate = useNavigate();
 
     const dispatch = useDispatch();
 
-    const [appsAndUrls, setAppsAndUrls] = useState([]);
+    const [appsAndUrls, setAppsAndUrls] = useState<
+        Awaited<ReturnType<typeof fetchAppsAndUrls>>
+    >([]);
 
-    const theme = useSelector((state) => state[PARAM_THEME]);
+    const theme = useSelector((state: AppState) => state[PARAM_THEME]);
 
     const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME);
 
@@ -33,12 +44,12 @@ const AppTopBar = ({ user, userManager }) => {
     const [showParameters, setShowParameters] = useState(false);
 
     useEffect(() => {
-        if (user !== null) {
+        if (props.user !== null) {
             fetchAppsAndUrls().then((res) => {
                 setAppsAndUrls(res);
             });
         }
-    }, [user]);
+    }, [props.user]);
 
     return (
         <>
@@ -55,9 +66,11 @@ const AppTopBar = ({ user, userManager }) => {
                 appVersion={AppPackage.version}
                 appLicense={AppPackage.license}
                 onParametersClick={() => setShowParameters(true)}
-                onLogoutClick={() => logout(dispatch, userManager.instance)}
-                onLogoClick={() => navigate.replace('/')}
-                user={user}
+                onLogoutClick={() =>
+                    logout(dispatch, props.userManager.instance)
+                }
+                onLogoClick={() => navigate('/', { replace: true })}
+                user={props.user}
                 appsAndUrls={appsAndUrls}
                 globalVersionPromise={() =>
                     fetchVersion().then((res) => res?.deployVersion)
@@ -75,10 +88,4 @@ const AppTopBar = ({ user, userManager }) => {
         </>
     );
 };
-
-AppTopBar.propTypes = {
-    user: PropTypes.object,
-    userManager: PropTypes.object.isRequired,
-};
-
 export default AppTopBar;