37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { A, useParams } from "@solidjs/router";
|
|
import { createEffect, createResource, For, Suspense } from "solid-js";
|
|
import { getUserImages } from "./network";
|
|
|
|
export function ImagePage() {
|
|
const { imageId } = useParams<{ imageId: string }>();
|
|
|
|
const [image] = createResource(async () => {
|
|
const userImages = await getUserImages();
|
|
|
|
const currentImage = userImages.find((image) => image.ID === imageId);
|
|
if (currentImage == null) {
|
|
// TODO: this error handling.
|
|
throw new Error("must be valid");
|
|
}
|
|
|
|
return currentImage;
|
|
});
|
|
|
|
createEffect(() => {
|
|
console.log(image());
|
|
});
|
|
|
|
return (
|
|
<Suspense fallback={<>Loading...</>}>
|
|
<A href="/">Back</A>
|
|
<h1 class="text-2xl font-bold">{image()?.Image.ImageName}</h1>
|
|
<img src={`http://localhost:3040/image/${image()?.ID}`} />
|
|
<div class="flex flex-col">
|
|
<For each={image()?.Tags ?? []}>
|
|
{(tag) => <div>{tag.Tag}</div>}
|
|
</For>
|
|
</div>
|
|
</Suspense>
|
|
);
|
|
}
|