feat(share-target): seperate component to handle sharing

frontend/src/App.tsx

@@ -1,23 +1,14 @@
 import { Route, Router } from "@solidjs/router";
 import { listen } from "@tauri-apps/api/event";
-import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
+import { createEffect, 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 type { PluginListener } from "@tauri-apps/api/core";
+import { ShareTarget } from "./components/share-target/ShareTarget";
-import {
-    listenForShareEvents,
-    type ShareEvent,
-} from "tauri-plugin-sharetarget-api";
-import { readFile } from "@tauri-apps/plugin-fs";
-import { sendImage, sendImageFile } from "./network";
 
 export const App = () => {
-    const [logs, setLogs] = createSignal<string[]>([]);
-    const [file, setFile] = createSignal<File>();
-
     createEffect(() => {
         // TODO: Don't use window.location.href
         const unlisten = listen("focus-search", () => {
@@ -29,49 +20,10 @@ export const App = () => {
         });
     });
 
-    createEffect(() => {
-        let listener: PluginListener;
-        const setupListener = async () => {
-            listener = await listenForShareEvents(
-                async (intent: ShareEvent) => {
-                    const contents = await readFile(intent.stream).catch(
-                        (error: Error) => {
-                            console.warn("fetching shared content failed:");
-                            throw error;
-                        },
-                    );
-                    setFile(
-                        new File([contents], intent.name ?? "no-name", {
-                            type: intent.content_type,
-                        }),
-                    );
-                    setLogs((l) => [...l, intent.uri]);
-                },
-            );
-        };
-        setupListener();
-        return () => {
-            listener?.unregister();
-        };
-    });
-
-    createEffect(() => {
-        const f = file();
-        if (f == null) {
-            return;
-        }
-
-        sendImageFile(f.name, f);
-    });
-
     return (
         <>
             <ImageViewer />
-            <p>Hello</p>
+            <ShareTarget />
-            <Show when={file()}>
-                {(f) => <img alt="my-image" src={URL.createObjectURL(f())} />}
-            </Show>
-            <For each={logs()}>{(log) => <p>{log}</p>}</For>
             <Router>
                 <Route path="/login" component={Login} />
 

frontend/src/components/share-target/ShareTarget.tsx

@@ -0,0 +1,47 @@
+import { readFile } from "@tauri-apps/plugin-fs";
+import { type Component, createEffect, createSignal, Show } from "solid-js";
+import { listenForShareEvents } from "tauri-plugin-sharetarget-api";
+import { sendImageFile } from "../../network";
+
+export const ShareTarget: Component = () => {
+    const [file, setFile] = createSignal<File>();
+
+    createEffect(() => {
+        const listener = listenForShareEvents(async (intent) => {
+            if (intent.stream == null) {
+                throw new Error(
+                    "The shared item does not have a stream to read form. This might be an issue with the type of file that was shared.",
+                );
+            }
+
+            if (intent.name == null) {
+                throw new Error("The shared item does not have a name.");
+            }
+
+            const contents = await readFile(intent.stream);
+
+            setFile(
+                new File([contents], intent.name, {
+                    type: intent.content_type,
+                }),
+            );
+        });
+
+        return () => {
+            listener.then((l) => l.unregister());
+        };
+    });
+
+    // TODO: This might be made better by just sending the file without setting it.
+    // And simply displaying a message or not displaying anything really.
+    createEffect(() => {
+        const f = file();
+        if (f == null) {
+            return;
+        }
+
+        sendImageFile(f.name, f);
+    });
+
+    return <Show when={file()}>{(f) => <p>Name: {f().name}</p>}</Show>;
+};