Custom fonts, better home styling, more comprehensive table

2024-11-20 22:12:29 +01:00
parent 080cb1b490
commit d934136839
7 changed files with 124 additions and 96 deletions
--- a/packages/frontend/index.html
+++ b/packages/frontend/index.html
@@ -4,6 +4,9 @@
 		<meta charset="utf-8">
 		<title>Repozytorium muzyczne</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 		<script type="module" src="/src/app.tsx"></script>
 	</head>
 	<body class="w-full h-full overflow-hidden">
--- a/packages/frontend/src/loading.ts
+++ b/packages/frontend/src/loading.ts
@@ -0,0 +1,53 @@
+import { Treaty } from "@elysiajs/eden";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useStore } from "./store";
+
+export type LoadingResult<R extends Record<number, unknown>> =
+	| {
+		isLoading: true,
+		data: null,
+		error: null,
+	} | {
+		isLoading: false,
+		data: R[200],
+		error: null,
+	} | {
+		isLoading: false,
+		data: null,
+		error: Exclude<keyof R, 200 | 401> extends never
+		? { status: unknown, value: unknown }
+		: { [Status in keyof R]: { status: Status, value: R[Status] } }[Exclude<keyof R, 200 | 401>],
+	}
+	;
+
+export function useLoading<R extends Record<number, unknown>>(fn: () => Promise<Treaty.TreatyResponse<R>>) {
+
+	const navigate = useNavigate();
+
+	const setUser = useStore(state => state.setUser);
+
+	const [result, setResult] = useState<LoadingResult<R>>(() => ({ isLoading: true, data: null, error: null }));
+
+	useEffect(() => {
+		let cancelled = false;
+
+		fn().then(({ error, data }) => {
+			if (cancelled) return;
+
+			if (error !== null) {
+				if (error.status === 401) {
+					setUser(null);
+					navigate("/login");
+					return;
+				}
+			}
+
+			setResult({ isLoading: false, error, data } as LoadingResult<R>);
+		});
+
+		return () => { cancelled = true; };
+	}, []);
+
+	return result;
+}
--- a/packages/frontend/src/routes/Home.tsx
+++ b/packages/frontend/src/routes/Home.tsx
@@ -1,7 +1,8 @@
 import { FormEventHandler, useEffect, useId, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { client } from "../client";
-import { Store, useStore } from "../store";
+import { useLoading } from "../loading";
+import { useStore } from "../store";
 import { Button } from "../styled/Button";
 import { Input } from "../styled/Input";

@@ -12,19 +13,7 @@ export function Home() {
 	const user = useStore(state => state.user);
 	const setUser = useStore(state => state.setUser);

-	const pieces = useStore(state => state.pieces);
-	const setPieces = useStore(state => state.setPieces);
-
-	const loadPieces = async () => {
-		const { data, error } = await client.piece.get();
-
-		if (error !== null) {
-			console.error(error.value);
-			return;
-		}
-
-		setPieces(data);
-	};
+	const { isLoading, error, data } = useLoading(() => client.piece.get());

 	const init = async () => {
 		if (user !== null) return;
@@ -37,12 +26,9 @@ export function Home() {
 		}

 		setUser(data);
-		await loadPieces();
 	};

-	useEffect(() => {
-		init();
-	}, []);
+	useEffect(() => { init(); }, []);

 	const onLogoutClick = async () => {
 		const { error } = await client.logout.post();
@@ -55,19 +41,19 @@ export function Home() {
 		navigate("/login");
 	};

-	if (user === null) {
+	if (user === null || isLoading) {
 		return (
-			<div className="w-[1000px] max-w-full mx-auto flex flex-col items-stretch">
-				<div className="p-2 text-center">Ładowanie…</div>
+			<div className="w-full h-full overflow-hidden flex items-center justify-center">
+				<div>Ładowanie…</div>
 			</div>
 		);
 	}

 	return (
-		<div className="w-[1000px] max-w-full mx-auto flex flex-col items-stretch">
-			<div className="p-2 flex justify-between items-baseline">
+		<div className="w-full h-full overflow-hidden flex flex-col items-stretch">
+			<div className="flex p-4 justify-between items-baseline">
 				<div>
-					Użytkownik: {user.username}
+					Użytkownik: {user.username} (<span className="font-mono text-sm">{user.userId}</span>)
 				</div>
 				<div>
 					<Button type="button" onClick={onLogoutClick}>
@@ -75,30 +61,44 @@ export function Home() {
 					</Button>
 				</div>
 			</div>
-			<div>
-				<table className="w-full">
-					<thead>
-						<tr>
-							<th className="p-2 border">Tytuł</th>
-							<th className="p-2 border">Kompozytor</th>
-							<th className="p-2 border">Słowa</th>
-							<th className="p-2 border">Opracowanie</th>
-						</tr>
-					</thead>
-					<tbody>
-						{(Object.values(pieces) as Store.Piece[]).map((piece) => (
-							<tr key={piece.pieceId}>
-								<td className="p-2 border">{piece.name}</td>
-								<td className="p-2 border">{piece.composer}</td>
-								<td className="p-2 border">{piece.lyricist}</td>
-								<td className="p-2 border">{piece.arranger}</td>
+			<div className="p-4 overflow-y-auto flex flex-wrap gap-4">
+				{error !== null ? (
+					`Wystąpił błąd: ${error.value}`
+				) : (
+					<table className="grow">
+						<thead>
+							<tr>
+								<th className="p-1 border">ID</th>
+								<th className="p-1 border">Tytuł</th>
+								<th className="p-1 border">Kompozytor</th>
+								<th className="p-1 border">Słowa</th>
+								<th className="p-1 border">Opracowanie</th>
+								<th className="p-1 border">Data dodania</th>
+								<th className="p-1 border">Dodane przez</th>
+								<th className="p-1 border">Data modyfikacji</th>
+								<th className="p-1 border">Zmodyfikowane przez</th>
 							</tr>
-						))}
-					</tbody>
-				</table>
-			</div>
-			<div className="self-center">
-				<PieceForm />
+						</thead>
+						<tbody>
+							{data.map((piece) => (
+								<tr key={piece.pieceId}>
+									<td className="p-1 border font-mono text-center text-sm">{piece.pieceId}</td>
+									<td className="p-1 border">{piece.name}</td>
+									<td className="p-1 border">{piece.composer}</td>
+									<td className="p-1 border">{piece.lyricist}</td>
+									<td className="p-1 border">{piece.arranger}</td>
+									<td className="p-1 border text-center">{piece.createdAt}</td>
+									<td className="p-1 border font-mono text-center text-sm">{piece.createdBy}</td>
+									<td className="p-1 border text-center">{piece.modifiedAt ?? "\u2014"}</td>
+									<td className="p-1 border font-mono text-center text-sm">{piece.modifiedBy ?? "\u2014"}</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				)}
+				<div>
+					<PieceForm />
+				</div>
 			</div>
 		</div>
 	);
@@ -116,14 +116,12 @@ function PieceForm() {
 	const lyricistId = useId();
 	const arrangerId = useId();

-	const addPiece = useStore(state => state.setPiece);
-
 	const autoFocusRef = useRef<HTMLInputElement>(null);

 	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
 		e.preventDefault();

-		const { data, error } = await client.piece.post({
+		const { error } = await client.piece.post({
 			name,
 			composer: composer.length > 0 ? composer : null,
 			lyricist: lyricist.length > 0 ? lyricist : null,
@@ -140,12 +138,11 @@ function PieceForm() {
 		setLyricist("");
 		setArranger("");

-		addPiece(data);
 		autoFocusRef.current?.focus();
 	}

 	return (
-		<form className="p-2 flex flex-col gap-2 border border-black rounded dark:border-white" onSubmit={onSubmit}>
+		<form className="p-2 flex flex-col gap-2 border rounded" onSubmit={onSubmit}>
 			<label htmlFor={nameId}>Tytuł</label>
 			<Input
 				ref={autoFocusRef}
--- a/packages/frontend/src/routes/Login.tsx
+++ b/packages/frontend/src/routes/Login.tsx
@@ -42,8 +42,8 @@ export function Login() {

 	return (
 		<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>
+			<form className="p-2 flex flex-col gap-2 border rounded" onSubmit={onSubmit}>
+				<header className="pb-2 border-b text-center font-bold">Repozytorium muzyczne</header>
 				<label htmlFor={usernameId}>Nazwa użytkownika</label>
 				<Input
 					id={usernameId}
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -1,4 +1,4 @@
-import { PieceId, UserId } from "common";
+import { UserId } from "common";
 import * as Function from "common/Function";
 import { useLayoutEffect, useState } from "react";

@@ -9,38 +9,12 @@ export const mapProp = <const K extends string, T>(prop: K, action: Update<T>) =
 	return Object.freeze({ ...object, [prop]: typeof action === "function" ? (action as (prev: T) => T)(object[prop]) : action });
 };

-export const removeProp = <const K extends string, T>(prop: K) => <O extends { readonly [_ in K]: T}>({ [prop]: _, ...rest }: O): Readonly<Omit<O, K>> => {
-	return Object.freeze(rest);
-};
-
-export const makeMap = <const K extends string, T extends { readonly [k in K]: PropertyKey }>(prop: K, array: readonly T[]): { readonly [_ in T[K]]: T } => {
-	return Object.freeze(Object.fromEntries(array.map((item) => [item[prop], item])) as { [k in T[K]]: T });
-};
-
 export namespace Store {
 	export interface User {
 		readonly userId: UserId;
 		readonly username: string;
 		readonly admin: boolean;
 	}
-
-	export interface Piece {
-		readonly pieceId: PieceId;
-		readonly name: string;
-		readonly composer: string | null;
-		readonly lyricist: string | null;
-		readonly arranger: string | null;
-		readonly createdBy: UserId | null;
-		readonly createdAt: string;
-		readonly modifiedBy: UserId | null;
-		readonly modifiedAt: string | null;
-	}
-
-	export namespace Piece {
-		export interface Map {
-			readonly [_: PieceId]: Store.Piece;
-		}
-	}
 }

 export interface Store {
@@ -48,16 +22,11 @@ export interface Store {
 	readonly loginPassword: string;

 	readonly user: Store.User | null;
-	readonly pieces: Store.Piece.Map;

 	readonly setLoginUsername: Updater<string>;
 	readonly setLoginPassword: Updater<string>;

 	readonly setUser: Updater<Store.User | null>;
-
-	readonly setPieces: (pieces: readonly Store.Piece[]) => void;
-	readonly setPiece: (piece: Store.Piece) => void;
-	readonly deletePiece: (pieceId: PieceId) => void;
 }

 let store: Store = Object.freeze<Store>({
@@ -65,16 +34,11 @@ let store: Store = Object.freeze<Store>({
 	loginPassword: "",

 	user: null,
-	pieces: Object.freeze({}),

 	setLoginUsername: (action) => set(mapProp("loginUsername", action)),
 	setLoginPassword: (action) => set(mapProp("loginPassword", action)),

 	setUser: (action) => set(mapProp("user", action)),
-
-	setPieces: (pieces) => set(mapProp("pieces", makeMap("pieceId", pieces))),
-	setPiece: (piece) => set(mapProp("pieces", mapProp(piece.pieceId, piece))),
-	deletePiece: (pieceId) => set(mapProp("pieces", removeProp(pieceId))),
 });

 // --- STORE IMPLEMENTATION ----------------------------------------------------
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -5,7 +5,9 @@ export default {
 		"./src/**/*.{js,ts,jsx,tsx}",
 	],
 	theme: {
-		extend: {},
+		fontFamily: {
+			sans: ["Lato", "sans-serif"],
+			mono: ["JetBrains Mono", "monospace"],
+		},
 	},
-	plugins: [],
 };