feat: frontend responding to backend SSE and refetching images

frontend/src/components/ImageViewer.tsx

@@ -29,7 +29,6 @@ export const ImageViewer: Component<ImageViewerProps> = (props) => {
 
             props.onSendImage(result);
 
-            window.location.reload();
             console.log("DBG: ", result);
         });
 

frontend/src/components/image-status/ImageStatus.tsx

@@ -1,5 +1,6 @@
-import { Show, type Accessor, type Component } from "solid-js";
+import { createEffect, Show, type Accessor, type Component } from "solid-js";
 import type { sendImage } from "../../network";
+import { useSearchImageContext } from "../../contexts/SearchImageContext";
 
 type ImageStatusProps = {
     processingImage: Accessor<
@@ -7,7 +8,38 @@ type ImageStatusProps = {
     >;
 };
 
+type EventData = "in-progress" | "complete";
+
 export const ImageStatus: Component<ImageStatusProps> = (props) => {
+    const { onRefetchImages } = useSearchImageContext();
+
+    const onEvent = (e: MessageEvent<EventData>) => {
+        console.log(e.data);
+
+        if (e.data !== "complete") {
+            return;
+        }
+
+        onRefetchImages();
+    };
+
+    createEffect(() => {
+        const image = props.processingImage();
+        if (image == null) {
+            return;
+        }
+
+        const eventSource = new EventSource(
+            `http://192.168.1.199:3040/image-events/${image.ID}`,
+        );
+
+        eventSource.addEventListener("data", onEvent);
+
+        return () => {
+            eventSource.removeEventListener("data", onEvent);
+        };
+    });
+
     return (
         <Show when={props.processingImage()}>
             {(image) => (