From c31a0dcab9c70a52cf9f5b219e325cb647661529 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Wed, 10 Feb 2021 18:35:13 -0800
Subject: [PATCH] Add change language button

---
 packages/webapp/src/client/index.ts           |  1 +
 .../webapp/src/client/mock-client/index.ts    |  4 +-
 .../webapp/src/client/rest-client/index.ts    |  1 +
 .../maps-page/account-menu/index.tsx          |  1 +
 .../webapp/src/components/maps-page/index.tsx |  2 +
 .../maps-page/language-menu/index.tsx         | 73 +++++++++++++++++++
 6 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 packages/webapp/src/components/maps-page/language-menu/index.tsx

diff --git a/packages/webapp/src/client/index.ts b/packages/webapp/src/client/index.ts
index 039465d8..6bc79d89 100644
--- a/packages/webapp/src/client/index.ts
+++ b/packages/webapp/src/client/index.ts
@@ -59,6 +59,7 @@ export type AccountInfo = {
     firstName: string;
     lastName: string;
     email: string;
+    language: string;
 }
 
 interface Client {
diff --git a/packages/webapp/src/client/mock-client/index.ts b/packages/webapp/src/client/mock-client/index.ts
index a0bb2548..f0febd55 100644
--- a/packages/webapp/src/client/mock-client/index.ts
+++ b/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> {
diff --git a/packages/webapp/src/client/rest-client/index.ts b/packages/webapp/src/client/rest-client/index.ts
index 97846411..07304d8b 100644
--- a/packages/webapp/src/client/rest-client/index.ts
+++ b/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);
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 8e6553cd..299037ad 100644
--- a/packages/webapp/src/components/maps-page/account-menu/index.tsx
+++ b/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);
     };
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index 400c8541..75aab1f7 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/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>
diff --git a/packages/webapp/src/components/maps-page/language-menu/index.tsx b/packages/webapp/src/components/maps-page/language-menu/index.tsx
new file mode 100644
index 00000000..7adcfff4
--- /dev/null
+++ b/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;
\ No newline at end of file