frontend method to refresh image

frontend/src/components/image/index.tsx

@@ -6,10 +6,12 @@ import { Dialog } from "@kobalte/core";
 type ImageComponentProps = {
     ID: string;
     onDelete: (id: string) => void;
-}
+    onRefresh: (id: string) => void;
+};
 
 export const ImageComponent: Component<ImageComponentProps> = (props) => {
     const [isOpen, setIsOpen] = createSignal(false);
+    const [isRefreshOpen, setIsRefreshOpen] = createSignal(false);
 
     return (
         <>
@@ -27,53 +29,12 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
                 >
                     ×
                 </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<ImageComponentProps> = (props) => {
-    const [isOpen, setIsOpen] = createSignal(false);
-
-    return (
-        <>
-            <div class="relative w-full flex justify-center">
-                <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"
+                    aria-label="Refresh 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"
+                    class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
-                    onClick={() => setIsOpen(true)}
+                    onClick={() => setIsRefreshOpen(true)}
                 >
-                    ×
+                    ↻
                 </button>
             </div>
 
@@ -93,7 +54,131 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (props)
                                     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)}>
+                            <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>
+
+            <Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
+                <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 Refresh
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to refresh 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-blue-600 text-white rounded hover:bg-blue-700"
+                                onClick={() => {
+                                    props.onRefresh?.(props.ID);
+                                    setIsRefreshOpen(false);
+                                }}
+                            >
+                                Confirm
+                            </button>
+                        </div>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </>
+    );
+};
+
+export const ImageComponentFullHeight: Component<ImageComponentProps> = (
+    props,
+) => {
+    const [isOpen, setIsOpen] = createSignal(false);
+    const [isRefreshOpen, setIsRefreshOpen] = createSignal(false);
+
+    return (
+        <>
+            <div class="relative w-full flex justify-center">
+                <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>
+                <button
+                    aria-label="Refresh image"
+                    class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
+                    onClick={() => setIsRefreshOpen(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>
+
+            <Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
+                <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 Refresh
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to refresh 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-blue-600 text-white rounded hover:bg-blue-700"
+                                onClick={() => {
+                                    props.onRefresh?.(props.ID);
+                                    setIsRefreshOpen(false);
+                                }}
+                            >
                                 Confirm
                             </button>
                         </div>

frontend/src/contexts/SearchImageContext.tsx

@@ -7,7 +7,7 @@ import {
     createResource,
     useContext,
 } from "solid-js";
-import { deleteImage, deleteImageFromStack, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
+import { deleteImage, deleteImageFromStack, getUserImages, JustTheImageWhatAreTheseNames, reprocessImage } from "../network";
 
 export type SearchImageStore = {
     imagesByDate: Accessor<
@@ -25,6 +25,7 @@ export type SearchImageStore = {
     onRefetchImages: () => void;
     onDeleteImage: (imageID: string) => void;
     onDeleteImageFromStack: (stackID: string, imageID: string) => void;
+    onRefreshImage: (imageID: string) => void;
 };
 
 const SearchImageContext = createContext<SearchImageStore>();
@@ -75,6 +76,9 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
                 },
                 onDeleteImageFromStack: (stackID: string, imageID: string) => {
                     deleteImageFromStack(stackID, imageID).then(refetch);
+                },
+                onRefreshImage: (imageID: string) => {
+                    reprocessImage(imageID).then(refetch)
                 }
             }}
         >

frontend/src/network/index.ts

@@ -18,7 +18,7 @@ import {
 type BaseRequestParams = Partial<{
     path: string;
     body: RequestInit["body"];
-    method: "GET" | "POST" | "DELETE";
+    method: "GET" | "POST" | "DELETE" | "PATCH";
 }>;
 
 // export const base = "https://haystack.johncosta.tech";
@@ -296,3 +296,19 @@ export const createList = async (
         throw new ReachedListLimit();
     }
 };
+
+export const reprocessImage = async (
+    id: string
+): Promise<void> => {
+    const request = getBaseAuthorizedRequest({
+        path: `images/${id}`,
+        method: "PATCH"
+    });
+
+    request.headers.set("Content-Type", "application/json");
+
+    const res = await fetch(request);
+    if (!res.ok && res.status == 429) {
+        throw new ReachedListLimit();
+    }
+}

frontend/src/pages/all-images/index.tsx

@@ -3,7 +3,6 @@ import { Component, For } from "solid-js";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 import { ImageComponent } from "@components/image";
 import { chunkRows } from "./chunk";
-import { deleteImage } from "@network/index";
 
 type ImageOrDate =
     | { type: "image"; ID: string[] }
@@ -12,7 +11,8 @@ type ImageOrDate =
 export const AllImages: Component = () => {
     let scrollRef: HTMLDivElement | undefined;
 
-    const { imagesByDate, onDeleteImage } = useSearchImageContext();
+    const { imagesByDate, onDeleteImage, onRefreshImage } =
+        useSearchImageContext();
 
     const items = () => {
         const items: Array<ImageOrDate> = [];
@@ -48,7 +48,15 @@ export const AllImages: Component = () => {
                         const item = items()[i.index];
                         if (item.type === "image") {
                             return (
-                                <For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
+                                <For each={item.ID}>
+                                    {(id) => (
+                                        <ImageComponent
+                                            ID={id}
+                                            onDelete={onDeleteImage}
+                                            onRefresh={onRefreshImage}
+                                        />
+                                    )}
+                                </For>
                             );
                         } else {
                             return (

frontend/src/pages/front/recent.tsx

@@ -1,18 +1,19 @@
 import { Component, For } from "solid-js";
 import { ImageComponent } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
-import { deleteImage } from "@network/index";
 
 const NUMBER_OF_MAX_RECENT_IMAGES = 10;
 
 export const Recent: Component = () => {
-    const { userImages, onDeleteImage } = useSearchImageContext();
+    const { userImages, onDeleteImage, onRefreshImage } =
+        useSearchImageContext();
 
     const latestImages = () =>
         userImages()
             .sort(
                 (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);
 
@@ -21,7 +22,13 @@ export const Recent: Component = () => {
             <h2 class="text-xl font-bold">Recent Screenshots</h2>
             <div class="grid grid-cols-3 gap-4 place-items-center">
                 <For each={latestImages()}>
-                    {(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
+                    {(image) => (
+                        <ImageComponent
+                            ID={image.ImageID}
+                            onDelete={onDeleteImage}
+                            onRefresh={onRefreshImage}
+                        />
+                    )}
                 </For>
             </div>
         </div>

frontend/src/pages/image/index.tsx

@@ -9,17 +9,22 @@ export const ImagePage: Component = () => {
     const { imageId } = useParams<{ imageId: string }>();
     const nav = useNavigate();
 
-    const { userImages, lists, onDeleteImage } = useSearchImageContext();
+    const { userImages, lists, onDeleteImage, onRefreshImage } =
+        useSearchImageContext();
 
     const image = () => userImages().find((i) => i.ImageID === imageId);
 
     return (
         <main class="flex flex-col items-center gap-4">
             <div class="w-full bg-white rounded-xl p-4">
-                <ImageComponentFullHeight ID={imageId} onDelete={(id) => {
+                <ImageComponentFullHeight
-                    onDeleteImage(id);
+                    ID={imageId}
-                    nav("/");
+                    onDelete={(id) => {
-                }} />
+                        onDeleteImage(id);
+                        nav("/");
+                    }}
+                    onRefresh={onRefreshImage}
+                />
             </div>
             <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
                 <h2 class="font-bold text-2xl">Description</h2>
@@ -27,7 +32,11 @@ export const ImagePage: Component = () => {
                     <For each={image()?.Image.ImageLists}>
                         {(imageList) => (
                             <ListCard
-                                list={lists().find((l) => l.ID === imageList.ListID)!}
+                                list={
+                                    lists().find(
+                                        (l) => l.ID === imageList.ListID,
+                                    )!
+                                }
                             />
                         )}
                     </For>

frontend/src/pages/search/index.tsx

@@ -9,7 +9,7 @@ import { useSearchImageContext } from "@contexts/SearchImageContext";
 export const SearchPage: Component = () => {
     const fuse = useSearch();
 
-    const { onDeleteImage } = useSearchImageContext();
+    const { onDeleteImage, onRefreshImage } = useSearchImageContext();
 
     const [searchItems, setSearchItems] =
         createSignal<JustTheImageWhatAreTheseNames>([]);
@@ -41,7 +41,13 @@ export const SearchPage: Component = () => {
                 <Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
                     <Search.Arrow />
                     <For each={searchItems()}>
-                        {(item) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
+                        {(item) => (
+                            <ImageComponent
+                                ID={item.ImageID}
+                                onDelete={onDeleteImage}
+                                onRefresh={onRefreshImage}
+                            />
+                        )}
                     </For>
                     <Search.NoResult>No result found</Search.NoResult>
                 </Search.Content>