feat: frontend receiving processing images and showing them as such

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

@@ -1,67 +0,0 @@
-import { createEffect, type Accessor, type Component } from "solid-js";
-import { base, type sendImage } from "../../network";
-import { useSearchImageContext } from "../../contexts/SearchImageContext";
-
-type ImageStatusProps = {
-    onSetProcessingImage: (
-        image: Awaited<ReturnType<typeof sendImage>> | undefined,
-    ) => void;
-    processingImage: Accessor<
-        Awaited<ReturnType<typeof sendImage>> | undefined
-    >;
-};
-
-type EventData = "in-progress" | "complete";
-
-export const ImageStatus: Component<ImageStatusProps> = (props) => {
-    const { onRefetchImages } = useSearchImageContext();
-
-    let processing = false;
-
-    const onEvent = (e: MessageEvent<EventData>) => {
-        console.log("Processing Events: ", e.data);
-
-        const processingImage = props.processingImage();
-        if (processingImage == null) {
-            throw new Error("Processing Image should not be null");
-        }
-
-        if (e.data !== "complete") {
-            props.onSetProcessingImage({
-                ...processingImage,
-                Status: e.data,
-            });
-
-            processing = false;
-
-            return;
-        }
-
-        props.onSetProcessingImage(undefined);
-        onRefetchImages();
-    };
-
-    createEffect(() => {
-        const image = props.processingImage();
-        if (image == null) {
-            return;
-        }
-
-        if (processing) {
-            return;
-        }
-
-        processing = true;
-        const eventSourceUrl = `${base}/image-events/${image.ID}`;
-
-        const eventSource = new EventSource(eventSourceUrl);
-
-        eventSource.addEventListener("data", onEvent);
-
-        return () => {
-            eventSource.removeEventListener("data", onEvent);
-        };
-    });
-
-    return null;
-};