diff --git a/package-lock.json b/package-lock.json index 6f9edcf..1027011 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 34ee14d..d39d47b 100644 --- a/package.json +++ b/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", diff --git a/public/flags/flags-iso/shiny/32/GB.png b/public/flags/flags-iso/shiny/32/GB.png new file mode 100644 index 0000000..531836e Binary files /dev/null and b/public/flags/flags-iso/shiny/32/GB.png differ diff --git a/public/flags/flags-iso/shiny/32/RO.png b/public/flags/flags-iso/shiny/32/RO.png new file mode 100644 index 0000000..5c68926 Binary files /dev/null and b/public/flags/flags-iso/shiny/32/RO.png differ diff --git a/src/components/layout/Switcher.js b/src/components/layout/Switcher.js index 31265d1..9cb45d5 100644 --- a/src/components/layout/Switcher.js +++ b/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 ( - + ); diff --git a/src/features/settings/components/SettingsContainer.js b/src/features/settings/components/SettingsContainer.js new file mode 100644 index 0000000..8eebf7e --- /dev/null +++ b/src/features/settings/components/SettingsContainer.js @@ -0,0 +1,8 @@ +import React from "react"; +import LanguageContainer from "./language/LanguageContainer"; + +const SettingsContainer = () => { + return ; +}; + +export default SettingsContainer; diff --git a/src/features/settings/components/language/LanguageComponent.js b/src/features/settings/components/language/LanguageComponent.js new file mode 100644 index 0000000..f2800c2 --- /dev/null +++ b/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 ( + <> + + {languageIsSet && ( + + )} + + + + ); +}; + +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; diff --git a/src/features/settings/components/language/LanguageContainer.js b/src/features/settings/components/language/LanguageContainer.js new file mode 100644 index 0000000..56dab21 --- /dev/null +++ b/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 ( + + ); +}; + +export default LanguageContainer; diff --git a/src/features/settings/components/language/LanguageMenu.js b/src/features/settings/components/language/LanguageMenu.js new file mode 100644 index 0000000..6e719d3 --- /dev/null +++ b/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 ( + + + {t("Language.Romanian")} + + + {t("Language.English")} + + + ); +}; + +LanguageMenu.propTypes = { + anchorEl: PropTypes.object, + onLanguageChange: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired +}; + +export default LanguageMenu;