deduplicate config & local-storage

Author: Tristan-WorkGH

src/components/App/app-top-bar.tsx

@@ -16,13 +16,15 @@ import {
 } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
 import { ManageAccounts, PeopleAlt } from '@mui/icons-material';
-import { AppMetadataCommon, logout, TopBar } from '@gridsuite/commons-ui';
-import { useParameterState } from '../parameters';
 import {
-    APP_NAME,
+    AppMetadataCommon,
+    logout,
     PARAM_LANGUAGE,
     PARAM_THEME,
-} from '../../utils/config-params';
+    TopBar,
+} from '@gridsuite/commons-ui';
+import { useParameterState } from '../parameters';
+import { APP_NAME } from '../../utils/config-params';
 import { NavLink, useMatches, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';

src/components/App/app-wrapper.tsx

@@ -26,6 +26,7 @@ import {
     LIGHT_THEME,
     login_en,
     login_fr,
+    PARAM_THEME,
     SnackbarProvider,
     top_bar_en,
     top_bar_fr,
@@ -35,7 +36,6 @@ import { Provider, useSelector } from 'react-redux';
 import messages_en from '../../translations/en.json';
 import messages_fr from '../../translations/fr.json';
 import { store } from '../../redux/store';
-import { PARAM_THEME } from '../../utils/config-params';
 import { AppState } from '../../redux/reducer';
 import { AppWithAuthRouter } from '../../routes';
 

src/components/App/app.tsx

@@ -15,7 +15,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Grid } from '@mui/material';
 import {
     CardErrorBoundary,
+    COMMON_APP_NAME,
     ConfigParameters,
+    getComputedLanguage,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import {
@@ -24,16 +28,9 @@ import {
     selectTheme,
 } from '../../redux/actions';
 import { AppState } from '../../redux/reducer';
-import { configSrv, configNotificationSrv } from '../../services';
-import {
-    APP_NAME,
-    COMMON_APP_NAME,
-    PARAM_LANGUAGE,
-    PARAM_THEME,
-} from '../../utils/config-params';
-import { getComputedLanguage } from '../../utils/language';
+import { configNotificationSrv, configSrv } from '../../services';
+import { APP_NAME } from '../../utils/config-params';
 import AppTopBar from './app-top-bar';
-import ReconnectingWebSocket from 'reconnecting-websocket';
 import { useDebugRender } from '../../utils/hooks';
 import { AppDispatch } from '../../redux/store';
 
@@ -69,31 +66,28 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
         [dispatch]
     );
 
-    const connectNotificationsUpdateConfig =
-        useCallback((): ReconnectingWebSocket => {
-            const ws =
-                configNotificationSrv.connectNotificationsWsUpdateConfig(
-                    APP_NAME
-                );
-            ws.onmessage = function (event) {
-                let eventData = JSON.parse(event.data);
-                if (eventData?.headers?.parameterName) {
-                    configSrv
-                        .fetchConfigParameter(eventData.headers.parameterName)
-                        .then((param) => updateParams([param]))
-                        .catch((error) =>
-                            snackError({
-                                messageTxt: error.message,
-                                headerId: 'paramsRetrievingError',
-                            })
-                        );
-                }
-            };
-            ws.onerror = function (event) {
-                console.error('Unexpected Notification WebSocket error', event);
-            };
-            return ws;
-        }, [updateParams, snackError]);
+    const connectNotificationsUpdateConfig = useCallback(() => {
+        const ws =
+            configNotificationSrv.connectNotificationsWsUpdateConfig(APP_NAME);
+        ws.onmessage = function (event) {
+            let eventData = JSON.parse(event.data);
+            if (eventData?.headers?.parameterName) {
+                configSrv
+                    .fetchConfigParameter(eventData.headers.parameterName)
+                    .then((param) => updateParams([param]))
+                    .catch((error) =>
+                        snackError({
+                            messageTxt: error.message,
+                            headerId: 'paramsRetrievingError',
+                        })
+                    );
+            }
+        };
+        ws.onerror = function (event) {
+            console.error('Unexpected Notification WebSocket error', event);
+        };
+        return ws;
+    }, [updateParams, snackError]);
 
     useEffect(() => {
         if (user !== null) {

src/redux/actions.ts

@@ -5,8 +5,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { GsTheme, UserManagerState } from '@gridsuite/commons-ui';
-import { PARAM_LANGUAGE } from '../utils/config-params';
+import {
+    GsLang,
+    GsTheme,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
+    UserManagerState,
+} from '@gridsuite/commons-ui';
 import { Action } from 'redux';
 import { AppState } from './reducer';
 
@@ -54,7 +59,7 @@ export function updateUserManagerError(
 
 export const SELECT_THEME = 'SELECT_THEME';
 export type ThemeAction = Readonly<Action<typeof SELECT_THEME>> & {
-    theme: GsTheme;
+    [PARAM_THEME]: AppState[typeof PARAM_THEME];
 };
 
 export function selectTheme(theme: GsTheme): ThemeAction {
@@ -63,10 +68,10 @@ export function selectTheme(theme: GsTheme): ThemeAction {
 
 export const SELECT_LANGUAGE = 'SELECT_LANGUAGE';
 export type LanguageAction = Readonly<Action<typeof SELECT_LANGUAGE>> & {
-    [PARAM_LANGUAGE]: AppState['language'];
+    [PARAM_LANGUAGE]: AppState[typeof PARAM_LANGUAGE];
 };
 
-export function selectLanguage(language: AppState['language']): LanguageAction {
+export function selectLanguage(language: GsLang): LanguageAction {
     return { type: SELECT_LANGUAGE, [PARAM_LANGUAGE]: language };
 }
 

src/redux/local-storage.ts

@@ -6,13 +6,6 @@
  */
 
 import { createReducer, Draft } from '@reduxjs/toolkit';
-import {
-    getLocalStorageComputedLanguage,
-    getLocalStorageLanguage,
-    getLocalStorageTheme,
-    saveLocalStorageTheme,
-} from './local-storage';
-
 import {
     ComputedLanguageAction,
     LanguageAction,
@@ -30,12 +23,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,
@@ -48,9 +47,9 @@ import {
     UserManagerState,
     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;
@@ -76,9 +75,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 =
@@ -99,7 +98,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);
             }
         );
 

src/redux/reducer.ts

@@ -5,29 +5,4 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { LiteralUnion } from 'type-fest';
-
-export const COMMON_APP_NAME = 'common';
 export const APP_NAME = 'admin';
-
-export const PARAM_THEME = 'theme';
-export const PARAM_LANGUAGE = 'language';
-
-const COMMON_CONFIG_PARAMS_NAMES = new Set([PARAM_THEME, PARAM_LANGUAGE]);
-
-export type AppConfigParameter = LiteralUnion<
-    typeof PARAM_THEME | typeof PARAM_LANGUAGE,
-    string
->;
-
-export type AppConfigType = typeof COMMON_APP_NAME | typeof APP_NAME;
-
-/**
- * Permit knowing if a parameter is common/shared between webapps or is specific to this application.
- * @param paramName the parameter name/key
- */
-export function getAppName(paramName: AppConfigParameter): AppConfigType {
-    return COMMON_CONFIG_PARAMS_NAMES.has(paramName)
-        ? COMMON_APP_NAME
-        : APP_NAME;
-}