feat(i18n): adds i18next package and extracts string

refactors some relevant points of the code closes #341
ResultadosDigitais · Jul 18, 2020 · 1bdba45 · 1bdba45
1 parent 25a16d0
commit 1bdba45
Show file tree

Hide file tree

Showing 65 changed files with 750 additions and 270 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,11 +14,13 @@
     "axios": "^0.19.0",
     "bootstrap": "^4.4.1",
     "clsx": "^1.0.4",
+    "i18next": "^19.6.2",
     "lodash.debounce": "^4.0.8",
     "notistack": "^0.9.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-i18next": "^11.7.0",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.0.1",
     "redux": "^4.0.4",

diff --git a/frontend/src/components/AppBar.js b/frontend/src/components/AppBar.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
 import UIAppBar from "@material-ui/core/AppBar";
@@ -38,6 +39,8 @@ const useStyles = makeStyles(theme => ({
 const AppBar = ({ isDrawerOpen, openDrawer, children }) => {
   const classes = useStyles();
 
+  const { t } = useTranslation();
+
   return (
     <div className={classes.root}>
       <UIAppBar
@@ -52,7 +55,7 @@ const AppBar = ({ isDrawerOpen, openDrawer, children }) => {
             edge="start"
             className={clsx(classes.menuButton, isDrawerOpen && classes.hide)}
             color="inherit"
-            aria-label="Menu"
+            title={t("general:open-menu")}
             onClick={openDrawer}
           >
             <MenuIcon />

diff --git a/frontend/src/components/ConfirmDialog.js b/frontend/src/components/ConfirmDialog.js
@@ -1,35 +1,40 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
 
-const ConfirmDialog = ({ open, onClose, onConfirm, title, message }) => (
-  <Dialog open={open} onClose={onClose}>
-    <DialogTitle>{title}</DialogTitle>
-    <DialogContent>
-      <DialogContentText>{message}</DialogContentText>
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={onClose} color="primary">
-        No
-      </Button>
-      <Button
-        onClick={() => {
-          onClose();
-          onConfirm();
-        }}
-        color="primary"
-        autoFocus
-      >
-        Yes
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
+const ConfirmDialog = ({ open, onClose, onConfirm, title, message }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{message}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          {t("general:no")}
+        </Button>
+        <Button
+          onClick={() => {
+            onClose();
+            onConfirm();
+          }}
+          color="primary"
+          autoFocus
+        >
+          {t("general:yes")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
 
 ConfirmDialog.propTypes = {
   open: PropTypes.bool,

diff --git a/frontend/src/components/Drawer.js b/frontend/src/components/Drawer.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 import { makeStyles } from "@material-ui/core/styles";
 import UIDrawer from "@material-ui/core/Drawer";
 import Divider from "@material-ui/core/Divider";
@@ -29,6 +30,9 @@ const useStyles = makeStyles(theme => ({
 
 const Drawer = ({ open, onClose, children }) => {
   const classes = useStyles();
+
+  const { t } = useTranslation();
+
   return (
     <UIDrawer
       className={classes.root}
@@ -40,7 +44,7 @@ const Drawer = ({ open, onClose, children }) => {
       }}
     >
       <div className={classes.drawerHeader}>
-        <IconButton onClick={onClose}>
+        <IconButton title={t("general:close-menu")} onClick={onClose}>
           <ChevronLeftIcon />
         </IconButton>
       </div>

diff --git a/frontend/src/components/Error500.js b/frontend/src/components/Error500.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 import { makeStyles } from "@material-ui/core/styles";
 import Fab from "@material-ui/core/Fab";
 
@@ -25,23 +26,24 @@ const useStyles = makeStyles(() => ({
 const Error500 = ({ onReload }) => {
   const classes = useStyles();
 
+  const { t } = useTranslation();
+
   return (
     <div className={classes.root}>
       <div className={classes.box}>
         <div>
           <img
             className={classes.imgTitle}
             src="/images/systemfailure.jpeg"
-            alt="System Failure"
+            alt={t("error:system-failure")}
           />
         </div>
         <Fab
           variant="extended"
           color="secondary"
-          aria-label="Reload"
           onClick={onReload}
         >
-          Reload the Matrix
+          {t("error:reload-matrix")}
         </Fab>
       </div>
     </div>

diff --git a/frontend/src/components/InviteToMeetingDialog.js b/frontend/src/components/InviteToMeetingDialog.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
@@ -13,31 +14,35 @@ const InviteToMeetingDialog = ({
   onConfirm,
   user,
   currentRoomName
-}) => (
-  <Dialog open={open} onClose={onClose}>
-    <DialogTitle id="alert-dialog-title">User invite</DialogTitle>
-    <DialogContent>
-      <DialogContentText id="alert-dialog-description">
-        Invite {user.name} to {currentRoomName}?
-      </DialogContentText>
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={onClose} color="primary">
-        Cancel
-      </Button>
-      <Button
-        onClick={() => {
-          onClose();
-          onConfirm();
-        }}
-        color="primary"
-        autoFocus
-      >
-        Invite
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle id="alert-dialog-title">{t("meeting:invite-user")}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {t("meeting:invite-user-text", { user: user.name, room: currentRoomName})}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          {t("general:cancel")}
+        </Button>
+        <Button
+          onClick={() => {
+            onClose();
+            onConfirm();
+          }}
+          color="primary"
+          autoFocus
+        >
+          {t("meeting:invite")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
 
 InviteToMeetingDialog.propTypes = {
   user: PropTypes.shape({

diff --git a/frontend/src/components/LanguageSwitcher.js b/frontend/src/components/LanguageSwitcher.js
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import IconButton from "@material-ui/core/IconButton";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import Tooltip from "@material-ui/core/Tooltip";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import LanguageIcon from "@material-ui/icons/Translate";
+import FlagImages from "../constants/FlagImages";
+
+const LanguageSwitcher = () => {
+  const { t, i18n } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const switchLanguage = (lang) => {
+    i18n.changeLanguage(lang)
+    localStorage.setItem("matrix-language", lang);
+    handleClose();
+  }
+
+  return (
+    <>
+      <Tooltip title={t("general:change-language")}>
+        <IconButton
+          aria-controls="language-menu"
+          aria-haspopup="true"
+          onClick={ handleClick }
+        >
+          <LanguageIcon />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        id="language-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        getContentAnchorEl={null}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+      >
+        <MenuItem selected={i18n.language === "en"} onClick={() => switchLanguage("en")}>
+          <ListItemIcon>
+            <img alt="" src={FlagImages.en} />
+          </ListItemIcon>
+          <strong>{t("general:languages.en")}</strong>
+        </MenuItem>
+        <MenuItem selected={i18n.language === "pt-BR"} onClick={() => switchLanguage("pt-BR")}>
+          <ListItemIcon>
+            <img alt="" src={FlagImages.ptBr} />
+          </ListItemIcon>
+          <strong>{t("general:languages.pt-br")}</strong>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default LanguageSwitcher;