add first draft

Author: nikgraf

apps/events/src/routes/space/$spaceId.tsx

@@ -7,7 +7,7 @@ import { DevTool } from '@/components/dev-tool';
 import { Todos } from '@/components/todos';
 import { Button } from '@/components/ui/button';
 import { availableAccounts } from '@/lib/availableAccounts';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { getAddress } from 'viem';
 
 export const Route = createFileRoute('/space/$spaceId')({
@@ -23,6 +23,7 @@ function Space() {
       subscribeToSpace({ spaceId });
     }
   }, [loading, subscribeToSpace, spaceId]);
+  const [show2ndTodos, setShow2ndTodos] = useState(false);
 
   const space = spaces.find((space) => space.id === spaceId);
 
@@ -38,6 +39,7 @@ function Space() {
     <div className="flex flex-col gap-4 max-w-screen-sm mx-auto py-8">
       <HypergraphSpace.HypergraphProvider space={spaceId}>
         <Todos />
+        {show2ndTodos && <Todos />}
         <h3 className="text-xl font-bold">Invite people</h3>
         <div className="flex flex-row gap-2">
           {availableAccounts.map((invitee) => {
@@ -56,8 +58,9 @@ function Space() {
             );
           })}
         </div>
-        <div className="mt-12">
+        <div className="mt-12 flex flex-row gap-2">
           <DevTool spaceId={spaceId} />
+          <Button onClick={() => setShow2ndTodos((prevShow2ndTodos) => !prevShow2ndTodos)}>Toggle Todos</Button>
         </div>
       </HypergraphSpace.HypergraphProvider>
     </div>

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -3,14 +3,16 @@
 import type { AnyDocumentId, DocHandle, Repo } from '@automerge/automerge-repo';
 import { useRepo } from '@automerge/automerge-repo-react-hooks';
 import { Entity, Utils } from '@graphprotocol/hypergraph';
+import { type DocumentContent, subscribeToDocumentChanges } from '@graphprotocol/hypergraph/Entity';
 import * as Schema from 'effect/Schema';
-import { type ReactNode, createContext, useContext, useRef, useSyncExternalStore } from 'react';
+import { type ReactNode, createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from 'react';
 
 export type HypergraphContext = {
   space: string;
   repo: Repo;
   id: AnyDocumentId;
   handle: DocHandle<Entity.DocumentContent>;
+  unsubscribeChangeListener: () => void;
 };
 
 export const HypergraphReactContext = createContext<HypergraphContext | undefined>(undefined);
@@ -30,15 +32,28 @@ export function HypergraphProvider({ space, children }: { space: string; childre
 
   let current = ref.current;
   if (current === undefined || space !== current.space || repo !== current.repo) {
+    current?.unsubscribeChangeListener(); // unsubscribe from the previous space when switching to a new space
+
     const id = Utils.idToAutomergeId(space) as AnyDocumentId;
+    const handle = repo.find<DocumentContent>(id);
+    const unsubscribeChangeListener = subscribeToDocumentChanges(handle);
+
     current = ref.current = {
       space,
       repo,
       id,
-      handle: repo.find(id),
+      handle,
+      unsubscribeChangeListener,
     };
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: no need for dependencies as the unsubscribe is called from the ref
+  useEffect(() => {
+    return () => {
+      current?.unsubscribeChangeListener(); // unsubscribe from the previous space when the component unmounts
+    };
+  }, []);
+
   return <HypergraphReactContext.Provider value={current}>{children}</HypergraphReactContext.Provider>;
 }
 
@@ -59,37 +74,17 @@ export function useDeleteEntity() {
 
 export function useQueryEntities<const S extends Entity.AnyNoContext>(type: S) {
   const hypergraph = useHypergraph();
-  const equal = isEqual(type);
-
-  // store as a map of type to array of entities of the type
-  const prevEntitiesRef = useRef<Readonly<Array<Entity.Entity<S>>>>([]);
-
-  const subscribe = (callback: () => void) => {
-    const handleChange = () => {
-      callback();
-    };
-
-    const handleDelete = () => {
-      callback();
-    };
-
-    hypergraph.handle.on('change', handleChange);
-    hypergraph.handle.on('delete', handleDelete);
+  const [subscription] = useState(() => {
+    return Entity.subscribeToFindMany(hypergraph.handle, type);
+  });
 
+  useEffect(() => {
     return () => {
-      hypergraph.handle.off('change', handleChange);
-      hypergraph.handle.off('delete', handleDelete);
+      subscription.unsubscribe();
     };
-  };
+  }, [subscription]);
 
-  return useSyncExternalStore<Readonly<Array<Entity.Entity<S>>>>(subscribe, () => {
-    const filtered = Entity.findMany(hypergraph.handle, type);
-    if (!equal(filtered, prevEntitiesRef.current)) {
-      prevEntitiesRef.current = filtered;
-    }
-
-    return prevEntitiesRef.current;
-  });
+  return useSyncExternalStore(subscription.listener, subscription.getEntities, () => []);
 }
 
 export function useQueryEntity<const S extends Entity.AnyNoContext>(type: S, id: string) {
@@ -135,22 +130,3 @@ export function useQueryEntity<const S extends Entity.AnyNoContext>(type: S, id:
     return prevEntityRef.current;
   });
 }
-
-/** @internal */
-const isEqual = <A, E>(type: Schema.Schema<A, E, never>) => {
-  const equals = Schema.equivalence(type);
-
-  return (a: ReadonlyArray<A>, b: ReadonlyArray<A>) => {
-    if (a.length !== b.length) {
-      return false;
-    }
-
-    for (let i = 0; i < a.length; i++) {
-      if (!equals(a[i], b[i])) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-};