From b27e191e5cd1bbdc7b5919400b410c47cccdfff3 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Sat, 26 Apr 2025 11:41:44 +0100
Subject: [PATCH] feat(processing-image): displaying initial status from
 response

---
 backend/events.go                             |  2 --
 frontend/src/App.tsx                          | 17 ++++++--------
 frontend/src/components/ImageViewer.tsx       | 21 ++++++++++--------
 .../components/image-status/ImageStatus.tsx   | 22 +++++++++++++++++++
 4 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/image-status/ImageStatus.tsx

diff --git a/backend/events.go b/backend/events.go
index 521debe..fd23f03 100644
--- a/backend/events.go
+++ b/backend/events.go
@@ -43,8 +43,6 @@ func ListenNewImageEvents(db *sql.DB, eventManager *EventManager) {
 
 			databaseEventLog.Debug("Starting processing image", "ImageID", imageId)
 
-			time.Sleep(10 * time.Second)
-
 			ctx := context.Background()
 
 			go func() {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 333eecc..e5f0447 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,22 +1,18 @@
 import { Route, Router } from "@solidjs/router";
 import { listen } from "@tauri-apps/api/event";
-import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { Login } from "./Login";
 import { ProtectedRoute } from "./ProtectedRoute";
 import { Search } from "./Search";
 import { Settings } from "./Settings";
 import { ImageViewer } from "./components/ImageViewer";
 import { ShareTarget } from "./components/share-target/ShareTarget";
-import type { PluginListener } from "@tauri-apps/api/core";
-import {
-    listenForShareEvents,
-    type ShareEvent,
-} from "tauri-plugin-sharetarget-api";
-import { readFile } from "@tauri-apps/plugin-fs";
+import type { sendImage } from "./network";
+import { ImageStatus } from "./components/image-status/ImageStatus";
 
 export const App = () => {
-    const [logs, setLogs] = createSignal<string[]>([]);
-    const [file, setFile] = createSignal<File>();
+    const [processingImage, setProcessingImage] =
+        createSignal<Awaited<ReturnType<typeof sendImage>>>();
 
     createEffect(() => {
         // TODO: Don't use window.location.href
@@ -57,7 +53,8 @@ export const App = () => {
 
     return (
         <>
-            <ImageViewer />
+            <ImageViewer onSendImage={setProcessingImage} />
+            <ImageStatus processingImage={processingImage} />
             <ShareTarget />
             <Router>
                 <Route path="/login" component={Login} />
diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx
index 2931f21..4c6d2a9 100644
--- a/frontend/src/components/ImageViewer.tsx
+++ b/frontend/src/components/ImageViewer.tsx
@@ -1,14 +1,14 @@
 import { listen } from "@tauri-apps/api/event";
-
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import { createEffect, createSignal } from "solid-js";
+import { type Component, createEffect } from "solid-js";
 import { sendImage } from "../network";
 
-// TODO: This component should focus the window and show preview of screenshot,
-// before we send it to backend, potentially we could draw and annotate
-// OR we kill this and do stuff siltently
-// anyhow keeping it like this for now
-export function ImageViewer() {
+type ImageViewerProps = {
+    onSendImage: (
+        processingImage: Awaited<ReturnType<typeof sendImage>>,
+    ) => void;
+};
+
+export const ImageViewer: Component<ImageViewerProps> = (props) => {
     // const [latestImage, setLatestImage] = createSignal<string | null>(null);
 
     createEffect(async () => {
@@ -26,6 +26,9 @@ export function ImageViewer() {
 
             const result = await sendImage("test-image.png", base64Data);
 
+            props.onSendImage(result);
+
+            window.location.reload();
             console.log("DBG: ", result);
         });
 
@@ -50,4 +53,4 @@ export function ImageViewer() {
     //         )}
     //     </div>
     // );
-}
+};
diff --git a/frontend/src/components/image-status/ImageStatus.tsx b/frontend/src/components/image-status/ImageStatus.tsx
new file mode 100644
index 0000000..4be12d9
--- /dev/null
+++ b/frontend/src/components/image-status/ImageStatus.tsx
@@ -0,0 +1,22 @@
+import { Show, type Accessor, type Component } from "solid-js";
+import type { sendImage } from "../../network";
+
+type ImageStatusProps = {
+    processingImage: Accessor<
+        Awaited<ReturnType<typeof sendImage>> | undefined
+    >;
+};
+
+export const ImageStatus: Component<ImageStatusProps> = (props) => {
+    return (
+        <Show when={props.processingImage()}>
+            {(image) => (
+                <div>
+                    <p>
+                        {image().ImageID} - {image().Status}
+                    </p>
+                </div>
+            )}
+        </Show>
+    );
+};