diff --git a/pkgs/clan-app/ui/src/queries/queries.ts b/pkgs/clan-app/ui/src/queries/queries.ts new file mode 100644 index 000000000..25904b790 --- /dev/null +++ b/pkgs/clan-app/ui/src/queries/queries.ts @@ -0,0 +1,31 @@ +import { useQuery, UseQueryResult } from "@tanstack/solid-query"; +import { callApi, SuccessData } from "../hooks/api"; + +export type ListMachines = SuccessData<"list_machines">; + +export type MachinesQueryResult = UseQueryResult; + +interface MachinesQueryParams { + clanURI: string | null; +} +export const useMachinesQuery = (props: MachinesQueryParams) => + useQuery(() => ({ + queryKey: ["clans", props.clanURI, "machines"], + enabled: !!props.clanURI, + queryFn: async () => { + if (!props.clanURI) { + return {}; + } + const api = callApi("list_machines", { + flake: { + identifier: props.clanURI, + }, + }); + const result = await api.result; + if (result.status === "error") { + console.error("Error fetching machines:", result.errors); + return {}; + } + return result.data; + }, + })); diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx index c5c554c67..55e2ee0f7 100644 --- a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx +++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx @@ -2,8 +2,7 @@ import { RouteSectionProps } from "@solidjs/router"; import { Component, JSX } from "solid-js"; import { useMaybeClanURI } from "@/src/hooks/clan"; import { CubeScene } from "@/src/scene/cubes"; -import { useQuery, UseQueryResult } from "@tanstack/solid-query"; -import { callApi, SuccessData } from "@/src/hooks/api"; +import { MachinesQueryResult, useMachinesQuery } from "@/src/queries/queries"; export const Clans: Component = (props) => { return ( @@ -31,32 +30,11 @@ const ClanSwitchDog = () => { ); }; -export type ListMachines = SuccessData<"list_machines">; - const SceneDataProvider = (props: { clanURI: string | null; - children: (sceneData: { query: UseQueryResult }) => JSX.Element; + children: (sceneData: { query: MachinesQueryResult }) => JSX.Element; }) => { - const machinesQuery = useQuery(() => ({ - queryKey: ["clans", props.clanURI, "machines"], - enabled: !!props.clanURI, - queryFn: async () => { - if (!props.clanURI) { - return {}; - } - const api = callApi("list_machines", { - flake: { - identifier: props.clanURI, - }, - }); - const result = await api.result; - if (result.status === "error") { - console.error("Error fetching machines:", result.errors); - return {}; - } - return result.data; - }, - })); + const machinesQuery = useMachinesQuery({ clanURI: props.clanURI }); // This component can be used to provide scene data or context if needed return props.children({ query: machinesQuery });