Extend and fix session management, /me API

packages/frontend/src/App.tsx

@@ -1,7 +1,6 @@
-import { ErrorBoundary, lazy, LocationProvider, Route, Router } from "preact-iso";
-
-const Home = lazy(() => import("./routes/Home"));
-const Login = lazy(() => import("./routes/Login"));
+import { ErrorBoundary, LocationProvider, Route, Router } from "preact-iso";
+import { Home } from "./routes/Home";
+import { Login } from "./routes/Login";
 
 export const App = () => (
 	<LocationProvider>

packages/frontend/src/routes/Home.css.ts

@@ -0,0 +1,18 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+	width: 800,
+	maxWidth: "100%",
+
+	margin: "0 auto",
+});
+
+export const loading = style({
+	padding: 8,
+
+	textAlign: "center",
+});
+
+export const content = style({
+	padding: 8,
+});

packages/frontend/src/routes/Home.tsx

@@ -1 +1,59 @@
-export default () => null;
+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 { useStore } from "../store";
+import * as style from "./Home.css";
+
+export const Home = () => {
+
+	const { route } = useLocation();
+
+	const user = Option.getOrNull(useStore(state => state.user));
+	const setUser = useStore(state => state.setUser);
+
+	useEffect(() => {
+		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",
+			}));
+
+			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 });
+	}, []);
+
+	if (user === null) {
+		return (
+			<div class={style.container}>
+				<div class={style.loading}>Ładowanie…</div>
+			</div>
+		);
+	}
+
+	return (
+		<div class={style.container}>
+			<div class={style.content}>
+				Użytkownik: {user.username}
+			</div>
+		</div>
+	);
+};

packages/frontend/src/routes/Login.tsx

@@ -1,11 +1,14 @@
 import { Schema as S } from "@effect/schema";
-import { Login } from "common/api";
+import { Login as LoginApi } from "common/api";
+import { Effect, Fiber, Option as O, pipe } from "effect";
+import { useLocation } from "preact-iso";
 import { useId, useMemo, useRef } from "preact/hooks";
 import { useStore } from "../store";
 import * as style from "./Login.css";
-import { Effect, Fiber, Option as O, pipe } from "effect";
 
-export default () => {
+export const Login = () => {
+
+	const { route } = useLocation();
 
 	const loginUsername = useStore(state => state.loginUsername);
 	const loginPassword = useStore(state => state.loginPassword);
@@ -20,11 +23,11 @@ export default () => {
 
 	const requestFiber = useRef<Fiber.RuntimeFiber<void> | null>(null);
 	const requestEffect = useMemo(() => Effect.gen(function* () {
-		const requestData = Login.props.request.schema.make({ username: loginUsername, password: loginPassword });
+		const requestData = LoginApi.props.request.schema.make({ username: loginUsername, password: loginPassword });
 
 		const requestJson = yield* pipe(
 			requestData,
-			S.encode(Login.props.request.schema),
+			S.encode(LoginApi.props.request.schema),
 			Effect.map(JSON.stringify),
 			Effect.orDie,
 		);
@@ -34,6 +37,7 @@ export default () => {
 			body: requestJson,
 			headers: { "Content-Type": "application/json" },
 			signal,
+			credentials: "include",
 		}));
 
 		if (!res.ok) {
@@ -42,7 +46,7 @@ export default () => {
 
 		const responseData = yield* pipe(
 			Effect.promise(() => res.json()),
-			Effect.flatMap(S.decodeUnknown(Login.props.response[200].schema)),
+			Effect.flatMap(S.decodeUnknown(LoginApi.props.response[200].schema)),
 			Effect.orDie,
 		);
 
@@ -50,9 +54,7 @@ export default () => {
 		setLoginPassword("");
 		setUser(O.some(responseData));
 
-		const a = document.createElement("a");
-		a.href = "/";
-		a.click();
+		route("/");
 	}), [loginUsername, loginPassword]);
 
 	const onSubmit = (e: SubmitEvent) => {