diff --git a/examples/folio-web/src/pages/AddTransaction.tsx b/examples/folio-web/src/pages/AddTransaction.tsx index de612e5..30f0d6a 100644 --- a/examples/folio-web/src/pages/AddTransaction.tsx +++ b/examples/folio-web/src/pages/AddTransaction.tsx @@ -9,6 +9,8 @@ import { parseCents } from '../format' import { back, navigate } from '../router' import { BackButton, Header, Screen } from '../components/Screen' +const SAVED_NOTICE_MILLIS = 400 + export function AddTransactionPage(props: { accountId: string onCreated: () => void @@ -19,6 +21,7 @@ export function AddTransactionPage(props: { const [note, setNote] = useState('') const [err, setErr] = useState(null) const [busy, setBusy] = useState(false) + const [saved, setSaved] = useState(false) useEffect(() => { let alive = true @@ -30,6 +33,15 @@ export function AddTransactionPage(props: { } }, [props.accountId]) + useEffect(() => { + if (!saved) return + const timer = window.setTimeout( + () => back(`/accounts/${props.accountId}`), + SAVED_NOTICE_MILLIS, + ) + return () => window.clearTimeout(timer) + }, [saved, props.accountId]) + async function onSubmit(e: FormEvent) { e.preventDefault() if (busy) return @@ -51,7 +63,7 @@ export function AddTransactionPage(props: { note, }) props.onCreated() - back(`/accounts/${props.accountId}`) + setSaved(true) } catch (e) { setErr(e instanceof Error ? e.message : 'Could not save transaction') } finally { @@ -85,6 +97,13 @@ export function AddTransactionPage(props: { } const submitDisabled = busy || amount.trim() === '' + const submitLabel = busy + ? 'Saving…' + : saved + ? 'Saved' + : type === 'credit' + ? 'Add credit' + : 'Add debit' return ( - {busy ? 'Saving…' : type === 'credit' ? 'Add credit' : 'Add debit'} + {submitLabel} } >