Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: preserve list state between form navigation #425

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

Birkbjo
Copy link
Member

@Birkbjo Birkbjo commented Oct 21, 2024

There's been feedback from testers that it can be distruptive to loose the list state when navigating between the form and list. This PR implements enhancements to preserve the list state (eg. the query-params used to store list-filters and pagination).

Implementation details

  • I really didn't want to keep a different store (eg. context or zustan) and keep that in sync with query-params. So I decided to try out location.state.
  • Query-params are stored as the verbatim serialized search-params string in location.state when navigating from a link that navigates to the form. This is done by passing state to navigate or as a prop to react-routers Link-component.
  • This way we keep all logic of useQueryParams the same - and we reapply it by appending the search-params to links that link back - by setting search: location.state.search. The same way is done if we use useNavigate or useLinkClickHandler.
  • One "drawback" with this approach is that we have to ensure that all links back and forth apply the state correctly. I've tried to "abstract" this in useLocationSearchState - but it's still up to the Link and navigation components to pass the states correctly.

Copy link

netlify bot commented Oct 21, 2024

Deploy Preview for dhis2-maintenance-app-beta ready!

Name Link
🔨 Latest commit 88077f2
🔍 Latest deploy log https://app.netlify.com/sites/dhis2-maintenance-app-beta/deploys/67166beb00f3660008510512
😎 Deploy Preview https://deploy-preview-425--dhis2-maintenance-app-beta.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@codecov-commenter
Copy link

Codecov Report

Attention: Patch coverage is 55.88235% with 15 lines in your changes missing coverage. Please review.

Project coverage is 60.78%. Comparing base (a8dfc9d) to head (6eef4f2).
Report is 14 commits behind head on master.

Files with missing lines Patch % Lines
src/lib/routeUtils/useLocationSearchState.ts 65.21% 8 Missing ⚠️
...nts/sectionList/listActions/SectionListActions.tsx 50.00% 3 Missing ⚠️
src/components/form/DefaultFormContents.tsx 0.00% 2 Missing ⚠️
src/lib/form/useOnSubmit.ts 0.00% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master     #425      +/-   ##
==========================================
- Coverage   62.05%   60.78%   -1.28%     
==========================================
  Files         192      207      +15     
  Lines        2991     3302     +311     
  Branches      669      733      +64     
==========================================
+ Hits         1856     2007     +151     
- Misses       1132     1287     +155     
- Partials        3        8       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@tomzemp tomzemp self-requested a review October 21, 2024 13:26
@Birkbjo Birkbjo force-pushed the feat/persist-list-filter-state branch from 795c70b to 88077f2 Compare October 21, 2024 14:57
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.

2 participants