diff --git a/pkgs/clan-app/ui/src/App.tsx b/pkgs/clan-app/ui/src/App.tsx deleted file mode 100644 index 894da8432..000000000 --- a/pkgs/clan-app/ui/src/App.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { createSignal } from "solid-js"; -import { makePersisted } from "@solid-primitives/storage"; -import { callApi } from "./api"; - -const [activeURI, setActiveURI] = makePersisted( - createSignal(null), - { - name: "activeURI", - storage: localStorage, - }, -); - -export { activeURI, setActiveURI }; - -const [clanList, setClanList] = makePersisted(createSignal([]), { - name: "clanList", - storage: localStorage, -}); - -export { clanList, setClanList }; - -(async function () { - const curr = activeURI(); - if (curr) { - const result = await callApi("show_clan_meta", { - flake: { identifier: curr }, - }); - console.log("refetched meta for ", curr); - if (result.status === "error") { - result.errors.forEach((error) => { - if (error.description === "clan directory does not exist") { - setActiveURI(null); - setClanList((clans) => clans.filter((clan) => clan !== curr)); - } - }); - } - } -})(); - -// ensure to null out activeURI on startup if the clan was deleted -// => throws user back to the view for selecting a clan diff --git a/pkgs/clan-app/ui/src/components/Sidebar/index.tsx b/pkgs/clan-app/ui/src/components/Sidebar/index.tsx index d841559b7..f527e8847 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/index.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/index.tsx @@ -1,14 +1,12 @@ -import { For, createEffect, Show, type JSX, children } from "solid-js"; -import { A, RouteSectionProps } from "@solidjs/router"; -import { activeURI } from "@/src/App"; -import { createQuery } from "@tanstack/solid-query"; -import { callApi } from "@/src/api"; -import { AppRoute, routes } from "@/src/index"; +import { For, type JSX, Show } from "solid-js"; +import { RouteSectionProps } from "@solidjs/router"; +import { AppRoute, routes } from "@/src"; import { SidebarHeader } from "./SidebarHeader"; import { SidebarListItem } from "./SidebarListItem"; import { Typography } from "../Typography"; import "./css/sidebar.css"; import Icon, { IconVariant } from "../icon"; +import { clanMetaQuery } from "@/src/queries/clan-meta"; export const SidebarSection = (props: { title: string; @@ -42,26 +40,7 @@ export const SidebarSection = (props: { }; export const Sidebar = (props: RouteSectionProps) => { - createEffect(() => { - console.log("machines"); - console.log(routes); - }); - - const query = createQuery(() => ({ - queryKey: [activeURI(), "meta"], - queryFn: async () => { - const curr = activeURI(); - if (curr) { - const result = await callApi("show_clan_meta", { - flake: { identifier: curr }, - }); - console.log("refetched meta for ", curr); - if (result.status === "error") throw new Error("Failed to fetch data"); - - return result.data; - } - }, - })); + const query = clanMetaQuery(); return (
diff --git a/pkgs/clan-app/ui/src/components/machine-list-item/index.tsx b/pkgs/clan-app/ui/src/components/machine-list-item/index.tsx index f72a0bcb3..c523285f3 100644 --- a/pkgs/clan-app/ui/src/components/machine-list-item/index.tsx +++ b/pkgs/clan-app/ui/src/components/machine-list-item/index.tsx @@ -1,14 +1,13 @@ -import { createSignal, For, Setter, Show } from "solid-js"; +import { createSignal, Setter } from "solid-js"; import { callApi, SuccessQuery } from "../../api"; -import { activeURI } from "../../App"; -import toast from "solid-toast"; import { A, useNavigate } from "@solidjs/router"; import { RndThumbnail } from "../noiseThumbnail"; import { Filter } from "../../routes/machines"; import { Typography } from "../Typography"; import "./css/index.css"; +import { useClanContext } from "@/src/contexts/clan"; type MachineDetails = SuccessQuery<"list_inv_machines">["data"][string]; @@ -28,6 +27,8 @@ export const MachineListItem = (props: MachineListItemProps) => { // Later only updates const [updating, setUpdating] = createSignal(false); + const { activeClanURI } = useClanContext(); + const navigate = useNavigate(); const handleInstall = async () => { @@ -35,7 +36,7 @@ export const MachineListItem = (props: MachineListItemProps) => { return; } - const active_clan = activeURI(); + const active_clan = activeClanURI(); if (!active_clan) { console.error("No active clan selected"); return; @@ -70,7 +71,7 @@ export const MachineListItem = (props: MachineListItemProps) => { return; } - const active_clan = activeURI(); + const active_clan = activeClanURI(); if (!active_clan) { console.error("No active clan selected"); return; diff --git a/pkgs/clan-app/ui/src/contexts/clan.tsx b/pkgs/clan-app/ui/src/contexts/clan.tsx new file mode 100644 index 000000000..765b66d43 --- /dev/null +++ b/pkgs/clan-app/ui/src/contexts/clan.tsx @@ -0,0 +1,65 @@ +import { createContext, createEffect, JSX, useContext } from "solid-js"; +import { callApi } from "@/src/api"; +import { + activeClanURI, + addClanURI, + clanURIs, + removeClanURI, + setActiveClanURI, + store, +} from "@/src/stores/clan"; +import { redirect } from "@solidjs/router"; + +// Create the context +interface ClanContextType { + activeClanURI: typeof activeClanURI; + setActiveClanURI: typeof setActiveClanURI; + clanURIs: typeof clanURIs; + addClanURI: typeof addClanURI; + removeClanURI: typeof removeClanURI; +} + +const ClanContext = createContext({ + activeClanURI, + setActiveClanURI, + clanURIs, + addClanURI, + removeClanURI, +}); + +interface ClanProviderProps { + children: JSX.Element; +} + +export function ClanProvider(props: ClanProviderProps) { + // redirect to welcome if there's no active clan and no clan URIs + createEffect(async () => { + if (!store.activeClanURI && store.clanURIs.length == 0) { + redirect("/welcome"); + return; + } + }); + + return ( + + {props.children} + + ); +} + +// Export a hook that provides access to the context +export function useClanContext() { + const context = useContext(ClanContext); + if (!context) { + throw new Error("useClanContext must be used within a ClanProvider"); + } + return context; +} diff --git a/pkgs/clan-app/ui/src/hooks/index.ts b/pkgs/clan-app/ui/src/hooks/index.ts index 5d6920fa9..825835fe8 100644 --- a/pkgs/clan-app/ui/src/hooks/index.ts +++ b/pkgs/clan-app/ui/src/hooks/index.ts @@ -1,18 +1,17 @@ import { callApi } from "../api"; -import { setActiveURI, setClanList } from "../App"; +import { useClanContext } from "@/src/contexts/clan"; export const registerClan = async () => { + const { setActiveClanURI, addClanURI } = useClanContext(); + try { const loc = await callApi("open_file", { file_request: { mode: "select_folder" }, }); if (loc.status === "success" && loc.data) { const data = loc.data[0]; - setClanList((s) => { - const res = new Set([...s, data]); - return Array.from(res); - }); - setActiveURI(data); + addClanURI(data); + setActiveClanURI(data); return data; } } catch (e) { diff --git a/pkgs/clan-app/ui/src/index.tsx b/pkgs/clan-app/ui/src/index.tsx index 30527f55d..338cb7c5c 100644 --- a/pkgs/clan-app/ui/src/index.tsx +++ b/pkgs/clan-app/ui/src/index.tsx @@ -5,12 +5,12 @@ import { Navigate, RouteDefinition, Router } from "@solidjs/router"; import "./index.css"; import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"; import { + CreateMachine, MachineDetails, MachineListView, - CreateMachine, } from "./routes/machines"; import { Layout } from "./layout/layout"; -import { ClanList, CreateClan, ClanDetails } from "./routes/clans"; +import { ClanDetails, ClanList, CreateClan } from "./routes/clans"; import { Flash } from "./routes/flash/view"; import { HostList } from "./routes/hosts/view"; import { Welcome } from "./routes/welcome"; @@ -21,9 +21,9 @@ import { ModuleDetails as AddModule } from "./routes/modules/add"; import { ApiTester } from "./api_test"; import { IconVariant } from "./components/icon"; import { Components } from "./routes/components"; -import { activeURI } from "./App"; -import { VarsPage, VarsForm } from "./routes/machines/install/vars-step"; +import { VarsPage } from "./routes/machines/install/vars-step"; import { ThreePlayground } from "./three"; +import { ClanProvider } from "./contexts/clan"; export const client = new QueryClient(); @@ -186,7 +186,9 @@ render( - {routes} + + {routes} + ), diff --git a/pkgs/clan-app/ui/src/layout/layout.tsx b/pkgs/clan-app/ui/src/layout/layout.tsx index 4185f9be1..61cc32918 100644 --- a/pkgs/clan-app/ui/src/layout/layout.tsx +++ b/pkgs/clan-app/ui/src/layout/layout.tsx @@ -1,16 +1,17 @@ import { Component, createEffect } from "solid-js"; import { Sidebar } from "@/src/components/Sidebar"; -import { clanList } from "../App"; import { RouteSectionProps, useNavigate } from "@solidjs/router"; +import { useClanContext } from "@/src/contexts/clan"; export const Layout: Component = (props) => { const navigate = useNavigate(); + const { clanURIs } = useClanContext(); createEffect(() => { console.log( "empty ClanList, redirect to welcome page", - clanList().length === 0, + clanURIs().length === 0, ); - if (clanList().length === 0) { + if (clanURIs().length === 0) { navigate("/welcome"); } }); diff --git a/pkgs/clan-app/ui/src/queries/clan-meta.ts b/pkgs/clan-app/ui/src/queries/clan-meta.ts new file mode 100644 index 000000000..be4b0a62f --- /dev/null +++ b/pkgs/clan-app/ui/src/queries/clan-meta.ts @@ -0,0 +1,37 @@ +import { useQuery } from "@tanstack/solid-query"; +import { callApi } from "@/src/api"; +import { activeClanURI, removeClanURI } from "@/src/stores/clan"; + +export const clanMetaQuery = (uri: string | undefined = undefined) => + useQuery(() => { + const clanURI = uri || activeClanURI(); + const enabled = !!clanURI; + + return { + enabled, + queryKey: [clanURI, "meta"], + queryFn: async () => { + console.log("fetching clan meta", clanURI); + + const result = await callApi("show_clan_meta", { + flake: { identifier: clanURI! }, + }); + + console.log("result", result); + + if (result.status === "error") { + // check if the clan directory no longer exists + // remove from the clan list if not + result.errors.forEach((error) => { + if (error.description === "clan directory does not exist") { + removeClanURI(clanURI!); + } + }); + + throw new Error("Failed to fetch data"); + } + + return result.data; + }, + }; + }); diff --git a/pkgs/clan-app/ui/src/queries/index.ts b/pkgs/clan-app/ui/src/queries/index.ts index bfc384abb..9051d2620 100644 --- a/pkgs/clan-app/ui/src/queries/index.ts +++ b/pkgs/clan-app/ui/src/queries/index.ts @@ -6,7 +6,7 @@ export interface ModulesFilter { features: string[]; } export const createModulesQuery = ( - uri: string | null, + uri: string | undefined, filter?: ModulesFilter, ) => createQuery(() => ({ @@ -34,7 +34,7 @@ export const createModulesQuery = ( }, })); -export const tagsQuery = (uri: string | null) => +export const tagsQuery = (uri: string | undefined) => createQuery(() => ({ queryKey: [uri, "tags"], placeholderData: [], @@ -55,7 +55,7 @@ export const tagsQuery = (uri: string | null) => }, })); -export const machinesQuery = (uri: string | null) => +export const machinesQuery = (uri: string | undefined) => createQuery(() => ({ queryKey: [uri, "machines"], placeholderData: [], diff --git a/pkgs/clan-app/ui/src/routes/clans/create.tsx b/pkgs/clan-app/ui/src/routes/clans/create.tsx index f8072fb15..6533d2ed6 100644 --- a/pkgs/clan-app/ui/src/routes/clans/create.tsx +++ b/pkgs/clan-app/ui/src/routes/clans/create.tsx @@ -7,11 +7,11 @@ import { SubmitHandler, } from "@modular-forms/solid"; import toast from "solid-toast"; -import { activeURI, setActiveURI, setClanList } from "@/src/App"; import { TextInput } from "@/src/Form/fields/TextInput"; import { useNavigate } from "@solidjs/router"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; +import { useClanContext } from "@/src/contexts/clan"; type CreateForm = Meta & { template: string; @@ -27,6 +27,8 @@ export const CreateClan = () => { }); const navigate = useNavigate(); + const { setActiveClanURI, addClanURI } = useClanContext(); + const handleSubmit: SubmitHandler = async (values, event) => { const { template, ...meta } = values; const response = await callApi("open_file", { @@ -74,8 +76,10 @@ export const CreateClan = () => { if (r.status === "success") { toast.success("Clan Successfully Created"); - setActiveURI(target_dir[0]); - setClanList((list) => [...list, target_dir[0]]); + + addClanURI(target_dir[0]); + setActiveClanURI(target_dir[0]); + navigate("/machines"); reset(formStore); } diff --git a/pkgs/clan-app/ui/src/routes/clans/details.tsx b/pkgs/clan-app/ui/src/routes/clans/details.tsx index 5f605270e..1b3f90369 100644 --- a/pkgs/clan-app/ui/src/routes/clans/details.tsx +++ b/pkgs/clan-app/ui/src/routes/clans/details.tsx @@ -16,6 +16,7 @@ import toast from "solid-toast"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; import { Header } from "@/src/layout/header"; +import { clanMetaQuery } from "@/src/queries/clan-meta"; interface EditClanFormProps { initial: GeneralData; @@ -44,7 +45,7 @@ const EditClanForm = (props: EditClanFormProps) => { error: "Failed to update clan", }, ); - queryClient.invalidateQueries({ + await queryClient.invalidateQueries({ queryKey: [props.directory, "meta"], }); }; @@ -142,16 +143,7 @@ export const ClanDetails = () => { const params = useParams(); const clan_dir = window.atob(params.id); // Fetch general meta data - const clanQuery = createQuery(() => ({ - queryKey: [clan_dir, "inventory", "meta"], - queryFn: async () => { - const result = await callApi("show_clan_meta", { - flake: { identifier: clan_dir }, - }); - if (result.status === "error") throw new Error("Failed to fetch data"); - return result.data; - }, - })); + const clanQuery = clanMetaQuery(clan_dir); return ( <> diff --git a/pkgs/clan-app/ui/src/routes/clans/list.tsx b/pkgs/clan-app/ui/src/routes/clans/list.tsx index 5d8878817..d14988418 100644 --- a/pkgs/clan-app/ui/src/routes/clans/list.tsx +++ b/pkgs/clan-app/ui/src/routes/clans/list.tsx @@ -1,13 +1,13 @@ -import { callApi } from "@/src/api"; -import { activeURI, clanList, setActiveURI, setClanList } from "@/src/App"; -import { createSignal, For, Match, Setter, Show, Switch } from "solid-js"; -import { createQuery } from "@tanstack/solid-query"; +import { createSignal, For, Show } from "solid-js"; import { useFloating } from "@/src/floating"; import { autoUpdate, flip, hide, offset, shift } from "@floating-ui/dom"; -import { useNavigate, A } from "@solidjs/router"; +import { A, useNavigate } from "@solidjs/router"; import { registerClan } from "@/src/hooks"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; +import { useClanContext } from "@/src/contexts/clan"; +import { clanURIs, setActiveClanURI } from "@/src/stores/clan"; +import { clanMetaQuery } from "@/src/queries/clan-meta"; interface ClanItemProps { clan_dir: string; @@ -15,20 +15,14 @@ interface ClanItemProps { const ClanItem = (props: ClanItemProps) => { const { clan_dir } = props; - const details = createQuery(() => ({ - queryKey: [clan_dir, "meta"], - queryFn: async () => { - const result = await callApi("show_clan_meta", { - flake: { identifier: clan_dir }, - }); - if (result.status === "error") throw new Error("Failed to fetch data"); - return result.data; - }, - })); + const details = clanMetaQuery(clan_dir); + const navigate = useNavigate(); const [reference, setReference] = createSignal(); const [floating, setFloating] = createSignal(); + const { activeClanURI, removeClanURI } = useClanContext(); + // `position` is a reactive object. const position = useFloating(reference, floating, { placement: "top", @@ -50,15 +44,7 @@ const ClanItem = (props: ClanItemProps) => { }); const handleRemove = () => { - setClanList((s) => - s.filter((v, idx) => { - if (v == clan_dir) { - setActiveURI(clanList()[idx - 1] || clanList()[idx + 1] || null); - return false; - } - return true; - }), - ); + removeClanURI(clan_dir); }; return ( @@ -77,10 +63,10 @@ const ClanItem = (props: ClanItemProps) => { variant="light" class=" " onClick={() => { - setActiveURI(clan_dir); + setActiveClanURI(clan_dir); }} > - {activeURI() === clan_dir ? "active" : "select"} + {activeClanURI() === clan_dir ? "active" : "select"}
- + {(value) => }
diff --git a/pkgs/clan-app/ui/src/routes/disk/view.tsx b/pkgs/clan-app/ui/src/routes/disk/view.tsx index 5f90d0b9e..6c5ded434 100644 --- a/pkgs/clan-app/ui/src/routes/disk/view.tsx +++ b/pkgs/clan-app/ui/src/routes/disk/view.tsx @@ -1,13 +1,14 @@ import { callApi } from "@/src/api"; -import { activeURI } from "@/src/App"; -import { createQuery } from "@tanstack/solid-query"; -import { createEffect } from "solid-js"; +import { useQuery } from "@tanstack/solid-query"; +import { useClanContext } from "@/src/contexts/clan"; export function DiskView() { - const query = createQuery(() => ({ - queryKey: ["disk", activeURI()], + const { activeClanURI } = useClanContext(); + + const query = useQuery(() => ({ + queryKey: ["disk", activeClanURI()], queryFn: async () => { - const currUri = activeURI(); + const currUri = activeClanURI(); if (currUri) { // Example of calling an API const result = await callApi("get_inventory", { diff --git a/pkgs/clan-app/ui/src/routes/machines/create.tsx b/pkgs/clan-app/ui/src/routes/machines/create.tsx index 8941710f8..e6719e251 100644 --- a/pkgs/clan-app/ui/src/routes/machines/create.tsx +++ b/pkgs/clan-app/ui/src/routes/machines/create.tsx @@ -1,5 +1,4 @@ import { callApi, OperationArgs } from "@/src/api"; -import { activeURI } from "@/src/App"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; import { TextInput } from "@/src/Form/fields/TextInput"; @@ -13,16 +12,19 @@ import { MachineAvatar } from "./avatar"; import { DynForm } from "@/src/Form/form"; import Fieldset from "@/src/Form/fieldset"; import Accordion from "@/src/components/accordion"; +import { useClanContext } from "@/src/contexts/clan"; type CreateMachineForm = OperationArgs<"create_machine">; export function CreateMachine() { const navigate = useNavigate(); + const { activeClanURI } = useClanContext(); + const [formStore, { Form, Field }] = createForm({ initialValues: { opts: { clan_dir: { - identifier: activeURI() || "", + identifier: activeClanURI() || "", }, machine: { tags: ["all"], @@ -39,7 +41,7 @@ export function CreateMachine() { const queryClient = useQueryClient(); const handleSubmit = async (values: CreateMachineForm) => { - const active_dir = activeURI(); + const active_dir = activeClanURI(); if (!active_dir) { toast.error("Open a clan to create the machine within"); return; @@ -60,9 +62,10 @@ export function CreateMachine() { toast.success(`Successfully created ${values.opts.machine.name}`); reset(formStore); - queryClient.invalidateQueries({ - queryKey: [activeURI(), "list_inv_machines"], + await queryClient.invalidateQueries({ + queryKey: [active_dir, "list_inv_machines"], }); + navigate("/machines"); } else { toast.error( diff --git a/pkgs/clan-app/ui/src/routes/machines/details.tsx b/pkgs/clan-app/ui/src/routes/machines/details.tsx index e33e0f4a2..64e0d7794 100644 --- a/pkgs/clan-app/ui/src/routes/machines/details.tsx +++ b/pkgs/clan-app/ui/src/routes/machines/details.tsx @@ -7,10 +7,9 @@ import { setValue, } from "@modular-forms/solid"; import { useNavigate, useParams, useSearchParams } from "@solidjs/router"; -import { createQuery, useQueryClient } from "@tanstack/solid-query"; +import { createQuery, useQuery, useQueryClient } from "@tanstack/solid-query"; import { createEffect, createSignal, For, Match, Show, Switch } from "solid-js"; -import { activeURI } from "@/src/App"; import { Button } from "@/src/components/button"; import Icon from "@/src/components/icon"; import { TextInput } from "@/src/Form/fields/TextInput"; @@ -29,9 +28,11 @@ import cx from "classnames"; import { VarsStep, VarsValues } from "./install/vars-step"; import Fieldset from "@/src/Form/fieldset"; import { - FileSelectorField, type FileDialogOptions, + FileSelectorField, } from "@/src/components/fileSelect"; +import { useClanContext } from "@/src/contexts/clan"; + type MachineFormInterface = MachineData & { sshKey?: File; disk?: string; @@ -81,7 +82,9 @@ interface InstallMachineProps { machine: MachineData; } const InstallMachine = (props: InstallMachineProps) => { - const curr = activeURI(); + const { activeClanURI } = useClanContext(); + + const curr = activeClanURI(); const { name } = props; if (!curr || !name) { return No Clan selected; @@ -95,7 +98,7 @@ const InstallMachine = (props: InstallMachineProps) => { const handleInstall = async (values: AllStepsValues) => { console.log("Installing", values); - const curr_uri = activeURI(); + const curr_uri = activeClanURI(); const target = values["1"].target; const diskValues = values["2"]; @@ -257,7 +260,7 @@ const InstallMachine = (props: InstallMachineProps) => { // @ts-expect-error: This cannot be undefined in this context. machine_id={props.name} // @ts-expect-error: This cannot be undefined in this context. - dir={activeURI()} + dir={activeClanURI()} handleNext={(data) => { const prev = getValue(formStore, "1"); setValue(formStore, "1", { ...prev, ...data }); @@ -277,7 +280,7 @@ const InstallMachine = (props: InstallMachineProps) => { // @ts-expect-error: This cannot be undefined in this context. machine_id={props.name} // @ts-expect-error: This cannot be undefined in this context. - dir={activeURI()} + dir={activeClanURI()} footer={