refactor: streamline language initialization and update Container component in HomePage and MyLoansPage

FrontendV2/src/App.tsx

@@ -11,6 +11,7 @@ import { UserContext, type User } from "./states/Context";
 import { triggerLogoutAtom } from "@/states/Atoms";
 import { MyLoansPage } from "./pages/MyLoansPage";
 import Landingpage from "./pages/Landingpage";
+import { changeLanguage } from "i18next";
 
 const API_BASE =
   (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -44,6 +45,21 @@ function App() {
       };
       verifyToken();
     }
+
+    // set initial language
+    if (!Cookies.get("language")) {
+      const getBrowserLanguage = () => {
+        const lang = navigator.languages?.[0] || navigator.language || "en";
+        return lang.split("-")[0].toLowerCase();
+      };
+
+      changeLanguage(getBrowserLanguage());
+      Cookies.set("language", getBrowserLanguage());
+    }
+
+    if (Cookies.get("language")) {
+      changeLanguage(Cookies.get("language") || "en");
+    }
   }, []);
 
   return (

FrontendV2/src/pages/HomePage.tsx

@@ -46,7 +46,7 @@ export const HomePage = () => {
   };
 
   return (
-    <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
+    <Container className="px-6 sm:px-8 pt-10">
       <Header />
       {isMsg && (
         <MyAlert
@@ -92,9 +92,7 @@ export const HomePage = () => {
               if (response && response.status === "error") {
                 setMsgStatus("error");
                 setMsgTitle(response.title || t("error"));
-                setMsgDescription(
-                  response.description || t("unknown-error")
-                );
+                setMsgDescription(response.description || t("unknown-error"));
                 setIsMsg(true);
                 return;
               }
@@ -147,9 +145,7 @@ export const HomePage = () => {
                 if (response.status === "error") {
                   setMsgStatus("error");
                   setMsgTitle(response.title || t("error"));
-                  setMsgDescription(
-                    response.description || t("unknown-error")
-                  );
+                  setMsgDescription(response.description || t("unknown-error"));
                   setIsMsg(true);
                   return;
                 }

FrontendV2/src/pages/MyLoansPage.tsx

@@ -117,7 +117,7 @@ export const MyLoansPage = () => {
 
   return (
     <>
-      <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
+      <Container className="px-6 sm:px-8 pt-10">
         <Header />
         {isMsg && (
           <MyAlert