Add piece editor page

packages/frontend/src/routes/Root.tsx

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { client } from "../client";
+import { useStore } from "../store";
+import { Button } from "../styled/Button";
+import { timeout } from "../utils";
+
+export function Root() {
+
+	const navigate = useNavigate();
+
+	const user = useStore(state => state.user);
+	const setUser = useStore(state => state.setUser);
+
+	const init = async () => {
+		if (user !== null) return;
+
+		const { data, error } = await client.me.get();
+		await timeout(1000);
+
+		if (error !== null) {
+			navigate("/login");
+			return;
+		}
+
+		setUser(data);
+	};
+
+	useEffect(() => { init(); }, []);
+
+	const onLogoutClick = async () => {
+		const { error } = await client.logout.post();
+
+		if (error !== null) {
+			console.error("Response was not ok");
+		}
+
+		setUser(null);
+		navigate("/login");
+	};
+
+	if (user === null) {
+		return (
+			<div className="w-full h-full overflow-hidden flex items-center justify-center">
+				<div>Ładowanie…</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="w-full h-full overflow-hidden flex flex-col items-stretch">
+			<div className="flex p-4 justify-between items-baseline">
+				<div>
+					Użytkownik: {user.username} (<span className="font-mono text-sm">{user.userId}</span>)
+				</div>
+				<div>
+					<Button type="button" onClick={onLogoutClick}>
+						Wyloguj się
+					</Button>
+				</div>
+			</div>
+			<Outlet context={user} />
+		</div>
+	);
+}