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 (
+
+ );
+};
+
+LanguageMenu.propTypes = {
+ anchorEl: PropTypes.object,
+ onLanguageChange: PropTypes.func.isRequired,
+ onClose: PropTypes.func.isRequired
+};
+
+export default LanguageMenu;