JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: adding button to delete image

Browse Source
This commit is contained in:
John Costa
2025-08-30 20:46:05 +01:00
parent 00359e2e8d
commit 5d1c758451
6 changed files with 301 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/src/components/image/index.tsx
View File

@ -1,25 +1,105 @@
import { Component } from "solid-js"; import { Component, createSignal } from "solid-js";
import { base } from "../../network"; import { base } from "../../network";
import { A } from "@solidjs/router"; import { A } from "@solidjs/router";
import { Dialog } from "@kobalte/core";
export const ImageComponent: Component<{ ID: string }> = (props) => { type ImageComponentProps = {
return ( ID: string;
<A href={`/image/${props.ID}`} class="w-full flex justify-center h-[300px]"> onDelete: (id: string) => void;
<img }
class="flex w-full object-cover rounded-xl"
src={`${base}/images/${props.ID}`} export const ImageComponent: Component<ImageComponentProps> = (props) => {
/> const [isOpen, setIsOpen] = createSignal(false);
</A>
); return (
<>
<div class="relative w-full flex justify-center h-[300px]">
<A href={`/image/${props.ID}`} class="flex w-full">
<img
class="flex w-full object-cover rounded-xl"
src={`${base}/images/${props.ID}`}
/>
</A>
<button
aria-label="Delete image"
class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
onClick={() => setIsOpen(true)}
>
×
</button>
</div>
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
<Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
<Dialog.Title class="text-lg font-bold mb-2">
Confirm Delete
</Dialog.Title>
<Dialog.Description class="mb-4">
Are you sure you want to delete this image?
</Dialog.Description>
<div class="flex justify-end gap-2">
<Dialog.CloseButton>
<button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
Cancel
</button>
</Dialog.CloseButton>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
Confirm
</button>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</>
);
}; };
export const ImageComponentFullHeight: Component<{ ID: string }> = (props) => { export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
return ( const [isOpen, setIsOpen] = createSignal(false);
<A href={`/image/${props.ID}`} class="w-full flex justify-center">
<img return (
class="flex w-full object-cover rounded-xl" <>
src={`${base}/images/${props.ID}`} <div class="relative w-full flex justify-center">
/> <A href={`/image/${props.ID}`} class="flex w-full">
</A> <img
); class="flex w-full object-cover rounded-xl"
src={`${base}/images/${props.ID}`}
/>
</A>
<button
aria-label="Delete image"
class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
onClick={() => setIsOpen(true)}
>
×
</button>
</div>
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
<Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
<Dialog.Title class="text-lg font-bold mb-2">
Confirm Delete
</Dialog.Title>
<Dialog.Description class="mb-4">
Are you sure you want to delete this image?
</Dialog.Description>
<div class="flex justify-end gap-2">
<Dialog.CloseButton>
<button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
Cancel
</button>
</Dialog.CloseButton>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
Confirm
</button>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</>
);
}; };

133
frontend/src/contexts/SearchImageContext.tsx
View File

