Skip to content

Fe save resume - #56

Merged
natphua merged 4 commits into
mainfrom
FE-save-resume
Nov 11, 2026
Merged

natphua merged 4 commits into
mainfrom
FE-save-resume

Conversation

@luisagarciarramos

Copy link
Copy Markdown
Collaborator

Describe your changes

Worked with @RimBadaoui and

  • Implemented Save and Resume for volunteer applications.
  • Added localStorage helpers for saving, loading, and clearing draft IDs.
  • Restored saved answers and resumed at the first incomplete step.
  • Added loading, retry, and start-over.

Related Issue

Closes #44

Files changed

  • src/lib/draft-storage.ts: Added functions to save, retrieve, and clear draft IDs in localStorage.
  • src/lib/draft-storage.test.ts: Added unit tests for draft storage, including unavailable or blocked storage.
  • src/lib/application-api.ts: Added the ApplicationDraft type and getDraft() API function.
  • src/components/application/application-state.ts: Added functions to convert saved drafts into form state and identify the first incomplete step.
  • src/components/application/application-state.test.ts: Added tests for draft restoration and identifying the correct resume step.
  • src/components/application/ApplicationFormShell.tsx: Integrated draft loading, automatic resuming, error handling, and draft ID storage into the application.

How to test

  • Run npx jest src/components/application/application-state.test.ts src/lib/draft-storage.test.ts.

  • Open /apply, complete Step 1, and click Next. Check the draft ID is saved in localStorage.

  • Refresh and check the application resumes at the first incomplete step, with previous answers restored.

  • Click Back to verify the saved Personal Information fields are there.

  • Change the saved draft ID to nope, refresh, and check that the application starts fresh.

  • Select network error and verify the Try again and Start a new application buttons work.

Screenshots

Screenshot 2026-11-09 at 7 00 55 PM Screenshot 2026-11-09 at 7 00 58 PM Screenshot 2026-11-09 at 7 09 01 PM Screenshot 2026-11-09 at 7 11 27 PM Screenshot 2026-11-09 at 7 14 46 PM Screenshot 2026-11-09 at 7 15 43 PM Screenshot 2026-11-09 at 7 23 58 PM Screenshot 2026-11-09 at 7 25 01 PM Screenshot 2026-11-09 at 7 25 57 PM Screenshot 2026-11-09 at 7 30 39 PM Screenshot 2026-11-09 at 7 53 35 PM Screenshot 2026-11-09 at 7 56 28 PM

Estimated Hours Spent

3.5

Checklist before requesting a review

  • [x ] Satisfies all Deliverables
  • [ x] Tested thoroughly
  • [ x] No unused dependencies
  • [ x] Requested review from Natalie

@natphua natphua left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, amazing work guys! Thank you for the detailed PR - it really shows you did a lot of testing and were thorough with your work. There were a few nitpicks about style (comments having DONE, or forgetting to update file headers), but in general it looks great. Just keep in mind my feedback for future ticket implementations

});
});

// Lusia and Rim addition

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you update a file, usually your names + edited date should go in the file header

// DONE: in goNext, saveDraftId right after createApplicant succeeds
// TODO: while `resuming`, show only "Loading your saved application...". If `resumeError`, show it with two
// CommonButtons: "Try again" and "Start a new application" (altStyle). Otherwise the form, as it is today.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of leaving // DONE: ...., either remove the comment or remove any DONE/TODO heading. I know you probably had it while you were working (which was good), but before you make a PR, do a pass to ensure no headings are added and comments are consistent.

Comment thread src/lib/draft-storage.ts Outdated
/**
* draft-storage.ts
*
* <1-3 sentences: what this file does and why it exists.>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed file header description here 😢

@natphua
natphua merged commit d4a9d38 into main Nov 11, 2026
1 check passed
@natphua
natphua deleted the FE-save-resume branch November 11, 2026 14:21
@github-actions

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FE: Save and Resume

2 participants