Protect unsaved document edits

Guard route changes and page exits while a document contains unsaved work.

MediumReact Navigation

50 min0% acceptance

Description

Build ProtectedDocumentEditor with an injected navigation adapter. Derive dirty state from saved and draft content, intercept application navigation, support confirm or stay decisions, install a before-unload warning only while dirty, and remove every guard after saving or unmounting.

Requirements

Export a ProtectedDocumentEditor component from src/App.tsx.
Derive dirty state by comparing the draft with the latest successfully saved value.
Invoke confirmLeave with the attempted destination for route requests made while dirty.
Do not invoke an attempt's proceed callback when confirmLeave resolves false.
Invoke exactly the pending attempt's proceed callback when confirmLeave resolves true.
Register a before-unload handler only while unsaved changes exist.
After a successful save, mark the draft clean and allow navigation without prompting.
Release route and before-unload subscriptions when no longer needed.

Blocked route

Input

Edit the document, request /dashboard, then decline confirmLeave

Expected output

The attempt's proceed callback is not invoked and the draft remains

Explanation

A rejected navigation must not discard local input.

Save removes warning

Input

Save the current draft, then request another route

Expected output

Navigation proceeds without a warning

Explanation

Successful saving establishes the new clean baseline.

Constraints

Keep only one pending route decision
A failed save must leave the editor dirty
Do not call browser navigation APIs directly

Hints

Hint 1

Treat the last saved value as data instead of maintaining a separate mutable dirty flag.

Hint 2

Store the pending destination until the user resolves the prompt.

Hint 3

Drive subscription setup from dirty state and always return the adapter cleanup.

Reactnavigation guardsbeforeunload