Refactor

packages/webapp/src/app.tsx

@@ -27,33 +27,35 @@ const queryClient = new QueryClient({
 
 const App = () => {
   const [messages, setMessages] = useState(undefined);
-  const [appi18n, setAppi18n] = useState<AppI18n>( new AppI18n('es'));
+  const [appi18n, setAppi18n] = useState<AppI18n>(new AppI18n('es'));
+
+  const loadResourceBundle = async (locale: Locale) => {
+    let result;
+    switch (locale.code) {
+      case 'en':
+        result = require('./compiled-lang/en.json');
+        break;
+      case 'es':
+        result = require('./compiled-lang/es.json');
+        break;
+      case 'de':
+        // result = require('./compiled-lang/de.json');
+        break;
+      case 'fr':
+        // result = require('./compiled-lang/fr.json');
+        break;
+    }
+    return result;
+  }
 
   useEffect(() => {
-
-    // @Todo: Why can not be dynamc  ?
-    const loadResourceBundle = async (locale: Locale) => {
-      let result;
-      console.log("Language:" + locale.code);
-
-      switch (locale.code) {
-        case 'en':
-          result = require('./compiled-lang/en.json');
-          break;
-        case 'es':
-          result = require('./compiled-lang/es.json');
-          break;
-      }
-      return result;
-    }
-
     const fetchData = async () => {
       const locale = appi18n.getLocale();
       const msg = await loadResourceBundle(locale);
       setMessages(msg);
     }
     fetchData();
-  }, []);
+  }, [window.location.pathname]);
 
   return messages ? (
     <Provider store={store}>

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

@@ -1,17 +1,15 @@
-import { Button, IconButton, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
+import { IconButton, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
 import { AccountCircle, ExitToAppOutlined, SettingsApplicationsOutlined } from '@material-ui/icons';
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useQuery, useQueryClient } from "react-query";
-import Client, { ErrorInfo, AccountInfo } from "../../../classes/client";
+import { useQueryClient } from "react-query";
+import Client, {  } from "../../../classes/client";
 import { useSelector } from 'react-redux';
-import { activeInstance } from '../../../redux/clientSlice';
+import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
 
 
 const AccountMenu = () => {
 
-    const client: Client = useSelector(activeInstance);
-    const queryClient = useQueryClient();
 
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
@@ -24,11 +22,7 @@ const AccountMenu = () => {
         setAnchorEl(null);
     };
 
-    const { isLoading, error, data } = useQuery<unknown, ErrorInfo, AccountInfo>('account', () => {
-        return client.fetchAccountInfo();
-    });
-    const account = data;
-
+    const account =  fetchAccount();
     return (
         <span>
             <Tooltip title={`${account?.firstName} ${account?.lastName} <${account?.email}>`}>

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

@@ -11,7 +11,7 @@ import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined';
 import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
 import { FormattedMessage } from 'react-intl';
 import { LabelOutlined } from '@material-ui/icons';
-import { fetchMapById } from '../action-dispatcher';
+import { fetchMapById } from '../../../redux/clientSlice';
 
 export type ActionType = 'open' | 'share' | 'import' | 'delete' | 'info' | 'create' | 'duplicate' | 'export' | 'label' | 'rename' | 'print' | 'info' | 'publish' | 'history' | undefined;
 

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

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

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

@@ -5,9 +5,9 @@ import { FormControl } from "@material-ui/core";
 import { useSelector } from "react-redux";
 
 import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";
-import { activeInstance } from '../../../../redux/clientSlice';
+import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
 import Input from "../../../form/input";
-import { SimpleDialogProps, fetchMapById } from "..";
+import { SimpleDialogProps } from "..";
 import BaseDialog from "../base-dialog";
 
 export type DuplicateModel = {

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

@@ -1,10 +1,10 @@
 import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { fetchMapById } from "..";
 import BaseDialog from "../base-dialog";
 import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select } from "@material-ui/core";
 import { useStyles } from './style';
 import { Alert } from "@material-ui/lab";
+import { fetchMapById } from "../../../../redux/clientSlice";
 
 type ExportFormat = 'pdf' | 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'txt';
 type ExportGroup = 'image' | 'document' | 'mindmap-tool';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import RenameDialog from './rename-dialog';
 import DeleteDialog from './delete-dialog';
 import { ActionType } from '../action-chooser';
-import { ErrorInfo, MapInfo } from '../../../classes/client';
+import { AccountInfo, ErrorInfo, MapInfo } from '../../../classes/client';
 import Client from '../../../classes/client';
 import { useSelector } from 'react-redux';
 import { QueryClient, useQuery } from 'react-query';
@@ -57,29 +57,10 @@ const ActionDispatcher = (props: ActionDialogProps) => {
       {action === 'publish' && <PublishDialog onClose={handleOnClose} mapId={mapsId[0]} />}
       {action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapsId[0]} />}
       {action === 'create' && <CreateDialog onClose={handleOnClose} />}
-      {action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]} enableImgExport={false}/>}
+      {action === 'export' && <ExportDialog onClose={handleOnClose} mapId={mapsId[0]} enableImgExport={false} />}
     </span >
   );
 }
-type MapLoadResult = {
-  isLoading: boolean,
-  error: ErrorInfo | null,
-  map: MapInfo | null
-}
-
-export const fetchMapById = (id: number): MapLoadResult => {
-
-  const service: Client = useSelector(activeInstance);
-  const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', () => {
-    return service.fetchAllMaps();
-  });
-
-  const result = data?.find(m => m.id == id);
-  const map = result ? result : null;
-  return { isLoading: isLoading, error: error, map: map };
-}
-
-
 export const handleOnMutationSuccess = (onClose: () => void, queryClient: QueryClient): void => {
   queryClient.invalidateQueries('maps')
   onClose();

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

@@ -5,9 +5,10 @@ import { Card, List, ListItem, Paper, Typography } from '@material-ui/core';
 
 import { ErrorInfo } from '../../../../classes/client';
 import BaseDialog from '../base-dialog';
-import { fetchMapById, SimpleDialogProps } from '..';
+import {  SimpleDialogProps } from '..';
 import { useStyles } from './style';
 import moment from 'moment';
+import { fetchMapById } from '../../../../redux/clientSlice';
 
 const InfoDialog = (props: SimpleDialogProps) => {
     const { mapId, onClose } = props;

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

@@ -6,10 +6,10 @@ import { AppBar, Checkbox, FormControl, FormControlLabel, Tab, TextareaAutosize,
 
 
 import Client, { ErrorInfo } from '../../../../classes/client';
-import { activeInstance } from '../../../../redux/clientSlice';
+import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
 import BaseDialog from '../base-dialog';
 import { TabContext, TabList, TabPanel } from '@material-ui/lab';
-import { fetchMapById, handleOnMutationSuccess, SimpleDialogProps } from '..';
+import { handleOnMutationSuccess, SimpleDialogProps } from '..';
 import { useStyles } from './style';
 
 

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

@@ -3,8 +3,8 @@ import { useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
 import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";
-import { activeInstance } from '../../../../redux/clientSlice';
-import { SimpleDialogProps, fetchMapById, handleOnMutationSuccess } from "..";
+import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
+import { SimpleDialogProps,  handleOnMutationSuccess } from "..";
 import Input from "../../../form/input";
 import { FormControl } from "@material-ui/core";
 import BaseDialog from "../base-dialog";

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

@@ -11,7 +11,7 @@ import { useStyles } from './style';
 import { AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, LabelTwoTone, PersonOutlineTwoTone, PublicTwoTone, ShareTwoTone, StarTwoTone } from '@material-ui/icons';
 import { Button, Link, ListItemSecondaryAction, ListItemText, Tooltip } from '@material-ui/core';
 import { MapsList } from './maps-list';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage, IntlProvider, useIntl } from 'react-intl';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { activeInstance } from '../../redux/clientSlice';
 import { useSelector } from 'react-redux';
@@ -20,7 +20,7 @@ import ActionDispatcher from './action-dispatcher';
 import { ActionType } from './action-chooser';
 import AccountMenu from './account-menu';
 import ClientHealthSentinel from '../../classes/client/client-health-sentinel';
-import HelpMenu from '../help-menu';
+import HelpMenu from './help-menu';
 import LanguageMenu from './language-menu';
 
 const logoIcon = require('../../images/logo-small.svg');
@@ -106,6 +106,7 @@ const MapsPage = () => {
         icon: <LabelTwoTone style={{ color: l.color ? l.color : 'inherit' }} />
     }))
 
+
     return (
         <div className={classes.root}>
             <ClientHealthSentinel />
@@ -147,7 +148,7 @@ const MapsPage = () => {
                     <ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapsId={[]} />
 
                     <div className={classes.rightButtonGroup}>
-                        <LanguageMenu/>
+                        <LanguageMenu />
                         <HelpMenu />
                         <AccountMenu />
                     </div>

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

@@ -1,13 +1,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 } from "../../../classes/client";
+import { useMutation, useQueryClient } from "react-query";
+import Client from "../../../classes/client";
 import { useSelector } from 'react-redux';
-import { activeInstance } from '../../../redux/clientSlice';
+import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
 import { FormattedMessage, useIntl } from 'react-intl';
-import AppI18n, { LocaleCode, Locales } from '../../../classes/app-i18n';
-
+import { LocaleCode, Locales } from '../../../classes/app-i18n';
 
 
 const LanguageMenu = () => {
@@ -40,11 +39,7 @@ const LanguageMenu = () => {
         mutation.mutate(localeCode);
     }
 
-    const { data } = useQuery<unknown, ErrorInfo, AccountInfo>('account', () => {
-        return client.fetchAccountInfo();
-    });
-
-    const locale = data?.locale;
+    const accountInfo =  fetchAccount();
     return (
         <span>
             <Tooltip title={intl.formatMessage({ id: 'language.change', defaultMessage: 'Change Language' })}>
@@ -56,7 +51,7 @@ const LanguageMenu = () => {
                     onClick={handleMenu}
                     startIcon={<TranslateTwoTone />}
                 >
-                    {locale?.label}
+                    {accountInfo?.locale?.label}
                 </Button>
             </Tooltip>
             <Menu id="appbar-language"

packages/webapp/src/redux/clientSlice.ts

@@ -1,7 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import Client from '../classes/client';
+import { useQuery } from 'react-query';
+import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client';
 import MockClient from '../classes/client/mock-client';
 import RestClient from '../classes/client/rest-client';
+import { useSelector } from 'react-redux'
+
 
 interface ConfigInfo {
   apiBaseUrl: string
@@ -61,6 +64,34 @@ export const clientSlice = createSlice({
   },
 });
 
+
+type MapLoadResult = {
+  isLoading: boolean,
+  error: ErrorInfo | null,
+  map: MapInfo | null
+}
+
+export const fetchMapById = (id: number): MapLoadResult => {
+
+  const client: Client = useSelector(activeInstance);
+  const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', () => {
+    return client.fetchAllMaps();
+  });
+
+  const result = data?.find(m => m.id == id);
+  const map = result ? result : null;
+  return { isLoading: isLoading, error: error, map: map };
+}
+
+
+export const fetchAccount = (): AccountInfo | undefined => {
+  const client: Client = useSelector(activeInstance);
+  const { data } = useQuery<unknown, ErrorInfo, AccountInfo>('account', () => {
+    return client.fetchAccountInfo();
+  });
+  return data;
+}
+
 export const activeInstance = (state: any): Client => {
   return state.client.instance;
 }
@@ -72,3 +103,4 @@ export const activeInstanceStatus = (state: any): ClientStatus => {
 export const { sessionExpired } = clientSlice.actions;
 export default clientSlice.reducer;
 
+