From 039d6779d1185079ac9f34f72946bafeef0014df Mon Sep 17 00:00:00 2001 From: Najeeb Thangal KP <56462749+najeebkp@users.noreply.github.com> Date: Sun, 9 Oct 2022 21:45:01 +0530 Subject: [PATCH] Feature: A new modal window for changing languages [fixes #96] (#101) --- .env | 1 + src/pages/components/AppBarMediRepo.js | 39 +-------------- src/pages/components/TranslateModal.js | 67 ++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 37 deletions(-) create mode 100644 .env create mode 100644 src/pages/components/TranslateModal.js diff --git a/.env b/.env new file mode 100644 index 0000000..7d910f1 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/src/pages/components/AppBarMediRepo.js b/src/pages/components/AppBarMediRepo.js index 6dcd6b3..69ebecd 100644 --- a/src/pages/components/AppBarMediRepo.js +++ b/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')} diff --git a/src/pages/components/TranslateModal.js b/src/pages/components/TranslateModal.js new file mode 100644 index 0000000..d43fd05 --- /dev/null +++ b/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;