feat: implement Landingpage component and update Layout to conditionally render it
This commit is contained in:
@@ -4,9 +4,7 @@ import Layout from "./Layout/Layout";
|
|||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Layout>
|
<Layout />
|
||||||
<p></p>
|
|
||||||
</Layout>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
11
admin/src/components/API/Landingpage.tsx
Normal file
11
admin/src/components/API/Landingpage.tsx
Normal 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;
|
Reference in New Issue
Block a user