diff --git a/pkgs/webview-ui/app/package-lock.json b/pkgs/webview-ui/app/package-lock.json index e0e9e98f1..595f4b1cb 100644 --- a/pkgs/webview-ui/app/package-lock.json +++ b/pkgs/webview-ui/app/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@modular-forms/solid": "^0.21.0", "@solid-primitives/storage": "^3.7.1", - "@tanstack/solid-query": "^5.44.0", + "@tanstack/solid-query": "^5.51.2", "material-icons": "^1.13.12", "nanoid": "^5.0.7", "solid-js": "^1.8.11", @@ -1570,21 +1570,20 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.44.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.44.0.tgz", - "integrity": "sha512-Fa1J7iEEyJnjXG1N4+Fz4OXNH/INve3XSn0Htms3X4wgRsXHxMDwqBE2XtDCts7swkwSIs4izEtaFqWVFr/eLQ==", + "version": "5.51.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.1.tgz", + "integrity": "sha512-fJBMQMpo8/KSsWW5ratJR5+IFr7YNJ3K2kfP9l5XObYHsgfVy1w3FJUWU4FT2fj7+JMaEg33zOcNDBo0LMwHnw==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/solid-query": { - "version": "5.44.0", - "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-5.44.0.tgz", - "integrity": "sha512-fxsSFGbaHknL1zuymEZqrSRFk0wI3/RVDInlQJS3jZevnKJBAlDohIis6MZdm3EOFRTq+sfaMTNXZTu2B5MpOw==", + "version": "5.51.2", + "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-5.51.2.tgz", + "integrity": "sha512-mFW9u6MeH72OYRg2dr4lEBrWiqnhG3aTq7PkKBfZ7BDAvOfox/tqOt3TYOKQZja3Y8XZqz5pMumsKKofYHMIQA==", "dependencies": { - "@tanstack/query-core": "5.44.0", - "solid-js": "^1.8.17" + "@tanstack/query-core": "5.51.1" }, "funding": { "type": "github", diff --git a/pkgs/webview-ui/app/package.json b/pkgs/webview-ui/app/package.json index c40899c91..2facfba64 100644 --- a/pkgs/webview-ui/app/package.json +++ b/pkgs/webview-ui/app/package.json @@ -40,7 +40,7 @@ "dependencies": { "@modular-forms/solid": "^0.21.0", "@solid-primitives/storage": "^3.7.1", - "@tanstack/solid-query": "^5.44.0", + "@tanstack/solid-query": "^5.51.2", "material-icons": "^1.13.12", "nanoid": "^5.0.7", "solid-js": "^1.8.11", diff --git a/pkgs/webview-ui/app/src/index.tsx b/pkgs/webview-ui/app/src/index.tsx index a0bb54bf6..4cc82a85d 100644 --- a/pkgs/webview-ui/app/src/index.tsx +++ b/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(() => , root!); + +render( + () => ( + + + + ), + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + root! +); diff --git a/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx b/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx index 7c09b0ab9..f7b21a69f 100644 --- a/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx +++ b/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(); - - // 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 (
-
- - {(devices) => ( - - {(device) => ( -
-
-
Name
-
- {" "} - storage {device.name} + {isFetching ? ( + + ) : ( + + {(devices) => ( + + {(device) => ( +
+
+
Name
+
+ {" "} + storage{" "} + {device.name} +
+
-
-
-
-
Size
-
{device.size}
-
+
+
Size
+
{device.size}
+
+
-
- )} - - )} - + )} + + )} + + )}
); diff --git a/pkgs/webview-ui/app/src/routes/welcome/index.tsx b/pkgs/webview-ui/app/src/routes/welcome/index.tsx index 29f90865a..50d13ee92 100644 --- a/pkgs/webview-ui/app/src/routes/welcome/index.tsx +++ b/pkgs/webview-ui/app/src/routes/welcome/index.tsx @@ -24,6 +24,14 @@ export const Welcome = () => { > Or select folder +
diff --git a/pkgs/webview-ui/flake-module.nix b/pkgs/webview-ui/flake-module.nix index 8af1360cd..be51c7f51 100644 --- a/pkgs/webview-ui/flake-module.nix +++ b/pkgs/webview-ui/flake-module.nix @@ -16,7 +16,7 @@ npmDeps = pkgs.fetchNpmDeps { src = ./app; - hash = "sha256-U8FwGL0FelUZwa8NjitfsFNDSofUPbp+nHrypeDj2Po="; + hash = "sha256-/PFSBAIodZjInElYoNsDQUV4isxmcvL3YM1hzAmdDWA="; }; # The prepack script runs the build script, which we'd rather do in the build phase. npmPackFlags = [ "--ignore-scripts" ];