From f985187999190377bfb0fa145963ebed0e0730b6 Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Thu, 21 Aug 2025 12:15:42 +0100 Subject: [PATCH] feat(ui): introduce a top-level Clan context --- .../ListClansModal}/ListClansModal.module.css | 0 .../ListClansModal}/ListClansModal.tsx | 19 +- .../ui/src/components/Sidebar/SidebarBody.tsx | 13 +- .../src/components/Sidebar/SidebarHeader.tsx | 27 ++- pkgs/clan-app/ui/src/hooks/queries.ts | 2 +- pkgs/clan-app/ui/src/routes/Clan/Clan.tsx | 219 +++++++++--------- .../ui/src/routes/Onboarding/Onboarding.tsx | 2 +- 7 files changed, 160 insertions(+), 122 deletions(-) rename pkgs/clan-app/ui/src/{routes/Onboarding => components/ListClansModal}/ListClansModal.module.css (100%) rename pkgs/clan-app/ui/src/{routes/Onboarding => components/ListClansModal}/ListClansModal.tsx (84%) diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/ListClansModal.module.css b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css similarity index 100% rename from pkgs/clan-app/ui/src/routes/Onboarding/ListClansModal.module.css rename to pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/ListClansModal.tsx b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx similarity index 84% rename from pkgs/clan-app/ui/src/routes/Onboarding/ListClansModal.tsx rename to pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx index c989fc0b9..7a2a5c711 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/ListClansModal.tsx +++ b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx @@ -5,15 +5,20 @@ import { Typography } from "@/src/components/Typography/Typography"; import { Button } from "@/src/components/Button/Button"; import { navigateToClan, navigateToOnboarding } from "@/src/hooks/clan"; import { useNavigate } from "@solidjs/router"; -import { For } from "solid-js"; +import { For, Show } from "solid-js"; import { activeClanURI, clanURIs, setActiveClanURI } from "@/src/stores/clan"; import { useClanListQuery } from "@/src/hooks/queries"; +import { Alert } from "@/src/components/Alert/Alert"; -export interface ClansModalProps { +export interface ListClansModalProps { onClose: () => void; + error?: { + title: string; + description: string; + }; } -export const ListClansModal = (props: ClansModalProps) => { +export const ListClansModal = (props: ListClansModalProps) => { const navigate = useNavigate(); const query = useClanListQuery(clanURIs()); @@ -38,6 +43,14 @@ export const ListClansModal = (props: ClansModalProps) => { class={cx(styles.modal)} >
+ + + +
{ export const SidebarBody = (props: SidebarProps) => { const clanURI = useClanURI(); - const machineList = useMachinesQuery(clanURI); + + const ctx = useContext(ClanContext); + if (!ctx) { + throw new Error("ClanContext not found"); + } const sectionLabels = (props.staticSections || []).map( (section) => section.title, @@ -96,7 +101,7 @@ export const SidebarBody = (props: SidebarProps) => {
@@ -91,7 +100,7 @@ export const SidebarHeader = () => {
- + {(clan) => ( { const client = useApiClient(); - return useQuery(() => ({ + return useQuery(() => ({ queryKey: ["clans", encodeBase64(clanURI), "details"], queryFn: async () => { const call = client.fetch("get_clan_details", { diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx index 315006406..ba8d4f6f5 100644 --- a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx +++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx @@ -1,13 +1,14 @@ -import { RouteSectionProps } from "@solidjs/router"; +import { RouteSectionProps, useNavigate } from "@solidjs/router"; import { Component, - JSX, - Show, + createContext, createEffect, createMemo, createSignal, on, onMount, + Show, + useContext, } from "solid-js"; import { buildMachinePath, @@ -16,13 +17,14 @@ import { } from "@/src/hooks/clan"; import { CubeScene } from "@/src/scene/cubes"; import { - ClanListQueryResult, + ClanDetailsWithURI, MachinesQueryResult, + useClanDetailsQuery, useClanListQuery, useMachinesQuery, } from "@/src/hooks/queries"; import { callApi } from "@/src/hooks/api"; -import { store, setStore, clanURIs } from "@/src/stores/clan"; +import { clanURIs, setStore, store } from "@/src/stores/clan"; import { produce } from "solid-js/store"; import { Button } from "@/src/components/Button/Button"; import { Splash } from "@/src/scene/splash"; @@ -32,15 +34,36 @@ import { Modal } from "@/src/components/Modal/Modal"; import { TextInput } from "@/src/components/Form/TextInput"; import { createForm, FieldValues, reset } from "@modular-forms/solid"; import { Sidebar } from "@/src/components/Sidebar/Sidebar"; -import { useNavigate } from "@solidjs/router"; +import { UseQueryResult } from "@tanstack/solid-query"; + +export const ClanContext = createContext<{ + machinesQuery: MachinesQueryResult; + activeClanQuery: UseQueryResult; + otherClanQueries: UseQueryResult[]; +}>(); export const Clan: Component = (props) => { + const clanURI = useClanURI(); + const activeClanQuery = useClanDetailsQuery(clanURI); + + const otherClanQueries = useClanListQuery( + clanURIs().filter((uri) => uri !== clanURI), + ); + + const machinesQuery = useMachinesQuery(clanURI); + return ( - <> + {props.children} - + ); }; @@ -98,7 +121,10 @@ const ClanSceneController = (props: RouteSectionProps) => { const clanURI = useClanURI(); const navigate = useNavigate(); - const machinesQuery = useMachinesQuery(clanURI); + const ctx = useContext(ClanContext); + if (!ctx) { + throw new Error("ClanContext not found"); + } const [dialogHandlers, setDialogHandlers] = createSignal<{ resolve: ({ id }: { id: string }) => void; @@ -133,7 +159,7 @@ const ClanSceneController = (props: RouteSectionProps) => { } // trigger a refetch of the machines query - machinesQuery.refetch(); + ctx.machinesQuery.refetch(); return { id: values.name }; }; @@ -177,102 +203,87 @@ const ClanSceneController = (props: RouteSectionProps) => { }), ); + // a combination of the individual clan details query status and the machines query status + // the cube scene needs the machines query, the sidebar needs the clans query and machines query results + // so we wait on both before removing the loader to avoid any loading artefacts + const isLoading = (): boolean => { + // check if the active clan query is still loading + if (ctx.activeClanQuery.isLoading) { + return true; + } + + // check the machines query first + if (ctx.machinesQuery.isLoading) { + return true; + } + + // otherwise iterate the clans query and return early if we find a queries that is still loading + for (const query of ctx.otherClanQueries) { + if (query.isLoading) { + return true; + } + } + + return false; + }; + return ( - - {({ clansQuery, machinesQuery }) => { - // a combination of the individual clan details query status and the machines query status - // the cube scene needs the machines query, the sidebar needs the clans query and machines query results - // so we wait on both before removing the loader to avoid any loading artefacts - const isLoading = (): boolean => { - // check the machines query first - if (machinesQuery.isLoading) { - return true; - } - - // otherwise iterate the clans query and return early if we find a queries that is still loading - for (const query of clansQuery) { - if (query.isLoading) { - return true; + <> + + { + setShowModal(false); + dialogHandlers()?.reject(new Error("User cancelled")); + }} + onSubmit={async (values) => { + try { + const result = await sendCreate(values); + dialogHandlers()?.resolve(result); + setShowModal(false); + } catch (err) { + dialogHandlers()?.reject(err); + setShowModal(false); } - } + }} + /> + +
+ +
- return false; - }; - - return ( - <> - - { - setShowModal(false); - dialogHandlers()?.reject(new Error("User cancelled")); - }} - onSubmit={async (values) => { - try { - const result = await sendCreate(values); - dialogHandlers()?.resolve(result); - setShowModal(false); - } catch (err) { - dialogHandlers()?.reject(err); - setShowModal(false); - } - }} - /> - -
- -
- - { - const clanURI = useClanURI(); - return store.sceneData?.[clanURI]; - }} - setMachinePos={(machineId: string, pos: [number, number]) => { - console.log("calling setStore", machineId, pos); - setStore( - produce((s) => { - if (!s.sceneData) { - s.sceneData = {}; - } - if (!s.sceneData[clanURI]) { - s.sceneData[clanURI] = {}; - } - if (!s.sceneData[clanURI][machineId]) { - s.sceneData[clanURI][machineId] = { position: pos }; - } else { - s.sceneData[clanURI][machineId].position = pos; - } - }), - ); - }} - /> - - ); - }} - + { + const clanURI = useClanURI(); + return store.sceneData?.[clanURI]; + }} + setMachinePos={(machineId: string, pos: [number, number]) => { + console.log("calling setStore", machineId, pos); + setStore( + produce((s) => { + if (!s.sceneData) { + s.sceneData = {}; + } + if (!s.sceneData[clanURI]) { + s.sceneData[clanURI] = {}; + } + if (!s.sceneData[clanURI][machineId]) { + s.sceneData[clanURI][machineId] = { position: pos }; + } else { + s.sceneData[clanURI][machineId].position = pos; + } + }), + ); + }} + /> + ); }; - -const SceneDataProvider = (props: { - clanURI: string; - children: (sceneData: { - clansQuery: ClanListQueryResult; - machinesQuery: MachinesQueryResult; - }) => JSX.Element; -}) => { - const clansQuery = useClanListQuery(clanURIs()); - const machinesQuery = useMachinesQuery(props.clanURI); - - // This component can be used to provide scene data or context if needed - return props.children({ clansQuery, machinesQuery }); -}; diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx index f8708a0ad..ff9940f79 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx +++ b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx @@ -37,7 +37,7 @@ import { HostFileInput } from "@/src/components/Form/HostFileInput"; import { callApi } from "@/src/hooks/api"; import { Creating } from "./Creating"; import { useApiClient } from "@/src/hooks/ApiClient"; -import { ListClansModal } from "@/src/routes/Onboarding/ListClansModal"; +import { ListClansModal } from "@/src/components/ListClansModal/ListClansModal"; type State = "welcome" | "setup" | "creating";