51. Project: protecting the submit button

Project 3 — double-submit protection

A real problem: the user hits "Buy" three times in a row. Without protection — three requests, three charges. The fix is exhaustMap.

Why exhaustMap specifically

Let's compare the options:

mergeMap: every click goes out in parallel. Bad — duplicates.
switchMap: each new click cancels the previous one. Also bad — the user thinks the order went through, but it was cancelled.
concatMap: the clicks queue up and all run. Bad — the same duplicates, just sequentially.
exhaustMap: the first click starts, the rest are ignored. Exactly what we want.

Your task

In protectSubmit$, inside pipe, add exhaustMap(click => submitForm(click)).
Clicks 2 and 3 land inside the busy window — they're ignored. Click 4 arrives afterward and gets handled.

Deterministic check

This task's check runs in TestScheduler virtual time. If your solution is right, the console shows only Test Passed!. Don't add extra console.logs, or the check will fail.

Solution spoiler · click to reveal

const { exhaustMap } = Rx;

function protectSubmit$(clicks$, submitForm) {
  return clicks$.pipe(
    exhaustMap(click => submitForm(click))
  );
}

script.ts // TypeScript

CONSOLE · Console output

Hit Run to see the result...