Added language switcher function in App.jsx
This commit is contained in:
+37
-13
@@ -1,45 +1,68 @@
|
|||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
//import Navbar from "./components/Navbar";
|
// import Navbar from "./components/Navbar";
|
||||||
import Navbar2 from "./components/Navbar2";
|
import Navbar2 from "./components/Navbar2";
|
||||||
import { useEffect } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { userSliceActions } from "./store/userSlice";
|
import { userSliceActions } from "./store/userSlice";
|
||||||
|
|
||||||
import { Outlet } from "react-router-dom";
|
import { Outlet } from "react-router-dom";
|
||||||
import { BACKEND_URL } from "./constants";
|
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() {
|
function App() {
|
||||||
const user = useSelector((store) => store.user);
|
const user = useSelector((store) => store.user);
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const loader = useSelector((store) => store.loader);
|
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(() => {
|
useEffect(() => {
|
||||||
async function initialiseUser() {
|
async function initialiseUser() {
|
||||||
if (user.role == "unloggeduser") {
|
if (user.role === "unloggeduser") {
|
||||||
const responce = await fetch(`${BACKEND_URL}/api/v1/getuser`, {
|
const responce = await fetch(`${BACKEND_URL}/api/v1/getuser`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
credentials: "include",
|
credentials: "include",
|
||||||
});
|
});
|
||||||
|
|
||||||
const userData = await responce.json();
|
const userData = await responce.json();
|
||||||
|
|
||||||
//console.log("User Datae is ", userData);
|
|
||||||
|
|
||||||
dispatch(userSliceActions.addUser(userData.data));
|
dispatch(userSliceActions.addUser(userData.data));
|
||||||
|
|
||||||
//console.log("Updated User is : ", user);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
initialiseUser();
|
initialiseUser();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="w-full h-auto flex-col relative">
|
<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
|
<div
|
||||||
className={`${
|
className={`${
|
||||||
loader ? "block" : "hidden"
|
loader ? "block" : "hidden"
|
||||||
@@ -73,3 +96,4 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user