Add change language button

This commit is contained in:
Paulo Gustavo Veiga 2021-02-10 18:35:13 -08:00
parent 1c5d6342e5
commit c31a0dcab9
6 changed files with 81 additions and 1 deletions

View File

@ -59,6 +59,7 @@ export type AccountInfo = {
firstName: string;
lastName: string;
email: string;
language: string;
}
interface Client {

View File

@ -1,3 +1,4 @@
import { Language } from '@material-ui/icons';
import Client, { AccountInfo, BasicMapInfo, ChangeHistory, ImportMapInfo, Label, MapInfo, NewUser} from '..';
class MockClient implements Client {
private maps: MapInfo[] = [];
@ -41,7 +42,8 @@ class MockClient implements Client {
return Promise.resolve({
firstName: 'Costme',
lastName: 'Fulanito',
email: 'test@example.com'
email: 'test@example.com',
language: 'en'
});
}
deleteMaps(ids: number[]): Promise<void> {

View File

@ -37,6 +37,7 @@ export default class RestClient implements Client {
lastName: account.lastName ? account.lastName : '',
firstName: account.fistName ? account.fistName : '',
email: account.email,
language: "en"
});
}).catch(error => {
const errorInfo = this.parseResponseOnError(error.response);

View File

@ -19,6 +19,7 @@ const AccountMenu = () => {
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};

View File

@ -21,6 +21,7 @@ import { ActionType } from './action-chooser';
import AccountMenu from './account-menu';
import ClientHealthSentinel from '../../client/client-health-sentinel';
import HelpMenu from '../help-menu';
import LanguageMenu from './language-menu';
const logoIcon = require('../../images/logo-small.svg');
const poweredByIcon = require('../../images/pwrdby-white.svg');
@ -146,6 +147,7 @@ const MapsPage = () => {
<ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapsId={[]} />
<div className={classes.rightButtonGroup}>
<LanguageMenu/>
<HelpMenu />
<AccountMenu />
</div>

View File

@ -0,0 +1,73 @@
import { Button, Divider, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
import { ExitToAppOutlined, SettingsApplicationsOutlined, TranslateTwoTone } from '@material-ui/icons';
import React from "react";
import { FormattedMessage } from "react-intl";
import { useQuery } from "react-query";
import Client, { ErrorInfo, AccountInfo } from "../../../client";
import { useSelector } from 'react-redux';
import { activeInstance } from '../../../redux/clientSlice';
const LanguageMenu = () => {
const client: Client = useSelector(activeInstance);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const { data } = useQuery<unknown, ErrorInfo, AccountInfo>('account', () => {
return client.fetchAccountInfo();
});
return (
<span>
<Tooltip title="Change Language">
<Button
size="small"
variant="outlined"
disableElevation={true}
color="primary"
onClick={handleMenu}
startIcon={<TranslateTwoTone />}
>
{data?.language == "en" ? "English" : "Español"}
</Button>
</Tooltip>
<Menu id="appbar-language"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MenuItem onClick={handleClose}>
English
</MenuItem>
<MenuItem onClick={handleClose}>
Español
</MenuItem>
<Divider />
<MenuItem onClick={handleClose}>
Help to Translate
</MenuItem>
</Menu>
</span>);
}
export default LanguageMenu;