Refactor locale class

packages/webapp/src/classes/app-locale/index.ts

@@ -0,0 +1,51 @@
+export class Locale {
+    code: LocaleCode;
+    label: string;
+
+    constructor(code: LocaleCode) {
+        this.code = code;
+
+        const label = LocalToStr.get(code);
+        this.label = label ? label : 'Undefined';
+    }
+}
+
+export default class AppLocale {
+
+    private localeCode: LocaleCode = 'en';
+
+    constructor(locale?: LocaleCode) {
+        this.localeCode = locale ? locale : this.defaultLocale();
+    }
+
+    toString(): string {
+        const result = LocalToStr.get(this.localeCode);
+        if (result == null) {
+            throw `Locale could not be translated: ${this.localeCode}`
+        }
+        return result ? result : 'Undefined';
+    }
+
+    private defaultLocale(): LocaleCode {
+        const browserLocale = (navigator.languages && navigator.languages[0])
+            || navigator.language;
+
+        // Is a supported language ?
+        let result:LocaleCode = 'en';
+        if (LocalToStr.get(browserLocale as LocaleCode)) {
+            result = browserLocale as LocaleCode;
+        }
+
+        return result;
+    }
+}
+const LocalToStr = new Map<LocaleCode, string>([["en", "English"], ["es", "Español"], ["fr", "Français"], ["de", "Deutsch"]]);
+export type LocaleCode = 'en' | 'es' | 'fr' | 'de';
+
+export const Locales =
+{
+    EN: new Locale('en'),
+    ES: new Locale('es'),
+    DE: new Locale('de'),
+    FR: new Locale('fr'),
+}

packages/webapp/src/classes/client/client-health-sentinel/index.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 import React from "react";
-import { activeInstanceStatus, ClientStatus } from '../../redux/clientSlice';
+import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice';
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
 import { FormattedMessage } from 'react-intl';
 import { Alert, AlertTitle } from '@material-ui/lab';

packages/webapp/src/classes/client/index.ts

