Theis Gaedigk
b99f52f09a
- Add package.json with dependencies and scripts for development and build - Include Vite logo and React logo SVGs in public/assets - Set up Tailwind CSS in App.css and index.css - Create main App component with routing for Home and Login pages - Implement LoginPage with authentication logic and error handling - Add HomePage component as a landing page - Create MyAlert component for displaying alerts using Chakra UI - Implement color mode toggle functionality with Chakra UI - Set up global state management using Jotai for authentication - Create ProtectedRoutes component to guard routes based on authentication - Add utility components for Toaster and Tooltip using Chakra UI - Configure Tailwind CSS and TypeScript settings for the project - Implement AddLoan component for selecting loan periods and fetching available items
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import "./App.css";
|
|
import Layout from "./layout/Layout";
|
|
import { useEffect, useState } from "react";
|
|
import { AddLoan } from "./components/AddLoan";
|
|
import LoginForm from "./components/LoginForm";
|
|
import Cookies from "js-cookie";
|
|
import {
|
|
fetchAllData,
|
|
ALL_ITEMS_UPDATED_EVENT,
|
|
AUTH_LOGOUT_EVENT,
|
|
} from "./utils/fetchData";
|
|
import { myToast } from "./utils/toastify";
|
|
|
|
function App() {
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const token = Cookies.get("token");
|
|
if (token) {
|
|
setIsLoggedIn(true);
|
|
fetchAllData(token);
|
|
}
|
|
localStorage.setItem("borrowableItems", JSON.stringify([]));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const onAuthLogout = () => {
|
|
setIsLoggedIn(false);
|
|
};
|
|
window.addEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
|
|
return () => window.removeEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
Cookies.remove("token");
|
|
localStorage.removeItem("allItems");
|
|
localStorage.removeItem("allLoans");
|
|
localStorage.removeItem("userLoans");
|
|
localStorage.removeItem("borrowableItems");
|
|
window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
|
|
myToast("Logged out successfully!", "success");
|
|
setIsLoggedIn(false);
|
|
};
|
|
|
|
return isLoggedIn ? (
|
|
<Layout onLogout={handleLogout}>
|
|
<AddLoan />
|
|
</Layout>
|
|
) : (
|
|
<LoginForm onLogin={() => setIsLoggedIn(true)} />
|
|
);
|
|
}
|
|
|
|
export default App;
|