From f1511960580f25af707812773c5985a2af093016 Mon Sep 17 00:00:00 2001
From: Nik Graf <nik@nikgraf.com>
Date: Mon, 23 Jun 2025 21:11:16 +0200
Subject: [PATCH] allow to list private spaces

---
 apps/events/src/routes/index.tsx              |  6 +-
 .../src/HypergraphAppContext.tsx              | 10 +-
 .../hypergraph-react/src/hooks/use-spaces.ts  | 17 +++-
 packages/hypergraph/src/store-connect.ts      | 52 ----------
 packages/hypergraph/src/store.ts              | 99 ++++++++++---------
 5 files changed, 78 insertions(+), 106 deletions(-)

diff --git a/apps/events/src/routes/index.tsx b/apps/events/src/routes/index.tsx
index a779ecaa..5347e877 100644
--- a/apps/events/src/routes/index.tsx
+++ b/apps/events/src/routes/index.tsx
@@ -13,7 +13,7 @@ export const Route = createFileRoute('/')({
 
 function Index() {
   const { data: publicSpaces } = useSpaces({ mode: 'public' });
-  const spaces = useSelector(store, (state) => state.context.spaces);
+  const { data: privateSpaces } = useSpaces({ mode: 'private' });
   const [spaceName, setSpaceName] = useState('');
 
   const accountInboxes = useSelector(store, (state) => state.context.accountInboxes);
@@ -93,8 +93,8 @@ function Index() {
 
       <h2 className="text-lg font-bold">Private Spaces</h2>
       <ul className="flex flex-col gap-2">
-        {spaces.length === 0 && <div>No spaces</div>}
-        {spaces.map((space) => {
+        {privateSpaces && privateSpaces.length === 0 && <div>No spaces</div>}
+        {privateSpaces?.map((space) => {
           return (
             <li key={space.id}>
               <Link to="/space/$spaceId" params={{ spaceId: space.id }}>
diff --git a/packages/hypergraph-react/src/HypergraphAppContext.tsx b/packages/hypergraph-react/src/HypergraphAppContext.tsx
index c3b6db44..b373c0f7 100644
--- a/packages/hypergraph-react/src/HypergraphAppContext.tsx
+++ b/packages/hypergraph-react/src/HypergraphAppContext.tsx
@@ -379,12 +379,12 @@ export function HypergraphAppProvider({
         const response = message.right;
         switch (response.type) {
           case 'list-spaces': {
-            response.spaces.map((space) => {
-              store.send({
-                type: 'setSpaceFromList',
-                spaceId: space.id,
+            store.send({
+              type: 'setSpacesList',
+              spaces: response.spaces.map((space) => ({
+                id: space.id,
                 name: space.name,
-              });
+              })),
             });
             break;
           }
diff --git a/packages/hypergraph-react/src/hooks/use-spaces.ts b/packages/hypergraph-react/src/hooks/use-spaces.ts
index 24860138..f269f8c4 100644
--- a/packages/hypergraph-react/src/hooks/use-spaces.ts
+++ b/packages/hypergraph-react/src/hooks/use-spaces.ts
@@ -28,9 +28,9 @@ type PublicSpacesQueryResult = {
   }[];
 };
 
-export const useSpaces = (params: { mode: 'public' }) => {
+export const useSpaces = (params: { mode: 'public' | 'private' }) => {
   const accountAddress = useSelector(store, (state) => state.context.identity?.accountAddress);
-  return useQuery({
+  const publicResult = useQuery({
     queryKey: ['hypergraph-spaces', params.mode],
     queryFn: async () => {
       const result = await request<PublicSpacesQueryResult>(GEO_API_TESTNET_ENDPOINT, publicSpacesQueryDocument, {
@@ -44,5 +44,18 @@ export const useSpaces = (params: { mode: 'public' }) => {
           }))
         : [];
     },
+    enabled: params.mode === 'public' && !!accountAddress,
   });
+
+  const spaces = useSelector(store, (state) => state.context.spaces);
+  const spacesLoadingIsPending = useSelector(store, (state) => state.context.spacesLoadingIsPending);
+
+  if (params.mode === 'private') {
+    return {
+      data: spaces,
+      isPending: spacesLoadingIsPending,
+    };
+  }
+
+  return publicResult;
 };
diff --git a/packages/hypergraph/src/store-connect.ts b/packages/hypergraph/src/store-connect.ts
index ef710842..177ff250 100644
--- a/packages/hypergraph/src/store-connect.ts
+++ b/packages/hypergraph/src/store-connect.ts
@@ -90,7 +90,6 @@ type StoreEvent =
   | { type: 'reset' }
   | { type: 'addUpdateInFlight'; updateId: string }
   | { type: 'removeUpdateInFlight'; updateId: string }
-  | { type: 'setSpaceFromList'; spaceId: string }
   | { type: 'applyEvent'; spaceId: string; event: SpaceEvent; state: SpaceState }
   | { type: 'updateConfirmed'; spaceId: string; clock: number }
   | { type: 'applyUpdate'; spaceId: string; firstUpdateClock: number; lastUpdateClock: number }
@@ -178,57 +177,6 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
         updatesInFlight: context.updatesInFlight.filter((id) => id !== event.updateId),
       };
     },
-    setSpaceFromList: (context, event: { spaceId: string }) => {
-      if (!context.repo) {
-        return context;
-      }
-      const existingSpace = context.spaces.find((s) => s.id === event.spaceId);
-      const lastUpdateClock = context.lastUpdateClock[event.spaceId] ?? -1;
-      const result = context.repo.findWithProgress(idToAutomergeId(event.spaceId) as AnyDocumentId);
-
-      // set it to ready to interact with the document
-      result.handle.doneLoading();
-
-      if (existingSpace) {
-        return {
-          ...context,
-          spaces: context.spaces.map((existingSpace) => {
-            if (existingSpace.id === event.spaceId) {
-              const newSpace: SpaceStorageEntry = {
-                id: existingSpace.id,
-                events: existingSpace.events ?? [],
-                state: existingSpace.state,
-                keys: existingSpace.keys ?? [],
-                automergeDocHandle: result.handle,
-                inboxes: existingSpace.inboxes ?? [],
-              };
-              return newSpace;
-            }
-            return existingSpace;
-          }),
-          lastUpdateClock: {
-            ...context.lastUpdateClock,
-            [event.spaceId]: lastUpdateClock,
-          },
-        };
-      }
-      return {
-        ...context,
-        spaces: [
-          ...context.spaces,
-          {
-            id: event.spaceId,
-            events: [],
-            state: undefined,
-            keys: [],
-            inboxes: [],
-            updates: [],
-            lastUpdateClock: -1,
-            automergeDocHandle: result.handle,
-          },
-        ],
-      };
-    },
     applyEvent: (context, event: { spaceId: string; event: SpaceEvent; state: SpaceState }) => {
       return {
         ...context,
diff --git a/packages/hypergraph/src/store.ts b/packages/hypergraph/src/store.ts
index 9a9be2c1..3a90aeea 100644
--- a/packages/hypergraph/src/store.ts
+++ b/packages/hypergraph/src/store.ts
@@ -53,6 +53,7 @@ export type SpaceStorageEntry = {
 
 interface StoreContext {
   spaces: SpaceStorageEntry[];
+  spacesLoadingIsPending: boolean;
   updatesInFlight: string[];
   invitations: Invitation[];
   repo: Repo | null;
@@ -73,6 +74,7 @@ interface StoreContext {
 
 const initialStoreContext: StoreContext = {
   spaces: [],
+  spacesLoadingIsPending: true,
   updatesInFlight: [],
   invitations: [],
   repo: null,
@@ -90,7 +92,7 @@ type StoreEvent =
   | { type: 'reset' }
   | { type: 'addUpdateInFlight'; updateId: string }
   | { type: 'removeUpdateInFlight'; updateId: string }
-  | { type: 'setSpaceFromList'; spaceId: string; name: string }
+  | { type: 'setSpacesList'; spaces: { id: string; name: string }[] }
   | { type: 'applyEvent'; spaceId: string; event: SpaceEvent; state: SpaceState }
   | { type: 'updateConfirmed'; spaceId: string; clock: number }
   | { type: 'applyUpdate'; spaceId: string; firstUpdateClock: number; lastUpdateClock: number }
@@ -182,58 +184,67 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
         updatesInFlight: context.updatesInFlight.filter((id) => id !== event.updateId),
       };
     },
-    setSpaceFromList: (context, event: { spaceId: string; name: string }) => {
+    setSpacesList: (context, event: { spaces: { id: string; name: string }[] }) => {
       if (!context.repo) {
         return context;
       }
-      const existingSpace = context.spaces.find((s) => s.id === event.spaceId);
-      const lastUpdateClock = context.lastUpdateClock[event.spaceId] ?? -1;
-      const result = context.repo.findWithProgress(idToAutomergeId(event.spaceId) as AnyDocumentId);
 
-      // set it to ready to interact with the document
-      result.handle.doneLoading();
+      let storeContext: StoreContext = { ...context, spacesLoadingIsPending: false };
 
-      if (existingSpace) {
-        return {
-          ...context,
-          spaces: context.spaces.map((existingSpace) => {
-            if (existingSpace.id === event.spaceId) {
-              const newSpace: SpaceStorageEntry = {
-                id: existingSpace.id,
-                name: existingSpace.name,
-                events: existingSpace.events ?? [],
-                state: existingSpace.state,
-                keys: existingSpace.keys ?? [],
-                automergeDocHandle: result.handle,
-                inboxes: existingSpace.inboxes ?? [],
-              };
-              return newSpace;
-            }
-            return existingSpace;
-          }),
+      for (const space of event.spaces) {
+        const existingSpace = context.spaces.find((s) => s.id === space.id);
+        const lastUpdateClock = context.lastUpdateClock[space.id] ?? -1;
+        const result = context.repo.findWithProgress(idToAutomergeId(space.id) as AnyDocumentId);
+
+        // set it to ready to interact with the document
+        result.handle.doneLoading();
+
+        if (existingSpace) {
+          storeContext = {
+            ...storeContext,
+            spaces: storeContext.spaces.map((existingSpace) => {
+              if (existingSpace.id === space.id) {
+                const newSpace: SpaceStorageEntry = {
+                  id: existingSpace.id,
+                  name: existingSpace.name,
+                  events: existingSpace.events ?? [],
+                  state: existingSpace.state,
+                  keys: existingSpace.keys ?? [],
+                  automergeDocHandle: result.handle,
+                  inboxes: existingSpace.inboxes ?? [],
+                };
+                return newSpace;
+              }
+              return existingSpace;
+            }),
+            lastUpdateClock: {
+              ...storeContext.lastUpdateClock,
+              [space.id]: lastUpdateClock,
+            },
+          };
+        }
+        storeContext = {
+          ...storeContext,
+          spaces: [
+            ...storeContext.spaces,
+            {
+              id: space.id,
+              name: space.name,
+              events: [],
+              state: undefined,
+              keys: [],
+              inboxes: [],
+              automergeDocHandle: result.handle,
+            },
+          ],
           lastUpdateClock: {
-            ...context.lastUpdateClock,
-            [event.spaceId]: lastUpdateClock,
+            ...storeContext.lastUpdateClock,
+            [space.id]: -1,
           },
         };
       }
-      return {
-        ...context,
-        spaces: [
-          ...context.spaces,
-          {
-            id: event.spaceId,
-            name: event.name,
-            events: [],
-            state: undefined,
-            keys: [],
-            inboxes: [],
-            updates: [],
-            lastUpdateClock: -1,
-            automergeDocHandle: result.handle,
-          },
-        ],
-      };
+
+      return storeContext;
     },
     applyEvent: (context, event: { spaceId: string; event: SpaceEvent; state: SpaceState }) => {
       return {