Optimistic chat send with retry
sendApi(clientId, text) in the starter answers after 100 ms. It fails the first attempt of any message containing flaky, and it stores each clientId only once (it's idempotent).
When the form #composer is submitted with text in #msg: add the message immediately as <li className="msg" data-state="sending"> with the text in <span className="text">, clear the input, then call sendApi with a new client id ("c" + number is fine). Ignore empty messages.
On success set data-state="sent". On failure set data-state="failed" and show <button className="retry">Retry</button> inside that li. Retry sends again with the same client id (state goes back to sending, then sent).
What Check tests
- A sent message appears at once as
sendingand the input clears - It becomes
sentwhen the server answers - A failed send shows
failedand a Retry button - Retry goes back to
sending, thensent - The server stored each message exactly once
- Empty messages are ignored
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.