language component refactoring

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

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Flag from "react-flags";
-import { IconButton } from "@material-ui/core";
-import LanguageMenu from "./LanguageMenu";
+import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
 
 const LanguageComponent = ({
   languageIsSet,
@@ -11,8 +11,11 @@ const LanguageComponent = ({
   onLanguageChange,
   onClose,
   flag,
-  getFlagsPath
+  flagsPath
 }) => {
+  const { t } = useTranslation();
+  const open = Boolean(anchorEl);
+
   return (
     <>
       <IconButton
@@ -27,16 +30,33 @@ const LanguageComponent = ({
             format="png"
             pngSize={32}
             shiny={true}
-            basePath={getFlagsPath()}
+            basePath={flagsPath}
             alt={flag.alt}
           />
         )}
       </IconButton>
-      <LanguageMenu
+      <Menu
+        id="language-menu"
         anchorEl={anchorEl}
-        onLanguageChange={onLanguageChange}
+        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>
     </>
   );
 };
@@ -48,7 +68,7 @@ LanguageComponent.propTypes = {
   onLanguageChange: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
   flag: PropTypes.object.isRequired,
-  getFlagsPath: PropTypes.func.isRequired
+  flagsPath: PropTypes.string.isRequired
 };
 
 export default LanguageComponent;

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

@@ -2,6 +2,10 @@ import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import LanguageComponent from "./LanguageComponent";
 
+const flagsPath = process.env.PUBLIC_URL
+  ? `${process.env.PUBLIC_URL}/flags`
+  : "flags";
+
 const LanguageContainer = () => {
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -34,15 +38,6 @@ const LanguageContainer = () => {
     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}
@@ -51,7 +46,7 @@ const LanguageContainer = () => {
       onLanguageChange={handleLanguageChange}
       onClose={handleClose}
       flag={flag}
-      getFlagsPath={getFlagsPath}
+      flagsPath={flagsPath}
     />
   );
 };

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

@@ -1,42 +0,0 @@
-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="language-menu"
-      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;