export only useful functions (#139)

nikgraf · web-flow · commit d024ba6e9bf5 · 2025-02-04T16:48:42.000+01:00
diff --git a/apps/events/src/Boot.tsx b/apps/events/src/Boot.tsx
@@ -1,6 +1,6 @@
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { HypergraphAppProvider } from '@graphprotocol/hypergraph-react';
 import { PrivyProvider } from '@privy-io/react-auth';
 
 import { routeTree } from './routeTree.gen';
@@ -33,9 +33,9 @@ export function Boot() {
         },
       }}
     >
-      <Hypergraph.HypergraphAppProvider storage={localStorage}>
+      <HypergraphAppProvider storage={localStorage}>
         <RouterProvider router={router} />
-      </Hypergraph.HypergraphAppProvider>
+      </HypergraphAppProvider>
     </PrivyProvider>
   );
 }
diff --git a/apps/events/src/components/dev-tool.tsx b/apps/events/src/components/dev-tool.tsx
@@ -1,5 +1,5 @@
 import { store } from '@graphprotocol/hypergraph';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { useSelector } from '@xstate/store/react';
 import { useEffect, useState } from 'react';
 
@@ -10,7 +10,7 @@ export function DevTool({ spaceId }: { spaceId: string }) {
 
   const spaces = useSelector(store, (state) => state.context.spaces);
   const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
-  const { subscribeToSpace, loading } = Hypergraph.useHypergraphApp();
+  const { subscribeToSpace, loading } = useHypergraphApp();
 
   useEffect(() => {
     if (!loading) {
diff --git a/apps/events/src/components/logout.tsx b/apps/events/src/components/logout.tsx
@@ -1,10 +1,10 @@
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { usePrivy } from '@privy-io/react-auth';
 import { useRouter } from '@tanstack/react-router';
 import { Button } from './ui/button';
 
 export function Logout() {
-  const { logout: graphLogout } = Hypergraph.useHypergraphApp();
+  const { logout: graphLogout } = useHypergraphApp();
   const { logout: privyLogout } = usePrivy();
   const router = useRouter();
   const disconnectWallet = async () => {
diff --git a/apps/events/src/components/todos.tsx b/apps/events/src/components/todos.tsx
@@ -1,14 +1,14 @@
-import { Space } from '@graphprotocol/hypergraph-react';
+import { useCreateEntity, useDeleteEntity, useQueryEntities, useUpdateEntity } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
 import { Todo } from '../schema';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 
 export const Todos = () => {
-  const todos = Space.useQueryEntities(Todo);
-  const createEntity = Space.useCreateEntity(Todo);
-  const updateEntity = Space.useUpdateEntity(Todo);
-  const deleteEntity = Space.useDeleteEntity();
+  const todos = useQueryEntities(Todo);
+  const createEntity = useCreateEntity(Todo);
+  const updateEntity = useUpdateEntity(Todo);
+  const deleteEntity = useDeleteEntity();
   const [newTodoTitle, setNewTodoTitle] = useState('');
 
   return (
diff --git a/apps/events/src/routes/__root.tsx b/apps/events/src/routes/__root.tsx
@@ -1,12 +1,11 @@
 import { Logout } from '@/components/logout';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphAuth } from '@graphprotocol/hypergraph-react';
 import { Link, Outlet, createRootRoute, useLayoutEffect, useRouter } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 
 export const Route = createRootRoute({
   component: () => {
-    const authenticated = Hypergraph.useAuthenticated();
-    const graphIdentity = Hypergraph.useHypergraphIdentity();
+    const { authenticated, identity } = useHypergraphAuth();
 
     const router = useRouter();
 
@@ -33,7 +32,7 @@ export const Route = createRootRoute({
               {authenticated ? (
                 <div className="flex items-center gap-2">
                   <span className="text-xs text-gray-500 dark:text-gray-400">
-                    {graphIdentity?.accountId.substring(0, 6)}
+                    {identity?.accountId.substring(0, 6)}
                   </span>
                   <Logout />
                 </div>
diff --git a/apps/events/src/routes/index.tsx b/apps/events/src/routes/index.tsx
@@ -1,5 +1,5 @@
 import { store } from '@graphprotocol/hypergraph';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { Link, createFileRoute } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
 import { useEffect } from 'react';
@@ -13,8 +13,7 @@ export const Route = createFileRoute('/')({
 
 function Index() {
   const spaces = useSelector(store, (state) => state.context.spaces);
-  const { createSpace, listSpaces, listInvitations, invitations, acceptInvitation, loading } =
-    Hypergraph.useHypergraphApp();
+  const { createSpace, listSpaces, listInvitations, invitations, acceptInvitation, loading } = useHypergraphApp();
 
   console.log('Home page', { loading });
 
diff --git a/apps/events/src/routes/login.lazy.tsx b/apps/events/src/routes/login.lazy.tsx
@@ -1,5 +1,5 @@
 import type { Identity } from '@graphprotocol/hypergraph';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { usePrivy, useWallets } from '@privy-io/react-auth';
 import { createLazyFileRoute, useRouter } from '@tanstack/react-router';
 import { Loader2 } from 'lucide-react';
@@ -17,7 +17,7 @@ export const Route = createLazyFileRoute('/login')({
 function Login() {
   const { ready: privyReady, login: privyLogin, signMessage, authenticated: privyAuthenticated } = usePrivy();
   const { ready: walletsReady, wallets } = useWallets();
-  const { setIdentityAndSessionToken, login: hypergraphLogin } = Hypergraph.useHypergraphApp();
+  const { setIdentityAndSessionToken, login: hypergraphLogin } = useHypergraphApp();
   const { navigate } = useRouter();
   const [hypergraphLoginStarted, setHypergraphLoginStarted] = useState(false);
 
diff --git a/apps/events/src/routes/space/$spaceId.tsx b/apps/events/src/routes/space/$spaceId.tsx
@@ -1,5 +1,5 @@
 import { store } from '@graphprotocol/hypergraph';
-import { Hypergraph, Space as HypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { HypergraphSpaceProvider, useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { createFileRoute } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
 
@@ -17,7 +17,7 @@ export const Route = createFileRoute('/space/$spaceId')({
 function Space() {
   const { spaceId } = Route.useParams();
   const spaces = useSelector(store, (state) => state.context.spaces);
-  const { subscribeToSpace, inviteToSpace, loading } = Hypergraph.useHypergraphApp();
+  const { subscribeToSpace, inviteToSpace, loading } = useHypergraphApp();
   useEffect(() => {
     if (!loading) {
       subscribeToSpace({ spaceId });
@@ -36,7 +36,7 @@ function Space() {
 
   return (
     <div className="flex flex-col gap-4 max-w-screen-sm mx-auto py-8">
-      <HypergraphSpace.HypergraphProvider space={spaceId}>
+      <HypergraphSpaceProvider space={spaceId}>
         <Todos />
         <h3 className="text-xl font-bold">Invite people</h3>
         <div className="flex flex-row gap-2">
@@ -59,7 +59,7 @@ function Space() {
         <div className="mt-12">
           <DevTool spaceId={spaceId} />
         </div>
-      </HypergraphSpace.HypergraphProvider>
+      </HypergraphSpaceProvider>
     </div>
   );
 }
diff --git a/packages/hypergraph-react/src/HypergraphAppContext.tsx b/packages/hypergraph-react/src/HypergraphAppContext.tsx
@@ -77,14 +77,9 @@ export function useHypergraphApp() {
   return useContext<HypergraphAppCtx>(HypergraphAppContext);
 }
 
-export function useAuthenticated() {
-  return useSelectorStore(store, (state) => state.context.authenticated);
-}
-export function useHypergraphAccountId() {
-  return useSelectorStore(store, (state) => state.context.accountId);
-}
-export function useHypergraphIdentity() {
-  const accountId = useHypergraphAccountId();
+export function useHypergraphAuth() {
+  const authenticated = useSelectorStore(store, (state) => state.context.authenticated);
+  const accountId = useSelectorStore(store, (state) => state.context.accountId);
   const keys = useSelectorStore(store, (state) => state.context.keys);
   const identity: Identity.Identity | null =
     accountId && keys
@@ -96,10 +91,7 @@ export function useHypergraphIdentity() {
           signaturePrivateKey: keys.signaturePrivateKey,
         }
       : null;
-  return identity;
-}
-export function useHypergraphSessionToken() {
-  return useSelectorStore(store, (state) => state.context.sessionToken);
+  return { authenticated, identity };
 }
 
 export type HypergraphAppProviderProps = Readonly<{
diff --git a/packages/hypergraph-react/src/HypergraphSpaceContext.tsx b/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
@@ -24,7 +24,7 @@ export function useHypergraph() {
   return context as HypergraphContext;
 }
 
-export function HypergraphProvider({ space, children }: { space: string; children: ReactNode }) {
+export function HypergraphSpaceProvider({ space, children }: { space: string; children: ReactNode }) {
   const repo = useRepo();
   const ref = useRef<HypergraphContext | undefined>(undefined);
 
diff --git a/packages/hypergraph-react/src/index.ts b/packages/hypergraph-react/src/index.ts
@@ -1,2 +1,13 @@
-export * as Hypergraph from './HypergraphAppContext.js';
-export * as Space from './HypergraphSpaceContext.js';
+export {
+  HypergraphAppProvider,
+  useHypergraphApp,
+  useHypergraphAuth,
+} from './HypergraphAppContext.js';
+export {
+  HypergraphSpaceProvider,
+  useCreateEntity,
+  useDeleteEntity,
+  useQueryEntities,
+  useQueryEntity,
+  useUpdateEntity,
+} from './HypergraphSpaceContext.js';
diff --git a/packages/hypergraph-react/test/HypergraphAppContext.test.tsx b/packages/hypergraph-react/test/HypergraphAppContext.test.tsx
@@ -4,7 +4,7 @@ import { cleanup, renderHook } from '@testing-library/react';
 import React from 'react';
 import { afterEach, describe, expect, it } from 'vitest';
 
-import { HypergraphAppProvider, useAuthenticated, useHypergraphAccountId } from '../src/HypergraphAppContext.js';
+import { HypergraphAppProvider, useHypergraphAuth } from '../src/HypergraphAppContext.js';
 
 afterEach(() => {
   cleanup();
@@ -29,9 +29,8 @@ describe('HypergraphAppContext', () => {
       <HypergraphAppProvider storage={storageMock}>{children}</HypergraphAppProvider>
     );
 
-    const { result: authenticatedResult } = renderHook(() => useAuthenticated(), { wrapper });
-    expect(authenticatedResult.current).toEqual(false);
-    const { result: accountIdResult } = renderHook(() => useHypergraphAccountId(), { wrapper });
-    expect(accountIdResult.current).toBeNull();
+    const { result: authenticatedResult } = renderHook(() => useHypergraphAuth(), { wrapper });
+    expect(authenticatedResult.current.authenticated).toEqual(false);
+    expect(authenticatedResult.current.identity).toBeNull();
   });
 });
diff --git a/packages/hypergraph-react/test/HypergraphSpaceContext.test.tsx b/packages/hypergraph-react/test/HypergraphSpaceContext.test.tsx
@@ -1,13 +1,13 @@
-import '@testing-library/jest-dom/vitest';
 import { type AnyDocumentId, Repo } from '@automerge/automerge-repo';
 import { RepoContext } from '@automerge/automerge-repo-react-hooks';
 import { Entity, Utils } from '@graphprotocol/hypergraph';
+import '@testing-library/jest-dom/vitest';
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react';
 // biome-ignore lint/style/useImportType: <explanation>
 import React from 'react';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import {
-  HypergraphProvider,
+  HypergraphSpaceProvider,
   useCreateEntity,
   useDeleteEntity,
   useQueryEntities,
@@ -42,7 +42,7 @@ describe('HypergraphSpaceContext', () => {
   let repo = new Repo({});
   let wrapper = ({ children }: Readonly<{ children: React.ReactNode }>) => (
     <RepoContext.Provider value={repo}>
-      <HypergraphProvider space={spaceId}>{children}</HypergraphProvider>
+      <HypergraphSpaceProvider space={spaceId}>{children}</HypergraphSpaceProvider>
     </RepoContext.Provider>
   );
 
@@ -54,7 +54,7 @@ describe('HypergraphSpaceContext', () => {
 
     wrapper = ({ children }: Readonly<{ children: React.ReactNode }>) => (
       <RepoContext.Provider value={repo}>
-        <HypergraphProvider space={spaceId}>{children}</HypergraphProvider>
+        <HypergraphSpaceProvider space={spaceId}>{children}</HypergraphSpaceProvider>
       </RepoContext.Provider>
     );
   });

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export function useHypergraph() {`
`24`	`24`	`return context as HypergraphContext;`
`25`	`25`	`}`
`26`	`26`
`27`		`-export function HypergraphProvider({ space, children }: { space: string; children: ReactNode }) {`
	`27`	`+export function HypergraphSpaceProvider({ space, children }: { space: string; children: ReactNode }) {`
`28`	`28`	`const repo = useRepo();`
`29`	`29`	`const ref = useRef<HypergraphContext \| undefined>(undefined);`
`30`	`30`