Schema improvements

apps/events/src/components/event.tsx

@@ -13,7 +13,7 @@ export const Event = ({ spaceId, entityId }: { spaceId: string; entityId: string
     space: spaceId,
   });
 
-  console.log({ component: 'Event', isPending, isError, data });
+  // console.log({ component: 'Event', isPending, isError, data });
 
   return (
     <div>

apps/events/src/components/playground.tsx

@@ -1,67 +1,37 @@
-import {
-  _useCreateEntityPublic,
-  _useDeleteEntityPublic,
-  useHypergraphApp,
-  useQuery,
-  useSpace,
-} from '@graphprotocol/hypergraph-react';
+import { _useDeleteEntityPublic, useHypergraphApp, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
 import { Event } from '../schema';
 import { Button } from './ui/button';
 
 export const Playground = ({ spaceId }: { spaceId: string }) => {
-  const { data, isLoading, isError } = useQuery(Event, {
+  const { data, isLoading, isError, invalidEntities } = useQuery(Event, {
     mode: 'public',
     include: {
       sponsors: {
         jobOffers: {},
       },
     },
-    // filter: {
-    //   or: [{ name: { startsWith: 'test' } }, { name: { startsWith: 'ETH' } }],
-    // },
+    filter: {
+      or: [{ name: { startsWith: 'My' } }, { name: { startsWith: 'ETH' } }],
+    },
+    // filter: { name: { startsWith: 'My Test Event' } },
     first: 100,
     space: spaceId,
   });
   const [isDeleting, setIsDeleting] = useState(false);
-  const [isCreating, setIsCreating] = useState(false);
   const { getSmartSessionClient } = useHypergraphApp();
 
   const { name } = useSpace({ mode: 'public', space: spaceId });
 
   const deleteEntity = _useDeleteEntityPublic(Event, { space: spaceId });
-  const createEntity = _useCreateEntityPublic(Event, { space: spaceId });
 
-  console.log({ isLoading, isError, data });
+  console.log({ isLoading, isError, data, invalidEntities });
 
   return (
     <div>
       <h2 className="text-lg font-bold">Space: {name}</h2>
       {isLoading && <div>Loading...</div>}
       {isError && <div>Error</div>}
-      <Button
-        disabled={isCreating}
-        onClick={async () => {
-          setIsCreating(true);
-          const walletClient = await getSmartSessionClient();
-          if (!walletClient) {
-            alert('Wallet client not found');
-            setIsCreating(false);
-            return;
-          }
-          const { success, cid, txResult } = await createEntity(
-            {
-              name: 'Test Event 42 by Nik',
-              sponsors: [],
-            },
-            { walletClient },
-          );
-          console.log('created', { success, cid, txResult });
-          setIsCreating(false);
-        }}
-      >
-        Create
-      </Button>
       {data?.map((event) => (
         <div key={event.id}>
           <h2>{event.name}</h2>

apps/events/src/components/projects.tsx

@@ -0,0 +1,33 @@
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { Project } from '../schema';
+
+export const Projects = ({ spaceId }: { spaceId: string }) => {
+  const { data, isLoading, isError } = useQuery(Project, {
+    mode: 'public',
+    // include: {
+    //   sponsors: {
+    //     jobOffers: {},
+    //   },
+    // },
+    // filter: {
+    //   or: [{ name: { startsWith: 'test' } }, { name: { startsWith: 'ETH' } }],
+    // },
+    first: 100,
+    space: spaceId,
+  });
+  console.log({ isLoading, isError, data });
+
+  return (
+    <div>
+      <h2 className="text-lg font-bold">Projects</h2>
+      {isLoading && <div>Loading...</div>}
+      {isError && <div>Error</div>}
+      {data?.map((project) => (
+        <div key={project.id}>
+          <h2>{project.name}</h2>
+          <pre className="text-xs">{JSON.stringify(project, null, 2)}</pre>
+        </div>
+      ))}
+    </div>
+  );
+};

apps/events/src/components/users.tsx

@@ -8,9 +8,11 @@ import { UserEntry } from './user-entry.js';
 export const Users = () => {
   const { data: users } = useQuery(User, { mode: 'private' });
   const { ready: spaceReady } = useSpace({ mode: 'private' });
-  const createEntity = useCreateEntity(User);
+  const createEntityNew = useCreateEntity(User);
   const [newUserName, setNewUserName] = useState('');
 
+  console.log(users);
+
   if (!spaceReady) {
     return <div>Loading space...</div>;
   }
@@ -22,7 +24,9 @@ export const Users = () => {
         <Input type="text" value={newUserName} onChange={(e) => setNewUserName(e.target.value)} />
         <Button
           onClick={() => {
-            createEntity({ name: newUserName });
+            // createEntity({ name: newUserName });
+            const user = createEntityNew({ name: newUserName });
+            console.log(user);
             setNewUserName('');
           }}
         >

apps/events/src/mapping.ts

@@ -33,29 +33,29 @@ export const mapping: Mapping.Mapping = {
     },
   },
   JobOffer: {
-    typeIds: [Id('f60585af-71b6-4674-9a26-b74ca6c1cceb')],
+    typeIds: [Id('a4c1b288-756e-477b-aab2-007decf01c61')],
     properties: {
       name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
-      salary: Id('baa36ac9-78ac-4cf7-8394-6b2d3006bebe'),
+      salary: Id('86ff5361-b820-4ba8-b689-b48e815e07d2'),
     },
   },
   Company: {
-    typeIds: [Id('6c504df5-1a8f-43d1-bf2d-1ef9fa5b08b5')],
+    typeIds: [Id('bcf56f59-c532-47d5-a005-2d802f512c85')],
     properties: {
       name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
     },
     relations: {
-      jobOffers: Id('1203064e-9741-4235-89d4-97f4b22eddfb'),
+      jobOffers: Id('54190b30-1c68-499c-9ed8-5c6190810e31'),
     },
   },
   Event: {
-    typeIds: [Id('7f9562d4-034d-4385-bf5c-f02cdebba47a')],
+    typeIds: [Id('239bc639-938e-427c-bebb-d562d82ae272')],
     properties: {
       name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
       description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
     },
     relations: {
-      sponsors: Id('6860bfac-f703-4289-b789-972d0aaf3abe'),
+      sponsors: Id('926b00ee-68b5-4462-a27f-3806af705118'),
     },
   },
   Todo3: {

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

@@ -1,20 +1,21 @@
-import { HypergraphSpaceProvider } from '@graphprotocol/hypergraph-react';
-import { createLazyFileRoute } from '@tanstack/react-router';
 import { CreateEvents } from '@/components/create-events';
 import { CreatePropertiesAndTypesEvent } from '@/components/create-properties-and-types-event';
 import { Event } from '@/components/event';
 import { Playground } from '@/components/playground';
+import { HypergraphSpaceProvider } from '@graphprotocol/hypergraph-react';
+import { createLazyFileRoute } from '@tanstack/react-router';
 
 export const Route = createLazyFileRoute('/playground')({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const space = 'a393e509-ae56-4d99-987c-bed71d9db631';
+  const space = '282aee96-48b0-4c6e-b020-736430a82a87';
   return (
     <>
-      <Event spaceId={space} entityId="cf7c620b-d724-498f-b134-8280dc8249ae" />
+      <Event spaceId={space} entityId="22aa0386-3365-4425-a60e-eaaec919c034" />
       <Playground spaceId={space} />
+      {/* <Projects spaceId="3f32353d-3b27-4a13-b71a-746f06e1f7db" /> */}
       <HypergraphSpaceProvider space={space}>
         <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
           <h1 className="text-2xl font-bold">Playground</h1>

apps/events/src/schema.ts

@@ -1,43 +1,125 @@
-import { Entity, Type } from '@graphprotocol/hypergraph';
-
-export class User extends Entity.Class<User>('User')({
-  name: Type.String,
-}) {}
-
-export class Todo extends Entity.Class<Todo>('Todo')({
-  name: Type.String,
-  completed: Type.Boolean,
-  assignees: Type.Relation(User),
-}) {}
-
-export class Todo2 extends Entity.Class<Todo2>('Todo2')({
-  name: Type.String,
-  checked: Type.Boolean,
-  assignees: Type.Relation(User),
-  due: Type.Date,
-  amount: Type.Number,
-  point: Type.Point,
-  website: Type.String,
-}) {}
-
-export class JobOffer extends Entity.Class<JobOffer>('JobOffer')({
-  name: Type.String,
-  salary: Type.Number,
-}) {}
-
-export class Company extends Entity.Class<Company>('Company')({
-  name: Type.String,
-  jobOffers: Type.Relation(JobOffer),
-}) {}
-
-export class Event extends Entity.Class<Event>('Event')({
-  name: Type.String,
-  description: Type.optional(Type.String),
-  sponsors: Type.Relation(Company),
-}) {}
-
-export class Todo3 extends Entity.Class<Todo3>('Todo3')({
-  name: Type.String,
-  completed: Type.Boolean,
-  description: Type.String,
-}) {}
+import { EntitySchema, Id, Type } from '@graphprotocol/hypergraph';
+
+export const User = EntitySchema(
+  { name: Type.String },
+  {
+    types: [Id('bffa181e-a333-495b-949c-57f2831d7eca')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+    },
+  },
+);
+
+export const Todo = EntitySchema(
+  {
+    name: Type.String,
+    completed: Type.Boolean,
+    assignees: Type.Relation(User),
+  },
+  {
+    types: [Id('44fe82a9-e4c2-4330-a395-ce85ed78e421')],
+    properties: {
+      name: Id('c668aa67-bbca-4b2c-908c-9c5599035eab'),
+      completed: Id('71e7654f-2623-4794-88fb-841c8f3dd9b4'),
+      assignees: Id('5b80d3ee-2463-4246-b628-44ba808ab3e1'),
+    },
+  },
+);
+
+export const Todo2 = EntitySchema(
+  {
+    name: Type.String,
+    checked: Type.Boolean,
+    assignees: Type.Relation(User),
+    due: Type.Date,
+    amount: Type.Number,
+    point: Type.Point,
+    website: Type.String,
+  },
+  {
+    types: [Id('210f4e94-234c-49d7-af0f-f3b74fb07650')],
+    properties: {
+      name: Id('e291f4da-632d-4b70-aca8-5c6c01dbf1ca'),
+      checked: Id('d1cc82ef-8bde-45f4-b31c-56b6d59279ec'),
+      assignees: Id('1115e9f8-db2e-41df-8969-c5d34c367c10'),
+      due: Id('6a28f275-b31c-47bc-83cd-ad416aaa7073'),
+      amount: Id('0c8219be-e284-4738-bd95-91a1c113c78e'),
+      point: Id('7f032477-c60e-4c85-a161-019b70db05ca'),
+      website: Id('75b6a647-5c2b-41e7-92c0-b0a0c9b28b02'),
+    },
+  },
+);
+
+export const JobOffer = EntitySchema(
+  {
+    name: Type.String,
+    salary: Type.Number,
+  },
+  {
+    types: [Id('a4c1b288-756e-477b-aab2-007decf01c61')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      salary: Id('86ff5361-b820-4ba8-b689-b48e815e07d2'),
+    },
+  },
+);
+
+export const Company = EntitySchema(
+  {
+    name: Type.String,
+    jobOffers: Type.Relation(JobOffer),
+  },
+  {
+    types: [Id('bcf56f59-c532-47d5-a005-2d802f512c85')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      jobOffers: Id('54190b30-1c68-499c-9ed8-5c6190810e31'),
+    },
+  },
+);
+
+export const Event = EntitySchema(
+  {
+    name: Type.String,
+    description: Type.optional(Type.String),
+    sponsors: Type.Relation(Company),
+  },
+  {
+    types: [Id('239bc639-938e-427c-bebb-d562d82ae272')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
+      sponsors: Id('926b00ee-68b5-4462-a27f-3806af705118'),
+    },
+  },
+);
+
+export const Image = EntitySchema(
+  {
+    url: Type.String,
+  },
+  {
+    types: [Id('ba4e4146-0010-499d-a0a3-caaa7f579d0e')],
+    properties: {
+      url: Id('8a743832-c094-4a62-b665-0c3cc2f9c7bc'),
+    },
+  },
+);
+
+export const Project = EntitySchema(
+  {
+    name: Type.String,
+    description: Type.optional(Type.String),
+    x: Type.optional(Type.String),
+    avatar: Type.Relation(Image),
+  },
+  {
+    types: [Id('484a18c5-030a-499c-b0f2-ef588ff16d50')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
+      x: Id('0d625978-4b3c-4b57-a86f-de45c997c73c'),
+      avatar: Id('1155beff-fad5-49b7-a2e0-da4777b8792c'),
+    },
+  },
+);