Refactor task handling to align with updated API; change task identifiers and update data structure in components

Author: hotlong

examples/msw-react-crud/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@objectstack/client": "workspace:*",
     "@objectstack/driver-memory": "workspace:*",
+    "@objectstack/example-todo": "workspace:*",
     "@objectstack/plugin-msw": "^0.3.3",
     "@objectstack/runtime": "^0.3.3",
     "@objectstack/spec": "workspace:*",

examples/msw-react-crud/src/components/TaskForm.tsx

@@ -28,7 +28,7 @@ export function TaskForm({ client, editingTask, onSuccess, onCancel }: TaskFormP
     if (editingTask) {
       setSubject(editingTask.subject);
       setPriority(editingTask.priority);
-      setIsCompleted(editingTask.isCompleted);
+      setIsCompleted(editingTask.is_completed);
     } else {
       resetForm();
     }
@@ -55,20 +55,20 @@ export function TaskForm({ client, editingTask, onSuccess, onCancel }: TaskFormP
     try {
       if (editingTask) {
         // UPDATE operation using ObjectStack Client
-        await client.data.update('task', editingTask.id, {
+        await client.data.update('todo_task', editingTask.id, {
           subject: subject.trim(),
           priority,
-          isCompleted
+          is_completed: isCompleted
         });
       } else {
         // CREATE operation using ObjectStack Client
         const taskData: CreateTaskInput = {
           subject: subject.trim(),
           priority,
-          isCompleted
+          is_completed: isCompleted
         };
 
-        await client.data.create('task', taskData);
+        await client.data.create('todo_task', taskData);
       }
 
       resetForm();

examples/msw-react-crud/src/components/TaskItem.tsx

@@ -18,11 +18,11 @@ export function TaskItem({ task, onEdit, onDelete, onToggleComplete }: TaskItemP
   const priorityClass = `priority-${task.priority}`;
 
   return (
-    <div className={`task-item ${task.isCompleted ? 'completed' : ''}`}>
+    <div className={`task-item ${task.is_completed ? 'completed' : ''}`}>
       <div className="task-content">
         <input
           type="checkbox"
-          checked={task.isCompleted}
+          checked={task.is_completed}
           onChange={onToggleComplete}
           className="task-checkbox"
         />
@@ -33,7 +33,7 @@ export function TaskItem({ task, onEdit, onDelete, onToggleComplete }: TaskItemP
               Priority: {priorityLabel} ({task.priority})
             </span>
             <span className="task-date">
-              Created: {new Date(task.createdAt).toLocaleDateString()}
+              Created: {task.created_at ? new Date(task.created_at).toLocaleDateString() : 'N/A'}
             </span>
           </div>
         </div>

examples/msw-react-crud/src/components/TaskList.tsx

@@ -31,9 +31,9 @@ export function TaskList({ client, onEdit, refreshTrigger }: TaskListProps) {
       setError(null);
 
       // Use ObjectStack Client to fetch tasks
-      const result = await client.data.find('task', {
+      const result = await client.data.find('todo_task', {
         top: 100,
-        sort: ['priority', '-createdAt']
+        sort: ['priority', '-created_at']
       });
 
       setTasks(result.value as Task[]);
@@ -48,7 +48,7 @@ export function TaskList({ client, onEdit, refreshTrigger }: TaskListProps) {
   async function handleDelete(id: string) {
     try {
       // Use ObjectStack Client to delete task
-      await client.data.delete('task', id);
+      await client.data.delete('todo_task', id);
 
       // Refresh the list
       await loadTasks();
@@ -60,8 +60,8 @@ export function TaskList({ client, onEdit, refreshTrigger }: TaskListProps) {
   async function handleToggleComplete(task: Task) {
     try {
       // Use ObjectStack Client to update task
-      await client.data.update('task', task.id, {
-        isCompleted: !task.isCompleted
+      await client.data.update('todo_task', task.id, {
+        is_completed: !task.is_completed
       });
 
       // Refresh the list

examples/msw-react-crud/src/mocks/browser.ts

@@ -8,7 +8,8 @@
 import { ObjectStackKernel } from '@objectstack/runtime';
 import { InMemoryDriver } from '@objectstack/driver-memory';
 import { MSWPlugin } from '@objectstack/plugin-msw';
-import appConfig from '../../objectstack.config';
+// import appConfig from '../../objectstack.config';
+import todoConfig from '@objectstack/example-todo/objectstack.config';
 
 let kernel: ObjectStackKernel | null = null;
 
@@ -19,9 +20,12 @@ export async function startMockServer() {
 
   const driver = new InMemoryDriver();
 
+  // Define Seed Data using the Dataset Protocol
+  // We use the data defined in the Todo App config
+  
   kernel = new ObjectStackKernel([
-    // App Config
-    appConfig,
+    // Todo App Config (contains objects and data)
+    todoConfig,
 
     // In-Memory Database (runs in browser)
     driver,
@@ -36,50 +40,6 @@ export async function startMockServer() {
 
   await kernel.start();
 
-  // Seed Data: Use the driver directly
-  if (driver) {
-    const tasks = [
-      { 
-        id: '1',
-        subject: 'Complete MSW integration example', 
-        priority: 1, 
-        isCompleted: false, 
-        createdAt: new Date().toISOString() 
-      },
-      { 
-        id: '2',
-        subject: 'Test CRUD operations with React', 
-        priority: 2, 
-        isCompleted: false, 
-        createdAt: new Date().toISOString() 
-      },
-      { 
-        id: '3',
-        subject: 'Write documentation', 
-        priority: 3, 
-        isCompleted: true, 
-        createdAt: new Date().toISOString() 
-      }
-    ];
-
-    // Ensure schema exists (Driver internal API)
-    if (driver.syncSchema) {
-        await driver.syncSchema('task', {});
-    }
-
-    // Insert Data
-    if (driver.create) {
-        for (const task of tasks) {
-            try {
-               await driver.create('task', task);
-            } catch (e) {
-                // Ignore key conflict if seeded
-            }
-        }
-        console.log('[MSW] Seeded initial data.');
-    }
-  }
-
   return kernel;
 }
 

examples/msw-react-crud/src/types.ts

@@ -1,22 +1,24 @@
 /**
- * Task type definition
+ * Task type definition (todo_task)
  */
 export interface Task {
-  id: string;
+  _id: string; // Internal ID
+  id: string; // External ID usually, but here we might get _id or id depending on driver
   subject: string;
   priority: number;
-  isCompleted: boolean;
-  createdAt: string;
+  is_completed: boolean;
+  due_date?: string;
+  created_at?: string;
 }
 
 export interface CreateTaskInput {
   subject: string;
   priority?: number;
-  isCompleted?: boolean;
+  is_completed?: boolean;
 }
 
 export interface UpdateTaskInput {
   subject?: string;
   priority?: number;
-  isCompleted?: boolean;
+  is_completed?: boolean;
 }