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

14
packages/frontend/src/App.tsx
View File

@@ -1,14 +0,0 @@
import { ErrorBoundary, LocationProvider, Route, Router } from "preact-iso";
import { Home } from "./routes/Home";
import { Login } from "./routes/Login";
export const App = () => (
<LocationProvider>
<ErrorBoundary>
<Router>
<Route path="/" component={Home} />
<Route path="/login" component={Login} />
</Router>
</ErrorBoundary>
</LocationProvider>
);

26
packages/frontend/src/app.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Home } from "./routes/Home";
import { Login } from "./routes/Login";
import { createRoot } from "react-dom/client";
import { StrictMode } from "react";
import "./style.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
},
{
path: "/login",
element: <Login />,
}
]);
const rootElement = document.getElementById("root") as HTMLDivElement;
const root = createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
);

4
packages/frontend/src/client.ts Normal file
View File

@@ -0,0 +1,4 @@
import { treaty } from "@elysiajs/eden";
import type { App } from "backend/app";
export const client = treaty<App>("localhost:3000");

43
packages/frontend/src/index.css.ts
View File

@@ -1,43 +0,0 @@
import { globalStyle } from "@vanilla-extract/css";
globalStyle("html, body", {
margin: 0,
padding: 0,
width: "100%",
height: "100%",
overflow: "hidden",
backgroundColor: "white",
color: "black",
fontFamily: "system-ui, sans-serif",
fontSize: 16,
fontWeight: "normal",
"@media": {
"(prefers-color-scheme: dark)": {
backgroundColor: "#1E1E1E",
color: "white",
},
},
});
globalStyle("input, button, select, textarea", {
border: "none",
outline: "none",
backgroundImage: "none",
backgroundColor: "transparent",
fontFamily: "system-ui, sans-serif",
fontSize: 16,
fontWeight: "normal",
color: "black",
"@media": {
"(prefers-color-scheme: dark)": {
color: "white",
},
},
});

6
packages/frontend/src/index.tsx
View File

@@ -1,6 +0,0 @@
import { render } from "preact";
import { App } from "./App";
import "./index.css";
render(<App />, document.body);

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

16
packages/frontend/src/store.ts
View File

@@ -1,6 +1,6 @@
import { UserId } from "common";
import { identity, Option as O } from "effect";
import { useLayoutEffect, useState } from "preact/hooks";
import * as Function from "common/Function";
import { useLayoutEffect, useState } from "react";
export type Update<T> = T | ((prev: T) => T);
export type Updater<T> = (action: Update<T>) => void;
@@ -21,19 +21,19 @@ export interface Store {
readonly loginUsername: string;
readonly loginPassword: string;
readonly user: O.Option<Store.User>;
readonly user: Store.User | null;
readonly setLoginUsername: Updater<string>;
readonly setLoginPassword: Updater<string>;
readonly setUser: Updater<O.Option<Store.User>>;
readonly setUser: Updater<Store.User | null>;
}
let store: Store = Object.freeze<Store>({
loginUsername: "",
loginPassword: "",
user: O.none(),
user: null,
setLoginUsername: (action) => set(mapProp("loginUsername", action)),
setLoginPassword: (action) => set(mapProp("loginPassword", action)),
@@ -78,14 +78,16 @@ function set(action: Partial<Store> | ((store: Store) => Partial<Store>), replac
}
}
export function useStore<T = Store>(selector: Selector<T> = identity as Selector<T>): T {
export function useStore<T = Store>(selector: Selector<T> = Function.identity as Selector<T>): T {
const [state, setState] = useState(() => selector(store));
useLayoutEffect(() => {
const listener = new Listener(selector, setState);
listeners.add(listener);
return () => listeners.delete(listener);
return () => {
listeners.delete(listener);
};
}, []);
return state;

3
packages/frontend/src/style.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

1
packages/frontend/src/vite.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />