refactor i18n

client/src/Components/I18nLoader/index.jsx

@@ -0,0 +1,16 @@
+import i18n from "../../Utils/i18n";
+import { useSelector } from "react-redux";
+import { useEffect } from "react";
+const I18nLoader = () => {
+	const language = useSelector((state) => state.ui.language);
+
+	useEffect(() => {
+		if (language && i18n.language !== language) {
+			i18n.changeLanguage(language);
+		}
+	}, [language]);
+
+	return null;
+};
+
+export default I18nLoader;

client/src/Components/Inputs/Select/index.jsx

@@ -164,7 +164,8 @@ Select.propTypes = {
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 	items: PropTypes.arrayOf(
 		PropTypes.shape({
-			_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+			_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
+				.isRequired,
 			name: PropTypes.string.isRequired,
 		})
 	).isRequired,

client/src/Components/LanguageSelector.jsx

@@ -3,15 +3,17 @@ import { Box, MenuItem, Select, Stack } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import "flag-icons/css/flag-icons.min.css";
 import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { setLanguage } from "../Features/UI/uiSlice";
 
 const LanguageSelector = () => {
 	const { i18n } = useTranslation();
 	const theme = useTheme();
 	const { language } = useSelector((state) => state.ui);
-
+	const dispatch = useDispatch();
 	const handleChange = (event) => {
 		const newLang = event.target.value;
-		i18n.changeLanguage(newLang);
+		dispatch(setLanguage(newLang));
 	};
 
 	const languages = Object.keys(i18n.options.resources || {});
@@ -32,7 +34,6 @@ const LanguageSelector = () => {
 				}
 				if (parsedLang.includes("-")) {
 					parsedLang = parsedLang.split("-")[1].toLowerCase();
-					console.log("parsedLang", parsedLang);
 				}
 
 				const flag = parsedLang ? `fi fi-${parsedLang}` : null;