From e19b4f6d5cb4a5b0a12587ac411ba085582b568b Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Thu, 24 Dec 2020 02:21:45 +0200 Subject: [PATCH] language change feature --- package-lock.json | 8 +++ package.json | 3 +- public/flags/flags-iso/shiny/32/GB.png | Bin 0 -> 1690 bytes public/flags/flags-iso/shiny/32/RO.png | Bin 0 -> 937 bytes src/components/layout/Switcher.js | 3 +- .../settings/components/SettingsContainer.js | 8 +++ .../components/language/LanguageComponent.js | 54 ++++++++++++++++ .../components/language/LanguageContainer.js | 59 ++++++++++++++++++ .../components/language/LanguageMenu.js | 42 +++++++++++++ 9 files changed, 175 insertions(+), 2 deletions(-) create mode 100644 public/flags/flags-iso/shiny/32/GB.png create mode 100644 public/flags/flags-iso/shiny/32/RO.png create mode 100644 src/features/settings/components/SettingsContainer.js create mode 100644 src/features/settings/components/language/LanguageComponent.js create mode 100644 src/features/settings/components/language/LanguageContainer.js create mode 100644 src/features/settings/components/language/LanguageMenu.js 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 0000000000000000000000000000000000000000..531836ec058768fdbf91dd9909d73d4ef0fbad88 GIT binary patch literal 1690 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 { 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;