mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Add change language button
This commit is contained in:
parent
1c5d6342e5
commit
c31a0dcab9
@ -59,6 +59,7 @@ export type AccountInfo = {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
language: string;
|
||||
}
|
||||
|
||||
interface Client {
|
||||
|
@ -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> {
|
||||
|
@ -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);
|
||||
|
@ -19,6 +19,7 @@ const AccountMenu = () => {
|
||||
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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;
|
Loading…
Reference in New Issue
Block a user