feat(processing-image): displaying initial status from response

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>
     // );
-}
+};

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>
+    );
+};