Webview: add solid-query for improved resource fetching & caching
This commit is contained in:
Johannes Kirschbauer
17
pkgs/webview-ui/app/package-lock.json
generated
17
pkgs/webview-ui/app/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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!
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" ];
|
||||
|
||||
Reference in New Issue
Block a user