tudor.stanciu
/
network-resurrector-frontend
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector_Frontend
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

language component refactoring

master
Tudor Stanciu 2023-03-27 00:27:47 +03:00
parent eec6d9ceb2
commit d8bad156dd
3 changed files with 33 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/features/settings/components/language/LanguageComponent.js
View File

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

15
src/features/settings/components/language/LanguageContainer.js
View File

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

42
src/features/settings/components/language/LanguageMenu.js
View File

@ -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;