Revert "frontend method to refresh image"

This reverts commit ce2cd977ac18c498e0601b3a5f631587f7cd5272.

frontend/src/components/image/index.tsx

@@ -6,12 +6,10 @@ 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 (
         <>
@@ -29,13 +27,6 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
                 >
                     ×
                 </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}>
@@ -54,40 +45,7 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
                                     Cancel
                                 </button>
                             </Dialog.CloseButton>
-                            <button
+                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
-                                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>
@@ -98,11 +56,8 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
     );
 };
 
-export const ImageComponentFullHeight: Component<ImageComponentProps> = (
+export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
-    props,
-) => {
     const [isOpen, setIsOpen] = createSignal(false);
-    const [isRefreshOpen, setIsRefreshOpen] = createSignal(false);
 
     return (
         <>
@@ -120,13 +75,6 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (
                 >
                     ×
                 </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}>
@@ -145,40 +93,7 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (
                                     Cancel
                                 </button>
                             </Dialog.CloseButton>
-                            <button
+                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
-                                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, reprocessImage } from "../network";
+import { deleteImage, deleteImageFromStack, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
 
 export type SearchImageStore = {
     imagesByDate: Accessor<
@@ -25,7 +25,6 @@ export type SearchImageStore = {
     onRefetchImages: () => void;
     onDeleteImage: (imageID: string) => void;
     onDeleteImageFromStack: (stackID: string, imageID: string) => void;
-    onRefreshImage: (imageID: string) => void;
 };
 
 const SearchImageContext = createContext<SearchImageStore>();
@@ -76,9 +75,6 @@ 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" | "PATCH";
+    method: "GET" | "POST" | "DELETE";
 }>;
 
 // export const base = "https://haystack.johncosta.tech";
@@ -296,19 +296,3 @@ 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,6 +3,7 @@ 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[] }
@@ -11,8 +12,7 @@ type ImageOrDate =
 export const AllImages: Component = () => {
     let scrollRef: HTMLDivElement | undefined;
 
-    const { imagesByDate, onDeleteImage, onRefreshImage } =
+    const { imagesByDate, onDeleteImage } = useSearchImageContext();
-        useSearchImageContext();
 
     const items = () => {
         const items: Array<ImageOrDate> = [];
@@ -48,15 +48,7 @@ export const AllImages: Component = () => {
                         const item = items()[i.index];
                         if (item.type === "image") {
                             return (
-                                <For each={item.ID}>
+                                <For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
-                                    {(id) => (
-                                        <ImageComponent
-                                            ID={id}
-                                            onDelete={onDeleteImage}
-                                            onRefresh={onRefreshImage}
-                                        />
-                                    )}
-                                </For>
                             );
                         } else {
                             return (

frontend/src/pages/front/recent.tsx

@@ -1,19 +1,18 @@
 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, onRefreshImage } =
+    const { userImages, onDeleteImage } = useSearchImageContext();
-        useSearchImageContext();
 
     const latestImages = () =>
         userImages()
             .sort(
                 (a, b) =>
-                    new Date(b.CreatedAt!).getTime() -
+                    new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
-                    new Date(a.CreatedAt!).getTime(),
             )
             .slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
 
@@ -22,13 +21,7 @@ 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) => (
+                    {(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
-                        <ImageComponent
-                            ID={image.ImageID}
-                            onDelete={onDeleteImage}
-                            onRefresh={onRefreshImage}
-                        />
-                    )}
                 </For>
             </div>
         </div>

frontend/src/pages/image/index.tsx

@@ -9,22 +9,17 @@ export const ImagePage: Component = () => {
     const { imageId } = useParams<{ imageId: string }>();
     const nav = useNavigate();
 
-    const { userImages, lists, onDeleteImage, onRefreshImage } =
+    const { userImages, lists, onDeleteImage } = useSearchImageContext();
-        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
+                <ImageComponentFullHeight ID={imageId} onDelete={(id) => {
-                    ID={imageId}
-                    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>
@@ -32,11 +27,7 @@ export const ImagePage: Component = () => {
                     <For each={image()?.Image.ImageLists}>
                         {(imageList) => (
                             <ListCard
-                                list={
+                                list={lists().find((l) => l.ID === imageList.ListID)!}
-                                    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, onRefreshImage } = useSearchImageContext();
+    const { onDeleteImage } = useSearchImageContext();
 
     const [searchItems, setSearchItems] =
         createSignal<JustTheImageWhatAreTheseNames>([]);
@@ -41,13 +41,7 @@ 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) => (
+                        {(item) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
-                            <ImageComponent
-                                ID={item.ImageID}
-                                onDelete={onDeleteImage}
-                                onRefresh={onRefreshImage}
-                            />
-                        )}
                     </For>
                     <Search.NoResult>No result found</Search.NoResult>
                 </Search.Content>