Skip to content

Schema design #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 5, 2024
Merged

Schema design #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fa7abbc
schema design session
nikgraf Oct 4, 2024
dd0016d
use function to create utils
nikgraf Oct 5, 2024
1eab7c4
implement use query
nikgraf Oct 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 143 additions & 0 deletions apps/events/src/components/events.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
import React from "react";
import { useCreateEntity, useQuery, useSpaceId } from "./schema";
import { Button } from "./ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "./ui/card";
import { Input } from "./ui/input";

export const Events: React.FC = () => {
const [newTodo, setNewTodo] = React.useState("");
const id = useSpaceId();
const createEntity = useCreateEntity();

const entities = useQuery({ types: ["Event"] });

// const entities = useQuery({
// where: {
// name: {
// equals: "Alice",
// },
// // TODO include it a where clause
// types: {
// contains: ["Person"] as const,
// },
// select: {
// name: true,
// friends: {
// // where: {},
// select: {
// name: true,
// },
// },
// },
// },
// });

// useEffect(() => {
// // createEntity({
// // types: ["Event"],
// // data: {
// // name: "Silvester in NY",
// // },
// // });

// // TODO create - can be an object or an array
// createEntity({
// types: ["Person", "User"], // TODO can types be inferred if they are located in data?
// data: {
// name: "Alice",
// age: 30,
// email: "[email protected]",
// // isActive: true,
// // friends: ["abc", "def"], // ids to connect
// // friends: [
// // { id: "abc", name: "abc" },
// // { id: "def", name: "lala" },
// // ], // create objects or overwrite existing ones
// // friends: ["abc", { id: "def", name: "lala" }], // mix between connect and create
// },
// });

// // createEntity(["Person", "User"], {
// // name: "Alice",
// // age: 30,
// // email: "[email protected]",
// // isActive: true,
// // });
// }, []);

// TODO different API for setting a Triple with a value on a entities

return (
<main className="flex-1">
<section className="w-full py-12 md:py-24">
<div className="container px-4 md:px-6">
<h1>Events of Space w/ ID: {id}</h1>

<form
onSubmit={(event) => {
event.preventDefault();
createEntity({
types: ["Event"],
data: {
name: "Bob",
},
});
setNewTodo("");
}}
>
<Input
placeholder="Event Title"
onChange={(event) => setNewTodo(event.target.value)}
value={newTodo}
/>
<Button>Add</Button>
</form>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{entities &&
Object.keys(entities).map((entityId) => {
const entity = entities[entityId];
return (
<Card key={entityId}>
<CardHeader>
<CardTitle>
<Input
className="edit"
onChange={(evt) => {
// changeDoc((doc) => {
// doc.events[event.id].value = evt.target.value;
// });
}}
value={entity.name}
/>
</CardTitle>
</CardHeader>
<CardContent>
<p>A new event</p>
</CardContent>
<CardFooter className="flex gap-2">
<Button
onClick={(evt) => {
evt.preventDefault();
// changeDoc((doc) => {
// delete doc.events[event.id];
// });
}}
>
Delete
</Button>
</CardFooter>
</Card>
);
})}
</div>
</div>
</section>
</main>
);
};
141 changes: 3 additions & 138 deletions apps/events/src/components/schema-test-automerge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,6 @@
import {
createDocumentId,
SpaceProvider,
type,
useCreateEntity,
useSpaceDocument,
useSpaceId,
} from "graph-framework";
import React, { useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import { Button } from "./ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "./ui/card";
import { Input } from "./ui/input";

const schema = {
attributes: {
name: type.Text,
age: type.Number,
isActive: type.Checkbox,
email: type.Text,
},
types: {
Person: ["name", "age"] as const,
User: ["name", "email", "isActive"] as const,
Event: ["name"] as const,
},
};
import { Events } from "./events";
import { SpaceProvider, createDocumentId } from "./schema";

export const SchemaTestAutomerge: React.FC = () => {
const [id, setId] = React.useState<string | null>(null);
Expand All @@ -46,114 +16,9 @@ export const SchemaTestAutomerge: React.FC = () => {

return (
<>
<SpaceProvider schema={schema} id={id}>
<SpaceProvider id={id}>
<Events />
</SpaceProvider>
</>
);
};

export const Events: React.FC = () => {
const [newTodo, setNewTodo] = React.useState("");
const id = useSpaceId();
const [doc, changeDoc] = useSpaceDocument();
const createEntity = useCreateEntity<
typeof schema.attributes,
typeof schema.types
>();

useEffect(() => {
createEntity({
types: ["Person", "User"],
data: {
name: "Alice",
age: 30,
email: "[email protected]",
isActive: true,
},
});
createEntity({
types: ["Event"],
data: {
name: "Bob",
},
});
}, []);

return (
<main className="flex-1">
<section className="w-full py-12 md:py-24">
<div className="container px-4 md:px-6">
<h1>Events of Space w/ ID: {id}</h1>

<form
onSubmit={(event) => {
event.preventDefault();

changeDoc((doc) => {
if (!doc.events) doc.events = {};
const id = uuidv4();
doc.events[id] = {
value: newTodo,
completed: false,
createdAt: new Date().getTime(),
};
});
setNewTodo("");
}}
>
<Input
placeholder="Event Title"
onChange={(event) => setNewTodo(event.target.value)}
value={newTodo}
/>
<Button>Add</Button>
</form>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{doc.events &&
Object.keys(doc.events)
.map((id) => {
return {
...doc.events[id],
id,
};
})
.sort((a, b) => b.createdAt - a.createdAt)
.map((event) => (
<Card key={event.id}>
<CardHeader>
<CardTitle>
<Input
className="edit"
onChange={(evt) => {
changeDoc((doc) => {
doc.events[event.id].value = evt.target.value;
});
}}
value={event.value}
/>
</CardTitle>
</CardHeader>
<CardContent>
<p>A new event</p>
</CardContent>
<CardFooter className="flex gap-2">
<Button
onClick={(evt) => {
evt.preventDefault();
changeDoc((doc) => {
delete doc.events[event.id];
});
}}
>
Delete
</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</section>
</main>
);
};
55 changes: 55 additions & 0 deletions apps/events/src/components/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { createFunctions, type } from "graph-framework";

// this is autogenerated
// const spaceTypes = {
// iban: S.Text,
// };

// const spaceAttributes = {
// iban: spaceTypes.Iban,
// age: type.Number,
// isActive: type.Checkbox,
// email: type.Text,
// };

// end autogenerated

export const schema = {
attributes: {
// ...spaceAttributes,
name: type.Text,
age: type.Number,
isActive: type.Checkbox,
email: type.Text,
},
relations: {
// friends: type.Relation(["User", "Person"], {
// cardinality: "many", // "one" | "many"
// }),
// soulmate: type.Relation(["User", "Person"], {
// cardinality: "one", // "one" | "many"
// }),
},
types: {
Person: ["name", "age"] as const,
User: ["name", "email"] as const,
Event: ["name"] as const,
},
// imports: {
// attributes: {},
// types: {
// Animal: "abcd",
// },
// relations: {
// owner: "xyz",
// },
// },
};

export const {
SpaceProvider,
useCreateEntity,
useSpaceId,
createDocumentId,
useQuery,
} = createFunctions(schema);
Loading
Loading