ui/clanContext: simplify

Try to avoid classes for use cases like this

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx

@@ -8,8 +8,8 @@ import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
 import { buildMachinePath, useClanURI } from "@/src/hooks/clan";
 import { useMachineStateQuery } from "@/src/hooks/queries";
 import { SidebarProps } from "./Sidebar";
-import { ClanContext } from "@/src/routes/Clan/Clan";
 import { Button } from "../Button/Button";
+import { useClanContext } from "@/src/routes/Clan/Clan";
 
 interface MachineProps {
   clanURI: string;
@@ -59,10 +59,7 @@ const MachineRoute = (props: MachineProps) => {
 export const SidebarBody = (props: SidebarProps) => {
   const clanURI = useClanURI();
 
-  const ctx = useContext(ClanContext);
-  if (!ctx) {
-    throw new Error("ClanContext not found");
-  }
+  const ctx = useClanContext();
 
   const sectionLabels = (props.staticSections || []).map(
     (section) => section.title,

pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx

@@ -3,12 +3,12 @@ import Icon from "@/src/components/Icon/Icon";
 import { DropdownMenu } from "@kobalte/core/dropdown-menu";
 import { useNavigate } from "@solidjs/router";
 import { Typography } from "../Typography/Typography";
-import { createSignal, For, Show, Suspense, useContext } from "solid-js";
+import { createSignal, For, Show, Suspense } from "solid-js";
 import { navigateToOnboarding } from "@/src/hooks/clan";
 import { setActiveClanURI } from "@/src/stores/clan";
 import { Button } from "../Button/Button";
-import { ClanContext } from "@/src/routes/Clan/Clan";
 import { ClanSettingsModal } from "@/src/modals/ClanSettingsModal/ClanSettingsModal";
+import { useClanContext } from "@/src/routes/Clan/Clan";
 
 export const SidebarHeader = () => {
   const navigate = useNavigate();
@@ -17,11 +17,7 @@ export const SidebarHeader = () => {
   const [showSettings, setShowSettings] = createSignal(false);
 
   // get information about the current active clan
-  const ctx = useContext(ClanContext);
-
-  if (!ctx) {
-    throw new Error("SidebarContext not found");
-  }
+  const ctx = useClanContext();
 
   const clanChar = () =>
     ctx?.activeClanQuery?.data?.details.name.charAt(0).toUpperCase();

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -8,7 +8,6 @@ import {
   on,
   onMount,
   Show,
-  Signal,
   useContext,
 } from "solid-js";
 import {
@@ -56,57 +55,38 @@ interface ClanContextProps {
   setShowAddMachine(value: boolean): void;
 }
 
-class DefaultClanContext implements ClanContextProps {
-  public readonly clanURI: string;
-
-  public readonly activeClanQuery: UseQueryResult<ClanDetails>;
-  public readonly otherClanQueries: UseQueryResult<ClanDetails>[];
-  public readonly allClansQueries: UseQueryResult<ClanDetails>[];
-
-  public readonly machinesQuery: MachinesQueryResult;
-
-  allQueries: UseQueryResult[];
-
-  showAddMachineSignal: Signal<boolean>;
-
-  constructor(
+function createClanContext(
   clanURI: string,
   machinesQuery: MachinesQueryResult,
   activeClanQuery: UseQueryResult<ClanDetails>,
   otherClanQueries: UseQueryResult<ClanDetails>[],
 ) {
-    this.clanURI = clanURI;
-    this.machinesQuery = machinesQuery;
+  const [showAddMachine, setShowAddMachine] = createSignal(false);
+  const allClansQueries = [activeClanQuery, ...otherClanQueries];
+  const allQueries = [machinesQuery, ...allClansQueries];
 
-    this.activeClanQuery = activeClanQuery;
-    this.otherClanQueries = otherClanQueries;
-    this.allClansQueries = [activeClanQuery, ...otherClanQueries];
-
-    this.allQueries = [machinesQuery, activeClanQuery, ...otherClanQueries];
-
-    this.showAddMachineSignal = createSignal(false);
+  return {
+    clanURI,
+    machinesQuery,
+    activeClanQuery,
+    otherClanQueries,
+    allClansQueries,
+    isLoading: () => allQueries.some((q) => q.isLoading),
+    isError: () => activeClanQuery.isError,
+    showAddMachine,
+    setShowAddMachine,
+  };
 }
 
-  isLoading(): boolean {
-    return this.allQueries.some((q) => q.isLoading);
-  }
+const ClanContext = createContext<ClanContextProps>();
 
-  isError(): boolean {
-    return this.activeClanQuery.isError;
+export const useClanContext = () => {
+  const ctx = useContext(ClanContext);
+  if (!ctx) {
+    throw new Error("ClanContext not found");
   }
-
-  setShowAddMachine(value: boolean) {
-    const [_, setShow] = this.showAddMachineSignal;
-    setShow(value);
-  }
-
-  showAddMachine(): boolean {
-    const [show, _] = this.showAddMachineSignal;
-    return show();
-  }
-}
-
-export const ClanContext = createContext<ClanContextProps>();
+  return ctx;
+};
 
 export const Clan: Component<RouteSectionProps> = (props) => {
   const clanURI = useClanURI();
@@ -125,17 +105,15 @@ export const Clan: Component<RouteSectionProps> = (props) => {
 
   const machinesQuery = useMachinesQuery(clanURI);
 
-  return (
-    <ClanContext.Provider
-      value={
-        new DefaultClanContext(
+  const ctx = createClanContext(
     clanURI,
     machinesQuery,
     activeClanQuery,
     otherClanQueries,
-        )
-      }
-    >
+  );
+
+  return (
+    <ClanContext.Provider value={ctx}>
       <div
         class={cx(styles.sidebarContainer, {
           [styles.machineSelected]: useMachineName(),
@@ -150,10 +128,7 @@ export const Clan: Component<RouteSectionProps> = (props) => {
 };
 
 const ClanSceneController = (props: RouteSectionProps) => {
-  const ctx = useContext(ClanContext);
-  if (!ctx) {
-    throw new Error("ClanContext not found");
-  }
+  const ctx = useClanContext();
 
   const navigate = useNavigate();
 

pkgs/clan-app/ui/src/workflows/AddMachine/StepTags.tsx

@@ -63,7 +63,6 @@ export const StepTags = (props: { onDone: () => void }) => {
         store.onCreated(store.general.name);
       }
     }
-    console.log("Done creating machine");
     props.onDone();
   };