renati/music-repo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Port to elysia, tailwind (no effect)

Browse Source
This commit is contained in:
Szymon Nowakowski
2024-11-17 23:08:23 +01:00
parent e8aaa328e6
commit 63de1a3b02
53 changed files with 1942 additions and 2363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/frontend/src/routes/Home.css.ts
View File

@@ -1,31 +1,4 @@
import { style } from "@vanilla-extract/css";
export const container = style({
width: 1000,
maxWidth: "100%",
margin: "0 auto",
display: "flex",
flexDirection: "column",
alignItems: "stretch",
});
export const loading = style({
padding: 8,
textAlign: "center",
});
export const header = style({
padding: 8,
display: "flex",
justifyContent: "space-between",
alignItems: "baseline",
});
export const logout = style({
export const logout = {
padding: 8,
backgroundColor: "#C0C0C0",
@@ -83,4 +56,4 @@ export const logout = style({
borderBottomColor: "#202020",
},
},
});
};

93
packages/frontend/src/routes/Home.tsx
View File

@@ -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>
);

81
packages/frontend/src/routes/Login.css.ts
View File

@@ -1,83 +1,4 @@
import { style } from "@vanilla-extract/css";
export const container = style({
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
});
export const box = style({
padding: 8,
display: "flex",
flexDirection: "column",
gap: 8,
borderWidth: 1,
borderStyle: "solid",
borderColor: "black",
borderRadius: 4,
"@media": {
"(prefers-color-scheme: dark)": {
borderColor: "white",
},
},
});
export const header = style({
paddingBottom: 8,
borderBottomWidth: 1,
borderBottomStyle: "solid",
borderBottomColor: "black",
textAlign: "center",
fontWeight: "bold",
"@media": {
"(prefers-color-scheme: dark)": {
borderBottomColor: "white",
},
},
});
export const input = style({
width: "32ch",
padding: 8,
borderWidth: 1,
borderStyle: "solid",
borderColor: "black",
borderRadius: 4,
"selectors": {
"&:focus": {
outlineWidth: 2,
outlineStyle: "solid",
outlineColor: "#8080FF",
"@media": {
"(prefers-color-scheme: dark)": {
outlineColor: "#C0C0FF",
},
},
},
},
"@media": {
"(prefers-color-scheme: dark)": {
borderColor: "white",
},
},
});
export const submit = style({
export const submit = {
padding: 8,
backgroundColor: "#C0C0C0",

82
packages/frontend/src/routes/Login.tsx
View File

@@ -1,14 +1,11 @@
import { Schema as S } from "@effect/schema";
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 { FormEventHandler, useId } from "react";
import { useNavigate } from "react-router-dom";
import { client } from "../client";
import { useStore } from "../store";
import * as style from "./Login.css";
export const Login = () => {
const { route } = useLocation();
const navigate = useNavigate();
const loginUsername = useStore(state => state.loginUsername);
const loginPassword = useStore(state => state.loginPassword);
@@ -21,76 +18,55 @@ export const Login = () => {
const usernameId = useId();
const passwordId = useId();
const requestFiber = useRef<Fiber.RuntimeFiber<void> | null>(null);
const requestEffect = useMemo(() => Effect.gen(function* () {
const requestData = LoginApi.props.request.schema.make({ username: loginUsername, password: loginPassword });
const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
e.preventDefault();
const requestJson = yield* pipe(
requestData,
S.encode(LoginApi.props.request.schema),
Effect.map(JSON.stringify),
Effect.orDie,
);
const { data, error } = await client.login.post({
username: loginUsername,
password: loginPassword,
});
const res = yield* Effect.promise((signal) => fetch("http://localhost:3000/login", {
method: "POST",
body: requestJson,
headers: { "Content-Type": "application/json" },
signal,
credentials: "include",
}));
if (!res.ok) {
yield* Effect.die(new Error("Response was not ok"));
if (error) {
console.error(error.value);
return;
}
const responseData = yield* pipe(
Effect.promise(() => res.json()),
Effect.flatMap(S.decodeUnknown(LoginApi.props.response[200].schema)),
Effect.orDie,
);
setLoginUsername("");
setLoginPassword("");
setUser(O.some(responseData));
setUser(data);
route("/");
}), [loginUsername, loginPassword]);
const onSubmit = (e: SubmitEvent) => {
e.preventDefault();
if (requestFiber.current !== null) {
Effect.runFork(Fiber.interrupt(requestFiber.current), { immediate: true });
}
requestFiber.current = Effect.runFork(requestEffect);
navigate("/");
};
return (
<div class={style.container}>
<form class={style.box} onSubmit={onSubmit}>
<header class={style.header}>Repozytorium muzyczne</header>
<label for={usernameId}>Nazwa użytkownika</label>
<div className="w-full h-full flex items-center justify-center">
<form className="p-2 flex flex-col gap-2 border border-black rounded dark:border-white" onSubmit={onSubmit}>
<header className="pb-2 border-b border-black text-center font-bold dark:border-white">Repozytorium muzyczne</header>
<label htmlFor={usernameId}>Nazwa użytkownika</label>
<input
id={usernameId}
class={style.input}
className="w-[32ch] p-2 bg-transparent border border-black rounded focus:outline focus:outline-2 focus:outline-sky-500 focus:dark:outline-sky-200 dark:border-white"
type="text"
value={loginUsername}
autofocus
autoFocus
required
onInput={(e) => setLoginUsername(e.currentTarget.value)}
/>
<label for={passwordId}>Hasło</label>
<label htmlFor={passwordId}>Hasło</label>
<input
id={passwordId}
class={style.input}
className="w-[32ch] p-2 bg-transparent border border-black rounded focus:outline focus:outline-2 focus:outline-sky-500 focus:dark:outline-sky-200 dark:border-white"
type="password"
value={loginPassword}
required
onInput={(e) => setLoginPassword(e.currentTarget.value)}
/>
<button class={style.submit} type="submit">Zaloguj się</button>
<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 dark:bg-stone-700 dark:border-t-stone-600 dark:border-l-stone-600 dark:border-r-stone-900 dark:border-b-stone-900"
type="submit"
>
Zaloguj się
</button>
</form>
</div>
);