97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import "./App.css";
|
|
import { LoginPage } from "@/pages/LoginPage";
|
|
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
|
import { HomePage } from "@/pages/HomePage";
|
|
import { ProtectedRoutes } from "./utils/ProtectedRoutes";
|
|
import { useEffect, useState } from "react";
|
|
import Cookies from "js-cookie";
|
|
import { useAtom } from "jotai";
|
|
import { setIsLoggedInAtom } from "@/states/Atoms";
|
|
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";
|
|
import { Box, Flex } from "@chakra-ui/react";
|
|
import { Footer } from "./components/footer/Footer";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { API_BASE } from "@/config/api.config";
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
function App() {
|
|
const [user, setUser] = useState<User | undefined>(undefined);
|
|
const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
|
|
const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
|
|
|
|
useEffect(() => {
|
|
if (Cookies.get("token")) {
|
|
const verifyToken = async () => {
|
|
const response = await fetch(`${API_BASE}/verify`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${Cookies.get("token")}`,
|
|
},
|
|
});
|
|
if (response.ok) {
|
|
setTriggerLogout(false);
|
|
const data = await response.json();
|
|
setUser({
|
|
username: data.user.username,
|
|
is_admin: data.user.is_admin,
|
|
first_name: data.user.first_name,
|
|
last_name: data.user.last_name,
|
|
role: data.user.role,
|
|
});
|
|
setIsLoggedIn(true);
|
|
} else {
|
|
Cookies.remove("token");
|
|
setIsLoggedIn(false);
|
|
window.location.reload();
|
|
}
|
|
};
|
|
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 (
|
|
<QueryClientProvider client={queryClient}>
|
|
<Flex direction="column" minH="100vh">
|
|
<Box as="main" flex="1">
|
|
<UserContext.Provider value={user}>
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route element={<ProtectedRoutes />}>
|
|
<Route path="/" element={<HomePage />} />
|
|
<Route path="/my-loans" element={<MyLoansPage />} />
|
|
<Route path="/landingpage" element={<Landingpage />} />
|
|
</Route>
|
|
|
|
<Route path="/login" element={<LoginPage />} />
|
|
</Routes>
|
|
</BrowserRouter>
|
|
</UserContext.Provider>
|
|
</Box>
|
|
<Footer />
|
|
</Flex>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|