Real-time collaborative list

const schema = {
  projects: s.table(
    {
      name: s.string(),
    },
    {
      tasks: s.reverse("tasks", "project"),
      members: s.reverse("projectMembers", "project"),
    },
  ),
  tasks: s.table(
    {
      title: s.string(),
      done: s.boolean(),
      assignee_id: s.uuid().optional(),
      projectId: s.uuid(),
    },
    { project: s.rel("projects", "projectId") },
  ),
  projectMembers: s.table(
    {
      projectId: s.uuid(),
      user_id: s.uuid(),
    },
    { project: s.rel("projects", "projectId") },
  ),
};

type AppSchema = s.Schema<typeof schema>;
export const app: s.App<AppSchema> = s.defineApp(schema);

s.definePermissions(app, ({ policy, anyOf, allowedTo, session }) => {
  // Projects: creator and members
  policy.projects.allowRead.where((project) =>
    anyOf([
      { "$createdBy.account": session.user.account },
      policy.projectMembers.exists.where({
        projectId: project.id,
        user_id: session.user.account,
      }),
    ]),
  );
  policy.projects.allowInsert.always();
  policy.projects.allowUpdate.where({ "$createdBy.account": session.user.account });

  // Tasks: inherit from project
  policy.tasks.allowRead.where(allowedTo.read("project"));
  policy.tasks.allowInsert.where(allowedTo.read("project"));
  policy.tasks.allowUpdate.where(allowedTo.read("project"));

  // Members: only the creator can manage
  policy.projectMembers.allowInsert.where((member) =>
    policy.projects.exists.where({
      id: member.projectId,
      "$createdBy.account": session.user.account,
    }),
  );
  policy.projectMembers.allowRead.where((member) =>
    anyOf([
      policy.projects.exists.where({
        id: member.projectId,
        "$createdBy.account": session.user.account,
      }),
      { user_id: session.user.account },
    ]),
  );
});

export function ProjectTasks({ projectId }: { projectId: string }) {
  const db = useDb();
  const {
    data: tasks,
    isLoading,
    error,
  } = useAll(app.tasks.where({ projectId, done: false }).orderBy("$createdAt", "desc"));

  function addTask(title: string) {
    db.insert(app.tasks, { title, done: false, projectId });
  }

  function completeTask(taskId: string) {
    db.update(app.tasks, taskId, { done: true });
  }

  if (isLoading) return <p>Loading…</p>;
  if (error) return <p>Something went wrong!</p>;

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          <button onClick={() => completeTask(task.id)}>Done</button>
          {task.title}
        </li>
      ))}
    </ul>
  );
}