Function TodoList

examples/electron/offline-first/src/components/TodoList.tsx:12–193

({ collection, executor }: TodoListProps)

}

export function TodoList({ collection, executor }: TodoListProps) {
  const [inputText, setInputText] = useState('')
  const [isOnline, setIsOnline] = useState(navigator.onLine)
  const [pendingCount, setPendingCount] = useState(0)
  const [error, setError] = useState<string | null>(null)
  const [actions] = useState(() => createTodoActions(executor))

  // Monitor network status
  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true)
      executor.notifyOnline()
    }
    const handleOffline = () => setIsOnline(false)

    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)
    return () => {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [executor])

  // Poll pending mutation count
  useEffect(() => {
    const interval = setInterval(() => {
      setPendingCount(executor.getPendingCount())
    }, 100)
    return () => clearInterval(interval)
  }, [executor])

  // Query all todos sorted by creation date
  const { data: todos = [], isLoading } = useLiveQuery((query) =>
    query
      .from({ todo: collection })
      .orderBy(({ todo }) => todo.createdAt, 'desc'),
  )

  const handleAddTodo = useCallback(() => {
    const text = inputText.trim()
    if (!text) return
    try {
      setError(null)
      actions.addTodo(text)
      setInputText('')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to add todo')
    }
  }, [inputText, actions])

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') handleAddTodo()
    },
    [handleAddTodo],
  )

  if (isLoading) {