From 53ebbb6e8d2a3852697157a764a2334004afd0eb Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Sat, 8 Mar 2025 13:13:05 +0000
Subject: [PATCH] feat: sending images and receiving them is now working

---
 backend/models/image.go                 |  2 ++
 frontend/src/App.tsx                    | 15 ++++++++++++++-
 frontend/src/components/ImageViewer.tsx |  6 ++----
 frontend/src/network/index.ts           |  7 +++----
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/backend/models/image.go b/backend/models/image.go
index ce08240..b3f0208 100644
--- a/backend/models/image.go
+++ b/backend/models/image.go
@@ -24,6 +24,8 @@ func SaveImageToProcess(userId string, imageName string, imageData []byte) (mode
 
 	stmt := UserImagesToProcess.INSERT(UserImagesToProcess.UserID, UserImagesToProcess.ImageID).VALUES(userId, image.ID).RETURNING(UserImagesToProcess.AllColumns)
 
+	fmt.Println(stmt.DebugSql())
+
 	userImage := model.UserImagesToProcess{}
 	err = stmt.Query(db, &userImage)
 
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 97c3a6f..007d8b5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,8 +1,10 @@
-import { createSignal } from "solid-js";
+import { createEffect, createResource, createSignal, For } from "solid-js";
 import { Search } from "@kobalte/core/search";
 import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
 import clsx from "clsx";
 import { ImageViewer } from "./components/ImageViewer";
+import { getUserImages } from "./network";
+import { image } from "@tauri-apps/api";
 
 type Emoji = {
     emoji: string;
@@ -13,6 +15,12 @@ function App() {
     const [options, setOptions] = createSignal<Emoji[]>([]);
     const [emoji, setEmoji] = createSignal<Emoji | null>(null);
 
+    const [images] = createResource(getUserImages);
+
+    createEffect(() => {
+        console.log(images()?.map(image => image.ID))
+    });
+
     const emojiData: Emoji[] = [
         { emoji: "😀", name: "Grinning Face" },
         { emoji: "😃", name: "Grinning Face with Big Eyes" },
@@ -97,6 +105,11 @@ function App() {
                         <div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
                         <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
                         <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
+                        <For each={images()}>
+                            {(image) => (
+                                <img src={`http://localhost:3040/image/${image.ID}`} class="col-span-3 row-span-3 rounded-xl" />
+                            )}
+                        </For>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx
index cd1a974..50c3563 100644
--- a/frontend/src/components/ImageViewer.tsx
+++ b/frontend/src/components/ImageViewer.tsx
@@ -12,10 +12,8 @@ export function ImageViewer() {
             console.log("Received processed PNG", event);
             const base64Data = event.payload as string;
 
-            const urlImage = `data:image/png;base64,${base64Data}`;
-            setLatestImage(urlImage);
-
-            sendImage("test-image.png", urlImage);
+            setLatestImage(`data:image/png;base64,${base64Data}`);
+            sendImage("test-image.png", base64Data);
         });
 
         return () => {
diff --git a/frontend/src/network/index.ts b/frontend/src/network/index.ts
index a6213c3..8b22a4b 100644
--- a/frontend/src/network/index.ts
+++ b/frontend/src/network/index.ts
@@ -32,16 +32,15 @@ const sendImageResponseValidator = object({
 
 export const sendImage = async (
     imageName: string,
-    image: BlobPart,
+    base64Image: string,
 ): Promise<InferOutput<typeof sendImageResponseValidator>> => {
-    const data = new Blob([image]);
     const request = getBaseRequest({
         path: `image/${imageName}`,
-        body: data,
+        body: base64Image,
         method: "POST",
     });
 
-    request.headers.set("Content-Type", "aplication/base64");
+    request.headers.set("Content-Type", "application/base64");
 
     const res = await fetch(request).then((res) => res.json());