LanguageComponent fix

frontend/package-lock.json

@@ -26,12 +26,13 @@
         "react-lazylog": "^4.5.3",
         "react-router-dom": "^6.10.0",
         "react-toastify": "^9.1.3",
-        "react-world-flags": "^1.5.1"
+        "react-world-flags": "^1.6.0"
       },
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@types/react": "^18.2.33",
         "@types/react-dom": "^18.2.14",
+        "@types/react-world-flags": "^1.4.5",
         "eslint": "^8.34.0",
         "eslint-config-prettier": "^8.6.0",
         "eslint-plugin-prettier": "^4.2.1",
@@ -4974,6 +4975,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-world-flags": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-world-flags/-/react-world-flags-1.4.5.tgz",
+      "integrity": "sha512-BW10gS64/FXRizBxuHeGEEl2KgljdYAe+tF4Mq3jpoWeuhZNXJOSuVrEvFY0+jrpoMOK3ER28OMgLR0oPgY2og==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -25230,6 +25240,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-world-flags": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-world-flags/-/react-world-flags-1.4.5.tgz",
+      "integrity": "sha512-BW10gS64/FXRizBxuHeGEEl2KgljdYAe+tF4Mq3jpoWeuhZNXJOSuVrEvFY0+jrpoMOK3ER28OMgLR0oPgY2og==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",

frontend/package.json

@@ -31,12 +31,13 @@
     "react-lazylog": "^4.5.3",
     "react-router-dom": "^6.10.0",
     "react-toastify": "^9.1.3",
-    "react-world-flags": "^1.5.1"
+    "react-world-flags": "^1.6.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
+    "@types/react-world-flags": "^1.4.5",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",

frontend/src/components/common/FlagIcon.tsx

@@ -0,0 +1,12 @@
+import React, { CSSProperties, useMemo } from "react";
+import Flag, { FlagProps } from "react-world-flags";
+
+const defaultStyle: CSSProperties = { height: "1.2rem", width: "2rem", objectFit: "cover" };
+
+const FlagIcon: React.FC<FlagProps> = ({ code, style, ...rest }) => {
+  const localCode = useMemo(() => (code === "en" ? "gb" : code), [code]);
+  const localStyle = useMemo(() => ({ ...defaultStyle, ...style }), [style]);
+  return <Flag {...rest} code={localCode} style={localStyle} />;
+};
+
+export default FlagIcon;

frontend/src/components/common/index.js

@@ -1,4 +1,5 @@
 import DataLabel from "./DataLabel";
 import PaperTitle from "./PaperTitle";
+import FlagIcon from "./FlagIcon";
 
-export { DataLabel, PaperTitle };
+export { DataLabel, PaperTitle, FlagIcon };

frontend/src/features/settings/appearance/language/LanguageComponent.tsx

@@ -1,19 +1,33 @@
-import React from "react";
+import React, { MouseEvent, ReactElement } from "react";
-import PropTypes from "prop-types";
-import Flag from "react-world-flags";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { FlagIcon } from "components/common";
 
-const LanguageComponent = ({ languageIsSet, anchorEl, onMenuOpen, onLanguageChange, onClose, flag, flagsPath }) => {
+interface LanguageComponentProps {
+  languageIsSet: boolean;
+  anchorEl: null | HTMLElement;
+  onMenuOpen: (event: MouseEvent<HTMLElement>) => void;
+  onLanguageChange: (lang: string) => () => void;
+  onClose: () => void;
+  flagCode: string;
+  flagsPath: string;
+}
+
+const LanguageComponent: React.FC<LanguageComponentProps> = ({
+  languageIsSet,
+  anchorEl,
+  onMenuOpen,
+  onLanguageChange,
+  onClose,
+  flagCode
+}): ReactElement => {
   const { t } = useTranslation();
   const open = Boolean(anchorEl);
 
   return (
     <>
       <IconButton aria-controls="language-menu" aria-haspopup="true" onClick={onMenuOpen} color="inherit" size="small">
-        {languageIsSet && (
+        {languageIsSet && <FlagIcon code={flagCode} />}
-          <Flag name={flag.name} format="png" pngSize={32} shiny={true} basePath={flagsPath} alt={flag.alt} />
-        )}
       </IconButton>
       <Menu
         id="language-menu"
@@ -37,14 +51,4 @@ const LanguageComponent = ({ languageIsSet, anchorEl, onMenuOpen, onLanguageChan
   );
 };
 
-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,
-  flagsPath: PropTypes.string.isRequired
-};
-
 export default LanguageComponent;

frontend/src/features/settings/appearance/language/LanguageContainer.js

@@ -2,23 +2,15 @@ import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import LanguageComponent from "./LanguageComponent";
 
-const flagsPath = process.env.PUBLIC_URL ? `${process.env.PUBLIC_URL}/flags` : "flags";
-
 const LanguageContainer = () => {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const { i18n } = useTranslation();
-  const [flag, setFlag] = useState({
+  const [flagCode, setFlagCode] = useState("RO");
-    name: "RO",
-    alt: "-"
-  });
 
   useEffect(() => {
     if (!i18n.language) return;
-    setFlag({
+    setFlagCode(i18n.language === "en" ? "GB" : i18n.language.toUpperCase());
-      name: i18n.language === "en" ? "GB" : i18n.language.toUpperCase(),
-      alt: i18n.language
-    });
   }, [i18n.language]);
 
   const handleMenuOpen = event => {
@@ -43,8 +35,7 @@ const LanguageContainer = () => {
       onMenuOpen={handleMenuOpen}
       onLanguageChange={handleLanguageChange}
       onClose={handleClose}
-      flag={flag}
+      flagCode={flagCode}
-      flagsPath={flagsPath}
     />
   );
 };