Function TodoApp

examples/react/todo/src/components/TodoApp.tsx:19–237

({
  todos,
  configData,
  todoCollection,
  configCollection,
  title,
  configMutationFn,
}: TodoAppProps)

}

export function TodoApp({
  todos,
  configData,
  todoCollection,
  configCollection,
  title,
  configMutationFn,
}: TodoAppProps) {
  const [newTodo, setNewTodo] = useState(``)

  // Use paced mutations with debounce strategy for color picker if mutationFn provided
  // Waits for 2500ms of inactivity before persisting - only the final value is saved
  const mutateConfig = configMutationFn
    ? usePacedMutations({
        mutationFn: configMutationFn,
        strategy: debounceStrategy({ wait: 2500 }),
      })
    : undefined

  // Define a type-safe helper function to get config values
  const getConfigValue = (key: string): string | undefined => {
    for (const config of configData) {
      if (config.key === key) {
        return config.value
      }
    }
    return undefined
  }

  // Define a helper function to update config values
  const setConfigValue = (key: string, value: string): void => {
    if (mutateConfig) {
      // Use paced mutations for updates (optimistic + batched persistence)
      mutateConfig(() => {
        for (const config of configData) {
          if (config.key === key) {
            configCollection.update(config.id, (draft) => {
              draft.value = value
            })
            return
          }
        }

        // If the config doesn't exist yet, create it
        configCollection.insert({
          id: Math.round(Math.random() * 1000000),
          key,
          value,
          created_at: new Date(),
          updated_at: new Date(),
        })
      })
    } else {
      // Use naked collection calls (collection handlers will be invoked)
      for (const config of configData) {
        if (config.key === key) {
          configCollection.update(config.id, (draft) => {
            draft.value = value