Migrate reducer to TypeScript

package.json

@@ -72,6 +72,7 @@
         "@types/eslint": "^8.56.9",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/identity-obj-proxy": "^3.0.2",
+        "@types/jest": "^29.5.12",
         "@types/license-checker": "^25.0.6",
         "@types/localized-countries": "^2.0.3",
         "@types/lucene-escape-query": "^1.0.2",
@@ -106,8 +107,9 @@
         "jest-environment-jsdom": "^29.7.0",
         "license-checker": "^25.0.1",
         "prettier": "^2.8.8",
-        "typescript": "5.1.6",
         "ts-node": "^10.9.2",
+        "type-fest": "^4.22.1",
+        "typescript": "5.1.6",
         "vite": "^5.2.7",
         "vite-plugin-eslint": "^1.8.1",
         "vite-plugin-svgr": "^4.2.0",

src/components/app.jsx

@@ -10,6 +10,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
     getOptionalServiceByServerName,
+    OptionalServicesNames,
     OptionalServicesStatus,
 } from './utils/optional-services';
 import {
@@ -104,7 +105,6 @@ import {
     setOptionalServices,
     setParamsLoaded,
 } from '../redux/actions';
-import { defaultOptionalServicesState } from '../redux/reducer';
 
 const noUserManager = { instance: null, error: null };
 
@@ -476,10 +476,9 @@ const App = () => {
                         };
                     });
                     // get all potentially optional services
-                    const optionalServicesNames =
-                        defaultOptionalServicesState.map(
-                            (service) => service.name
-                        );
+                    const optionalServicesNames = Object.keys(
+                        OptionalServicesNames
+                    );
 
                     // if one of those services was not returned by "getOptionalServices", it means it was defined as "not optional"
                     // in that case, we consider it is UP

src/components/computing-status/use-computing-status.ts

@@ -11,12 +11,13 @@ import { UUID } from 'crypto';
 import { RefObject, useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ComputingType } from './computing-type';
-import { ReduxState, StudyUpdated } from 'redux/reducer.type';
+import { AppState, StudyUpdated } from 'redux/reducer';
 import { OptionalServicesStatus } from '../utils/optional-services';
 import {
     setComputingStatus,
     setLastCompletedComputation,
 } from '../../redux/actions';
