Port to elysia, tailwind (no effect)

packages/frontend/src/routes/Home.tsx

@@ -1,79 +1,66 @@
-import { Schema as S } from "@effect/schema";
-import { Me } from "common/api";
-import { Effect, Fiber, Option as O, Option, pipe } from "effect";
-import { useLocation } from "preact-iso";
-import { useEffect, useMemo } from "preact/hooks";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { client } from "../client";
 import { useStore } from "../store";
-import * as style from "./Home.css";
 
 export const Home = () => {
 
-	const { route } = useLocation();
+	const navigate = useNavigate();
 
-	const user = Option.getOrNull(useStore(state => state.user));
+	const user = useStore(state => state.user);
 	const setUser = useStore(state => state.setUser);
 
-	useEffect(() => {
+	const init = async () => {
 		if (user !== null) return;
 
-		const effect = Effect.gen(function* () {
-			const res = yield* Effect.promise((signal) => fetch("http://localhost:3000/me", {
-				method: "GET",
-				signal,
-				credentials: "include",
-			}));
+		const { data, error } = await client.me.get();
 
-			if (!res.ok) {
-				route("/login");
-				return;
-			}
-
-			const responseData = yield* pipe(
-				Effect.promise(() => res.json()),
-				Effect.flatMap(S.decodeUnknown(Me.props.response[200].schema)),
-				Effect.orDie,
-			);
-
-			setUser(O.some(responseData));
-		});
-
-		const fiber = Effect.runFork(effect);
-		return () => Effect.runFork(Fiber.interrupt(fiber), { immediate: true });
-	}, []);
-
-	const logoutEffect = useMemo(() => Effect.gen(function* () {
-		const res = yield* Effect.promise((signal) => fetch("http://localhost:3000/logout", {
-			method: "POST",
-			signal,
-			credentials: "include",
-		}));
-
-		if (!res.ok) {
-			yield* Effect.die(new Error("Response was not ok"));
+		if (error !== null) {
+			navigate("/login");
+			return;
 		}
 
-		setUser(O.none());
+		setUser(data);
+	};
 
-		route("/login");
-	}), []);
+	useEffect(() => {
+		init();
+	}, []);
 
-	const onLogoutClick = () => {
-		Effect.runFork(logoutEffect);
+	const onLogoutClick = async () => {
+		const { data, error } = await client.logout.post();
+
+		if (error !== null) {
+			console.error("Response was not ok");
+		}
+
+		setUser(null);
+		navigate("/login");
 	};
 
 	if (user === null) {
 		return (
-			<div class={style.container}>
-				<div class={style.loading}>Ładowanie…</div>
+			<div className="w-[1000px] max-w-full mx-auto flex flex-col items-stretch">
+				<div className="p-2 text-center">Ładowanie…</div>
 			</div>
 		);
 	}
 
 	return (
-		<div class={style.container}>
-			<div class={style.header}>
-				<div>Użytkownik: {user.username}</div>
-				<div><button class={style.logout} type="button" onClick={onLogoutClick}>Wyloguj się</button></div>
+		<div className="w-[1000px] max-w-full mx-auto flex flex-col items-stretch">
+			<div className="p-2 flex justify-between items-baseline">
+				<div>
+					Użytkownik: {user.username}
+				</div>
+				<div>
+					<button
+						className="p-2 bg-stone-300 border-2 border-t-stone-200 border-l-stone-200 border-r-stone-600 border-b-stone-600 rounded"
+						type="button"
+						onClick={onLogoutClick}
+					>
+						Wyloguj się
+					</button>
+				</div>
 			</div>
 		</div>
 	);