@ -1,92 +1,91 @@
import { import {
type Accessor, type Accessor,
type Component, type Component,
type ParentProps, type ParentProps,
createContext, createContext,
createEffect, createMemo,
createMemo, createResource,
createResource, useContext,
useContext,
} from "solid-js"; } from "solid-js";
import { getUserImages, JustTheImageWhatAreTheseNames } from "../network"; import { deleteImage, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
export type SearchImageStore = { export type SearchImageStore = {
imagesByDate: Accessor< imagesByDate: Accessor<
Array<{ date: Date; images: JustTheImageWhatAreTheseNames }> Array<{ date: Date; images: JustTheImageWhatAreTheseNames }>
>; >;
lists: Accessor<Awaited<ReturnType<typeof getUserImages>>["lists"]>; lists: Accessor<Awaited<ReturnType<typeof getUserImages>>["lists"]>;
userImages: Accessor<JustTheImageWhatAreTheseNames>; userImages: Accessor<JustTheImageWhatAreTheseNames>;
processingImages: Accessor< processingImages: Accessor<
Awaited<ReturnType<typeof getUserImages>>["processingImages"] | undefined Awaited<ReturnType<typeof getUserImages>>["processingImages"] | undefined
>; >;
onRefetchImages: () => void; onRefetchImages: () => void;
onDeleteImage: (imageID: string) => void;
}; };
const SearchImageContext = createContext<SearchImageStore>(); const SearchImageContext = createContext<SearchImageStore>();
export const SearchImageContextProvider: Component<ParentProps> = (props) => { export const SearchImageContextProvider: Component<ParentProps> = (props) => {
const [data, { refetch }] = createResource(getUserImages); const [data, { refetch }] = createResource(getUserImages);
createEffect(() => { const sortedImages = createMemo<ReturnType<SearchImageStore["imagesByDate"]>>(
console.log(data()); () => {
}); const d = data();
if (d == null) {
return [];
}
const sortedImages = createMemo<ReturnType<SearchImageStore["imagesByDate"]>>( // Sorted by day. But we could potentially add more in the future.
() => { const buckets: Record<string, JustTheImageWhatAreTheseNames> = {};
const d = data();
if (d == null) {
return [];
}
// Sorted by day. But we could potentially add more in the future. for (const image of d.userImages) {
const buckets: Record<string, JustTheImageWhatAreTheseNames> = {}; if (image.CreatedAt == null) {
continue;
}
for (const image of d.userImages) { const date = new Date(image.CreatedAt).toDateString();
if (image.CreatedAt == null) { if (!(date in buckets)) {
continue; buckets[date] = [];
} }
const date = new Date(image.CreatedAt).toDateString(); buckets[date].push(image);
if (!(date in buckets)) { }
buckets[date] = [];
}
buckets[date].push(image); return Object.entries(buckets)
} .map(([date, images]) => ({ date: new Date(date), images }))
.sort((a, b) => b.date.getTime() - a.date.getTime());
},
);
return Object.entries(buckets) const processingImages = () => data()?.processingImages ?? [];
.map(([date, images]) => ({ date: new Date(date), images }))
.sort((a, b) => b.date.getTime() - a.date.getTime());
},
);
const processingImages = () => data()?.processingImages ?? []; return (
<SearchImageContext.Provider
return ( value={{
<SearchImageContext.Provider imagesByDate: sortedImages,
value={{ lists: () => data()?.lists ?? [],
imagesByDate: sortedImages, userImages: () => data()?.userImages ?? [],
lists: () => data()?.lists ?? [], processingImages,
userImages: () => data()?.userImages ?? [], onRefetchImages: refetch,
processingImages, onDeleteImage: (imageID: string) => {
onRefetchImages: refetch, deleteImage(imageID).then(refetch);
}} }
> }}
{props.children} >
</SearchImageContext.Provider> {props.children}
); </SearchImageContext.Provider>
);
}; };
export const useSearchImageContext = () => { export const useSearchImageContext = () => {
const context = useContext(SearchImageContext); const context = useContext(SearchImageContext);
if (context == null) { if (context == null) {
throw new Error( throw new Error(
"Unreachable: We should always have a mounted context and no undefined values", "Unreachable: We should always have a mounted context and no undefined values",
); );
} }
return context; return context;
}; };

97
frontend/src/pages/all-images/index.tsx
View File

