Rework #6

Merged
monoid merged 38 commits from dev into main 2024-04-17 01:45:37 +09:00
4 changed files with 54 additions and 48 deletions
Showing only changes of commit ec120e7d26 - Show all commits

View File

@ -4,8 +4,17 @@ export function makeApiUrl(pathnameAndQueryparam: string) {
return new URL(pathnameAndQueryparam, BASE_API_URL).toString(); return new URL(pathnameAndQueryparam, BASE_API_URL).toString();
} }
export async function fetcher(url: string) { export class ApiError extends Error {
constructor(public readonly status: number, message: string) {
super(message);
}
}
export async function fetcher(url: string, init?: RequestInit) {
const u = makeApiUrl(url); const u = makeApiUrl(url);
const res = await fetch(u); const res = await fetch(u, init);
if (!res.ok) {
throw new ApiError(res.status, await res.text());
}
return res.json(); return res.json();
} }

View File

@ -14,7 +14,7 @@ export function useDifferenceDoc() {
} }
export async function commit(path: string, type: string) { export async function commit(path: string, type: string) {
const res = await fetch("/api/diff/commit", { const data = await fetcher("/api/diff/commit", {
method: "POST", method: "POST",
body: JSON.stringify([{ path, type }]), body: JSON.stringify([{ path, type }]),
headers: { headers: {
@ -22,11 +22,11 @@ export async function commit(path: string, type: string) {
}, },
}); });
mutate("/api/diff/list"); mutate("/api/diff/list");
return res.ok; return data;
} }
export async function commitAll(type: string) { export async function commitAll(type: string) {
const res = await fetch("/api/diff/commitall", { const data = await fetcher("/api/diff/commitall", {
method: "POST", method: "POST",
body: JSON.stringify({ type }), body: JSON.stringify({ type }),
headers: { headers: {
@ -34,5 +34,5 @@ export async function commitAll(type: string) {
}, },
}); });
mutate("/api/diff/list"); mutate("/api/diff/list");
return res.ok; return data;
} }

View File

@ -26,7 +26,7 @@ export function DifferencePage() {
<Card> <Card>
<CardHeader className="relative"> <CardHeader className="relative">
<Button className="absolute right-2 top-8" variant="ghost" <Button className="absolute right-2 top-8" variant="ghost"
onClick={() => commitAll("comic")} onClick={() => {commitAll("comic")}}
>Commit All</Button> >Commit All</Button>
<CardTitle className="text-2xl">Difference</CardTitle> <CardTitle className="text-2xl">Difference</CardTitle>
<CardDescription>Scanned Files List</CardDescription> <CardDescription>Scanned Files List</CardDescription>
@ -45,8 +45,7 @@ export function DifferencePage() {
<Button <Button
className="flex-none ml-2" className="flex-none ml-2"
variant="outline" variant="outline"
onClick={() => commit(y.path, y.type)} onClick={() => {commit(y.path, y.type)}}>
>
Commit Commit
</Button> </Button>
</div> </div>

View File

@ -66,47 +66,45 @@ export default function Gallery() {
{(word || tags) && {(word || tags) &&
<div className="bg-primary rounded-full p-1 sticky top-0 shadow-md z-20"> <div className="bg-primary rounded-full p-1 sticky top-0 shadow-md z-20">
{word && <span className="text-primary-foreground ml-4">Search: {word}</span>} {word && <span className="text-primary-foreground ml-4">Search: {word}</span>}
{tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex">{tags.split(",").map(x => <TagBadge tagname={x} key={x} />)}</ul></span>} {tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex">{
tags.split(",").map(x => <TagBadge tagname={x} key={x} />)}
</ul></span>}
</div> </div>
} }
{ {data?.length === 0 && <div className="p-4 text-3xl">No results</div>}
data?.length === 0 && <div className="p-4 text-3xl">No results</div>
}
<div className="w-full relative" <div className="w-full relative"
style={{ height: virtualizer.getTotalSize() }} style={{ height: virtualizer.getTotalSize() }}>
> {// TODO: date based grouping
{ virtualItems.map((item) => {
// TODO: date based grouping const isLoaderRow = item.index === size - 1 && isLoadingMore;
virtualItems.map((item) => { if (isLoaderRow) {
const isLoaderRow = item.index === size - 1 && isLoadingMore; return <div key={item.index} className="w-full flex justify-center top-0 left-0 absolute"
if (isLoaderRow) { style={{
return <div key={item.index} className="w-full flex justify-center top-0 left-0 absolute" height: `${item.size}px`,
style={{ transform: `translateY(${item.start}px)`
height: `${item.size}px`, }}>
transform: `translateY(${item.start}px)` <Spinner />
}}> </div>;
<Spinner /> }
</div>; const docs = data[item.index];
} if (!docs) return null;
const docs = data[item.index]; return <div className="w-full grid gap-2 content-start top-0 left-0 absolute mb-2" key={item.index}
if (!docs) return null; style={{
return <div className="w-full grid gap-2 content-start top-0 left-0 absolute mb-2" key={item.index} height: `${item.size}px`,
style={{ transform: `translateY(${item.start}px)`
height: `${item.size}px`, }}>
transform: `translateY(${item.start}px)` {docs.startCursor && <div>
}}> <h3 className="text-3xl">Start with {docs.startCursor}</h3>
{docs.startCursor && <div> <Separator />
<h3 className="text-3xl">Start with {docs.startCursor}</h3> </div>}
<Separator/> {docs?.data?.map((x) => {
</div>} return (
{docs?.data?.map((x) => { <GalleryCard doc={x} key={x.id} />
return ( );
<GalleryCard doc={x} key={x.id} /> })}
); </div>
})} })
</div> }
})
}
</div> </div>
</div> </div>
); );