language change feature

master
Tudor Stanciu 2020-12-24 02:21:45 +02:00
parent 0adbf9af72
commit e19b4f6d5c
9 changed files with 175 additions and 2 deletions

8
package-lock.json generated
View File

@ -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",

View File

@ -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",

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 937 B

View File

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

View File

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

View File

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

View File

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

View File

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