From cacf3f9c0ddd3489e40e7ac782a4f2c8207462ec Mon Sep 17 00:00:00 2001
From: Kshitij <kshitijk@tuta.io>
Date: Thu, 19 Jun 2025 16:26:04 +0530
Subject: [PATCH] Added language switcher function in App.jsx

---
 Frontend/src/App.jsx | 50 ++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index bb9d153..7da446e 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,45 +1,68 @@
 import { useDispatch, useSelector } from "react-redux";
 import "./App.css";
-//import Navbar from "./components/Navbar";
+// import Navbar from "./components/Navbar";
 import Navbar2 from "./components/Navbar2";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { userSliceActions } from "./store/userSlice";
-
 import { Outlet } from "react-router-dom";
 import { BACKEND_URL } from "./constants";
 
+// Simple LanguageSwitcher component
+function LanguageSwitcher({ language, setLanguage }) {
+  return (
+    <select
+      value={language}
+      onChange={(e) => {
+        setLanguage(e.target.value);
+        localStorage.setItem("language", e.target.value);
+      }}
+      className="absolute top-2 right-2 p-1 rounded border"
+      aria-label="Select language"
+    >
+      <option value="en">English</option>
+      <option value="fr">Français</option>
+      {/* Add more languages here */}
+    </select>
+  );
+}
+
 function App() {
   const user = useSelector((store) => store.user);
-
   const dispatch = useDispatch();
-
   const loader = useSelector((store) => store.loader);
 
+  // Language state, initialized from localStorage or default to 'en'
+  const [language, setLanguage] = useState(
+    localStorage.getItem("language") || "en"
+  );
+
+  console.log("Current language:", language);
+
   useEffect(() => {
     async function initialiseUser() {
-      if (user.role == "unloggeduser") {
+      if (user.role === "unloggeduser") {
         const responce = await fetch(`${BACKEND_URL}/api/v1/getuser`, {
           method: "GET",
           credentials: "include",
         });
 
         const userData = await responce.json();
-
-        //console.log("User Datae is ", userData);
-
         dispatch(userSliceActions.addUser(userData.data));
-
-        //console.log("Updated User is : ", user);
       }
     }
     initialiseUser();
   }, []);
+
   return (
     <>
       <div className="w-full h-auto flex-col relative">
-        
+        {/* 2. Language Switcher visible on all pages */}
+        <LanguageSwitcher language={language} setLanguage={setLanguage} />
+
+        {/* 3. Pass language as prop to Navbar2 and Outlet if needed */}
+        <Navbar2 language={language} />
+        <Outlet context={{ language }} />
 
-        <Outlet />
         <div
           className={`${
             loader ? "block" : "hidden"
@@ -73,3 +96,4 @@ function App() {
 }
 
 export default App;
+