Logout API and implementation

packages/frontend/src/routes/Home.tsx

@@ -2,7 +2,7 @@ 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 } from "preact/hooks";
+import { useEffect, useMemo } from "preact/hooks";
 import { useStore } from "../store";
 import * as style from "./Home.css";
 
@@ -41,6 +41,26 @@ export const Home = () => {
 		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"));
+		}
+
+		setUser(O.none());
+
+		route("/login");
+	}), []);
+
+	const onLogoutClick = () => {
+		Effect.runFork(logoutEffect);
+	};
+
 	if (user === null) {
 		return (
 			<div class={style.container}>
@@ -53,6 +73,7 @@ export const Home = () => {
 		<div class={style.container}>
 			<div class={style.content}>
 				Użytkownik: {user.username}
+				<button type="button" onClick={onLogoutClick}>Wyloguj się</button>
 			</div>
 		</div>
 	);