extract use-subscribe-to-space

Author: nikgraf

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -2,9 +2,9 @@
 
 import { Entity, store } from '@graphprotocol/hypergraph';
 import { useSelector } from '@xstate/store/react';
-import { createContext, type ReactNode, useContext, useEffect } from 'react';
-import { useHypergraphApp } from './HypergraphAppContext.js';
+import { createContext, type ReactNode, useContext } from 'react';
 import { usePublicSpace } from './internal/use-public-space.js';
+import { useSubscribeToSpaceAndGetHandle } from './internal/use-subscribe-to-space.js';
 
 // TODO space can be undefined
 export type HypergraphContext = { space: string };
@@ -20,35 +20,6 @@ export function HypergraphSpaceProvider({ space, children }: { space: string; ch
   return <HypergraphReactContext.Provider value={{ space }}>{children}</HypergraphReactContext.Provider>;
 }
 
-const subscribeToSpaceCache = new Map<string, boolean>();
-
-function useSubscribeToSpaceAndGetHandle({ spaceId, enabled }: { spaceId: string; enabled: boolean }) {
-  const handle = useSelector(store, (state) => {
-    const space = state.context.spaces.find((space) => space.id === spaceId);
-    if (!space) {
-      return undefined;
-    }
-    return space.automergeDocHandle;
-  });
-
-  const { subscribeToSpace, isConnecting } = useHypergraphApp();
-  useEffect(() => {
-    if (!isConnecting && enabled) {
-      if (subscribeToSpaceCache.has(spaceId)) {
-        return;
-      }
-      subscribeToSpaceCache.set(spaceId, true);
-      subscribeToSpace({ spaceId });
-    }
-    return () => {
-      // TODO: unsubscribe from space in case the space ID changes
-      subscribeToSpaceCache.delete(spaceId);
-    };
-  }, [isConnecting, subscribeToSpace, spaceId, enabled]);
-
-  return handle;
-}
-
 export function useSpace(options: { space?: string; mode: 'private' | 'public' }) {
   const { space: spaceIdFromContext } = useHypergraphSpaceInternal();
   const { space: spaceIdFromParams } = options ?? {};

packages/hypergraph-react/src/internal/use-entity-private.tsx

@@ -1,38 +1,8 @@
-import { Entity, type Id, store } from '@graphprotocol/hypergraph';
-import { useSelector } from '@xstate/store/react';
+import { Entity, type Id } from '@graphprotocol/hypergraph';
 import * as Schema from 'effect/Schema';
-import { useEffect, useRef, useSyncExternalStore } from 'react';
-import { useHypergraphApp } from '../HypergraphAppContext.js';
+import { useRef, useSyncExternalStore } from 'react';
 import { useHypergraphSpaceInternal } from '../HypergraphSpaceContext.js';
-
-const subscribeToSpaceCache = new Map<string, boolean>();
-
-function useSubscribeToSpaceAndGetHandle({ spaceId, enabled }: { spaceId: string; enabled: boolean }) {
-  const handle = useSelector(store, (state) => {
-    const space = state.context.spaces.find((space) => space.id === spaceId);
-    if (!space) {
-      return undefined;
-    }
-    return space.automergeDocHandle;
-  });
-
-  const { subscribeToSpace, isConnecting } = useHypergraphApp();
-  useEffect(() => {
-    if (!isConnecting && enabled) {
-      if (subscribeToSpaceCache.has(spaceId)) {
-        return;
-      }
-      subscribeToSpaceCache.set(spaceId, true);
-      subscribeToSpace({ spaceId });
-    }
-    return () => {
-      // TODO: unsubscribe from space in case the space ID changes
-      subscribeToSpaceCache.delete(spaceId);
-    };
-  }, [isConnecting, subscribeToSpace, spaceId, enabled]);
-
-  return handle;
-}
+import { useSubscribeToSpaceAndGetHandle } from './use-subscribe-to-space.js';
 
 export function useEntityPrivate<const S extends Entity.AnyNoContext>(
   type: S,

packages/hypergraph-react/src/internal/use-query-private.tsx

@@ -1,40 +1,10 @@
 'use client';
 
-import { Entity, store } from '@graphprotocol/hypergraph';
-import { useSelector } from '@xstate/store/react';
+import { Entity } from '@graphprotocol/hypergraph';
 import type * as Schema from 'effect/Schema';
-import { useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
-import { useHypergraphApp } from '../HypergraphAppContext.js';
+import { useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import { useHypergraphSpaceInternal } from '../HypergraphSpaceContext.js';
-
-const subscribeToSpaceCache = new Map<string, boolean>();
-
-function useSubscribeToSpaceAndGetHandle({ spaceId, enabled }: { spaceId: string; enabled: boolean }) {
-  const handle = useSelector(store, (state) => {
-    const space = state.context.spaces.find((space) => space.id === spaceId);
-    if (!space) {
-      return undefined;
-    }
-    return space.automergeDocHandle;
-  });
-
-  const { subscribeToSpace, isConnecting } = useHypergraphApp();
-  useEffect(() => {
-    if (!isConnecting && enabled) {
-      if (subscribeToSpaceCache.has(spaceId)) {
-        return;
-      }
-      subscribeToSpaceCache.set(spaceId, true);
-      subscribeToSpace({ spaceId });
-    }
-    return () => {
-      // TODO: unsubscribe from space in case the space ID changes
-      subscribeToSpaceCache.delete(spaceId);
-    };
-  }, [isConnecting, subscribeToSpace, spaceId, enabled]);
-
-  return handle;
-}
+import { useSubscribeToSpaceAndGetHandle } from './use-subscribe-to-space.js';
 
 type QueryParams<S extends Entity.AnyNoContext> = {
   space?: string | undefined;

packages/hypergraph-react/src/internal/use-subscribe-to-space.tsx

@@ -0,0 +1,33 @@
+import { store } from '@graphprotocol/hypergraph';
+import { useSelector } from '@xstate/store/react';
+import { useEffect } from 'react';
+import { useHypergraphApp } from '../HypergraphAppContext.js';
+
+const subscribeToSpaceCache = new Map<string, boolean>();
+
+export function useSubscribeToSpaceAndGetHandle({ spaceId, enabled }: { spaceId: string; enabled: boolean }) {
+  const handle = useSelector(store, (state) => {
+    const space = state.context.spaces.find((space) => space.id === spaceId);
+    if (!space) {
+      return undefined;
+    }
+    return space.automergeDocHandle;
+  });
+
+  const { subscribeToSpace, isConnecting } = useHypergraphApp();
+  useEffect(() => {
+    if (!isConnecting && enabled) {
+      if (subscribeToSpaceCache.has(spaceId)) {
+        return;
+      }
+      subscribeToSpaceCache.set(spaceId, true);
+      subscribeToSpace({ spaceId });
+    }
+    return () => {
+      // TODO: unsubscribe from space in case the space ID changes
+      subscribeToSpaceCache.delete(spaceId);
+    };
+  }, [isConnecting, subscribeToSpace, spaceId, enabled]);
+
+  return handle;
+}