example: reload issues in list

The demo shows how the Models SDK can be used to show changes to the
issue data rendered in the exanded drawer. We have not integrated Models
to render changes to the list view yet. In the meantime, we simply
reload the issues for the list view from the server.

examples/livesync/components/Project/Project.tsx

@@ -1,12 +1,27 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import { Drawer } from '../Drawer';
 import { Table, IssueType } from '../Table';
+import { fetchIssues } from './actions';
 
 interface Props {
   issues: IssueType[];
   id: number;
 }
 
-export const Project = ({ issues, id }: Props) => {
+export const Project = ({ issues: initialIssues, id }: Props) => {
+  const [issues, setIssues] = useState<IssueType[]>(initialIssues);
+
+  useEffect(() => {
+    async function reload() {
+      const newIssues = await fetchIssues(id);
+      setIssues(newIssues);
+    }
+
+    reload();
+  });
+
   return (
     <Drawer projectId={id}>
       <Table rows={issues} />

examples/livesync/components/Project/actions.ts

@@ -0,0 +1,27 @@
+'use server';
+
+import { sql } from '@/data';
+import { IssueType } from '../Table';
+
+export const fetchIssues = async (id: number) => {
+	const issues = await sql<IssueType[]>`
+        SELECT
+          i.id,
+          i.name,
+          i.due_date,
+          i.status,
+          i.owner_id,
+          i.story_points,
+          i.description,
+          u.first_name as owner_first_name,
+          u.last_name as owner_last_name,
+          u.color as owner_color
+        FROM issues i
+          LEFT OUTER JOIN users u
+          ON u.id = i.owner_id
+        WHERE project_id = ${id}
+        ORDER BY i.id DESC
+      `;
+
+	return Array.from(issues);
+};