vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-10 17:33:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor locale class

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-12 19:03:47 -08:00
parent d57cec6f80
commit 6091b6a7ad
25 changed files with 95 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/webapp/src/classes/app-locale/index.ts Normal file
View File

@ -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'),
}

2
packages/webapp/src/client/client-health-sentinel/index.tsx → packages/webapp/src/classes/client/client-health-sentinel/index.tsx
View File

@ -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';

4
packages/webapp/src/client/index.ts → packages/webapp/src/classes/client/index.ts
View File

@ -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>;

3
packages/webapp/src/client/mock-client/index.ts → packages/webapp/src/classes/client/mock-client/index.ts
View File

@ -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[] = [];

3
packages/webapp/src/client/rest-client/index.ts → packages/webapp/src/classes/client/rest-client/index.ts
View File

@ -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;

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

@ -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'

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

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

2
packages/webapp/src/components/form/input/index.tsx
View File

@ -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;

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

@ -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';

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

@ -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";

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

@ -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';

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

@ -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";

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

@ -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";

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

@ -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 "..";

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

@ -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";

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

@ -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';

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

@ -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 Client from '../../../client';
import { useSelector } from "react-redux";
import { ErrorInfo, MapInfo } from '../../../classes/client';
import Client from '../../../classes/client';
import { useSelector } from 'react-redux';
import { QueryClient, useQuery } from 'react-query';
import { activeInstance } from '../../../redux/clientSlice';
import DuplicateDialog from './duplicate-dialog';

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

@ -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';

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

@ -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';

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

@ -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";

4
packages/webapp/src/components/maps-page/index.tsx
View File

@ -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';

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

@ -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">
{localeToStr.get('en')}
<MenuItem onClick={handleOnClick} id={Locales.EN.code}>
{Locales.EN.label}
</MenuItem>
<MenuItem onClick={handleOnClick} id="es">
{localeToStr.get('es')}
<MenuItem onClick={handleOnClick} id={Locales.ES.code}>
{Locales.ES.label}
</MenuItem>
<MenuItem onClick={handleOnClick} id="fr">
{localeToStr.get('fr')}
<MenuItem onClick={handleOnClick} id={Locales.DE.code}>
{Locales.DE.label}
</MenuItem>
<MenuItem onClick={handleOnClick} id="de">
{localeToStr.get('de')}
<MenuItem onClick={handleOnClick} id={Locales.FR.code}>
{Locales.FR.label}
</MenuItem>
<Divider />

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

@ -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 Client from '../../../client';
import { ErrorInfo, MapInfo } from '../../../classes/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';

2
packages/webapp/src/components/registration-page/index.tsx
View File

@ -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';

6
packages/webapp/src/redux/clientSlice.ts
View File

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