| 1 | 'use client'; |
| 2 | |
| 3 | import {startTransition, useOptimistic} from 'react'; |
| 4 | import {deleteTodo, setTodoComplete, type Todo as ITodo} from './actions'; |
| 5 | |
| 6 | export function TodoItem({ |
| 7 | todo, |
| 8 | isSelected, |
| 9 | }: { |
| 10 | todo: ITodo; |
| 11 | isSelected: boolean; |
| 12 | }) { |
| 13 | let [isOptimisticComplete, setOptimisticComplete] = useOptimistic( |
| 14 | todo.isComplete, |
| 15 | ); |
| 16 | |
| 17 | return ( |
| 18 | <li data-selected={isSelected || undefined}> |
| 19 | <input |
| 20 | type="checkbox" |
| 21 | checked={isOptimisticComplete} |
| 22 | onChange={e => { |
| 23 | startTransition(async () => { |
| 24 | setOptimisticComplete(e.target.checked); |
| 25 | await setTodoComplete(todo.id, e.target.checked); |
| 26 | }); |
| 27 | }} |
| 28 | /> |
| 29 | <a |
| 30 | href={`/todos/${todo.id}`} |
| 31 | aria-current={isSelected ? 'page' : undefined}> |
| 32 | {todo.title} |
| 33 | </a> |
| 34 | <button onClick={() => deleteTodo(todo.id)}>x</button> |
| 35 | </li> |
| 36 | ); |
| 37 | } |