remove react-world-flags, only one flag library needed

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",

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"

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) => (
-				<MenuItem
-					key={lang}
-					value={lang}
-					sx={{
-						color: theme.palette.primary.contrastText,
-						"&:hover": {
-							backgroundColor: theme.palette.primary.lowContrast,
-						},
-						"&.Mui-selected": {
-							backgroundColor: theme.palette.primary.lowContrast,
+			{languages.map((lang) => {
+				const flag = lang ? `fi fi-${lang}` : null;
+
+				return (
+					<MenuItem
+						key={lang}
+						value={lang}
+						sx={{
+							color: theme.palette.primary.contrastText,
 							"&:hover": {
 								backgroundColor: theme.palette.primary.lowContrast,
 							},
-						},
-					}}
-				>
-					<Stack
-						direction="row"
-						spacing={2}
-						alignItems="center"
-						ml={0.5}
-					>
-						<Box
-							component="span"
-							sx={{
-								width: 16,
-								height: 12,
-								display: "flex",
-								alignItems: "center",
-								"& img": {
-									width: "100%",
-									height: "100%",
-									objectFit: "cover",
-									borderRadius: 0.5,
+							"&.Mui-selected": {
+								backgroundColor: theme.palette.primary.lowContrast,
+								"&:hover": {
+									backgroundColor: theme.palette.primary.lowContrast,
 								},
-							}}
+							},
+						}}
+					>
+						<Stack
+							direction="row"
+							spacing={2}
+							alignItems="center"
+							ml={0.5}
 						>
-							<Flag code={lang.toUpperCase()} />
-						</Box>
-						<Box
-							component="span"
-							sx={{ textTransform: "uppercase", fontSize: 10 }}
-						>
-							{lang}
-						</Box>
-					</Stack>
-				</MenuItem>
-			))}
+							<Box
+								component="span"
+								sx={{
+									width: 16,
+									height: 12,
+									display: "flex",
+									alignItems: "center",
+									"& img": {
+										width: "100%",
+										height: "100%",
+										objectFit: "cover",
+										borderRadius: 0.5,
+									},
+								}}
+							>
+								{flag && <span className={flag} />}
+							</Box>
+							<Box
+								component="span"
+								sx={{ textTransform: "uppercase", fontSize: 10 }}
+							>
+								{lang}
+							</Box>
+						</Stack>
+					</MenuItem>
+				);
+			})}
 		</Select>
 	);
 };

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;