+import { AppDispatch } from '../../redux/store';
 
 interface UseComputingStatusProps {
     (
@@ -98,10 +99,10 @@ export const useComputingStatus: UseComputingStatusProps = (
 ) => {
     const nodeUuidRef = useRef<UUID | null>(null);
     const studyUpdatedForce = useSelector(
-        (state: ReduxState) => state.studyUpdated
+        (state: AppState) => state.studyUpdated
     );
     const lastUpdateRef = useRef<LastUpdateProps | null>(null);
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
 
     //the callback crosschecks the computation status and the content of the last update reference
     //in order to determine which computation just ended

src/components/diagrams/diagram-common.js → src/components/diagrams/diagram-common.ts

@@ -18,8 +18,10 @@ import {
     INVALID_LOADFLOW_OPACITY,
     NAD_INVALID_LOADFLOW_OPACITY,
 } from '../../utils/colors';
-import { FEEDER_TYPES } from 'components/utils/feederType';
+import { FEEDER_TYPES, FeederTypes } from 'components/utils/feederType';
 import { EQUIPMENT_TYPES } from 'components/utils/equipment-types';
+import { Theme } from '@mui/material';
+import { AppDispatch } from '../../redux/store';
 
 export const LOADING_WIDTH = 300;
 export const LOADING_HEIGHT = 300;
@@ -46,7 +48,7 @@ export const DEFAULT_HEIGHT_NETWORK_AREA_DIAGRAM = 400;
 export const MAP_BOTTOM_OFFSET = 80;
 
 // Percentage of the diagram pane's total height that correspond to the minimum
-// height of opened diagrams : diagrams should not be smaller than 25% of the
+// height of opened diagrams: diagrams should not be smaller than 25% of the
 // diagram pane's height.
 export const DIAGRAM_MAP_RATIO_MIN_PERCENTAGE = 0.25;
 
@@ -62,7 +64,7 @@ export const styles = {
         },
         overflow: 'hidden',
     },
-    divNetworkAreaDiagram: (theme) => ({
+    divNetworkAreaDiagram: (theme: Theme) => ({
         '& .nad-label-box': {
             color: theme.palette.text.primary,
             fontFamily: theme.typography.fontFamily,
@@ -71,7 +73,7 @@ export const styles = {
             stroke: theme.palette.text.primary,
         },
     }),
-    divSingleLineDiagram: (theme) => ({
+    divSingleLineDiagram: (theme: Theme) => ({
         '& polyline': {
             pointerEvents: 'none',
         },
@@ -116,35 +118,35 @@ export const styles = {
             opacity: NAD_INVALID_LOADFLOW_OPACITY,
         },
     },
-    paperBorders: (theme) => ({
+    paperBorders: (theme: Theme) => ({
         borderLeft: '1px solid ' + theme.palette.action.disabled,
         borderBottom: '1px solid ' + theme.palette.action.disabledBackground,
         borderRight: '1px solid ' + theme.palette.action.hover,
     }),
 };
 
-export const ViewState = {
-    PINNED: 'pinned',
-    MINIMIZED: 'minimized',
-    OPENED: 'opened',
-};
+export enum ViewState {
+    PINNED = 'pinned',
+    MINIMIZED = 'minimized',
+    OPENED = 'opened',
+}
 
-export const SubstationLayout = {
-    HORIZONTAL: 'horizontal',
-    VERTICAL: 'vertical',
-    SMART: 'smart',
-    SMARTHORIZONTALCOMPACTION: 'smartHorizontalCompaction',
-    SMARTVERTICALCOMPACTION: 'smartVerticalCompaction',
-};
+export enum SubstationLayout {
+    HORIZONTAL = 'horizontal',
+    VERTICAL = 'vertical',
+    SMART = 'smart',
+    SMARTHORIZONTALCOMPACTION = 'smartHorizontalCompaction',
+    SMARTVERTICALCOMPACTION = 'smartVerticalCompaction',
+}
 
-export const DiagramType = {
-    VOLTAGE_LEVEL: 'voltage-level',
-    SUBSTATION: 'substation',
-    NETWORK_AREA_DIAGRAM: 'network-area-diagram',
-};
+export enum DiagramType {
+    VOLTAGE_LEVEL = 'voltage-level',
+    SUBSTATION = 'substation',
+    NETWORK_AREA_DIAGRAM = 'network-area-diagram',
+}
 
 // be careful when using this method because there are treatments made on purpose
-export function getEquipmentTypeFromFeederType(feederType) {
+export function getEquipmentTypeFromFeederType(feederType: FeederTypes) {
     switch (feederType) {
         case FEEDER_TYPES.LINE:
             return EQUIPMENT_TYPES.LINE;
@@ -181,7 +183,7 @@ export function getEquipmentTypeFromFeederType(feederType) {
     }
 }
 
-export function getFeederTypeFromEquipmentType(equipmentType) {
+export function getFeederTypeFromEquipmentType(equipmentType: EQUIPMENT_TYPES) {
     switch (equipmentType) {
         case EQUIPMENT_TYPES.SUBSTATION:
             return FEEDER_TYPES.SUBSTATION;
@@ -220,38 +222,38 @@ export function getFeederTypeFromEquipmentType(equipmentType) {
 }
 
 export const useDiagram = () => {
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
 
     const openDiagramView = useCallback(
-        (id, type) => {
+        (id: string, type: DiagramType) => {
             dispatch(openDiagram(id, type));
         },
         [dispatch]
     );
 
     const togglePinDiagramView = useCallback(
-        (id, type) => {
+        (id: string, type: DiagramType) => {
             dispatch(togglePinDiagram(id, type));
         },
         [dispatch]
     );
 
     const minimizeDiagramView = useCallback(
-        (id, type) => {
+        (id: string, type: DiagramType) => {
             dispatch(minimizeDiagram(id, type));
         },
         [dispatch]
     );
 
     const closeDiagramView = useCallback(
-        (id, type) => {
+        (id: string, type: DiagramType) => {
             dispatch(closeDiagram(id, type));
         },
         [dispatch]
     );
 
     const closeDiagramViews = useCallback(
-        (idsToRemove) => {
+        (idsToRemove: string[]) => {
             dispatch(closeDiagrams(idsToRemove));
         },
         [dispatch]

src/components/diagrams/diagram-pane.jsx

@@ -46,7 +46,7 @@ import { AutoSizer } from 'react-virtualized';
 import Diagram from './diagram';
 import { SLD_DISPLAY_MODE } from '../network/constants';
 import { useNameOrId } from '../utils/equipmentInfosHandler';
-import { syncDiagramStateWithSessionStorage } from '../../redux/session-storage';
+import { syncDiagramStateWithSessionStorage } from '../../redux/session-storage/diagram-state';
 import SingleLineDiagramContent from './singleLineDiagram/single-line-diagram-content';
 import NetworkAreaDiagramContent from './networkAreaDiagram/network-area-diagram-content';
 import { useDebounce, useSnackMessage } from '@gridsuite/commons-ui';
@@ -60,7 +60,6 @@ import { fetchSvg, getNetworkAreaDiagramUrl } from '../../services/study';
 import { mergeSx } from '../utils/functions';
 import { Box } from '@mui/system';
 import { useLocalizedCountries } from 'components/utils/localized-countries-hook';
-import { UpdateTypes } from '../../redux/reducer.type';
 
 // Returns a callback that returns a promise
 const useDisplayView = (studyUuid, currentNode) => {
@@ -849,10 +848,9 @@ export function DiagramPane({
                 //TODO reload data more intelligently
                 updateDiagramsByCurrentNode();
             } else if (
-                studyUpdatedForce.eventData.headers['updateType'] ===
-                UpdateTypes.STUDY
+                studyUpdatedForce.eventData.headers['updateType'] === 'study'
             ) {
-                // FM if we want to reload data more precisely we need more information from notifications
+                // FM if we want to reload data more precisely, we need more information from notifications
                 updateDiagramsByCurrentNode();
             } else if (
                 studyUpdatedForce.eventData.headers['updateType'] ===

src/components/diagrams/use-one-bus-shortcircuit-analysis-loader.tsx

@@ -9,9 +9,10 @@ import { UUID } from 'crypto';
 import { ReactElement, useCallback, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { ReduxState } from 'redux/reducer.type';
+import { AppState } from 'redux/reducer';
 import { Chip, darken, lighten, Theme } from '@mui/material';
 import { setOneBusShortcircuitAnalysisDiagram } from '../../redux/actions';
+import { AppDispatch } from '../../redux/store';
 
 /**
  * A hook that handles the logic behind the diagram one bus shortcircuit analysis loader
@@ -52,13 +53,13 @@ export function useOneBusShortcircuitAnalysisLoader(
     nodeId: UUID
 ): oneBusShortcircuitAnalysisLoader {
     const studyUpdatedForce = useSelector(
-        (state: ReduxState) => state.studyUpdated
+        (state: AppState) => state.studyUpdated
     );
     const oneBusShortCircuitAnalysisDiagram = useSelector(
-        (state: ReduxState) => state.oneBusShortCircuitAnalysisDiagram
+        (state: AppState) => state.oneBusShortCircuitAnalysisDiagram
     );
 
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
     const intl = useIntl();
 
     const displayOneBusShortcircuitAnalysisLoader = useCallback(() => {

src/components/dialogs/create-composite-modification-dialog.tsx

@@ -33,6 +33,7 @@ import { useSelector } from 'react-redux';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
+import { AppState } from '../../redux/reducer';
 
 interface ICompositeCreateModificationDialog {
     [NAME]: string;
@@ -66,7 +67,7 @@ const CreateCompositeModificationDialog: React.FC<
     CreateCompositeModificationDialogProps
 > = ({ open, onSave, onClose }) => {
     const intl = useIntl();
-    const studyUuid = useSelector((state: any) => state.studyUuid);
+    const studyUuid = useSelector((state: AppState) => state.studyUuid);
     const { snackError } = useSnackMessage();
     const formMethods = useForm({
         defaultValues: emptyFormData,
@@ -76,6 +77,7 @@ const CreateCompositeModificationDialog: React.FC<
     const [destinationFolder, setDestinationFolder] =
         useState<TreeViewFinderNodeProps>();
     const fetchDefaultDirectoryForStudy = useCallback(() => {
+        // @ts-expect-error TODO: manage null case
         fetchDirectoryElementPath(studyUuid).then((res) => {
             if (!res || res.length < 2) {
                 snackError({

src/components/dialogs/dynamicsimulation/event/dynamic-simulation-event-dialog.tsx

@@ -28,12 +28,13 @@ import {
 } from '../../../../services/dynamic-simulation';
 import { CustomFormProvider, useSnackMessage } from '@gridsuite/commons-ui';
 import { FetchStatus } from '../../../../services/utils';
+import { EQUIPMENT_TYPES } from '../../../utils/equipment-types';
 
 export type DynamicSimulationEventDialogProps = {
     studyUuid: string;
     currentNodeId: string;
     equipmentId: string;
-    equipmentType: string; // must be a string enum
+    equipmentType: EQUIPMENT_TYPES;
     onClose: () => void;
     title: string;
     open?: boolean;