Webview: add solid-query for improved resource fetching & caching

pkgs/webview-ui/app/src/index.tsx

@@ -3,7 +3,10 @@ import { render } from "solid-js/web";
 
 import "./index.css";
 import App from "./App";
-import { getFakeResponse } from "../mock";
+import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
+
+const client = new QueryClient();
+
 const root = document.getElementById("app");
 
 window.clan = window.clan || {};
@@ -18,24 +21,14 @@ if (import.meta.env.DEV) {
   console.log("Development mode");
   // Load the debugger in development mode
   await import("solid-devtools");
-
-  // Uncomment this block to use the Mock API
-  // window.webkit = window.webkit || {
-  //   messageHandlers: {
-  //     gtk: {
-  //       postMessage: (postMessage) => {
-  //         const { method, data } = postMessage;
-  //         console.debug("Python API call", { method, data });
-  //         setTimeout(() => {
-  //           const mock = getFakeResponse(method, data);
-  //           console.log("Returning mock-data: ", { mock });
-
-  //           window.clan[method](JSON.stringify(mock));
-  //         }, 200);
-  //       },
-  //     },
-  //   },
-  // };
 }
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-render(() => <App />, root!);
+
+render(
+  () => (
+    <QueryClientProvider client={client}>
+      <App />
+    </QueryClientProvider>
+  ),
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  root!
+);

pkgs/webview-ui/app/src/routes/blockdevices/view.tsx

@@ -1,60 +1,59 @@
-import { route } from "@/src/App";
-import { OperationResponse, pyApi } from "@/src/api";
-import { Component, For, Show, createEffect, createSignal } from "solid-js";
+import { callApi } from "@/src/api";
+import { Component, For, Show } from "solid-js";
 
-type DevicesModel = Extract<
-  OperationResponse<"show_block_devices">,
-  { status: "success" }
->["data"]["blockdevices"];
+import { createQuery } from "@tanstack/solid-query";
 
 export const BlockDevicesView: Component = () => {
-  const [devices, setDevices] = createSignal<DevicesModel>();
-
-  // pyApi.show_block_devices.receive((r) => {
-  //   const { status } = r;
-  //   if (status === "error") return console.error(r.errors);
-  //   setServices(r.data.blockdevices);
-  // });
-
-  // createEffect(() => {
-  //   if (route() === "blockdevices") pyApi.show_block_devices.dispatch({});
-  // });
+  const {
+    data: devices,
+    refetch: loadDevices,
+    isFetching,
+  } = createQuery(() => ({
+    queryKey: ["TanStack Query"],
+    queryFn: async () => {
+      const result = await callApi("show_block_devices", {});
+      if (result.status === "error") throw new Error("Failed to fetch data");
+      return result.data;
+    },
+  }));
 
   return (
     <div>
       <div class="tooltip tooltip-bottom" data-tip="Refresh">
-        <button
-          class="btn btn-ghost"
-          // onClick={() => pyApi.show_block_devices.dispatch({})}
-        >
+        <button class="btn btn-ghost" onClick={() => loadDevices()}>
           <span class="material-icons ">refresh</span>
         </button>
       </div>
       <div class="flex max-w-screen-lg flex-col gap-4">
-        <Show when={devices()}>
-          {(devices) => (
-            <For each={devices()}>
-              {(device) => (
-                <div class="stats shadow">
-                  <div class="stat w-28 py-8">
-                    <div class="stat-title">Name</div>
-                    <div class="stat-value">
-                      {" "}
-                      <span class="material-icons">storage</span> {device.name}
+        {isFetching ? (
+          <span class="loading loading-bars"></span>
+        ) : (
+          <Show when={devices}>
+            {(devices) => (
+              <For each={devices().blockdevices}>
+                {(device) => (
+                  <div class="stats shadow">
+                    <div class="stat w-28 py-8">
+                      <div class="stat-title">Name</div>
+                      <div class="stat-value">
+                        {" "}
+                        <span class="material-icons">storage</span>{" "}
+                        {device.name}
+                      </div>
+                      <div class="stat-desc"></div>
                     </div>
-                    <div class="stat-desc"></div>
-                  </div>
 
-                  <div class="stat w-28">
-                    <div class="stat-title">Size</div>
-                    <div class="stat-value">{device.size}</div>
-                    <div class="stat-desc"></div>
+                    <div class="stat w-28">
+                      <div class="stat-title">Size</div>
+                      <div class="stat-value">{device.size}</div>
+                      <div class="stat-desc"></div>
+                    </div>
                   </div>
-                </div>
-              )}
-            </For>
-          )}
-        </Show>
+                )}
+              </For>
+            )}
+          </Show>
+        )}
       </div>
     </div>
   );

pkgs/webview-ui/app/src/routes/welcome/index.tsx

@@ -24,6 +24,14 @@ export const Welcome = () => {
             >
               Or select folder
             </button>
+            <button
+              class="link w-full text-right text-secondary"
+              onClick={async () => {
+                setRoute("machines");
+              }}
+            >
+              Skip (Debug)
+            </button>
           </div>
         </div>
       </div>