@@ -1,3 +1,5 @@
+import { LocaleCode } from "../app-locale"
+
 export type NewUser = {
     email: string;
     firstname: string;
@@ -62,8 +64,6 @@ export type AccountInfo = {
     language: LocaleCode;
 }
 
-export type LocaleCode = 'en' | 'es' | 'fr' | 'de';
-
 interface Client {
     importMap(model: ImportMapInfo): Promise<number>
     createMap(map: BasicMapInfo): Promise<number>;

packages/webapp/src/classes/client/mock-client/index.ts

@@ -1,5 +1,6 @@
 import { Language } from '@material-ui/icons';
-import Client, { AccountInfo, BasicMapInfo, ChangeHistory, ImportMapInfo, Label, LocaleCode, MapInfo, NewUser } from '..';
+import Client, { AccountInfo, BasicMapInfo, ChangeHistory, ImportMapInfo, Label, MapInfo, NewUser } from '..';
+import { LocaleCode } from '../../app-locale';
 class MockClient implements Client {
     private maps: MapInfo[] = [];
     private labels: Label[] = [];

packages/webapp/src/classes/client/rest-client/index.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
-import Client, { ErrorInfo, MapInfo, BasicMapInfo, NewUser, Label, ChangeHistory, AccountInfo, ImportMapInfo, LocaleCode } from '..';
+import Client, { ErrorInfo, MapInfo, BasicMapInfo, NewUser, Label, ChangeHistory, AccountInfo, ImportMapInfo } from '..';
+import { LocaleCode } from '../../app-locale';
 
 export default class RestClient implements Client {
     private baseUrl: string;

packages/webapp/src/components/forgot-password-page/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { useHistory } from 'react-router-dom'
-import Client, { ErrorInfo } from '../../client'
+import Client, { ErrorInfo } from '../../classes/client'
 
 import Header from '../layout/header'
 import Footer from '../layout/footer'

packages/webapp/src/components/form/global-error/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ErrorInfo } from "../../../client"
+import { ErrorInfo } from "../../../classes/client"
 import StyledAlert from "./styled";
 
 

packages/webapp/src/components/form/input/index.tsx

@@ -1,7 +1,7 @@
 import { TextField } from "@material-ui/core";
 import React, { ChangeEvent } from "react";
 import { MessageDescriptor, useIntl } from "react-intl";
-import { ErrorInfo } from "../../../client";
+import { ErrorInfo } from "../../../classes/client";
 
 type InputProps = {
     name: string;

packages/webapp/src/components/maps-page/account-menu/index.tsx

@@ -3,7 +3,7 @@ import { AccountCircle, ExitToAppOutlined, SettingsApplicationsOutlined } from '
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useQuery, useQueryClient } from "react-query";
-import Client, { ErrorInfo, AccountInfo } from "../../../client";
+import Client, { ErrorInfo, AccountInfo } from "../../../classes/client";
 import { useSelector } from 'react-redux';
 import { activeInstance } from '../../../redux/clientSlice';
 

packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, DialogContentText } from "@material-ui/core";
 import { FormattedMessage, useIntl } from "react-intl";
-import { ErrorInfo } from "../../../../client";
+import { ErrorInfo } from "../../../../classes/client";
 import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
 import GlobalError from "../../../form/global-error";
 

packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { FormControl } from '@material-ui/core';
 
 
-import Client, { BasicMapInfo, ErrorInfo } from '../../../../client';
+import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';
 import Input from '../../../form/input';
 import BaseDialog from '../base-dialog';

packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
-import Client from "../../../../client";
+import Client from "../../../../classes/client";
 import { activeInstance } from '../../../../redux/clientSlice';
 import { SimpleDialogProps, fetchMapById, handleOnMutationSuccess } from "..";
 import BaseDialog from "../base-dialog";

packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
-import Client from "../../../../client";
+import Client from "../../../../classes/client";
 import { activeInstance } from '../../../../redux/clientSlice';
 import { handleOnMutationSuccess } from "..";
 import BaseDialog from "../base-dialog";

packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from "react-query";
 import { FormControl } from "@material-ui/core";
 import { useSelector } from "react-redux";
 
-import Client, { BasicMapInfo, ErrorInfo } from "../../../../client";
+import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";
 import { activeInstance } from '../../../../redux/clientSlice';
 import Input from "../../../form/input";
 import { SimpleDialogProps, fetchMapById } from "..";

packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx

@@ -2,7 +2,7 @@ import React, { ErrorInfo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useQuery } from "react-query";
 import { useSelector } from "react-redux";
-import Client, { ChangeHistory } from "../../../../client";
+import Client, { ChangeHistory } from "../../../../classes/client";
 import { activeInstance } from '../../../../redux/clientSlice';
 import { SimpleDialogProps } from "..";
 import BaseDialog from "../base-dialog";

packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { Button, FormControl } from '@material-ui/core';
 
 
-import Client, { BasicMapInfo, ErrorInfo } from '../../../../client';
+import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';
 import Input from '../../../form/input';
 import BaseDialog from '../base-dialog';

packages/webapp/src/components/maps-page/action-dispatcher/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import RenameDialog from './rename-dialog';
 import DeleteDialog from './delete-dialog';
 import { ActionType } from '../action-chooser';
-import { ErrorInfo, MapInfo } from '../../../client';
+import { ErrorInfo, MapInfo } from '../../../classes/client';
-import Client from '../../../client';
+import Client from '../../../classes/client';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
 import { QueryClient, useQuery } from 'react-query';
 import { activeInstance } from '../../../redux/clientSlice';
 import DuplicateDialog from './duplicate-dialog';

packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { Card, List, ListItem, Paper, Typography } from '@material-ui/core';
 
 
-import { ErrorInfo } from '../../../../client';
+import { ErrorInfo } from '../../../../classes/client';
 import BaseDialog from '../base-dialog';
 import { fetchMapById, SimpleDialogProps } from '..';
 import { useStyles } from './style';

packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { AppBar, Checkbox, FormControl, FormControlLabel, Tab, TextareaAutosize, Typography } from '@material-ui/core';
 
 
-import Client, { ErrorInfo } from '../../../../client';
+import Client, { ErrorInfo } from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';
 import BaseDialog from '../base-dialog';
 import { TabContext, TabList, TabPanel } from '@material-ui/lab';

packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
-import Client, { BasicMapInfo, ErrorInfo } from "../../../../client";
+import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";
 import { activeInstance } from '../../../../redux/clientSlice';
 import { SimpleDialogProps, fetchMapById, handleOnMutationSuccess } from "..";
 import Input from "../../../form/input";

packages/webapp/src/components/maps-page/index.tsx

@@ -15,11 +15,11 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { activeInstance } from '../../redux/clientSlice';
 import { useSelector } from 'react-redux';
-import Client, { Label } from '../../client';
+import Client, { Label } from '../../classes/client';
 import ActionDispatcher from './action-dispatcher';
 import { ActionType } from './action-chooser';
 import AccountMenu from './account-menu';
-import ClientHealthSentinel from '../../client/client-health-sentinel';
+import ClientHealthSentinel from '../../classes/client/client-health-sentinel';
 import HelpMenu from '../help-menu';
 import LanguageMenu from './language-menu';
 

packages/webapp/src/components/maps-page/language-menu/index.tsx

@@ -2,12 +2,12 @@ import { Button, Divider, Menu, MenuItem, Tooltip } from '@material-ui/core';
 import { TranslateTwoTone } from '@material-ui/icons';
 import React from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import Client, { ErrorInfo, AccountInfo, LocaleCode } from "../../../client";
+import Client, { ErrorInfo, AccountInfo } from "../../../classes/client";
 import { useSelector } from 'react-redux';
 import { activeInstance } from '../../../redux/clientSlice';
 import { FormattedMessage, useIntl } from 'react-intl';
+import AppLocale, { LocaleCode, Locales } from '../../../classes/app-locale';
 
-const localeToStr = new Map<LocaleCode, string>([["en", "English"], ["es", "Español"], ["fr", "Français"], ["de", "Deutsch"]]);
 
 
 const LanguageMenu = () => {
@@ -44,6 +44,7 @@ const LanguageMenu = () => {
         return client.fetchAccountInfo();
     });
 
+    const locale = new AppLocale(data?.language);
     return (
         <span>
             <Tooltip title={intl.formatMessage({ id: 'language.change', defaultMessage: 'Change Language' })}>
@@ -55,7 +56,7 @@ const LanguageMenu = () => {
                     onClick={handleMenu}
                     startIcon={<TranslateTwoTone />}
                 >
-                    {localeToStr.get(data?.language ? data?.language : 'en')}
+                    {locale.toString()}
                 </Button>
             </Tooltip>
             <Menu id="appbar-language"
@@ -73,20 +74,20 @@ const LanguageMenu = () => {
                     horizontal: 'right',
                 }}
             >
-                <MenuItem onClick={handleOnClick} id="en">
+                <MenuItem onClick={handleOnClick} id={Locales.EN.code}>
-                    {localeToStr.get('en')}
+                    {Locales.EN.label}
                 </MenuItem>
 
-                <MenuItem onClick={handleOnClick} id="es">
+                <MenuItem onClick={handleOnClick} id={Locales.ES.code}>
-                    {localeToStr.get('es')}
+                    {Locales.ES.label}
                 </MenuItem>
 
-                <MenuItem onClick={handleOnClick} id="fr">
+                <MenuItem onClick={handleOnClick} id={Locales.DE.code}>
-                    {localeToStr.get('fr')}
+                    {Locales.DE.label}
                 </MenuItem>
 
-                <MenuItem onClick={handleOnClick} id="de">
+                <MenuItem onClick={handleOnClick} id={Locales.FR.code}>
-                    {localeToStr.get('de')}
+                    {Locales.FR.label}
                 </MenuItem>
                 <Divider />
 

packages/webapp/src/components/maps-page/maps-list/index.tsx

@@ -19,8 +19,8 @@ import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { useSelector } from 'react-redux';
 import { activeInstance } from '../../../redux/clientSlice';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { ErrorInfo, MapInfo } from '../../../client';
+import { ErrorInfo, MapInfo } from '../../../classes/client';
-import Client from '../../../client';
+import Client from '../../../classes/client';
 import ActionChooser, { ActionType } from '../action-chooser';
 import ActionDispatcher from '../action-dispatcher';
 import { Button, InputBase, Link } from '@material-ui/core';

packages/webapp/src/components/registration-page/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { useHistory } from 'react-router-dom';
-import Client , { ErrorInfo} from '../../client';
+import Client , { ErrorInfo} from '../../classes/client';
 import FormContainer from '../layout/form-container';
 
 import Header from '../layout/header';

packages/webapp/src/redux/clientSlice.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import Client from '../client';
+import Client from '../classes/client';
-import MockClient from '../client/mock-client';
+import MockClient from '../classes/client/mock-client';
-import RestClient from '../client/rest-client';
+import RestClient from '../classes/client/rest-client';
 
 interface ConfigInfo {
   apiBaseUrl: string