Merge pull request #321 from SELab-2/i18n_fix

fixed i18n? i hope

frontend/src/i18n.tsx

@@ -1,7 +1,6 @@
 import i18n from 'i18next';
 import Backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
 
 /*
 TESTING: 
@@ -16,15 +15,13 @@ await i18n
     // load translation using http -> see /public/locales
     // learn more: https://github.com/i18next/i18next-http-backend
     .use(Backend)
-    // detect user language
-    // learn more: https://github.com/i18next/i18next-browser-languageDetector
-    .use(LanguageDetector)
     // pass the i18n instance to react-i18next.
     .use(initReactI18next)
     // init i18next
     // for all options read: https://www.i18next.com/overview/configuration-options
     .init({
         debug: true,
+        lng: localStorage.getItem('language') || 'en',
         fallbackLng: 'en',
         interpolation: {
             escapeValue: false, // not needed for react as it escapes by default

frontend/src/pages/login/LoginScreen.tsx

@@ -1,18 +1,19 @@
-import React, {JSX, useEffect} from "react";
+import {JSX, useEffect} from "react";
 import {Navigate, useLocation, useRouteLoaderData} from 'react-router-dom';
 import useAuth from "../../hooks/useAuth.ts";
 import loginLoader, {LOGIN_ROUTER_ID, loginLoaderObject} from "../../dataloaders/LoginLoader.ts";
 import LoginForm from "../../components/authentication/LoginForm.tsx";
 import {Token, User} from "../../utils/ApiInterfaces.ts";
 import {post_ticket} from "../../utils/api/Login.ts";
+import setLanguage from "../../utils/SetLanguage.ts";
 
 interface location_type {
     search?: { ticket?: string },
     state?: { from?: { pathname: string } },
     pathname: string
 }
 
-async function ticketLogin (ticket: string, setUser: React.Dispatch<React.SetStateAction<User | undefined>>) {
+async function ticketLogin(ticket: string, setUser: (user: User) => void, delUser: () => void): Promise<void> {
     const token: Token | undefined = await post_ticket(ticket)
     if (token?.token) {
         localStorage.setItem('token', token.token)
@@ -21,7 +22,7 @@ async function ticketLogin (ticket: string, setUser: React.Dispatch<React.SetSta
             setUser(result.user)
         } else {
             localStorage.removeItem('token')
-            setUser(undefined)
+            delUser()
         }
     }
 }
@@ -39,20 +40,28 @@ export default function LoginScreen(): JSX.Element {
     }
     localStorage.setItem('to', next)
 
+    const setUser_ = (user: User) => {
+        setLanguage(user.user_language);
+        setUser(user);
+    }
+    const delUser = () => {
+        setUser(undefined);
+    }
+
     // Loading the user using the saved token
     const data: loginLoaderObject = useRouteLoaderData(LOGIN_ROUTER_ID) as loginLoaderObject
     useEffect(() => {
         // If the saved token is valid => the user will be logged in
         if (data && data.user) {
-            setUser(data.user)
+            setUser_(data.user)
         } else if (!user && ticket) {
             try {
-                void ticketLogin(ticket, setUser);
+                void ticketLogin(ticket, setUser_, delUser);
             } catch (error) {
                 console.log("Ticket wasn't accepted")
             }
         }
-    }, [data, setUser, ticket, user]);
+    });
 
     return (
         <div className={"login-screen is-flex is-justify-content-center is-align-items-center"}>

frontend/src/utils/SetLanguage.ts

@@ -0,0 +1,4 @@
+
+export default function setLanguage(lng:string){
+    localStorage.setItem('language', lng);
+}

frontend/src/utils/api/User.ts

@@ -1,9 +1,11 @@
 import apiFetch from "../ApiFetch.ts";
 import i18n from "../../i18n.tsx";
+import setLanguage from "../SetLanguage.ts";
 
 export function modify_language(language: string): void {
     void i18n.changeLanguage(language);
-    void apiFetch(`/user?language=${language.toUpperCase()}`, {
+    setLanguage(language);
+    void apiFetch(`/user?language=${language.toLowerCase()}`, {
         method: 'PUT'
     });
 }