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

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

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

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

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