feat: implement Landingpage component and update Layout to conditionally render it

This commit is contained in:
2025-09-19 12:24:17 +02:00
parent c3572a3d70
commit 679ef7dcbd
3 changed files with 36 additions and 17 deletions

View File

@@ -4,9 +4,7 @@ import Layout from "./Layout/Layout";
function App() { function App() {
return ( return (
<> <>
<Layout> <Layout />
<p></p>
</Layout>
</> </>
); );
} }

View File

@@ -3,15 +3,20 @@ import { useEffect } from "react";
import Dashboard from "./Dashboard"; import Dashboard from "./Dashboard";
import Login from "./Login"; import Login from "./Login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import Landingpage from "@/components/API/Landingpage";
type LayoutProps = { const Layout: React.FC = () => {
children: React.ReactNode;
};
const Layout: React.FC<LayoutProps> = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
const [showAPI, setShowAPI] = useState(false);
useEffect(() => { useEffect(() => {
const path = window.location.pathname.replace(/\/+$/, ""); // remove trailing slash
if (path === "/api") {
setShowAPI(true);
console.log("signal");
return;
}
if (Cookies.get("token")) { if (Cookies.get("token")) {
const verifyToken = async () => { const verifyToken = async () => {
const response = await fetch("http://localhost:8002/api/verifyToken", { const response = await fetch("http://localhost:8002/api/verifyToken", {
@@ -37,17 +42,22 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
setIsLoggedIn(false); setIsLoggedIn(false);
}; };
return ( if (showAPI) {
<> return (
<main> <main>
{isLoggedIn ? ( <Landingpage />
<Dashboard onLogout={() => handleLogout()} />
) : (
<Login onSuccess={() => setIsLoggedIn(true)} />
)}
</main> </main>
{children} );
</> }
return (
<main>
{isLoggedIn ? (
<Dashboard onLogout={() => handleLogout()} />
) : (
<Login onSuccess={() => setIsLoggedIn(true)} />
)}
</main>
); );
}; };

View File

@@ -0,0 +1,11 @@
import React from "react";
const Landingpage: React.FC = () => {
return (
<>
<h1>Übersicht über alle Gegenstände und Ausleihen</h1>
</>
);
};
export default Landingpage;