From 7685a7595df29eb964fd695f8c55bd1cc2211bb6 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Mon, 1 Apr 2024 00:58:11 +0300 Subject: [PATCH] LanguageComponent fix --- frontend/package-lock.json | 21 +++++++++- frontend/package.json | 3 +- .../public/flags/flags-iso/shiny/32/GB.png | Bin 1690 -> 0 bytes .../public/flags/flags-iso/shiny/32/RO.png | Bin 937 -> 0 bytes frontend/src/components/common/FlagIcon.tsx | 12 ++++++ frontend/src/components/common/index.js | 3 +- ...uageComponent.js => LanguageComponent.tsx} | 38 ++++++++++-------- .../appearance/language/LanguageContainer.js | 15 ++----- 8 files changed, 60 insertions(+), 32 deletions(-) delete mode 100644 frontend/public/flags/flags-iso/shiny/32/GB.png delete mode 100644 frontend/public/flags/flags-iso/shiny/32/RO.png create mode 100644 frontend/src/components/common/FlagIcon.tsx rename frontend/src/features/settings/appearance/language/{LanguageComponent.js => LanguageComponent.tsx} (56%) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 96bc052..8945a0d 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 224fe0d..f3f0c63 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/public/flags/flags-iso/shiny/32/GB.png b/frontend/public/flags/flags-iso/shiny/32/GB.png deleted file mode 100644 index 531836ec058768fdbf91dd9909d73d4ef0fbad88..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1690 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 = ({ code, style, ...rest }) => { + const localCode = useMemo(() => (code === "en" ? "gb" : code), [code]); + const localStyle = useMemo(() => ({ ...defaultStyle, ...style }), [style]); + return ; +}; + +export default FlagIcon; diff --git a/frontend/src/components/common/index.js b/frontend/src/components/common/index.js index bef3023..30d42e9 100644 --- a/frontend/src/components/common/index.js +++ b/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 }; diff --git a/frontend/src/features/settings/appearance/language/LanguageComponent.js b/frontend/src/features/settings/appearance/language/LanguageComponent.tsx similarity index 56% rename from frontend/src/features/settings/appearance/language/LanguageComponent.js rename to frontend/src/features/settings/appearance/language/LanguageComponent.tsx index 621125c..f61908e 100644 --- a/frontend/src/features/settings/appearance/language/LanguageComponent.js +++ b/frontend/src/features/settings/appearance/language/LanguageComponent.tsx @@ -1,19 +1,33 @@ -import React from "react"; -import PropTypes from "prop-types"; -import Flag from "react-world-flags"; +import React, { MouseEvent, ReactElement } from "react"; 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) => void; + onLanguageChange: (lang: string) => () => void; + onClose: () => void; + flagCode: string; + flagsPath: string; +} + +const LanguageComponent: React.FC = ({ + languageIsSet, + anchorEl, + onMenuOpen, + onLanguageChange, + onClose, + flagCode +}): ReactElement => { const { t } = useTranslation(); const open = Boolean(anchorEl); return ( <> - {languageIsSet && ( - - )} + {languageIsSet && } { const [anchorEl, setAnchorEl] = useState(null); const { i18n } = useTranslation(); - const [flag, setFlag] = useState({ - name: "RO", - alt: "-" - }); + const [flagCode, setFlagCode] = useState("RO"); useEffect(() => { if (!i18n.language) return; - setFlag({ - name: i18n.language === "en" ? "GB" : i18n.language.toUpperCase(), - alt: i18n.language - }); + setFlagCode(i18n.language === "en" ? "GB" : i18n.language.toUpperCase()); }, [i18n.language]); const handleMenuOpen = event => { @@ -43,8 +35,7 @@ const LanguageContainer = () => { onMenuOpen={handleMenuOpen} onLanguageChange={handleLanguageChange} onClose={handleClose} - flag={flag} - flagsPath={flagsPath} + flagCode={flagCode} /> ); };