AfiS-Aktensystem/web/app/(app)/faelle/[caseNumber]/WatchToggle.tsx

'use client'

import { useState, useTransition } from 'react'
import { watchText } from '@/lib/i18n/shell'
import { toggleWatchAction } from '../actions'

/**
 * Akte beobachten.
 *
 * Sofortiges Umschalten, der Server bestätigt nur - misslingt es, springt der
 * Zustand zurück. Beobachten ist umkehrbar und harmlos, dafür braucht es
 * keinen Wartezustand. Siehe docs/09-performance-und-ux.md.
 */
export function WatchToggle({
  caseNumber,
  initial,
}: {
  caseNumber: string
  initial: boolean
}) {
  const [aktiv, setAktiv] = useState(initial)
  const [pending, startTransition] = useTransition()

  return (
    <button
      type="button"
      disabled={pending}
      title={watchText.hint}
      onClick={() =>
        startTransition(async () => {
          const vorher = aktiv
          setAktiv(!vorher)
          const ergebnis = await toggleWatchAction({ caseNumber })
          if (!ergebnis.ok) setAktiv(vorher)
          else setAktiv(ergebnis.watching)
        })
      }
      aria-pressed={aktiv}
      className="btn btn-sm"
    >
      {aktiv ? watchText.unwatch : watchText.watch}
    </button>
  )
}