Form Gönderimi — Bir Tıkla İki Havale Nasıl Olur?

1
export function useTransferSubmit(send: (body: TransferBody, key: string) => Promise<TransferResult>) {
2
  // One key per submission: created lazily, reused by every retry, renewed after success.
3
  const keyRef = useRef<string | null>(null);
4
  const pendingRef = useRef(false);
5
  const [pending, setPending] = useState(false);
6

7
  async function submit(body: TransferBody): Promise<TransferResult | undefined> {
8
    if (pendingRef.current) return undefined;     // a second click while the first is in flight
9
    pendingRef.current = true;
10
    setPending(true);
11
    keyRef.current ??= crypto.randomUUID();
12
    try {
13
      const result = await send(body, keyRef.current);
14
      keyRef.current = null;                      // the next transfer is a new submission
15
      return result;
16
    } finally {
17
      pendingRef.current = false;
18
      setPending(false);
19
    }
20
  }
21

22
  return { submit, pending };
23
}

1
export function TransferForm({ send }: { send: SendTransfer }) {
2
  const { submit, pending } = useTransferSubmit(send);
3

4
  return (
5
    <form
6
      onSubmit={(event) => {
7
        event.preventDefault();
8
        void submit(readForm(event.currentTarget));
9
      }}
10
    >
11
      {/* fields … */}
12
      <button type="submit" disabled={pending} aria-busy={pending}>
13
        {pending ? 'Gönderiliyor…' : 'Gönder'}
14
      </button>
15
    </form>
16
  );
17
}

1
// Retries reuse the same Idempotency-Key, so the server books the transfer at most once.
2
export async function sendTransfer(body: TransferBody, key: string, attempts = 3): Promise<TransferResult> {
3
  for (let attempt = 1; ; attempt += 1) {
4
    try {
5
      const response = await fetch('/api/transfers', {
6
        method: 'POST',
7
        headers: { 'Content-Type': 'application/json', 'Idempotency-Key': key },
8
        body: JSON.stringify(body),
9
        signal: AbortSignal.timeout(8_000),
10
      });
11
      if (!response.ok) throw new TransferError(response.status);
12
      return (await response.json()) as TransferResult;
13
    } catch (error) {
14
      if (attempt >= attempts || error instanceof TransferError) throw error;
15
    }
16
  }
17
}

1
it('sends one request for a fast double click', async () => {
2
  const send = vi.fn(() => new Promise<TransferResult>(() => {}));   // never resolves
3
  render(<TransferForm send={send} />);
4

5
  const button = screen.getByRole('button', { name: 'Gönder' });
6
  await userEvent.dblClick(button);
7

8
  expect(send).toHaveBeenCalledTimes(1);
9
});