Illustrative demo changes.

Author: Chriztiaan

demos/react-supabase-todolist/src/app/views/todo-lists/page.tsx

@@ -13,11 +13,14 @@ import {
 } from '@mui/material';
 import Fab from '@mui/material/Fab';
 import React from 'react';
-import { useSupabase } from '@/components/providers/SystemProvider';
+import { drizzleDb, useSupabase } from '@/components/providers/SystemProvider';
 import { LISTS_TABLE } from '@/library/powersync/AppSchema';
 import { NavigationPage } from '@/components/navigation/NavigationPage';
 import { SearchBarWidget } from '@/components/widgets/SearchBarWidget';
 import { TodoListsWidget } from '@/components/widgets/TodoListsWidget';
+import { lists } from '@/library/powersync/DrizzleSchema';
+
+import { sql } from 'drizzle-orm';
 
 export default function TodoListsPage() {
   const powerSync = usePowerSync();
@@ -33,16 +36,13 @@ export default function TodoListsPage() {
     if (!userID) {
       throw new Error(`Could not create new lists, no userID found`);
     }
+    await drizzleDb.insert(lists).values({
+      id: sql`uuid()`,
+      created_at: sql`datetime()`,
+      name,
+      owner_id: userID
+    });
 
-    const res = await powerSync.execute(
-      `INSERT INTO ${LISTS_TABLE} (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?) RETURNING *`,
-      [name, userID]
-    );
-
-    const resultRecord = res.rows?.item(0);
-    if (!resultRecord) {
-      throw new Error('Could not create list');
-    }
   };
 
   return (

demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx

@@ -7,6 +7,8 @@ import { PowerSyncDatabase } from '@powersync/web';
 import Logger from 'js-logger';
 import React, { Suspense } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
+import { wrapPowerSyncWithDrizzle } from "@powersync/drizzle-driver";
+import { drizzleSchema } from '@/library/powersync/DrizzleSchema';
 
 const SupabaseContext = React.createContext<SupabaseConnector | null>(null);
 export const useSupabase = () => React.useContext(SupabaseContext);
@@ -18,6 +20,9 @@ export const db = new PowerSyncDatabase({
   }
 });
 
+
+export const drizzleDb = wrapPowerSyncWithDrizzle(db, { schema: drizzleSchema });
+
 export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
   const [connector] = React.useState(new SupabaseConnector());
   const [powerSync] = React.useState(db);

demos/react-supabase-todolist/src/components/widgets/TodoListsWidget.tsx

@@ -4,6 +4,13 @@ import { useNavigate } from 'react-router-dom';
 import { ListItemWidget } from './ListItemWidget';
 import { LISTS_TABLE, ListRecord, TODOS_TABLE } from '@/library/powersync/AppSchema';
 import { TODO_LISTS_ROUTE } from '@/app/router';
+import { drizzleDb } from '../providers/SystemProvider';
+import { lists } from '@/library/powersync/DrizzleSchema';
+import { useEffect, useState } from 'react';
+import { CompilableQuery } from '@powersync/web';
+import { Query, sql } from 'drizzle-orm';
+import { toCompilableQuery } from '@powersync/drizzle-driver';
+
 
 export type TodoListsWidgetProps = {
   selectedId?: string;
@@ -13,48 +20,28 @@ const description = (total: number, completed: number = 0) => {
   return `${total - completed} pending, ${completed} completed`;
 };
 
+
+
 export function TodoListsWidget(props: TodoListsWidgetProps) {
-  const powerSync = usePowerSync();
-  const navigate = useNavigate();
-
-  const { data: listRecords, isLoading } = useQuery<ListRecord & { total_tasks: number; completed_tasks: number }>(`
-      SELECT
-        ${LISTS_TABLE}.*, COUNT(${TODOS_TABLE}.id) AS total_tasks, SUM(CASE WHEN ${TODOS_TABLE}.completed = true THEN 1 ELSE 0 END) as completed_tasks
-      FROM
-        ${LISTS_TABLE}
-      LEFT JOIN ${TODOS_TABLE}
-        ON  ${LISTS_TABLE}.id = ${TODOS_TABLE}.list_id
-      GROUP BY
-        ${LISTS_TABLE}.id;
-      `);
-
-  const deleteList = async (id: string) => {
-    await powerSync.writeTransaction(async (tx) => {
-      // Delete associated todos
-      await tx.execute(`DELETE FROM ${TODOS_TABLE} WHERE list_id = ?`, [id]);
-      // Delete list record
-      await tx.execute(`DELETE FROM ${LISTS_TABLE} WHERE id = ?`, [id]);
-    });
-  };
+  const query = drizzleDb.select().from(lists);
+  // const query = drizzleDb.query.lists.findMany();
+
+
+  const { data: listRecords, isLoading } = useQuery(toCompilableQuery(query));
+
 
   if (isLoading) {
     return <div>Loading...</div>;
   }
 
   return (
-    <List dense={false}>
-      {listRecords.map((r) => (
-        <ListItemWidget
-          key={r.id}
-          title={r.name ?? ''}
-          description={description(r.total_tasks, r.completed_tasks)}
-          selected={r.id == props.selectedId}
-          onDelete={() => deleteList(r.id)}
-          onPress={() => {
-            navigate(TODO_LISTS_ROUTE + '/' + r.id);
-          }}
-        />
-      ))}
-    </List>
+    <div>
+      <List dense={false}>
+        {listRecords.map((r) => (
+          <div key={r.id}>{r.id}-{r.name}</div>
+        ))}
+      </List>
+    </div>
+
   );
 }

demos/react-supabase-todolist/src/library/powersync/DrizzleSchema.ts

@@ -0,0 +1,48 @@
+import { relations } from 'drizzle-orm';
+import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+
+export const lists = sqliteTable('lists', {
+  id: text('id').primaryKey().notNull(),
+  created_at: text('created_at'),
+  name: text('name').notNull(),
+  owner_id: text('owner_id')
+});
+
+export const todos = sqliteTable(
+  'todos',
+  {
+    id: text('id').primaryKey().notNull(),
+    list_id: text('list_id')
+      .notNull()
+      .references(() => lists.id),
+    created_at: text('created_at'),
+    completed_at: text('completed_at'),
+    description: text('description').notNull(),
+    created_by: text('created_by'),
+    completed_by: text('completed_by'),
+    completed: integer('completed')
+  },
+  (todos) => ({
+    listIdx: index('listIdx').on(todos.list_id)
+  })
+);
+
+// Define relations for 'lists' (one-to-many with 'todos')
+export const listsRelations = relations(lists, ({ many }) => ({
+  todos: many(todos)
+}));
+
+// Define relations for 'todos' (many-to-one with 'lists')
+const todosRelations = relations(todos, ({ one }) => ({
+  list: one(lists, {
+    fields: [todos.list_id],
+    references: [lists.id]
+  })
+}));
+
+export const drizzleSchema = {
+  lists,
+  todos,
+  listsRelations,
+  todosRelations
+};