From 4b1c92757fd681429ddee931a5525029f79a13a8 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sun, 7 Feb 2021 08:38:50 -0800
Subject: [PATCH] Extract components

---
 .../webapp/src/components/help-menu/index.tsx |  79 +++++++
 .../maps-page/account-menu/index.tsx          |  61 ++++++
 .../action-dispatcher/import-dialog/index.tsx |   6 +-
 .../client-health-sentinel/index.tsx          |  47 +++++
 .../webapp/src/components/maps-page/index.tsx | 193 ++----------------
 5 files changed, 203 insertions(+), 183 deletions(-)
 create mode 100644 packages/webapp/src/components/help-menu/index.tsx
 create mode 100644 packages/webapp/src/components/maps-page/account-menu/index.tsx
 create mode 100644 packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx

diff --git a/packages/webapp/src/components/help-menu/index.tsx b/packages/webapp/src/components/help-menu/index.tsx
new file mode 100644
index 00000000..3779f244
--- /dev/null
+++ b/packages/webapp/src/components/help-menu/index.tsx
@@ -0,0 +1,79 @@
+import { IconButton, Link, ListItemIcon, Menu, MenuItem } from "@material-ui/core";
+import { Help, PolicyOutlined, EmailOutlined, FeedbackOutlined, EmojiPeopleOutlined } from "@material-ui/icons";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const HelpMenu = () => {
+    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);
+    };
+
+    return (
+        <span>
+            <IconButton
+                aria-haspopup="true"
+                onClick={handleMenu}>
+                <Help />
+            </IconButton>
+            <Menu id="appbar-profile"
+                anchorEl={anchorEl}
+                keepMounted
+                open={open}
+                getContentAnchorEl={null}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}>
+
+                <MenuItem onClick={handleClose}>
+                    <Link color="textSecondary" href="https://www.wisemapping.com/termsofuse.html" target="help">
+                        <ListItemIcon>
+                            <PolicyOutlined fontSize="small" />
+                        </ListItemIcon>
+                        <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" />
+                    </Link>
+                </MenuItem>
+
+                <MenuItem onClick={handleClose}>
+                    <Link color="textSecondary" href="mailto:team@wisemapping.com">
+                        <ListItemIcon>
+                            <EmailOutlined fontSize="small" />
+                        </ListItemIcon>
+                        <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" />
+                    </Link>
+                </MenuItem>
+
+                <MenuItem onClick={handleClose}>
+                    <Link color="textSecondary" href="mailto:feedback@wisemapping.com">
+                        <ListItemIcon>
+                            <FeedbackOutlined fontSize="small" />
+                        </ListItemIcon>
+                        <FormattedMessage id="footer.feedback" defaultMessage="Feedback" />
+                    </Link>
+                </MenuItem>
+
+                <MenuItem onClick={handleClose}>
+                    <Link color="textSecondary" href="https://www.wisemapping.com/aboutus.html" target="help">
+                        <ListItemIcon>
+                            <EmojiPeopleOutlined fontSize="small" />
+                        </ListItemIcon>
+                        <FormattedMessage id="footer.aboutus" defaultMessage="About Us" />
+                    </Link>
+                </MenuItem>
+            </Menu>
+        </span>);
+}
+
+export default HelpMenu;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/account-menu/index.tsx b/packages/webapp/src/components/maps-page/account-menu/index.tsx
new file mode 100644
index 00000000..5c64d59e
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/account-menu/index.tsx
@@ -0,0 +1,61 @@
+import { Button, 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";
+
+const AccountMenu = () => {
+    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);
+    };
+
+    return (
+        <span>
+            <Tooltip title="Paulo Veiga <pveiga@gmail.com>">
+                <Button
+                    aria-haspopup="true"
+                    onClick={handleMenu}>
+                    <AccountCircle fontSize="large" />
+                Paulo Veiga
+            </Button >
+            </Tooltip>
+            <Menu id="appbar-profile"
+                anchorEl={anchorEl}
+                keepMounted
+                open={open}
+                getContentAnchorEl={null}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+            >
+                <MenuItem onClick={handleClose}>
+                    <ListItemIcon>
+                        <SettingsApplicationsOutlined fontSize="small" />
+                    </ListItemIcon>
+                    <FormattedMessage id="menu.account" defaultMessage="Account" />
+                </MenuItem>
+
+                <MenuItem onClick={handleClose}>
+                    <Link color="textSecondary" href="/c/logout">
+                        <ListItemIcon>
+                            <ExitToAppOutlined fontSize="small" />
+                        </ListItemIcon>
+                        <FormattedMessage id="menu.signout" defaultMessage="Sign Out" />
+                    </Link>
+                </MenuItem>
+
+            </Menu>
+        </span>);
+}
+export default AccountMenu;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
index cb46aa6d..31d5a096 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Button, FormControl } from '@material-ui/core';
@@ -79,8 +79,8 @@ const ImportDialog = (props: CreateProps) => {
                         style={{display: 'none'}}
                     />
                     <label htmlFor="contained-button-file">
-                        <Button variant="contained" color="primary" component="span">
-                            Upload
+                        <Button variant="outlined" color="primary" component="span" style={{margin: '10px 5px', width: '100%'}}>
+                            <FormattedMessage id="maps.choose-file" defaultMessage="Choose a file"/>
                         </Button>
                     </label>
                 </FormControl>
diff --git a/packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx b/packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx
new file mode 100644
index 00000000..5bfe9cc4
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx
@@ -0,0 +1,47 @@
+import { useSelector } from 'react-redux';
+import React from "react";
+import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
+import { FormattedMessage } from 'react-intl';
+import { Alert, AlertTitle } from '@material-ui/lab';
+
+const ClientHealthChecker = () => {
+    const status: ClientStatus = useSelector(activeInstanceStatus);
+
+    const handleOnClose = () => {
+        window.location.href = '/c/login';
+    }
+
+    return (
+        <div>
+            <Dialog
+                open={status.state != 'healthy'}
+                onClose={handleOnClose}
+                maxWidth="sm"
+                fullWidth={true}>
+
+                <DialogTitle>
+                    <FormattedMessage id="expired.title" defaultMessage="Your session has expired" />
+                </DialogTitle>
+
+                <DialogContent>
+                    <Alert severity="error">
+                        <AlertTitle><FormattedMessage id="expired.description" defaultMessage="Your current session has expired. Please, sign in and try again." /></AlertTitle>
+                    </Alert>
+                </DialogContent>
+
+                <DialogActions>
+                    <Button
+                        type="button"
+                        color="primary"
+                        size="medium"
+                        onClick={handleOnClose} >
+                        <FormattedMessage id="action.close-button" defaultMessage="Close" />
+                    </Button>
+                </DialogActions>
+
+            </Dialog>
+        </div>
+    )
+};
+export default ClientHealthChecker;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index e6f726e9..d5d41b87 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@@ -8,17 +8,19 @@ import IconButton from '@material-ui/core/IconButton';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import { useStyles } from './style';
-import { AccountCircle, AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, LabelTwoTone, PeopleAltTwoTone, PersonAddTwoTone, PersonOutlineTwoTone, PersonTwoTone, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined, ShareTwoTone, StarTwoTone } from '@material-ui/icons';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core';
+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 { useQuery, useMutation, useQueryClient } from 'react-query';
-import { activeInstance, activeInstanceStatus, ClientStatus } from '../../redux/clientSlice';
+import { activeInstance } from '../../redux/clientSlice';
 import { useSelector } from 'react-redux';
 import Client, { Label } from '../../client';
 import ActionDispatcher from './action-dispatcher';
 import { ActionType } from './action-chooser';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import AccountMenu from './account-menu';
+import ClientHealthSentinel from './client-health-sentinel';
+import HelpMenu from '../help-menu';
 
 const logoIcon = require('../../images/logo-small.svg');
 const poweredByIcon = require('../../images/pwrdby-white.svg');
@@ -105,7 +107,7 @@ const MapsPage = () => {
 
     return (
         <div className={classes.root}>
-            <HandleClientStatus />
+            <ClientHealthSentinel />
             <AppBar
                 position="fixed"
                 className={clsx(classes.appBar, {
@@ -115,7 +117,7 @@ const MapsPage = () => {
                 elevation={0}>
 
                 <Toolbar>
-                    <Tooltip title={intl.formatMessage({id:'maps.create-tooltip',defaultMessage:'Create a New Map'})}>
+                    <Tooltip title={intl.formatMessage({ id: 'maps.create-tooltip', defaultMessage: 'Create a New Map' })}>
                         <Button color="primary"
                             size="medium"
                             variant="contained"
@@ -123,12 +125,12 @@ const MapsPage = () => {
                             disableElevation={true}
                             startIcon={<AddCircleTwoTone />}
                             className={classes.newMapButton}
-                            onClick={e => setActiveDialog('create')}>
+                            onClick={() => setActiveDialog('create')}>
                             <FormattedMessage id="action.new" defaultMessage="New Map" />
                         </Button>
                     </Tooltip>
 
-                    <Tooltip title="Import from external tools">
+                    <Tooltip title={intl.formatMessage({ id: 'maps.import-desc', defaultMessage: 'Import from other tools' })}>
                         <Button
                             color="primary"
                             size="medium"
@@ -137,15 +139,15 @@ const MapsPage = () => {
                             disableElevation={true}
                             startIcon={<CloudUploadTwoTone />}
                             className={classes.importButton}
-                            onClick={e => setActiveDialog('import')}>
+                            onClick={() => setActiveDialog('import')}>
                             <FormattedMessage id="action.import" defaultMessage="Import" />
                         </Button>
                     </Tooltip>
                     <ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapsId={[]} />
 
                     <div className={classes.rightButtonGroup}>
-                        <HelpToobarButton />
-                        <ProfileToobarButton />
+                        <HelpMenu />
+                        <AccountMenu />
                     </div>
                 </Toolbar>
             </AppBar>
@@ -246,173 +248,4 @@ const StyleListItem = (props: ListItemProps) => {
     );
 }
 
-const HandleClientStatus = () => {
-    const status: ClientStatus = useSelector(activeInstanceStatus);
-
-    const handleOnClose = () => {
-        window.location.href = '/c/login';
-    }
-
-    return (
-        <div>
-            <Dialog
-                open={status.state != 'healthy'}
-                onClose={handleOnClose}
-                maxWidth="sm"
-                fullWidth={true}>
-
-                <DialogTitle>
-                    <FormattedMessage id="expired.title" defaultMessage="Your session has expired" />
-                </DialogTitle>
-
-                <DialogContent>
-                    <Alert severity="error">
-                        <AlertTitle><FormattedMessage id="expired.description" defaultMessage="Your current session has expired. Please, sign in and try again." /></AlertTitle>
-                    </Alert>
-                </DialogContent>
-
-                <DialogActions>
-                    <Button
-                        type="button"
-                        color="primary"
-                        size="medium"
-                        onClick={handleOnClose} >
-                        <FormattedMessage id="action.close-button" defaultMessage="Close" />
-                    </Button>
-                </DialogActions>
-
-            </Dialog>
-        </div>
-    )
-}
-
-const ProfileToobarButton = () => {
-    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);
-    };
-
-    return (
-        <span>
-            <Tooltip title="Paulo Veiga <pveiga@gmail.com>">
-                <Button
-                    aria-haspopup="true"
-                    onClick={handleMenu}>
-                    <AccountCircle fontSize="large" />
-                Paulo Veiga
-            </Button >
-            </Tooltip>
-            <Menu id="appbar-profile"
-                anchorEl={anchorEl}
-                keepMounted
-                open={open}
-                getContentAnchorEl={null}
-                onClose={handleClose}
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }}
-                transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'right',
-                }}
-            >
-                <MenuItem onClick={handleClose}>
-                    <ListItemIcon>
-                        <SettingsApplicationsOutlined fontSize="small" />
-                    </ListItemIcon>
-                    <FormattedMessage id="menu.account" defaultMessage="Account" />
-                </MenuItem>
-
-                <MenuItem onClick={handleClose}>
-                    <Link color="textSecondary" href="/c/logout">
-                        <ListItemIcon>
-                            <ExitToAppOutlined fontSize="small" />
-                        </ListItemIcon>
-                        <FormattedMessage id="menu.signout" defaultMessage="Sign Out" />
-                    </Link>
-                </MenuItem>
-
-            </Menu>
-        </span>);
-}
-
-const HelpToobarButton = () => {
-    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);
-    };
-
-    return (
-        <span>
-            <IconButton
-                aria-haspopup="true"
-                onClick={handleMenu}>
-                <Help />
-            </IconButton>
-            <Menu id="appbar-profile"
-                anchorEl={anchorEl}
-                keepMounted
-                open={open}
-                getContentAnchorEl={null}
-                onClose={handleClose}
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }}
-                transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'right',
-                }}>
-
-                <MenuItem onClick={handleClose}>
-                    <Link color="textSecondary" href="https://www.wisemapping.com/termsofuse.html" target="help">
-                        <ListItemIcon>
-                            <PolicyOutlined fontSize="small" />
-                        </ListItemIcon>
-                        <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" />
-                    </Link>
-                </MenuItem>
-
-                <MenuItem onClick={handleClose}>
-                    <Link color="textSecondary" href="mailto:team@wisemapping.com">
-                        <ListItemIcon>
-                            <EmailOutlined fontSize="small" />
-                        </ListItemIcon>
-                        <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" />
-                    </Link>
-                </MenuItem>
-
-                <MenuItem onClick={handleClose}>
-                    <Link color="textSecondary" href="mailto:feedback@wisemapping.com">
-                        <ListItemIcon>
-                            <FeedbackOutlined fontSize="small" />
-                        </ListItemIcon>
-                        <FormattedMessage id="footer.feedback" defaultMessage="Feedback" />
-                    </Link>
-                </MenuItem>
-
-                <MenuItem onClick={handleClose}>
-                    <Link color="textSecondary" href="https://www.wisemapping.com/aboutus.html" target="help">
-                        <ListItemIcon>
-                            <EmojiPeopleOutlined fontSize="small" />
-                        </ListItemIcon>
-                        <FormattedMessage id="footer.aboutus" defaultMessage="About Us" />
-                    </Link>
-                </MenuItem>
-            </Menu>
-        </span>);
-}
 export default MapsPage;
\ No newline at end of file