frontend method to refresh image

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) => {
-                    onDeleteImage(id);
-                    nav("/");
-                }} />
+                <ImageComponentFullHeight
+                    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>
@@ -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>