From 3dec2cdd773313f452dd36ced899034e5efb6513 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 13 Feb 2021 10:52:15 -0800 Subject: [PATCH] Refactor --- packages/webapp/src/app.tsx | 40 ++++++++++--------- packages/webapp/src/classes/client/index.ts | 2 +- .../maps-page/account-menu/index.tsx | 16 +++----- .../maps-page/action-chooser/index.tsx | 2 +- .../action-dispatcher/delete-dialog/index.tsx | 8 ++-- .../duplicate-dialog/index.tsx | 4 +- .../action-dispatcher/export-dialog/index.tsx | 2 +- .../maps-page/action-dispatcher/index.tsx | 23 +---------- .../action-dispatcher/info-dialog/index.tsx | 3 +- .../publish-dialog/index.tsx | 4 +- .../action-dispatcher/rename-dialog/index.tsx | 4 +- .../{ => maps-page}/help-menu/index.tsx | 0 .../webapp/src/components/maps-page/index.tsx | 7 ++-- .../maps-page/language-menu/index.tsx | 17 +++----- packages/webapp/src/redux/clientSlice.ts | 34 +++++++++++++++- 15 files changed, 86 insertions(+), 80 deletions(-) rename packages/webapp/src/components/{ => maps-page}/help-menu/index.tsx (100%) diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx index bee4065d..c02df271 100644 --- a/packages/webapp/src/app.tsx +++ b/packages/webapp/src/app.tsx @@ -27,33 +27,35 @@ const queryClient = new QueryClient({ const App = () => { const [messages, setMessages] = useState(undefined); - const [appi18n, setAppi18n] = useState( new AppI18n('es')); + const [appi18n, setAppi18n] = useState(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 ? ( diff --git a/packages/webapp/src/classes/client/index.ts b/packages/webapp/src/classes/client/index.ts index 3c95cfc3..0b7eafb9 100644 --- a/packages/webapp/src/classes/client/index.ts +++ b/packages/webapp/src/classes/client/index.ts @@ -89,4 +89,4 @@ interface Client { } -export default Client; \ No newline at end of file +export default Client; diff --git a/packages/webapp/src/components/maps-page/account-menu/index.tsx b/packages/webapp/src/components/maps-page/account-menu/index.tsx index 8b35d8b3..5fd10b59 100644 --- a/packages/webapp/src/components/maps-page/account-menu/index.tsx +++ b/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); const open = Boolean(anchorEl); @@ -24,11 +22,7 @@ const AccountMenu = () => { setAnchorEl(null); }; - const { isLoading, error, data } = useQuery('account', () => { - return client.fetchAccountInfo(); - }); - const account = data; - + const account = fetchAccount(); return ( `}> diff --git a/packages/webapp/src/components/maps-page/action-chooser/index.tsx b/packages/webapp/src/components/maps-page/action-chooser/index.tsx index 88b0b45a..ef8bd357 100644 --- a/packages/webapp/src/components/maps-page/action-chooser/index.tsx +++ b/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; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx index b4120778..b0ae513a 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx +++ b/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"; @@ -37,12 +37,12 @@ const DeleteDialog = (props: SimpleDialogProps) => { onClose={handleOnClose} onSubmit={handleOnSubmit} title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} > - + Delete '{map?.title}' - + ); diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx index 4ee40dfc..19eac677 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx +++ b/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 = { diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx index 121df92d..f1ca18b4 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx +++ b/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'; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx index 0a2c88d7..eb0b0856 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx +++ b/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' && } {action === 'info' && } {action === 'create' && } - {action === 'export' && } + {action === 'export' && } ); } -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('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(); diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx index e65f5768..783f0a38 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx +++ b/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; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx index bea5122f..0daabf79 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx +++ b/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'; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx index 8347ca7f..7b3d1fb2 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx +++ b/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"; diff --git a/packages/webapp/src/components/help-menu/index.tsx b/packages/webapp/src/components/maps-page/help-menu/index.tsx similarity index 100% rename from packages/webapp/src/components/help-menu/index.tsx rename to packages/webapp/src/components/maps-page/help-menu/index.tsx diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx index a87c5b00..d68f861e 100644 --- a/packages/webapp/src/components/maps-page/index.tsx +++ b/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: })) + return (
@@ -147,7 +148,7 @@ const MapsPage = () => { setActiveDialog(undefined)} mapsId={[]} />
- +
diff --git a/packages/webapp/src/components/maps-page/language-menu/index.tsx b/packages/webapp/src/components/maps-page/language-menu/index.tsx index 2ac17f4f..27a64282 100644 --- a/packages/webapp/src/components/maps-page/language-menu/index.tsx +++ b/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('account', () => { - return client.fetchAccountInfo(); - }); - - const locale = data?.locale; + const accountInfo = fetchAccount(); return ( @@ -56,7 +51,7 @@ const LanguageMenu = () => { onClick={handleMenu} startIcon={} > - {locale?.label} + {accountInfo?.locale?.label} { + + const client: Client = useSelector(activeInstance); + const { isLoading, error, data } = useQuery('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('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; +