minor ui cleanup

Author: stevensJourney

demos/react-convex-todolist/convex/lists.ts

@@ -30,7 +30,8 @@ export const create = mutation({
  * Update a list given a partial list record data.
  */
 export const update = mutation({
-  args: schema.tables.todos.validator,
+  // The uuid is required, every other field is an optional patch
+  args: v.object({ uuid: v.string() }).extend(schema.tables.lists.validator.partial().fields),
   handler: async ({ db }, { uuid, ...fields }) => {
     const matching = await findListByUuid({ db, uuid });
     if (!matching) {

demos/react-convex-todolist/convex/schema.ts

@@ -18,15 +18,15 @@ export default defineSchema({
       })
     ),
 
-    // External stable key from PowerSync writes.
-    uuid: v.string(),
-    // Legacy fields kept for backwards compatibility with existing data.
-    owner: v.optional(v.string()),
-    archived: v.optional(v.number())
+    /**
+     * Due to ID mapping, we cant require a strict Convex `id` ID field - which
+     * correlates to a matching todo record here.
+     * This value will be the local-first UUID.
+     */
+    uuid: v.string()
   }).index('by_uuid', ['uuid']),
 
   todos: defineTable({
-    // Basic fields
     /**
      * Due to ID mapping, we cant require a strict Convex `id` ID field - which
      * correlates to a matching todo record here.
@@ -40,59 +40,10 @@ export default defineSchema({
     /**
      * Local-first version of list_id
      */
-    list_uuid: v.string(),
-
-    // All Convex datatypes for stress testing
-    // String types
-    title: v.optional(v.string()),
-    notes: v.optional(v.string()),
-    category: v.optional(v.string()),
-
-    // Number types
-    priority: v.optional(v.number()),
-    estimated_hours: v.optional(v.float64()),
-    progress_percentage: v.optional(v.float64()),
-
-    // Boolean types
-    is_urgent: v.optional(v.boolean()),
-    is_private: v.optional(v.boolean()),
-    has_attachments: v.optional(v.boolean()),
-
-    // Array types
-    tags: v.optional(v.array(v.string())),
-    dependencies: v.optional(v.array(v.id('todos'))),
-    assigned_users: v.optional(v.array(v.string())),
-
-    // Object types
-    metadata: v.optional(v.record(v.string(), v.any())),
-    custom_fields: v.optional(v.record(v.string(), v.union(v.string(), v.number(), v.boolean()))),
-
-    // ID references
-    parent_task_id: v.optional(v.id('todos')),
-    project_id: v.optional(v.id('lists')),
-
-    // Union types
-    status: v.optional(
-      v.union(v.literal('pending'), v.literal('in_progress'), v.literal('completed'), v.literal('cancelled'))
-    ),
-    difficulty: v.optional(v.union(v.literal('easy'), v.literal('medium'), v.literal('hard'))),
-
-    // Null handling
-    archived_at: v.optional(v.union(v.null(), v.string())),
-    deleted_by: v.optional(v.union(v.null(), v.string())),
-
-    // Legacy fields kept for backwards compatibility
-    completed: v.optional(v.number()),
-    created_by: v.optional(v.union(v.null(), v.string())),
-    completed_by: v.optional(v.union(v.null(), v.string())),
-    photo_id: v.optional(v.union(v.null(), v.string())),
-    owner_id: v.optional(v.string())
+    list_uuid: v.string()
   })
     .index('by_uuid', ['uuid'])
-    .index('by_list_id', ['list_id'])
-    .index('by_status', ['status'])
-    .index('by_priority', ['priority'])
-    .index('by_project', ['project_id']),
+    .index('by_list_id', ['list_id']),
 
   powersync_checkpoints: defineTable({
     last_updated: v.float64()

demos/react-convex-todolist/convex/todos.ts

@@ -43,7 +43,8 @@ export const create = mutation({
  * Update a todo record given a partial update.
  */
 export const update = mutation({
-  args: schema.tables.todos.validator,
+  // The uuid is required, every other field is an optional patch
+  args: v.object({ uuid: v.string() }).extend(schema.tables.todos.validator.partial().fields),
   handler: async ({ db }, { uuid, ...fields }) => {
     let matching = await findTodoByUuid({ db, uuid });
     if (!matching) {

demos/react-convex-todolist/src/components/widgets/OutlinedComposer.tsx

@@ -4,10 +4,12 @@ import { alpha } from '@mui/material/styles';
 import type { SxProps, Theme } from '@mui/material/styles';
 import React from 'react';
 
+export type OutlinedComposerSubmitSource = 'enter' | 'button' | 'submit';
+
 export type OutlinedComposerProps = {
   value: string;
   onChange: (value: string) => void;
-  onSubmit: () => void | Promise<void>;
+  onSubmit: (source?: OutlinedComposerSubmitSource) => void | Promise<void>;
   placeholder: string;
   inputAriaLabel: string;
   submitAriaLabel: string;
@@ -35,7 +37,7 @@ export function OutlinedComposer(props: OutlinedComposerProps) {
 
   const handleSubmit = (event?: React.FormEvent) => {
     event?.preventDefault();
-    void onSubmit();
+    void onSubmit('submit');
   };
 
   return (
@@ -58,11 +60,11 @@ export function OutlinedComposer(props: OutlinedComposerProps) {
           onKeyDown: (e) => {
             if (multiline && e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();
-              void onSubmit();
+              void onSubmit('enter');
             }
             if (!multiline && e.key === 'Enter') {
               e.preventDefault();
-              void onSubmit();
+              void onSubmit('enter');
             }
           }
         }}
@@ -103,9 +105,10 @@ export function OutlinedComposer(props: OutlinedComposerProps) {
         })}
       />
       <IconButton
-        type="submit"
+        type="button"
         color="secondary"
         aria-label={submitAriaLabel}
+        onClick={() => void onSubmit('button')}
         sx={(theme) => ({
           alignSelf: 'stretch',
           flexShrink: 0,

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

@@ -6,7 +6,7 @@ import { usePowerSync, useQuery } from '@powersync/react';
 import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { ListItemWidget } from './ListItemWidget';
-import { OutlinedComposer } from './OutlinedComposer';
+import { OutlinedComposer, OutlinedComposerSubmitSource } from './OutlinedComposer';
 
 export type TodoListsWidgetProps = {
   selectedId?: string;
@@ -98,7 +98,7 @@ export function TodoListsWidget(props: TodoListsWidgetProps) {
     });
   };
 
-  const createNewList = async () => {
+  const createNewList = async (source?: OutlinedComposerSubmitSource) => {
     const name = newListName.trim();
     if (!name) {
       setNewListName('');
@@ -118,7 +118,9 @@ export function TodoListsWidget(props: TodoListsWidgetProps) {
       throw new Error('Could not create list');
     }
     setNewListName('');
-    navigate(`${TODO_LISTS_ROUTE}/${created.id}`);
+    if (source === 'button' || source === 'submit') {
+      navigate(`${TODO_LISTS_ROUTE}/${created.id}`);
+    }
   };
 
   return (