From 4922df6682f762bc90461e0ecf13804bcccc1699 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Sun, 27 Apr 2025 14:56:06 +0100
Subject: [PATCH] fix(sse): some bugs

---
 backend/events.go                             |  2 ++
 backend/main.go                               |  9 ++++----
 frontend/src/App.tsx                          |  5 +++-
 .../components/image-status/ImageStatus.tsx   | 23 +++++++++++++++----
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/backend/events.go b/backend/events.go
index 6eda913..61af31c 100644
--- a/backend/events.go
+++ b/backend/events.go
@@ -43,6 +43,8 @@ func ListenNewImageEvents(db *sql.DB, eventManager *EventManager) {
 
 			databaseEventLog.Debug("Starting processing image", "ImageID", imageId)
 
+			time.Sleep(5 * time.Second)
+
 			ctx := context.Background()
 
 			go func() {
diff --git a/backend/main.go b/backend/main.go
index f5190a5..f7f6856 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -254,10 +254,15 @@ func main() {
 
 		id := r.PathValue("id")
 
+		// TODO: get the current status of the image and send it across.
+		ctx, cancel := context.WithCancel(r.Context())
+
 		imageNotifier, exists := eventManager.listeners[id]
 		if !exists {
 			fmt.Println("Not found!")
 			w.WriteHeader(http.StatusNotFound)
+			w.(http.Flusher).Flush()
+			cancel()
 			return
 		}
 
@@ -266,10 +271,6 @@ func main() {
 		w.Header().Set("Connection", "keep-alive")
 		w.(http.Flusher).Flush()
 
-		// TODO: get the current status of the image and send it across.
-
-		ctx, cancel := context.WithCancel(r.Context())
-
 		for {
 			select {
 			case <-ctx.Done():
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index af704d4..e52af61 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -62,7 +62,10 @@ export const App = () => {
                 Take Screenshot [wayland :(]
             </button>
             <ImageViewer onSendImage={setProcessingImage} />
-            <ImageStatus processingImage={processingImage} />
+            <ImageStatus
+                processingImage={processingImage}
+                onSetProcessingImage={setProcessingImage}
+            />
             <Router>
                 <Route path="/login" component={Login} />
 
diff --git a/frontend/src/components/image-status/ImageStatus.tsx b/frontend/src/components/image-status/ImageStatus.tsx
index 8781936..a6c8376 100644
--- a/frontend/src/components/image-status/ImageStatus.tsx
+++ b/frontend/src/components/image-status/ImageStatus.tsx
@@ -1,8 +1,11 @@
 import { createEffect, Show, type Accessor, type Component } from "solid-js";
-import type { sendImage } from "../../network";
+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
     >;
@@ -16,10 +19,21 @@ export const ImageStatus: Component<ImageStatusProps> = (props) => {
     const onEvent = (e: MessageEvent<EventData>) => {
         console.log(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,
+            });
+
             return;
         }
 
+        props.onSetProcessingImage(undefined);
         onRefetchImages();
     };
 
@@ -29,9 +43,10 @@ export const ImageStatus: Component<ImageStatusProps> = (props) => {
             return;
         }
 
-        const eventSource = new EventSource(
-            `http://192.168.1.199:3040/image-events/${image.ID}`,
-        );
+        const eventSourceUrl = `${base}/image-events/${image.ID}`;
+
+        const eventSource = new EventSource(eventSourceUrl);
+        console.log("URL: ", eventSourceUrl);
 
         eventSource.addEventListener("data", onEvent);