migrate to new arch

Author: Tristan-WorkGH

.env.development

@@ -1,3 +1 @@
 REACT_APP_USE_AUTHENTICATION=false
-
-REACT_APP_SRV_STUDY_URI=study-server

README.md

@@ -5,7 +5,7 @@ This template setup the authentication mechanism and provides a configured empty
 
 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.
 
-Create a new view in study-server and replace `yyy` with the new token in rest api `src/rest/study.ts`. 
+Create a new view in study-server and replace `yyy` with the new token in rest api `src/services/index.ts`. 
 
 ## Typescript config
 

src/components/app-top-bar.tsx

@@ -11,23 +11,24 @@ import React, {
     useEffect,
     useState,
 } from 'react';
-import {
-    AppMetadataCommon,
-    LIGHT_THEME,
-    logout,
-    TopBar,
-    UserManagerState,
-} from '@gridsuite/commons-ui';
 import Parameters, { useParameterState } from './parameters';
-import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
+import { APP_NAME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchAppsAndUrls, fetchVersion } from '../utils/rest-api';
-import { getServersInfos } from '../rest/study';
+import { appsMetadataSrv, studySrv } from '../services';
 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 { AppDispatch } from '../redux/store';
+import {
+    AppMetadataCommon,
+    LIGHT_THEME,
+    logout,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
+    TopBar,
+    UserManagerState,
+} from '@gridsuite/commons-ui';
 
 export type AppTopBarProps = {
     user?: AppState['user'];
@@ -50,14 +51,29 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
     const [showParameters, setShowParameters] = useState(false);
     const displayParameters = useCallback(() => setShowParameters(true), []);
     const hideParameters = useCallback(() => setShowParameters(false), []);
+    const onLogoutClick = useCallback(
+        () => logout(dispatch, props.userManager.instance),
+        [dispatch, props.userManager.instance]
+    );
 
     useEffect(() => {
         if (props.user !== undefined) {
-            fetchAppsAndUrls().then((res) => {
+            appsMetadataSrv.fetchAppsMetadata().then((res) => {
                 setAppsAndUrls(res);
             });
         }
     }, [props.user]);
+    const globalVersionFetcher = useCallback(
+        () =>
+            appsMetadataSrv
+                .fetchVersion()
+                .then((res) => res?.deployVersion ?? 'unknown'),
+        []
+    );
+    const additionalModulesFetcher = useCallback(
+        () => studySrv.getServersInfos('yyy'),
+        []
+    );
 
     return (
         <>
@@ -74,18 +90,12 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
                 appVersion={AppPackage.version}
                 appLicense={AppPackage.license}
                 onParametersClick={displayParameters}
-                onLogoutClick={() =>
-                    logout(dispatch, props.userManager.instance)
-                }
+                onLogoutClick={onLogoutClick}
                 onLogoClick={() => navigate('/', { replace: true })}
                 user={props.user}
                 appsAndUrls={appsAndUrls}
-                globalVersionPromise={() =>
-                    fetchVersion().then(
-                        (res) => res?.deployVersion ?? 'unknown'
-                    )
-                }
-                additionalModulesPromise={getServersInfos}
+                globalVersionPromise={globalVersionFetcher}
+                additionalModulesPromise={additionalModulesFetcher}
                 onThemeClick={handleChangeTheme}
                 theme={themeLocal}
                 onLanguageClick={handleChangeLanguage}

src/components/app-wrapper.tsx

@@ -22,6 +22,7 @@ import {
     LIGHT_THEME,
     login_en,
     login_fr,
+    PARAM_THEME,
     SnackbarProvider,
     top_bar_en,
     top_bar_fr,
@@ -34,7 +35,6 @@ import messages_fr from '../translations/fr.json';
 import messages_plugins_en from '../plugins/translations/en.json';
 import messages_plugins_fr from '../plugins/translations/fr.json';
 import { store } from '../redux/store';
-import { PARAM_THEME } from '../utils/config-params';
 import { IntlConfig } from 'react-intl/src/types';
 import { AppState } from '../redux/reducer';
 

src/components/app.tsx

@@ -25,9 +25,15 @@ import { Box, Typography } from '@mui/material';
 import {
     AuthenticationRouter,
     CardErrorBoundary,
+    COMMON_APP_NAME,
+    ConfigParameters,
+    getComputedLanguage,
+    getErrorMessage,
     getPreLoginPath,
     initializeAuthenticationDev,
     initializeAuthenticationProd,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import {
@@ -37,23 +43,14 @@ import {
 } from '../redux/actions';
 import { AppState } from '../redux/reducer';
 import {
-    ConfigParameters,
-    connectNotificationsWsUpdateConfig,
-    fetchConfigParameter,
-    fetchConfigParameters,
-    fetchIdpSettings,
-    fetchValidateUser,
-} from '../utils/rest-api';
-import {
-    APP_NAME,
-    COMMON_APP_NAME,
-    PARAM_LANGUAGE,
-    PARAM_THEME,
-} from '../utils/config-params';
-import { getComputedLanguage } from '../utils/language';
+    appLocalSrv,
+    configNotificationSrv,
+    configSrv,
+    userAdminSrv,
+} from '../services';
+import { APP_NAME } from '../utils/config-params';
 import AppTopBar, { AppTopBarProps } from './app-top-bar';
 import ReconnectingWebSocket from 'reconnecting-websocket';
-import { getErrorMessage } from '../utils/error';
 import { AppDispatch } from '../redux/store';
 
 const App: FunctionComponent = () => {
@@ -107,11 +104,15 @@ const App: FunctionComponent = () => {
 
     const connectNotificationsUpdateConfig =
         useCallback((): ReconnectingWebSocket => {
-            const ws = connectNotificationsWsUpdateConfig();
+            const ws =
+                configNotificationSrv.connectNotificationsWsUpdateConfig(
+                    APP_NAME
+                );
             ws.onmessage = function (event) {
                 let eventData = JSON.parse(event.data);
                 if (eventData.headers?.parameterName) {
-                    fetchConfigParameter(eventData.headers.parameterName)
+                    configSrv
+                        .fetchConfigParameter(eventData.headers.parameterName)
                         .then((param) => updateParams([param]))
                         .catch((error) =>
                             snackError({
@@ -152,8 +153,8 @@ const App: FunctionComponent = () => {
                         ? initializeAuthenticationProd(
                               dispatch,
                               initialMatchSilentRenewCallbackUrl != null,
-                              fetchIdpSettings,
-                              fetchValidateUser,
+                              appLocalSrv.fetchIdpSettings,
+                              userAdminSrv.fetchValidateUser,
                               initialMatchSigninCallbackUrl != null
                           )
                         : initializeAuthenticationDev(
@@ -182,7 +183,8 @@ const App: FunctionComponent = () => {
 
     useEffect(() => {
         if (user !== undefined) {
-            fetchConfigParameters(COMMON_APP_NAME)
+            configSrv
+                .fetchConfigParameters(COMMON_APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({
@@ -191,7 +193,8 @@ const App: FunctionComponent = () => {
                     })
                 );
 
-            fetchConfigParameters(APP_NAME)
+            configSrv
+                .fetchConfigParameters(APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({

src/components/parameters.tsx

@@ -29,7 +29,7 @@ import {
     TypographyTypeMap,
 } from '@mui/material';
 import { CSSObject, Theme } from '@emotion/react';
-import { updateConfigParameter } from '../utils/rest-api';
+import { configSrv } from '../services';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import { AppState, AppStateKey } from '../redux/reducer';
 
@@ -62,7 +62,8 @@ export function useParameterState<K extends AppStateKey>(
     const handleChangeParamLocalState = useCallback(
         (value: AppState[K]) => {
             setParamLocalState(value);
-            updateConfigParameter(paramName, value as string) //TODO how to check/cast?
+            configSrv
+                .updateConfigParameter(paramName, value as string) //TODO how to check/cast?
                 .catch((error) => {
                     setParamLocalState(paramGlobalState);
                     snackError({

src/react-app-env.d.ts

@@ -1,10 +1,12 @@
-/**
- * Copyright (c) 2024, RTE (http://www.rte-france.com)
+/*
+ * Copyright © 2024, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
  * 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 { UrlString } from '@gridsuite/commons-ui';
+
 /// <reference types="react-scripts" />
 
 import { UrlString } from '@gridsuite/commons-ui';
@@ -16,8 +18,8 @@ type EnvDev = {
 
 type EnvProd = {
     REACT_APP_USE_AUTHENTICATION: false;
-    REACT_APP_API_GATEWAY: string;
-    REACT_APP_WS_GATEWAY: string;
+    REACT_APP_API_GATEWAY: UrlString;
+    REACT_APP_WS_GATEWAY: UrlString;
 };
 
 type EnvCompile = EnvProd | EnvDev;

src/redux/actions.ts

@@ -5,8 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { GsTheme } from '@gridsuite/commons-ui';
-import { PARAM_LANGUAGE } from '../utils/config-params';
+import { GsTheme, PARAM_LANGUAGE } from '@gridsuite/commons-ui';
 import { Action } from 'redux';
 import { AppState } from './reducer';
 

src/redux/local-storage.ts

@@ -6,12 +6,6 @@
  */
 
 import { createReducer, Draft } from '@reduxjs/toolkit';
-import {
-    getLocalStorageComputedLanguage,
-    getLocalStorageLanguage,
-    getLocalStorageTheme,
-    saveLocalStorageTheme,
-} from './local-storage';
 import {
     ComputedLanguageAction,
     LanguageAction,
@@ -23,12 +17,18 @@ import {
     AuthenticationActions,
     AuthenticationRouterErrorAction,
     AuthenticationRouterErrorState,
+    getLocalStorageComputedLanguage,
+    getLocalStorageLanguage,
+    getLocalStorageTheme,
     GsLang,
     GsLangUser,
     GsTheme,
     LOGOUT_ERROR,
     LogoutErrorAction,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
     RESET_AUTHENTICATION_ROUTER_ERROR,
+    saveLocalStorageTheme,
     SHOW_AUTH_INFO_LOGIN,
     ShowAuthenticationRouterLoginAction,
     SIGNIN_CALLBACK_ERROR,
@@ -40,9 +40,9 @@ import {
     UserAction,
     UserValidationErrorAction,
 } from '@gridsuite/commons-ui';
-import { PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { ReducerWithInitialState } from '@reduxjs/toolkit/dist/createReducer';
 import { User } from 'oidc-client';
+import { APP_NAME } from '../utils/config-params';
 
 export type AppState = {
     user: User | undefined;
@@ -63,9 +63,9 @@ const initialState: AppState = {
     showAuthenticationRouterLogin: false,
 
     // params
-    [PARAM_THEME]: getLocalStorageTheme(),
-    [PARAM_LANGUAGE]: getLocalStorageLanguage(),
-    computedLanguage: getLocalStorageComputedLanguage(),
+    [PARAM_THEME]: getLocalStorageTheme(APP_NAME),
+    [PARAM_LANGUAGE]: getLocalStorageLanguage(APP_NAME),
+    computedLanguage: getLocalStorageComputedLanguage(APP_NAME),
 };
 
 export type Actions =
@@ -83,7 +83,7 @@ export const reducer: ReducerWithInitialState<AppState> = createReducer(
             SELECT_THEME,
             (state: Draft<AppState>, action: ThemeAction) => {
                 state.theme = action.theme;
-                saveLocalStorageTheme(state.theme);
+                saveLocalStorageTheme(APP_NAME, state.theme);
             }
         );