İyimser Arayüz — Ne Zaman Hemen 'Tamam' Denir, Ne Zaman Beklenir?

1
import { startTransition, useOptimistic, useState } from 'react';
2
import { setFavorite } from '../api';
3

4
interface FavoriteButtonProps {
5
  payeeId: string;
6
  initial: boolean;
7
}
8

9
export function FavoriteButton({ payeeId, initial }: FavoriteButtonProps) {
10
  const [saved, setSaved] = useState(initial);
11
  const [shown, showOptimistic] = useOptimistic(saved);
12
  const [note, setNote] = useState<string | null>(null);
13

14
  const toggle = () =>
15
    startTransition(async () => {
16
      const next = !saved;
17
      showOptimistic(next);   // on screen at once; reverts by itself if we never set `saved`
18
      try {
19
        await setFavorite(payeeId, next);
20
        setSaved(next);
21
        setNote(null);
22
      } catch {
23
        setNote('Kaydedilemedi, eski hâline döndü.');
24
      }
25
    });
26

27
  return (
28
    <>
29
      <button type="button" aria-pressed={shown} onClick={toggle}>
30
        {shown ? '★ Favori' : '☆ Favoriye ekle'}
31
      </button>
32
      {note && <p role="status">{note}</p>}
33
    </>
34
  );
35
}

1
import { useRef, useState, type FormEvent } from 'react';
2
import { sendTransfer, type TransferResult } from '../api';
3

4
export function TransferForm() {
5
  const [pending, setPending] = useState(false);
6
  const [result, setResult] = useState<TransferResult | null>(null);
7
  // One key per attempt: a double click or a retry cannot move the money twice.
8
  const key = useRef(crypto.randomUUID());
9

10
  async function submit(event: FormEvent<HTMLFormElement>) {
11
    event.preventDefault();
12
    setPending(true);
13
    const form = new FormData(event.currentTarget);
14
    setResult(await sendTransfer({ to: String(form.get('to')), amount: String(form.get('amount')) }, key.current));
15
    setPending(false);
16
  }
17

18
  return (
19
    <form onSubmit={submit}>
20
      <input name="to" aria-label="Alıcı IBAN" required />
21
      <input name="amount" aria-label="Tutar" inputMode="decimal" required />
22
      <button type="submit" disabled={pending}>{pending ? 'Gönderiliyor…' : 'Gönder'}</button>
23
      {result && <p role="status">{result.ok ? `Gönderildi: ${result.reference}` : result.message}</p>}
24
    </form>
25
  );
26
}

1
export type TransferResult = { ok: true; reference: string } | { ok: false; message: string };
2

3
export async function setFavorite(payeeId: string, favorite: boolean): Promise<void> {
4
  const response = await fetch(`/api/payees/${payeeId}/favorite`, { method: favorite ? 'PUT' : 'DELETE' });
5
  if (!response.ok) throw new Error(`favorite: ${response.status}`);
6
}
7

8
export async function sendTransfer(body: { to: string; amount: string }, idempotencyKey: string): Promise<TransferResult> {
9
  const response = await fetch('/api/transfers', {
10
    method: 'POST',
11
    headers: { 'Content-Type': 'application/json', 'Idempotency-Key': idempotencyKey },
12
    body: JSON.stringify(body),
13
  });
14
  if (response.ok) return { ok: true, reference: (await response.json()).reference };
15
  return { ok: false, message: response.status === 422 ? 'Bakiye yetersiz. Para gönderilmedi.' : 'Havale şu an yapılamadı. Para gönderilmedi.' };
16
}

1
import { render, screen } from '@testing-library/react';
2
import userEvent from '@testing-library/user-event';
3
import { vi } from 'vitest';
4
import { FavoriteButton } from './FavoriteButton';
5
import * as api from '../api';
6

7
it('reverts the star and says so when the server refuses', async () => {
8
  vi.spyOn(api, 'setFavorite').mockRejectedValue(new Error('500'));
9
  render(<FavoriteButton payeeId="p1" initial={false} />);
10

11
  await userEvent.click(screen.getByRole('button'));
12

13
  expect(await screen.findByRole('status')).toHaveTextContent('eski hâline döndü');
14
  expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
15
});