feat: updating notifications system based on incoming request

This is making the frontend data logic a little complex

frontend/src/contexts/SearchImageContext.tsx

@@ -20,6 +20,10 @@ type SearchImageStore = {
 	images: Accessor<ImageWithRawData[]>;
 
 	imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
+	processingImages: Accessor<
+		Awaited<ReturnType<typeof getUserImages>>["ProcessingImages"] | undefined
+	>;
+
 	onRefetchImages: () => void;
 };
 
@@ -70,6 +74,8 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
 		}));
 	});
 
+	const processingImages = () => data()?.ProcessingImages ?? [];
+
 	const imagesWithProperties = createMemo<
 		ReturnType<typeof groupPropertiesWithImage>
 	>(() => {
@@ -86,6 +92,7 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
 			value={{
 				images: imageData,
 				imagesWithProperties: imagesWithProperties,
+				processingImages,
 				onRefetchImages: refetch,
 			}}
 		>

frontend/src/network/index.ts

@@ -175,7 +175,11 @@ const userProcessingImageValidator = strictObject({
 		ImageName: string(),
 		Image: null_(),
 	}),
-	Status: union([literal("not-started"), literal("in-progress")]),
+	Status: union([
+		literal("not-started"),
+		literal("in-progress"),
+		literal("complete"),
+	]),
 });
 
 export type UserImage = InferOutput<typeof dataTypeValidator>;

frontend/src/notifications/index.ts

@@ -10,11 +10,16 @@ import {
 	uuid,
 } from "valibot";
 import { base } from "../network";
-import { createContext, onCleanup } from "solid-js";
+import { createContext, createEffect, onCleanup } from "solid-js";
+import { useSearchImageContext } from "../contexts/SearchImageContext";
 
 const processingImagesValidator = strictObject({
 	ImageID: pipe(string(), uuid()),
-    Status: union([literal("in-progress"), literal("complete")]),
+	Status: union([
+		literal("not-started"),
+		literal("in-progress"),
+		literal("complete"),
+	]),
 });
 
 type NotificationState = {
@@ -29,6 +34,8 @@ export const Notifications = (onCompleteImage: () => void) => {
 		ProcessingImages: {},
 	});
 
+	const { processingImages } = useSearchImageContext();
+
 	const access = localStorage.getItem("access");
 	if (access == null) {
 		throw new Error("Access token not defined");
@@ -66,6 +73,26 @@ export const Notifications = (onCompleteImage: () => void) => {
 		}
 	};
 
+	const upsertImageProcessing = (
+		images: NotificationState["ProcessingImages"],
+	) => {
+		setState("ProcessingImages", (currentImages) => ({
+			...currentImages,
+			...images,
+		}));
+	};
+
+	createEffect(() => {
+		const images = processingImages();
+		if (images == null) {
+			return;
+		}
+
+		upsertImageProcessing(
+			Object.fromEntries(images.map((i) => [i.ImageID, i.Status])),
+		);
+	});
+
 	const events = new EventSource(`${base}/notifications?token=${access}`);
 
 	events.addEventListener("data", dataEventListener);