Add change language button

packages/webapp/src/client/index.ts

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

packages/webapp/src/client/mock-client/index.ts

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

packages/webapp/src/client/rest-client/index.ts

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

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

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

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

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

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

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