@ -3,62 +3,63 @@ import { Component, For } from "solid-js";
import { createVirtualizer } from "@tanstack/solid-virtual"; import { createVirtualizer } from "@tanstack/solid-virtual";
import { ImageComponent } from "@components/image"; import { ImageComponent } from "@components/image";
import { chunkRows } from "./chunk"; import { chunkRows } from "./chunk";
import { deleteImage } from "@network/index";
type ImageOrDate = type ImageOrDate =
| { type: "image"; ID: string[] } | { type: "image"; ID: string[] }
| { type: "date"; date: Date }; | { type: "date"; date: Date };
export const AllImages: Component = () => { export const AllImages: Component = () => {
let scrollRef: HTMLDivElement | undefined; let scrollRef: HTMLDivElement | undefined;
const { imagesByDate } = useSearchImageContext(); const { imagesByDate, onDeleteImage } = useSearchImageContext();
const items = () => { const items = () => {
const items: Array<ImageOrDate> = []; const items: Array<ImageOrDate> = [];
for (const { date, images } of imagesByDate()) { for (const { date, images } of imagesByDate()) {
items.push({ type: "date", date }); items.push({ type: "date", date });
const chunkedRows = chunkRows(3, images); const chunkedRows = chunkRows(3, images);
for (const chunk of chunkedRows) { for (const chunk of chunkedRows) {
items.push({ type: "image", ID: chunk.map((c) => c.ImageID) }); items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
} }
} }
return items; return items;
}; };
const rowVirtualizer = createVirtualizer({ const rowVirtualizer = createVirtualizer({
count: items().length, count: items().length,
estimateSize: () => 400, estimateSize: () => 400,
getScrollElement: () => scrollRef!, getScrollElement: () => scrollRef!,
overscan: 3, overscan: 3,
}); });
return ( return (
<div <div
ref={scrollRef} ref={scrollRef}
class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto" class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
> >
<div <div
class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`} class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
> >
<For each={rowVirtualizer.getVirtualItems()}> <For each={rowVirtualizer.getVirtualItems()}>
{(i) => { {(i) => {
const item = items()[i.index]; const item = items()[i.index];
if (item.type === "image") { if (item.type === "image") {
return ( return (
<For each={item.ID}>{(id) => <ImageComponent ID={id} />}</For> <For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
); );
} else { } else {
return ( return (
<h3 class="col-span-3 font-bold text-2xl"> <h3 class="col-span-3 font-bold text-2xl">
{item.date.toDateString()} {item.date.toDateString()}
</h3> </h3>
); );
} }
}} }}
</For> </For>
</div> </div>
</div> </div>
); );
}; };

37
frontend/src/pages/front/recent.tsx
View File

@ -1,28 +1,29 @@
import { Component, For } from "solid-js"; import { Component, For } from "solid-js";
import { ImageComponent } from "@components/image"; import { ImageComponent } from "@components/image";
import { useSearchImageContext } from "@contexts/SearchImageContext"; import { useSearchImageContext } from "@contexts/SearchImageContext";
import { deleteImage } from "@network/index";
const NUMBER_OF_MAX_RECENT_IMAGES = 10; const NUMBER_OF_MAX_RECENT_IMAGES = 10;
export const Recent: Component = () => { export const Recent: Component = () => {
const { userImages } = useSearchImageContext(); const { userImages, onDeleteImage } = useSearchImageContext();
const latestImages = () => const latestImages = () =>
userImages() userImages()
.sort( .sort(
(a, b) => (a, b) =>
new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(), new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
) )
.slice(0, NUMBER_OF_MAX_RECENT_IMAGES); .slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
return ( return (
<div class="rounded-xl bg-white p-4 flex flex-col gap-2"> <div class="rounded-xl bg-white p-4 flex flex-col gap-2">
<h2 class="text-xl font-bold">Recent Screenshots</h2> <h2 class="text-xl font-bold">Recent Screenshots</h2>
<div class="grid grid-cols-3 gap-4 place-items-center"> <div class="grid grid-cols-3 gap-4 place-items-center">
<For each={latestImages()}> <For each={latestImages()}>
{(image) => <ImageComponent ID={image.ImageID} />} {(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
</For> </For>
</div> </div>
</div> </div>
); );
}; };

53
frontend/src/pages/image/index.tsx
View File

@ -4,35 +4,36 @@ import { useParams } from "@solidjs/router";
import { For, type Component } from "solid-js"; import { For, type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown"; import SolidjsMarkdown from "solidjs-markdown";
import { ListCard } from "@components/list-card"; import { ListCard } from "@components/list-card";
import { deleteImage } from "@network/index";
export const ImagePage: Component = () => { export const ImagePage: Component = () => {
const { imageId } = useParams<{ imageId: string }>(); const { imageId } = useParams<{ imageId: string }>();
const { userImages, lists } = useSearchImageContext(); const { userImages, lists, onDeleteImage } = useSearchImageContext();
const image = () => userImages().find((i) => i.ImageID === imageId); const image = () => userImages().find((i) => i.ImageID === imageId);
return ( return (
<main class="flex flex-col items-center gap-4"> <main class="flex flex-col items-center gap-4">
<div class="w-full bg-white rounded-xl p-4"> <div class="w-full bg-white rounded-xl p-4">
<ImageComponentFullHeight ID={imageId} /> <ImageComponentFullHeight ID={imageId} onDelete={onDeleteImage()} />
</div> </div>
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4"> <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
<h2 class="font-bold text-2xl">Description</h2> <h2 class="font-bold text-2xl">Description</h2>
<div class="grid grid-cols-3 gap-4"> <div class="grid grid-cols-3 gap-4">
<For each={image()?.Image.ImageLists}> <For each={image()?.Image.ImageLists}>
{(imageList) => ( {(imageList) => (
<ListCard <ListCard
list={lists().find((l) => l.ID === imageList.ListID)!} list={lists().find((l) => l.ID === imageList.ListID)!}
/> />
)} )}
</For> </For>
</div> </div>
</div> </div>
<div class="w-full bg-white rounded-xl p-4"> <div class="w-full bg-white rounded-xl p-4">
<h2 class="font-bold text-2xl">Description</h2> <h2 class="font-bold text-2xl">Description</h2>
<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown> <SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
</div> </div>
</main> </main>
); );
}; };

79
frontend/src/pages/search/index.tsx
View File

@ -2,47 +2,50 @@ import { Component, createSignal, For } from "solid-js";
import { Search } from "@kobalte/core/search"; import { Search } from "@kobalte/core/search";
import { IconSearch } from "@tabler/icons-solidjs"; import { IconSearch } from "@tabler/icons-solidjs";
import { useSearch } from "./search"; import { useSearch } from "./search";
import { JustTheImageWhatAreTheseNames } from "@network/index"; import { deleteImage, JustTheImageWhatAreTheseNames } from "@network/index";
import { ImageComponent } from "@components/image"; import { ImageComponent } from "@components/image";
import { useSearchImageContext } from "@contexts/SearchImageContext";
export const SearchPage: Component = () => { export const SearchPage: Component = () => {
const fuse = useSearch(); const fuse = useSearch();
const [searchItems, setSearchItems] = const { onDeleteImage } = useSearchImageContext();
createSignal<JustTheImageWhatAreTheseNames>([]);
return ( const [searchItems, setSearchItems] =
<Search createSignal<JustTheImageWhatAreTheseNames>([]);
options={searchItems()}
onInputChange={(e) => { return (
setSearchItems( <Search
fuse() options={searchItems()}
.search(e) onInputChange={(e) => {
.map((i) => i.item), setSearchItems(
); fuse()
}} .search(e)
> .map((i) => i.item),
<Search.Label /> );
<Search.Control class="flex"> }}
<Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl"> >
<Search.Icon> <Search.Label />
<IconSearch /> <Search.Control class="flex">
</Search.Icon> <Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl">
</Search.Indicator> <Search.Icon>
<Search.Input <IconSearch />
class="w-full p-4 font-bold text-xl rounded-r-xl" </Search.Icon>
placeholder="Woking Station..." </Search.Indicator>
/> <Search.Input
</Search.Control> class="w-full p-4 font-bold text-xl rounded-r-xl"
<Search.Portal> placeholder="Woking Station..."
<Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4"> />
<Search.Arrow /> </Search.Control>
<For each={searchItems()}> <Search.Portal>
{(item) => <ImageComponent ID={item.ImageID} />} <Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
</For> <Search.Arrow />
<Search.NoResult>No result found</Search.NoResult> <For each={searchItems()}>
</Search.Content> {(item) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
</Search.Portal> </For>
</Search> <Search.NoResult>No result found</Search.NoResult>
); </Search.Content>
</Search.Portal>
</Search>
);
}; };