Add todolist demo

Author: simolus3

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

@@ -58,7 +58,8 @@ const TodoEditSection = () => {
         created_at DESC,
         id
     `,
-    [listID]
+    [listID],
+    { streams: [{ name: 'todos', parameters: { list: listID } }] }
   );
 
   const [showPrompt, setShowPrompt] = React.useState(false);
@@ -96,11 +97,13 @@ const TodoEditSection = () => {
           <AddIcon />
         </S.FloatingActionButton>
         <Box>
-          <List dense={false}>
-            {todos.map((r) => (
-              <TodoItemWidget key={r.id} id={r.id} description={r.description} isComplete={r.completed == 1} />
-            ))}
-          </List>
+          {todos && (
+            <List dense={false}>
+              {todos.map((r) => (
+                <TodoItemWidget key={r.id} id={r.id} description={r.description} isComplete={r.completed == 1} />
+              ))}
+            </List>
+          )}
         </Box>
         {/* TODO use a dialog service in future, this is just a simple example app */}
         <Dialog

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

@@ -3,7 +3,13 @@ import { AppSchema, ListRecord, LISTS_TABLE, TODOS_TABLE } from '@/library/power
 import { SupabaseConnector } from '@/library/powersync/SupabaseConnector';
 import { CircularProgress } from '@mui/material';
 import { PowerSyncContext } from '@powersync/react';
-import { createBaseLogger, DifferentialWatchedQuery, LogLevel, PowerSyncDatabase } from '@powersync/web';
+import {
+  createBaseLogger,
+  DifferentialWatchedQuery,
+  LogLevel,
+  PowerSyncDatabase,
+  SyncClientImplementation
+} from '@powersync/web';
 import React, { Suspense } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
 
@@ -68,7 +74,7 @@ export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
     const l = connector.registerListener({
       initialized: () => {},
       sessionStarted: () => {
-        powerSync.connect(connector);
+        powerSync.connect(connector, { clientImplementation: SyncClientImplementation.RUST });
       }
     });
 

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

@@ -1,5 +1,5 @@
 import { List } from '@mui/material';
-import { useWatchedQuerySubscription } from '@powersync/react';
+import { usePowerSync, useStatus, useWatchedQuerySubscription } from '@powersync/react';
 import { useQueryStore } from '../providers/SystemProvider';
 import { ListItemWidget } from './ListItemWidget';
 
@@ -12,6 +12,8 @@ const description = (total: number, completed: number = 0) => {
 };
 
 export function TodoListsWidget(props: TodoListsWidgetProps) {
+  const db = usePowerSync();
+  const status = useStatus();
   const queries = useQueryStore();
   const { data: listRecords, isLoading } = useWatchedQuerySubscription(queries!.lists);
 
@@ -22,12 +24,22 @@ export function TodoListsWidget(props: TodoListsWidgetProps) {
   return (
     <List dense={false}>
       {listRecords.map((r) => {
+        const listStatus = status.forStream({ name: 'todos', parameters: { list: r.id } });
+        let listDescription = '';
+        if (listStatus == null || !listStatus.subscription.active) {
+          listDescription = 'Items in this list not loaded - open list for details.';
+        } else if (!listStatus.subscription.hasSynced) {
+          listDescription = 'Loading items in this list...';
+        } else {
+          listDescription = description(r.total_tasks, r.completed_tasks);
+        }
+
         return (
           <ListItemWidget
             key={r.id}
             id={r.id}
             title={r.name ?? ''}
-            description={description(r.total_tasks, r.completed_tasks)}
+            description={listDescription}
             selected={r.id == props.selectedId}
           />
         );