Feature: A new modal window for changing languages [fixes #96] (#101)

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

src/pages/components/AppBarMediRepo.js

@@ -2,10 +2,6 @@ import React, { useState } from 'react';
 import i18n from 'i18next';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
-import TranslateIcon from '@material-ui/icons/Translate';
 import MedirepoIconW from '../../assets/medirepo-white.png';
 import MedirepoIconB from '../../assets/medirepo-black.png';
 import { useHistory, withRouter } from 'react-router-dom';
@@ -16,6 +12,7 @@ import { useUserDispatch, signOut, useUserState } from '../../context/UserContex
 import { useDarkState } from '../../context/ThemeContext';
 import { useTranslation } from 'react-i18next';
 import { localesList } from '../../i18n';
+import TranslateModal from './TranslateModal';
 
 const useStyles = makeStyles((theme) => ({
   img: {
@@ -36,18 +33,9 @@ function AppBarMediRepo(props) {
   const history = useHistory();
   const classes = useStyles();
   const { t } = useTranslation();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
 
-  const handleMenu = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
   const handleLanguage = (lang) => {
     i18n.changeLanguage(lang);
-    handleClose();
   };
 
   return (
@@ -61,30 +49,7 @@ function AppBarMediRepo(props) {
         <Typography variant="h6" className={classes.title}>
           {t('medicalReport')}
         </Typography>
-        <IconButton aria-label="Language" aria-controls="menu-appbar" aria-haspopup="true" onClick={handleMenu} color="inherit">
-          <TranslateIcon />
-        </IconButton>
-        <Menu
-          id="menu-appbar"
-          anchorEl={anchorEl}
-          anchorOrigin={{
-            vertical: 'top',
-            horizontal: 'right',
-          }}
-          keepMounted
-          transformOrigin={{
-            vertical: 'top',
-            horizontal: 'right',
-          }}
-          open={open}
-          onClose={handleClose}
-        >
-          {localesList.map((localesList) => (
-            <MenuItem key={localesList.locale} onClick={() => handleLanguage(localesList.locale)}>
-              {localesList.description}
-            </MenuItem>
-          ))}
-        </Menu>
+        <TranslateModal localesList={localesList} onClick={handleLanguage} />
         {isAuthenticated && (
           <Button onClick={(e) => signOut(userDispatch, history)} color="inherit">
             {t('logout')}

src/pages/components/TranslateModal.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import TranslateIcon from '@material-ui/icons/Translate';
+import IconButton from '@material-ui/core/IconButton';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: 'flex',
+    padding: theme.spacing(1),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  paper: {
+    width: 640,
+    backgroundColor: theme.palette.background.paper,
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+  button: {
+    margin: '10px',
+    width: '100px',
+    cursor: 'pointer',
+  },
+}));
+
+function TranslateModal({ localesList, onClick }) {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const handleChangeLang = (language) => {
+    onClick(language);
+    handleClose();
+  };
+
+  return (
+    <div>
+      <IconButton aria-label="Language" aria-controls="menu-appbar" aria-haspopup="true" onClick={handleOpen} color="inherit">
+        <TranslateIcon />
+      </IconButton>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+        className={classes.modal}
+      >
+        <div className={classes.paper}>
+          <h2 id="simple-modal-title">Select Language</h2>
+          <div>
+            {localesList.map((localesList) => (
+              <Button variant="outlined" key={localesList.locale} onClick={() => handleChangeLang(localesList.locale)} className={classes.button}>
+                {localesList.description}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+export default TranslateModal;