language change feature

package-lock.json

@@ -12664,6 +12664,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
       "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
     },
+    "react-flags": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/react-flags/-/react-flags-0.1.18.tgz",
+      "integrity": "sha512-fa8D6DIZS6DWRqLcmKGIHVT13r4viHAfIRth9cFO7cDyxEPfTBbZei6p0Xeao6of4C/K4XU/j35aMjPC15ePIg==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-i18next": {
       "version": "11.8.4",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.4.tgz",

package.json

@@ -17,7 +17,8 @@
     "i18next-http-backend": "^1.0.10",
     "react-i18next": "^11.4.0",
     "moment": "^2.25.3",
-    "axios": "^0.19.2"
+    "axios": "^0.19.2",
+    "react-flags": "^0.1.18"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/layout/Switcher.js

@@ -3,13 +3,14 @@ import { Route, Switch } from "react-router-dom";
 import PageNotFound from "./PageNotFound";
 import LoginContainer from "../../features/login/components/LoginContainer";
 import NetworkContainer from "../../features/network/components/NetworkContainer";
+import SettingsContainer from "../../features/settings/components/SettingsContainer";
 
 const Switcher = () => {
   return (
     <Switch>
       <Route exact path="/" component={LoginContainer} />
       <Route exact path="/network" component={NetworkContainer} />
-
+      <Route exact path="/settings" component={SettingsContainer} />
       <Route component={PageNotFound} />
     </Switch>
   );

src/features/settings/components/SettingsContainer.js

@@ -0,0 +1,8 @@
+import React from "react";
+import LanguageContainer from "./language/LanguageContainer";
+
+const SettingsContainer = () => {
+  return <LanguageContainer />;
+};
+
+export default SettingsContainer;

src/features/settings/components/language/LanguageComponent.js

@@ -0,0 +1,54 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Flag from "react-flags";
+import { IconButton } from "@material-ui/core";
+import LanguageMenu from "./LanguageMenu";
+
+const LanguageComponent = ({
+  languageIsSet,
+  anchorEl,
+  onMenuOpen,
+  onLanguageChange,
+  onClose,
+  flag,
+  getFlagsPath
+}) => {
+  return (
+    <>
+      <IconButton
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={onMenuOpen}
+        color="inherit"
+      >
+        {languageIsSet && (
+          <Flag
+            name={flag.name}
+            format="png"
+            pngSize={32}
+            shiny={true}
+            basePath={getFlagsPath()}
+            alt={flag.alt}
+          />
+        )}
+      </IconButton>
+      <LanguageMenu
+        anchorEl={anchorEl}
+        onLanguageChange={onLanguageChange}
+        onClose={onClose}
+      />
+    </>
+  );
+};
+
+LanguageComponent.propTypes = {
+  languageIsSet: PropTypes.bool.isRequired,
+  anchorEl: PropTypes.object,
+  onMenuOpen: PropTypes.func.isRequired,
+  onLanguageChange: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  flag: PropTypes.object.isRequired,
+  getFlagsPath: PropTypes.func.isRequired
+};
+
+export default LanguageComponent;

src/features/settings/components/language/LanguageContainer.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import LanguageComponent from "./LanguageComponent";
+
+const LanguageContainer = () => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const { i18n } = useTranslation();
+  const [flag, setFlag] = useState({
+    name: "RO",
+    alt: "-"
+  });
+
+  useEffect(() => {
+    if (!i18n.language) return;
+    setFlag({
+      name: i18n.language === "en" ? "GB" : i18n.language.toUpperCase(),
+      alt: i18n.language
+    });
+  }, [i18n.language]);
+
+  const handleMenuOpen = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLanguageChange = language => () => {
+    if (language !== i18n.language) {
+      i18n.changeLanguage(language);
+    }
+    setAnchorEl(null);
+  };
+
+  const getFlagsPath = () => {
+    const basePath = "flags";
+    if (process.env.PUBLIC_URL) {
+      return `${process.env.PUBLIC_URL}/${basePath}`;
+    } else {
+      return basePath;
+    }
+  };
+
+  return (
+    <LanguageComponent
+      languageIsSet={i18n.language ? true : false}
+      anchorEl={anchorEl}
+      onMenuOpen={handleMenuOpen}
+      onLanguageChange={handleLanguageChange}
+      onClose={handleClose}
+      flag={flag}
+      getFlagsPath={getFlagsPath}
+    />
+  );
+};
+
+export default LanguageContainer;

src/features/settings/components/language/LanguageMenu.js

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Menu, MenuItem } from "@material-ui/core";
+
+const LanguageMenu = ({ anchorEl, onLanguageChange, onClose }) => {
+  const { t } = useTranslation();
+  const open = Boolean(anchorEl);
+
+  return (
+    <Menu
+      id="menu-appbar"
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      keepMounted
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      open={open}
+      onClose={onClose}
+    >
+      <MenuItem onClick={onLanguageChange("ro")}>
+        {t("Language.Romanian")}
+      </MenuItem>
+      <MenuItem onClick={onLanguageChange("en")}>
+        {t("Language.English")}
+      </MenuItem>
+    </Menu>
+  );
+};
+
+LanguageMenu.propTypes = {
+  anchorEl: PropTypes.object,
+  onLanguageChange: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+export default LanguageMenu;