@@ -10,7 +10,7 @@ import { cn } from '@todo-starter/utils';
1010import type { Todo } from '@todo-starter/utils' ;
1111
1212const editTodoSchema = z . object ( {
13- text : z . string ( ) . min ( 1 , 'Todo text is required' ) . trim ( ) ,
13+ text : z . string ( ) . min ( 1 , 'Todo text is required' ) . trim ( )
1414} ) ;
1515
1616type EditTodoFormData = z . infer < typeof editTodoSchema > ;
@@ -29,13 +29,13 @@ export function TodoItem({ todo, onToggle, onDelete, onUpdate }: TodoItemProps)
2929 resolver : zodResolver ( editTodoSchema ) ,
3030 defaultValues : { text : todo . text } ,
3131 submitHandlers : {
32- onValid : ( data ) => {
32+ onValid : data => {
3333 if ( data . text !== todo . text ) {
3434 onUpdate ( todo . id , data . text ) ;
3535 }
3636 setIsEditing ( false ) ;
37- } ,
38- } ,
37+ }
38+ }
3939 } ) ;
4040
4141 const handleCancel = ( ) => {
@@ -50,21 +50,13 @@ export function TodoItem({ todo, onToggle, onDelete, onUpdate }: TodoItemProps)
5050
5151 return (
5252 < div className = "flex items-center gap-3 p-4 border rounded-lg bg-card" >
53- < Checkbox
54- checked = { todo . completed }
55- onCheckedChange = { ( ) => onToggle ( todo . id ) }
56- className = "flex-shrink-0"
57- />
58-
53+ < Checkbox checked = { todo . completed } onCheckedChange = { ( ) => onToggle ( todo . id ) } className = "flex-shrink-0" />
54+
5955 { isEditing ? (
6056 < RemixFormProvider { ...methods } >
6157 < form onSubmit = { methods . handleSubmit } className = "flex-1 flex items-center gap-2" >
6258 < div className = "flex-1" >
63- < TextField
64- name = "text"
65- className = "w-full"
66- autoFocus
67- />
59+ < TextField name = "text" className = "w-full" autoFocus />
6860 </ div >
6961 < Button size = "icon" variant = "ghost" type = "submit" >
7062 < Check className = "h-4 w-4" />
@@ -73,25 +65,15 @@ export function TodoItem({ todo, onToggle, onDelete, onUpdate }: TodoItemProps)
7365 < X className = "h-4 w-4" />
7466 </ Button >
7567 </ form >
76- < FormError />
68+ < FormError name = "_form" />
7769 </ RemixFormProvider >
7870 ) : (
7971 < >
80- < span
81- className = { cn (
82- 'flex-1 text-left' ,
83- todo . completed && 'line-through text-muted-foreground'
84- ) }
85- >
72+ < span className = { cn ( 'flex-1 text-left' , todo . completed && 'line-through text-muted-foreground' ) } >
8673 { todo . text }
8774 </ span >
8875 < div className = "flex items-center gap-1" >
89- < Button
90- size = "icon"
91- variant = "ghost"
92- onClick = { handleEdit }
93- className = "h-8 w-8"
94- >
76+ < Button size = "icon" variant = "ghost" onClick = { handleEdit } className = "h-8 w-8" >
9577 < Edit2 className = "h-4 w-4" />
9678 </ Button >
9779 < Button
0 commit comments