feat: allowing user to get a list of their images

feat: UI to show and organise user images

frontend/src/contexts/SearchImageContext.tsx

@@ -1,19 +1,25 @@
 import {
-    createContext,
-    type Resource,
+    type Accessor,
     type Component,
     type ParentProps,
+    createContext,
+    createMemo,
     createResource,
     useContext,
 } from "solid-js";
 import { getUserImages } from "../network";
+import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage";
 
-type ImageWithRawData = Awaited<ReturnType<typeof getUserImages>>[number] & {
+export type ImageWithRawData = Awaited<
+    ReturnType<typeof getUserImages>
+>["ImageProperties"][number] & {
     rawData: string[];
 };
 
 type SearchImageStore = {
-    images: Resource<ImageWithRawData[]>;
+    images: Accessor<ImageWithRawData[]>;
+
+    imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
     onRefetchImages: () => void;
 };
 
@@ -50,19 +56,36 @@ const getAllValues = (object: object): Array<string> => {
 
 const SearchImageContext = createContext<SearchImageStore>();
 export const SearchImageContextProvider: Component<ParentProps> = (props) => {
-    const [images, { refetch }] = createResource(() =>
-        getUserImages().then((data) => {
-            return data.map((d) => ({
-                ...d,
-                rawData: getAllValues(d),
-            }));
-        }),
-    );
+    const [data, { refetch }] = createResource(getUserImages);
+
+    const imageData = createMemo<ImageWithRawData[]>(() => {
+        const d = data();
+        if (d == null) {
+            return [];
+        }
+
+        return d.ImageProperties.map((d) => ({
+            ...d,
+            rawData: getAllValues(d),
+        }));
+    });
+
+    const imagesWithProperties = createMemo<
+        ReturnType<typeof groupPropertiesWithImage>
+    >(() => {
+        const d = data();
+        if (d == null) {
+            return {};
+        }
+
+        return groupPropertiesWithImage(d);
+    });
 
     return (
         <SearchImageContext.Provider
             value={{
-                images,
+                images: imageData,
+                imagesWithProperties: imagesWithProperties,
                 onRefetchImages: refetch,
             }}
         >