From f6c3b5b3637d50b80971379844392ee891609d6b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Sat, 8 Feb 2025 18:42:39 -0800 Subject: [PATCH 1/2] remove react-world-flags, only one flag library needed --- Client/package-lock.json | 204 --------------------- Client/package.json | 1 - Client/src/Components/LanguageSelector.jsx | 94 +++++----- Client/src/Utils/i18n.js | 42 ++--- 4 files changed, 69 insertions(+), 272 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index c4d981e54..c625a35a8 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -37,7 +37,6 @@ "react-router": "^6.23.0", "react-router-dom": "^6.23.1", "react-toastify": "^10.0.5", - "react-world-flags": "^1.6.0", "recharts": "2.15.1", "redux-persist": "6.0.0", "vite-plugin-svgr": "^4.2.0" @@ -2367,14 +2366,6 @@ "@svgr/core": "*" } }, - "node_modules/@trysound/sax": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", - "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", - "engines": { - "node": ">=10.13.0" - } - }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -2879,11 +2870,6 @@ "dev": true, "license": "MIT" }, - "node_modules/boolbase": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3076,14 +3062,6 @@ "node": ">= 0.8" } }, - "node_modules/commander": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", - "engines": { - "node": ">= 10" - } - }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -3136,74 +3114,6 @@ "tiny-invariant": "^1.0.6" } }, - "node_modules/css-select": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", - "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", - "dependencies": { - "boolbase": "^1.0.0", - "css-what": "^6.1.0", - "domhandler": "^5.0.2", - "domutils": "^3.0.1", - "nth-check": "^2.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, - "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, - "node_modules/css-what": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", - "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "engines": { - "node": ">= 6" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, - "node_modules/csso": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", - "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", - "dependencies": { - "css-tree": "~2.2.0" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", - "npm": ">=7.0.0" - } - }, - "node_modules/csso/node_modules/css-tree": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", - "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", - "dependencies": { - "mdn-data": "2.0.28", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", - "npm": ">=7.0.0" - } - }, - "node_modules/csso/node_modules/mdn-data": { - "version": "2.0.28", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", - "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" - }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -3528,57 +3438,6 @@ "csstype": "^3.0.2" } }, - "node_modules/dom-serializer": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", - "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "entities": "^4.2.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" - } - }, - "node_modules/domelementtype": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", - "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ] - }, - "node_modules/domhandler": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", - "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dependencies": { - "domelementtype": "^2.3.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" - } - }, - "node_modules/domutils": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", - "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", - "dependencies": { - "dom-serializer": "^2.0.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" - } - }, "node_modules/dot-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", @@ -5473,11 +5332,6 @@ "node": ">= 0.4" } }, - "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" - }, "node_modules/memoize-one": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", @@ -5599,17 +5453,6 @@ "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", "license": "MIT" }, - "node_modules/nth-check": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", - "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "dependencies": { - "boolbase": "^1.0.0" - }, - "funding": { - "url": "https://github.com/fb55/nth-check?sponsor=1" - } - }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -6221,19 +6064,6 @@ "react-dom": ">=16.6.0" } }, - "node_modules/react-world-flags": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.6.0.tgz", - "integrity": "sha512-eutSeAy5YKoVh14js/JUCSlA6EBk1n4k+bDaV+NkNB50VhnG+f4QDTpYycnTUTsZ5cqw/saPmk0Z4Fa0VVZ1Iw==", - "dependencies": { - "svg-country-flags": "^1.2.10", - "svgo": "^3.0.2", - "world-countries": "^5.0.0" - }, - "peerDependencies": { - "react": ">=0.14" - } - }, "node_modules/recharts": { "version": "2.15.1", "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz", @@ -6861,41 +6691,12 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/svg-country-flags": { - "version": "1.2.10", - "resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz", - "integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw==" - }, "node_modules/svg-parser": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", "license": "MIT" }, - "node_modules/svgo": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", - "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", - "dependencies": { - "@trysound/sax": "0.2.0", - "commander": "^7.2.0", - "css-select": "^5.1.0", - "css-tree": "^2.3.1", - "css-what": "^6.1.0", - "csso": "^5.0.5", - "picocolors": "^1.0.0" - }, - "bin": { - "svgo": "bin/svgo" - }, - "engines": { - "node": ">=14.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/svgo" - } - }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -7329,11 +7130,6 @@ "node": ">=0.10.0" } }, - "node_modules/world-countries": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/world-countries/-/world-countries-5.0.0.tgz", - "integrity": "sha512-wAfOT9Y5i/xnxNOdKJKXdOCw9Q3yQLahBUeuRol+s+o20F6h2a4tLEbJ1lBCYwEQ30Sf9Meqeipk1gib3YwF5w==" - }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/Client/package.json b/Client/package.json index 2d0882be9..bb671b8b0 100644 --- a/Client/package.json +++ b/Client/package.json @@ -40,7 +40,6 @@ "react-router": "^6.23.0", "react-router-dom": "^6.23.1", "react-toastify": "^10.0.5", - "react-world-flags": "^1.6.0", "recharts": "2.15.1", "redux-persist": "6.0.0", "vite-plugin-svgr": "^4.2.0" diff --git a/Client/src/Components/LanguageSelector.jsx b/Client/src/Components/LanguageSelector.jsx index 4f1193cd0..cc4fc379c 100644 --- a/Client/src/Components/LanguageSelector.jsx +++ b/Client/src/Components/LanguageSelector.jsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Box, MenuItem, Select, Stack } from "@mui/material"; import { useTheme } from "@emotion/react"; -import Flag from "react-world-flags"; +import "/node_modules/flag-icons/css/flag-icons.min.css"; const LanguageSelector = () => { const { i18n } = useTranslation(); @@ -78,55 +78,59 @@ const LanguageSelector = () => { }, }} > - {languages.map((lang) => ( - { + const flag = lang ? `fi fi-${lang}` : null; + + return ( + - - + - - - - {lang} - - - - ))} + + {flag && } + + + {lang} + + + + ); + })} ); }; diff --git a/Client/src/Utils/i18n.js b/Client/src/Utils/i18n.js index 076a8b664..f7528f4b5 100644 --- a/Client/src/Utils/i18n.js +++ b/Client/src/Utils/i18n.js @@ -1,36 +1,34 @@ -import i18n from 'i18next'; -import { initReactI18next } from 'react-i18next'; +import i18n from "i18next"; +import { initReactI18next } from "react-i18next"; -const primaryLanguage = 'gb'; +const primaryLanguage = "gb"; -const translations = import.meta.glob('../locales/*.json', { eager: true }); +const translations = import.meta.glob("../locales/*.json", { eager: true }); const resources = {}; Object.keys(translations).forEach((path) => { - const langCode = path.match(/\/([^/]+)\.json$/)[1]; - resources[langCode] = { - translation: translations[path].default || translations[path] - }; + const langCode = path.match(/\/([^/]+)\.json$/)[1]; + resources[langCode] = { + translation: translations[path].default || translations[path], + }; }); const savedLanguage = localStorage.getItem("language") || primaryLanguage; -i18n - .use(initReactI18next) - .init({ - resources, - lng: savedLanguage, - fallbackLng: primaryLanguage, - debug: import.meta.env.MODE === 'development', - ns: ['translation'], - defaultNS: 'translation', - interpolation: { - escapeValue: false, - }, - }); +i18n.use(initReactI18next).init({ + resources, + lng: savedLanguage, + fallbackLng: primaryLanguage, + debug: import.meta.env.MODE === "development", + ns: ["translation"], + defaultNS: "translation", + interpolation: { + escapeValue: false, + }, +}); i18n.on("languageChanged", (lng) => { - localStorage.setItem("language", lng); + localStorage.setItem("language", lng); }); export default i18n; From b7d48171679bbc9aba5da1b0f6d941e3f4754b63 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Sun, 9 Feb 2025 07:52:31 -0800 Subject: [PATCH 2/2] fix import path --- Client/src/Components/LanguageSelector.jsx | 2 +- .../DistributedUptime/Details/Components/DeviceTicker/index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/LanguageSelector.jsx b/Client/src/Components/LanguageSelector.jsx index cc4fc379c..7a809065f 100644 --- a/Client/src/Components/LanguageSelector.jsx +++ b/Client/src/Components/LanguageSelector.jsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Box, MenuItem, Select, Stack } from "@mui/material"; import { useTheme } from "@emotion/react"; -import "/node_modules/flag-icons/css/flag-icons.min.css"; +import "flag-icons/css/flag-icons.min.css"; const LanguageSelector = () => { const { i18n } = useTranslation(); diff --git a/Client/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx b/Client/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx index 22ef5596d..dc5604a47 100644 --- a/Client/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx +++ b/Client/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx @@ -1,7 +1,7 @@ import { Stack, Typography, List, ListItem } from "@mui/material"; import { useTheme } from "@emotion/react"; import PulseDot from "../../../../../Components/Animated/PulseDot"; -import "/node_modules/flag-icons/css/flag-icons.min.css"; +import "flag-icons/css/flag-icons.min.css"; const BASE_BOX_PADDING_VERTICAL = 16; const BASE_BOX_PADDING_HORIZONTAL = 8;