Refactor: update language type to GsLang in country-related components (#834)

Signed-off-by: achour94 <[email protected]>

Author: achour94

src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx

@@ -14,6 +14,7 @@ import { SubmitButton } from '../../inputs/reactHookForm/utils/SubmitButton';
 import { CancelButton } from '../../inputs/reactHookForm/utils/CancelButton';
 import { CustomFormProvider } from '../../inputs/reactHookForm/provider/CustomFormProvider';
 import { PopupConfirmationDialog } from '../popupConfirmationDialog/PopupConfirmationDialog';
+import { GsLang } from '../../../utils';
 
 export type CustomMuiDialogProps<T extends FieldValues = FieldValues> = DialogProps & {
     open: boolean;
@@ -28,7 +29,7 @@ export type CustomMuiDialogProps<T extends FieldValues = FieldValues> = DialogPr
     onCancel?: () => void;
     children: ReactNode;
     isDataFetching?: boolean;
-    language?: string;
+    language?: GsLang;
     confirmationMessageKey?: string;
     unscrollableFullHeight?: boolean;
 };

src/components/filter/FilterCreationDialog.tsx

@@ -24,6 +24,7 @@ import { FilterType } from './constants/FilterConstants';
 import { MAX_CHAR_DESCRIPTION } from '../../utils/constants/uiConstants';
 import { EXPERT_FILTER_QUERY } from './expert/expertFilterConstants';
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from './explicitNaming/ExplicitNamingFilterConstants';
+import { GsLang } from '../../utils';
 
 const emptyFormData = {
     [FieldConstants.NAME]: '',
@@ -49,7 +50,7 @@ export interface FilterCreationDialogProps {
     open: boolean;
     onClose: () => void;
     activeDirectory?: UUID;
-    language?: string;
+    language?: GsLang;
     sourceFilterForExplicitNamingConversion?: {
         id: UUID;
         equipmentType: string;

src/components/filter/filter.type.ts

@@ -6,7 +6,7 @@
  */
 
 import { UUID } from 'crypto';
-import { FieldConstants } from '../../utils';
+import { FieldConstants, GsLang } from '../../utils';
 import { RuleGroupTypeExport } from './expert/expertFilter.type';
 import { EXPERT_FILTER_QUERY } from './expert/expertFilterConstants';
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from './explicitNaming/ExplicitNamingFilterConstants';
@@ -43,7 +43,7 @@ export interface FilterEditionProps {
         [FILTER_EQUIPMENTS_ATTRIBUTES]?: EquipmentsFilter[];
     }>;
     activeDirectory?: UUID;
-    language?: string;
+    language?: GsLang;
     description?: string;
 }
 

src/components/inputs/reactHookForm/provider/CustomFormProvider.tsx

@@ -10,11 +10,12 @@ import { type FieldValues, FormProvider, type UseFormReturn } from 'react-hook-f
 import * as yup from 'yup';
 import { type ObjectSchema } from 'yup';
 import { getSystemLanguage } from '../../../../hooks/useLocalizedCountries';
+import { GsLang } from '../../../../utils';
 
 type CustomFormContextProps<TFieldValues extends FieldValues = FieldValues> = {
     removeOptional?: boolean;
     validationSchema: ObjectSchema<TFieldValues>;
-    language?: string;
+    language?: GsLang;
     isNodeBuilt?: boolean;
     isUpdate?: boolean;
 };

src/components/inputs/reactHookForm/selectInputs/CountriesInput.tsx

@@ -18,7 +18,7 @@ export interface CountryInputProps {
 
 export function CountriesInput({ name, label }: Readonly<CountryInputProps>) {
     const { language } = useCustomFormContext();
-    const { translate, countryCodes } = useLocalizedCountries(language);
+    const { translate, countryCodes } = useLocalizedCountries(language!);
 
     const translateOption = useCallback(
         (option: Option) => {

src/components/inputs/reactQueryBuilder/CountryValueEditor.tsx

@@ -18,7 +18,7 @@ export function CountryValueEditor(props: ValueEditorProps) {
     const { value, handleOnChange, title } = props;
 
     const { language } = useCustomFormContext();
-    const { translate, countryCodes } = useLocalizedCountries(language);
+    const { translate, countryCodes } = useLocalizedCountries(language!);
     const [favoriteCountryCodes, setFavoriteCountryCodes] = useState<string[]>([]);
     const [initialized, setInitialized] = useState<boolean>(false);
 

src/components/parameters/common/parameters-edition-dialog-props.ts

@@ -7,6 +7,7 @@
 
 import { UUID } from 'crypto';
 import { User } from 'oidc-client';
+import { GsLang } from '../../../utils';
 
 export interface ParametersEditionDialogProps {
     id: UUID;
@@ -16,7 +17,7 @@ export interface ParametersEditionDialogProps {
     name: string;
     description: string | null;
     activeDirectory: UUID;
-    language?: string;
+    language?: GsLang;
     user: User | null;
     enableDeveloperMode?: boolean;
 }

src/components/parameters/loadflow/load-flow-parameters-form.tsx

@@ -11,10 +11,11 @@ import { UseLoadFlowParametersFormReturn } from './use-load-flow-parameters-form
 import LoadFlowParametersHeader from './load-flow-parameters-header';
 import LoadFlowParametersContent from './load-flow-parameters-content';
 import { CustomFormProvider } from '../../inputs';
+import { GsLang } from '../../../utils';
 
 interface LoadFlowParametersFormProps {
     loadflowMethods: UseLoadFlowParametersFormReturn;
-    language: string;
+    language: GsLang;
     renderTitleFields?: () => ReactNode;
     renderActions?: () => ReactNode;
 }

src/components/parameters/loadflow/load-flow-parameters-inline.tsx

@@ -17,7 +17,7 @@ import { TreeViewFinderNodeProps } from '../../treeViewFinder';
 import { useSnackMessage } from '../../../hooks';
 import { SubmitButton } from '../../inputs';
 import { LabelledButton } from '../common/parameters';
-import { ElementType, mergeSx } from '../../../utils';
+import { ElementType, GsLang, mergeSx } from '../../../utils';
 import { LineSeparator } from '../common';
 import { DirectoryItemSelector } from '../../directoryItemSelector';
 import { fetchLoadFlowParameters } from '../../../services/loadflow';
@@ -34,7 +34,7 @@ export function LoadFlowParametersInline({
     enableDeveloperMode,
 }: Readonly<{
     studyUuid: UUID | null;
-    language: string;
+    language: GsLang;
     parametersBackend: UseParametersBackendReturnProps<ComputingType.LOAD_FLOW>;
     setHaveDirtyFields: Dispatch<SetStateAction<boolean>>;
     enableDeveloperMode: boolean;

src/hooks/useLocalizedCountries.ts

@@ -9,20 +9,20 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import localizedCountries, { LocalizedCountries } from 'localized-countries';
 import countriesFr from 'localized-countries/data/fr';
 import countriesEn from 'localized-countries/data/en';
-import { LANG_ENGLISH, LANG_FRENCH, LANG_SYSTEM } from '../utils/langs';
+import { GsLang, GsLangUser, LANG_ENGLISH, LANG_FRENCH, LANG_SYSTEM } from '../utils/langs';
 
 const supportedLanguages = [LANG_FRENCH, LANG_ENGLISH];
 
 export const getSystemLanguage = () => {
     const systemLanguage = navigator.language.split(/[-_]/)[0];
-    return supportedLanguages.includes(systemLanguage) ? systemLanguage : LANG_ENGLISH;
+    return supportedLanguages.includes(systemLanguage as GsLangUser) ? (systemLanguage as GsLangUser) : LANG_ENGLISH;
 };
 
-export const getComputedLanguage = (language: string | undefined) => {
+export const getComputedLanguage = (language: GsLang): GsLangUser => {
     return language === LANG_SYSTEM ? getSystemLanguage() : (language ?? LANG_ENGLISH);
 };
 
-export const useLocalizedCountries = (language: string | undefined) => {
+export const useLocalizedCountries = (language: GsLang) => {
     const [localizedCountriesModule, setLocalizedCountriesModule] = useState<LocalizedCountries>();
 
     // TODO FM this is disgusting, can we make it better ?