diff --git a/apps/events/src/Boot.tsx b/apps/events/src/Boot.tsx index 70149a8c..d5d4a2e3 100644 --- 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() { }, }} > - + - + ); } diff --git a/apps/events/src/components/dev-tool.tsx b/apps/events/src/components/dev-tool.tsx index 4d65ea8f..539e5071 100644 --- 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 index e23566c3..9942cacb 100644 --- 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 index f4db85c9..50bfa0ef 100644 --- 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 index 409a64b0..287ad96d 100644 --- 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 ? (
- {graphIdentity?.accountId.substring(0, 6)} + {identity?.accountId.substring(0, 6)}
diff --git a/apps/events/src/routes/index.tsx b/apps/events/src/routes/index.tsx index 164baf73..ffcf4192 100644 --- 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 index 3a167b92..423ba08c 100644 --- 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 index 124d6d90..9cc26434 100644 --- 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 (
- +

Invite people

@@ -59,7 +59,7 @@ function Space() {
- +
); } diff --git a/packages/hypergraph-react/src/HypergraphAppContext.tsx b/packages/hypergraph-react/src/HypergraphAppContext.tsx index 7e5fb011..eb3b3837 100644 --- a/packages/hypergraph-react/src/HypergraphAppContext.tsx +++ b/packages/hypergraph-react/src/HypergraphAppContext.tsx @@ -76,14 +76,9 @@ export function useHypergraphApp() { return useContext(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 @@ -95,10 +90,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 index e56ab0df..2fc6b7da 100644 --- 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(undefined); diff --git a/packages/hypergraph-react/src/index.ts b/packages/hypergraph-react/src/index.ts index b8206a03..9d0b9aba 100644 --- 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 index d94c0597..7e0ae54c 100644 --- 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', () => { {children} ); - 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 index fb1c7007..6a0db360 100644 --- 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: 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 }>) => ( - {children} + {children} ); @@ -54,7 +54,7 @@ describe('HypergraphSpaceContext', () => { wrapper = ({ children }: Readonly<{ children: React.ReactNode }>) => ( - {children} + {children} ); });