feat: updating notifications system based on incoming request

This is making the frontend data logic a little complex

frontend/src/contexts/SearchImageContext.tsx

@@ -1,106 +1,113 @@
 import {
-    type Accessor,
-    type Component,
-    type ParentProps,
-    createContext,
-    createMemo,
-    createResource,
-    useContext,
+	type Accessor,
+	type Component,
+	type ParentProps,
+	createContext,
+	createMemo,
+	createResource,
+	useContext,
 } from "solid-js";
 import { getUserImages } from "../network";
 import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage";
 
 export type ImageWithRawData = Awaited<
-    ReturnType<typeof getUserImages>
+	ReturnType<typeof getUserImages>
 >["ImageProperties"][number] & {
-    rawData: string[];
+	rawData: string[];
 };
 
 type SearchImageStore = {
-    images: Accessor<ImageWithRawData[]>;
+	images: Accessor<ImageWithRawData[]>;
 
-    imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
-    onRefetchImages: () => void;
+	imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
+	processingImages: Accessor<
+		Awaited<ReturnType<typeof getUserImages>>["ProcessingImages"] | undefined
+	>;
+
+	onRefetchImages: () => void;
 };
 
 // How wonderfully functional
 const getAllValues = (object: object): Array<string> => {
-    const loop = (acc: Array<string>, next: object): Array<string> => {
-        for (const [key, _value] of Object.entries(next)) {
-            if (key === "ID") {
-                continue;
-            }
+	const loop = (acc: Array<string>, next: object): Array<string> => {
+		for (const [key, _value] of Object.entries(next)) {
+			if (key === "ID") {
+				continue;
+			}
 
-            const value: unknown = _value;
-            switch (typeof value) {
-                case "object":
-                    if (value != null) {
-                        acc.push(...loop(acc, value));
-                    }
-                    break;
-                case "string":
-                case "number":
-                case "boolean":
-                    acc.push(value.toString());
-                    break;
-                default:
-                    break;
-            }
-        }
+			const value: unknown = _value;
+			switch (typeof value) {
+				case "object":
+					if (value != null) {
+						acc.push(...loop(acc, value));
+					}
+					break;
+				case "string":
+				case "number":
+				case "boolean":
+					acc.push(value.toString());
+					break;
+				default:
+					break;
+			}
+		}
 
-        return acc;
-    };
+		return acc;
+	};
 
-    return loop([], object);
+	return loop([], object);
 };
 
 const SearchImageContext = createContext<SearchImageStore>();
 export const SearchImageContextProvider: Component<ParentProps> = (props) => {
-    const [data, { refetch }] = createResource(getUserImages);
+	const [data, { refetch }] = createResource(getUserImages);
 
-    const imageData = createMemo<ImageWithRawData[]>(() => {
-        const d = data();
-        if (d == null) {
-            return [];
-        }
+	const imageData = createMemo<ImageWithRawData[]>(() => {
+		const d = data();
+		if (d == null) {
+			return [];
+		}
 
-        return d.ImageProperties.map((d) => ({
-            ...d,
-            rawData: getAllValues(d),
-        }));
-    });
+		return d.ImageProperties.map((d) => ({
+			...d,
+			rawData: getAllValues(d),
+		}));
+	});
 
-    const imagesWithProperties = createMemo<
-        ReturnType<typeof groupPropertiesWithImage>
-    >(() => {
-        const d = data();
-        if (d == null) {
-            return {};
-        }
+	const processingImages = () => data()?.ProcessingImages ?? [];
 
-        return groupPropertiesWithImage(d);
-    });
+	const imagesWithProperties = createMemo<
+		ReturnType<typeof groupPropertiesWithImage>
+	>(() => {
+		const d = data();
+		if (d == null) {
+			return {};
+		}
 
-    return (
-        <SearchImageContext.Provider
-            value={{
-                images: imageData,
-                imagesWithProperties: imagesWithProperties,
-                onRefetchImages: refetch,
-            }}
-        >
-            {props.children}
-        </SearchImageContext.Provider>
-    );
+		return groupPropertiesWithImage(d);
+	});
+
+	return (
+		<SearchImageContext.Provider
+			value={{
+				images: imageData,
+				imagesWithProperties: imagesWithProperties,
+				processingImages,
+				onRefetchImages: refetch,
+			}}
+		>
+			{props.children}
+		</SearchImageContext.Provider>
+	);
 };
 
 export const useSearchImageContext = () => {
-    const context = useContext(SearchImageContext);
-    if (context == null) {
-        throw new Error(
-            "Unreachable: We should always have a mounted context and no undefined values",
-        );
-    }
+	const context = useContext(SearchImageContext);
+	if (context == null) {
+		throw new Error(
+			"Unreachable: We should always have a mounted context and no undefined values",
+		);
+	}
 
-    return context;
+	return context;
 };