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

Custom fonts, better home styling, more comprehensive table

Browse Source
This commit is contained in:
Szymon Nowakowski
2024-11-20 22:12:29 +01:00
parent 080cb1b490
commit d934136839
7 changed files with 124 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/backend/src/app.ts
View File

@@ -171,19 +171,28 @@ const app = new Elysia()
}), }),
}) })
.get("/piece", async ({ db, user }) => { .get("/piece", async ({ db, query, user }) => {
if (user === null) { if (user === null) {
return error("Unauthorized"); return error("Unauthorized");
} }
const res = await db let q = db
.selectFrom("Piece") .selectFrom("Piece")
.selectAll() .selectAll()
.orderBy(["name", "composer", "arranger"]) .orderBy(["name", "composer", "arranger"])
.execute(); .limit(100);
if (query.id !== undefined) {
q = q.where("pieceId", "=", query.id);
}
const res = await q.execute();
return res; return res;
}, {
query: t.Object({
id: t.Optional(tbranded<PieceId>()),
}),
}) })
.put("/piece/:pieceId", async ({ db, body: { name, composer, lyricist, arranger }, params: { pieceId }, user }) => { .put("/piece/:pieceId", async ({ db, body: { name, composer, lyricist, arranger }, params: { pieceId }, user }) => {

3
packages/frontend/index.html
View File

@@ -4,6 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Repozytorium muzyczne</title> <title>Repozytorium muzyczne</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <script type="module" src="/src/app.tsx"></script>
</head> </head>
<body class="w-full h-full overflow-hidden"> <body class="w-full h-full overflow-hidden">

53
packages/frontend/src/loading.ts Normal file
View File

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

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

@@ -1,7 +1,8 @@
import { FormEventHandler, useEffect, useId, useRef, useState } from "react"; import { FormEventHandler, useEffect, useId, useRef, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { client } from "../client"; import { client } from "../client";
import { Store, useStore } from "../store"; import { useLoading } from "../loading";
import { useStore } from "../store";
import { Button } from "../styled/Button"; import { Button } from "../styled/Button";
import { Input } from "../styled/Input"; import { Input } from "../styled/Input";
@@ -12,19 +13,7 @@ export function Home() {
const user = useStore(state => state.user); const user = useStore(state => state.user);
const setUser = useStore(state => state.setUser); const setUser = useStore(state => state.setUser);
const pieces = useStore(state => state.pieces); const { isLoading, error, data } = useLoading(() => client.piece.get());
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 init = async () => { const init = async () => {
if (user !== null) return; if (user !== null) return;
@@ -37,12 +26,9 @@ export function Home() {
} }
setUser(data); setUser(data);
await loadPieces();
}; };
useEffect(() => { useEffect(() => { init(); }, []);
init();
}, []);
const onLogoutClick = async () => { const onLogoutClick = async () => {
const { error } = await client.logout.post(); const { error } = await client.logout.post();
@@ -55,19 +41,19 @@ export function Home() {
navigate("/login"); navigate("/login");
}; };
if (user === null) { if (user === null || isLoading) {
return ( return (
<div className="w-[1000px] max-w-full mx-auto flex flex-col items-stretch"> <div className="w-full h-full overflow-hidden flex items-center justify-center">
<div className="p-2 text-center">Ładowanie…</div> <div>Ładowanie…</div>
</div> </div>
); );
} }
return ( return (
<div className="w-[1000px] max-w-full mx-auto flex flex-col items-stretch"> <div className="w-full h-full overflow-hidden flex flex-col items-stretch">
<div className="p-2 flex justify-between items-baseline"> <div className="flex p-4 justify-between items-baseline">
<div> <div>
Użytkownik: {user.username} Użytkownik: {user.username} (<span className="font-mono text-sm">{user.userId}</span>)
</div> </div>
<div> <div>
<Button type="button" onClick={onLogoutClick}> <Button type="button" onClick={onLogoutClick}>
@@ -75,30 +61,44 @@ export function Home() {
</Button> </Button>
</div> </div>
</div> </div>
<div> <div className="p-4 overflow-y-auto flex flex-wrap gap-4">
<table className="w-full"> {error !== null ? (
<thead> `Wystąpił błąd: ${error.value}`
<tr> ) : (
<th className="p-2 border">Tytuł</th> <table className="grow">
<th className="p-2 border">Kompozytor</th> <thead>
<th className="p-2 border">Słowa</th> <tr>
<th className="p-2 border">Opracowanie</th> <th className="p-1 border">ID</th>
</tr> <th className="p-1 border">Tytuł</th>
</thead> <th className="p-1 border">Kompozytor</th>
<tbody> <th className="p-1 border">Słowa</th>
{(Object.values(pieces) as Store.Piece[]).map((piece) => ( <th className="p-1 border">Opracowanie</th>
<tr key={piece.pieceId}> <th className="p-1 border">Data dodania</th>
<td className="p-2 border">{piece.name}</td> <th className="p-1 border">Dodane przez</th>
<td className="p-2 border">{piece.composer}</td> <th className="p-1 border">Data modyfikacji</th>
<td className="p-2 border">{piece.lyricist}</td> <th className="p-1 border">Zmodyfikowane przez</th>
<td className="p-2 border">{piece.arranger}</td>
</tr> </tr>
))} </thead>
</tbody> <tbody>
</table> {data.map((piece) => (
</div> <tr key={piece.pieceId}>
<div className="self-center"> <td className="p-1 border font-mono text-center text-sm">{piece.pieceId}</td>
<PieceForm /> <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>
</div> </div>
); );
@@ -116,14 +116,12 @@ function PieceForm() {
const lyricistId = useId(); const lyricistId = useId();
const arrangerId = useId(); const arrangerId = useId();
const addPiece = useStore(state => state.setPiece);
const autoFocusRef = useRef<HTMLInputElement>(null); const autoFocusRef = useRef<HTMLInputElement>(null);
const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
e.preventDefault(); e.preventDefault();
const { data, error } = await client.piece.post({ const { error } = await client.piece.post({
name, name,
composer: composer.length > 0 ? composer : null, composer: composer.length > 0 ? composer : null,
lyricist: lyricist.length > 0 ? lyricist : null, lyricist: lyricist.length > 0 ? lyricist : null,
@@ -140,12 +138,11 @@ function PieceForm() {
setLyricist(""); setLyricist("");
setArranger(""); setArranger("");
addPiece(data);
autoFocusRef.current?.focus(); autoFocusRef.current?.focus();
} }
return ( 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> <label htmlFor={nameId}>Tytuł</label>
<Input <Input
ref={autoFocusRef} ref={autoFocusRef}

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

@@ -42,8 +42,8 @@ export function Login() {
return ( return (
<div className="w-full h-full flex items-center justify-center"> <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}> <form className="p-2 flex flex-col gap-2 border rounded" onSubmit={onSubmit}>
<header className="pb-2 border-b border-black text-center font-bold dark:border-white">Repozytorium muzyczne</header> <header className="pb-2 border-b text-center font-bold">Repozytorium muzyczne</header>
<label htmlFor={usernameId}>Nazwa użytkownika</label> <label htmlFor={usernameId}>Nazwa użytkownika</label>
<Input <Input
id={usernameId} id={usernameId}

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

@@ -1,4 +1,4 @@
import { PieceId, UserId } from "common"; import { UserId } from "common";
import * as Function from "common/Function"; import * as Function from "common/Function";
import { useLayoutEffect, useState } from "react"; 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 }); 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 namespace Store {
export interface User { export interface User {
readonly userId: UserId; readonly userId: UserId;
readonly username: string; readonly username: string;
readonly admin: boolean; 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 { export interface Store {
@@ -48,16 +22,11 @@ export interface Store {
readonly loginPassword: string; readonly loginPassword: string;
readonly user: Store.User | null; readonly user: Store.User | null;
readonly pieces: Store.Piece.Map;
readonly setLoginUsername: Updater<string>; readonly setLoginUsername: Updater<string>;
readonly setLoginPassword: Updater<string>; readonly setLoginPassword: Updater<string>;
readonly setUser: Updater<Store.User | null>; 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>({ let store: Store = Object.freeze<Store>({
@@ -65,16 +34,11 @@ let store: Store = Object.freeze<Store>({
loginPassword: "", loginPassword: "",
user: null, user: null,
pieces: Object.freeze({}),
setLoginUsername: (action) => set(mapProp("loginUsername", action)), setLoginUsername: (action) => set(mapProp("loginUsername", action)),
setLoginPassword: (action) => set(mapProp("loginPassword", action)), setLoginPassword: (action) => set(mapProp("loginPassword", action)),
setUser: (action) => set(mapProp("user", 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 ---------------------------------------------------- // --- STORE IMPLEMENTATION ----------------------------------------------------

6
packages/frontend/tailwind.config.js
View File

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