Skip to content

Commit 9c69ee7

Browse files
nikgrafnikgraf
authored
rework space context (#249)
1 parent 063c6af commit 9c69ee7

21 files changed

+177
-204
lines changed

‎apps/events/src/components/create-events.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getSmartAccountWalletClient } from '@/lib/smart-account';
22
import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
3-
import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
3+
import { publishOps } from '@graphprotocol/hypergraph-react';
44
import { Button } from './ui/button';
55

66
const createEvents = async ({
@@ -69,9 +69,7 @@ const createEvents = async ({
6969
}
7070
};
7171

72-
export const CreateEvents = () => {
73-
const space = useHypergraphSpace();
74-
72+
export const CreateEvents = ({ space }: { space: string }) => {
7573
return (
7674
<div>
7775
<Button

‎apps/events/src/components/create-properties-and-types-event.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getSmartAccountWalletClient } from '@/lib/smart-account';
22
import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
3-
import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
3+
import { publishOps } from '@graphprotocol/hypergraph-react';
44
import { useState } from 'react';
55
import { Button } from './ui/button';
66
import { Card, CardContent } from './ui/card';
@@ -66,9 +66,8 @@ const createPropertiesAndTypesEvent = async ({
6666
};
6767
};
6868

69-
export const CreatePropertiesAndTypesEvent = () => {
69+
export const CreatePropertiesAndTypesEvent = ({ space }: { space: string }) => {
7070
const [mapping, setMapping] = useState<string>('');
71-
const space = useHypergraphSpace();
7271

7372
return (
7473
<div>

‎apps/events/src/components/create-properties-and-types-todos.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getSmartAccountWalletClient } from '@/lib/smart-account';
22
import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
3-
import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
3+
import { publishOps } from '@graphprotocol/hypergraph-react';
44
import { useState } from 'react';
55
import { Button } from './ui/button';
66
import { Card, CardContent } from './ui/card';
@@ -70,6 +70,7 @@ const createPropertiesAndTypesTodos = async ({
7070
walletClient: smartAccountWalletClient,
7171
space,
7272
name: 'Create properties and types',
73+
network: 'TESTNET',
7374
});
7475
return {
7576
result,
@@ -84,9 +85,8 @@ const createPropertiesAndTypesTodos = async ({
8485
};
8586
};
8687

87-
export const CreatePropertiesAndTypesTodos = () => {
88+
export const CreatePropertiesAndTypesTodos = ({ space }: { space: string }) => {
8889
const [mapping, setMapping] = useState<string>('');
89-
const space = useHypergraphSpace();
9090

9191
return (
9292
<div>
@@ -113,6 +113,7 @@ export const CreatePropertiesAndTypesTodos = () => {
113113
websitePropertyId,
114114
amountPropertyId,
115115
} = await createPropertiesAndTypesTodos({
116+
// @ts-expect-error - TODO: fix the types error
116117
smartAccountWalletClient,
117118
space,
118119
});

‎apps/events/src/components/dev-tool.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { store } from '@graphprotocol/hypergraph';
2-
import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
32
import { useSelector } from '@xstate/store/react';
4-
import { useEffect, useState } from 'react';
3+
import { useState } from 'react';
54

65
import { Button } from './ui/button';
76

@@ -10,13 +9,6 @@ export function DevTool({ spaceId }: { spaceId: string }) {
109

1110
const spaces = useSelector(store, (state) => state.context.spaces);
1211
const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
13-
const { subscribeToSpace, isConnecting } = useHypergraphApp();
14-
15-
useEffect(() => {
16-
if (!isConnecting) {
17-
subscribeToSpace({ spaceId });
18-
}
19-
}, [isConnecting, subscribeToSpace, spaceId]);
2012

2113
const space = spaces.find((space) => space.id === spaceId);
2214

@@ -39,7 +31,6 @@ export function DevTool({ spaceId }: { spaceId: string }) {
3931
<p>Keys:</p>
4032
<pre className="text-xs">{JSON.stringify(space.keys)}</pre>
4133
<br />
42-
<h3>Last update clock: {space.lastUpdateClock}</h3>
4334
<h3>Updates in flight</h3>
4435
<ul className="text-xs">
4536
{updatesInFlight.map((updateInFlight) => {

‎apps/events/src/components/todo/todos-public.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import { getSmartAccountWalletClient } from '@/lib/smart-account';
22
import { Id } from '@graphprotocol/grc-20';
3-
import {
4-
_generateDeleteOps,
5-
publishOps,
6-
useCreateEntity,
7-
useHypergraphSpace,
8-
useQuery,
9-
} from '@graphprotocol/hypergraph-react';
3+
import { _generateDeleteOps, publishOps, useCreateEntity, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
104
import { useGenerateCreateOps } from '@graphprotocol/hypergraph-react/internal/use-generate-create-ops';
115
import { Todo2 } from '../../schema';
126
import { Spinner } from '../spinner';
137
import { Button } from '../ui/button';
148

159
export const TodosPublic = () => {
16-
const space = useHypergraphSpace();
10+
const { id: spaceId } = useSpace({ mode: 'public' });
1711
const {
1812
data: dataPublic,
1913
isLoading: isLoadingPublic,
@@ -54,11 +48,12 @@ export const TodosPublic = () => {
5448
if (!smartAccountWalletClient) {
5549
throw new Error('Missing smartAccountWalletClient');
5650
}
57-
const ops = await _generateDeleteOps({ id: todo.id, space });
51+
const ops = await _generateDeleteOps({ id: todo.id, space: spaceId });
5852
const result = await publishOps({
5953
ops,
54+
// @ts-expect-error - TODO: fix the types error
6055
walletClient: smartAccountWalletClient,
61-
space,
56+
space: spaceId,
6257
name: 'Delete Todo',
6358
});
6459
console.log('result', result);
@@ -89,8 +84,9 @@ export const TodosPublic = () => {
8984
console.log('ops', ops);
9085
const result = await publishOps({
9186
ops,
87+
// @ts-expect-error - TODO: fix the types error
9288
walletClient: smartAccountWalletClient,
93-
space,
89+
space: spaceId,
9490
name: 'Create Todo',
9591
});
9692
console.log('result', result);

‎apps/events/src/components/todos.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
useDeleteEntity,
44
useQuery,
55
useRemoveRelation,
6+
useSpace,
67
useUpdateEntity,
78
} from '@graphprotocol/hypergraph-react';
89
import { useEffect, useState } from 'react';
@@ -14,6 +15,7 @@ import { Input } from './ui/input';
1415
export const Todos = () => {
1516
const { data: todos } = useQuery(Todo, { mode: 'private', include: { assignees: {} } });
1617
const { data: users } = useQuery(User, { mode: 'private' });
18+
const { ready: spaceReady } = useSpace({ mode: 'private' });
1719
const createEntity = useCreateEntity(Todo);
1820
const updateEntity = useUpdateEntity(Todo);
1921
const deleteEntity = useDeleteEntity();
@@ -28,6 +30,10 @@ export const Todos = () => {
2830
});
2931
}, [users]);
3032

33+
if (!spaceReady) {
34+
return <div>Loading space...</div>;
35+
}
36+
3137
const userOptions = users.map((user) => ({ value: user.id, label: user.name }));
3238
return (
3339
<>

‎apps/events/src/components/todos2.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {
66
publishOps,
77
useCreateEntity,
88
useDeleteEntity,
9-
useHypergraphSpace,
109
useQuery,
10+
useSpace,
1111
useUpdateEntity,
1212
} from '@graphprotocol/hypergraph-react';
1313
import { useQueryClient } from '@tanstack/react-query';
@@ -34,7 +34,7 @@ export const Todos2 = () => {
3434
isError: isErrorUsers,
3535
// preparePublish: preparePublishUsers,
3636
} = useQuery(User, { mode: 'private' });
37-
const space = useHypergraphSpace();
37+
const { ready: spaceReady, id: spaceId } = useSpace({ mode: 'private' });
3838
const createTodo = useCreateEntity(Todo2);
3939
const updateTodo = useUpdateEntity(Todo2);
4040
const createUser = useCreateEntity(User);
@@ -57,6 +57,10 @@ export const Todos2 = () => {
5757

5858
const userOptions = dataUsers.map((user) => ({ value: user.id, label: user.name }));
5959

60+
if (!spaceReady) {
61+
return <div>Loading space...</div>;
62+
}
63+
6064
return (
6165
<>
6266
<div className="flex flex-row gap-4 items-center">
@@ -231,7 +235,7 @@ export const Todos2 = () => {
231235
ops,
232236
// @ts-expect-error - TODO: fix the types error
233237
walletClient: smartAccountWalletClient,
234-
space,
238+
space: spaceId,
235239
name: 'Update users and todos',
236240
});
237241
console.log('publishOpsResult', publishOpsResult);

‎apps/events/src/components/users.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCreateEntity, useQuery } from '@graphprotocol/hypergraph-react';
1+
import { useCreateEntity, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
22
import { useState } from 'react';
33
import { User } from '../schema.js';
44
import { Button } from './ui/button.js';
@@ -7,9 +7,14 @@ import { UserEntry } from './user-entry.js';
77

88
export const Users = () => {
99
const { data: users } = useQuery(User, { mode: 'private' });
10-
const createEntity = useCreateEntity(User);
10+
const { ready: spaceReady } = useSpace({ mode: 'private' });
11+
const createEntity = useCreateEntity(User, { space: '1c954768-7e14-4f0f-9396-0fe9dcd55fe8' });
1112
const [newUserName, setNewUserName] = useState('');
1213

14+
if (!spaceReady) {
15+
return <div>Loading space...</div>;
16+
}
17+
1318
return (
1419
<>
1520
<h1 className="text-2xl font-bold">Users</h1>

‎apps/events/src/components/users/users-public.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { getSmartAccountWalletClient } from '@/lib/smart-account';
2-
import { _generateDeleteOps, publishOps, useHypergraphSpace, useQuery } from '@graphprotocol/hypergraph-react';
2+
import { _generateDeleteOps, publishOps, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
33
import { User } from '../../schema';
44
import { Spinner } from '../spinner';
55
import { Button } from '../ui/button';
66

77
export const UsersPublic = () => {
8-
const space = useHypergraphSpace();
8+
const { id: spaceId } = useSpace({ mode: 'public' });
99
const { data: dataPublic, isLoading: isLoadingPublic, isError: isErrorPublic } = useQuery(User, { mode: 'public' });
1010

1111
return (
@@ -26,11 +26,12 @@ export const UsersPublic = () => {
2626
if (!smartAccountWalletClient) {
2727
throw new Error('Missing smartAccountWalletClient');
2828
}
29-
const ops = await _generateDeleteOps({ id: user.id, space });
29+
const ops = await _generateDeleteOps({ id: user.id, space: spaceId });
3030
const result = await publishOps({
3131
ops,
32+
// @ts-expect-error - TODO: fix the types error
3233
walletClient: smartAccountWalletClient,
33-
space,
34+
space: spaceId,
3435
name: 'Delete User',
3536
});
3637
console.log('result', result);

‎apps/events/src/routes/playground.lazy.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ function RouteComponent() {
1414
<div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
1515
<h1 className="text-2xl font-bold">Playground</h1>
1616
<Playground />
17-
<CreatePropertiesAndTypesEvent />
18-
<CreateEvents />
17+
<CreatePropertiesAndTypesEvent space="1c954768-7e14-4f0f-9396-0fe9dcd55fe8" />
18+
<CreateEvents space="1c954768-7e14-4f0f-9396-0fe9dcd55fe8" />
1919
</div>
2020
</HypergraphSpaceProvider>
2121
);

0 commit comments

Comments
 (0)