Implement ‘Leave’ functionality on CSV Pages’ Unsaved Warning Component

[aduques]

Is your feature request related to a problem? Please describe.

This feature request is related to the unsaved warning component implementation done in Issue #1191. Issue #1191 involves implementing the unsaved warning component on the CSV Readings and CSV Meters pages, but the functionality is not complete. The functionality of the unsaved warning component is complete on the other Edit/Create pages, as they are designed differently than the CSV pages (create/edit pages being modals). Therefore, the functionality could not be simply carried over to the CSV pages.

When clicking on the Unsaved Warning Component’s ‘Leave’ button, instead of rerouting the user to the page that they attempted to go to before being stopped by the unsaved warning, the warning is closed, and the user has to attempt to go to the page that they were previously attempting to go to.

Describe the solution you'd like

Instead of having the user needing to perform the action again (make changes -> attempt to go to another page -> unsaved warning pop up -> press ‘Leave’ -> closes out of unsaved warning -> attempt to go to another page -> successfully went to different page), the user should be redirected to the desired page upon pressing ‘Leave.’

Describe alternatives you've considered

useNavigator() was considered to store the URL path of the attempted page. When the user presses ‘Leave,’ the saved URL path is supposed to be fetched, and that is where the user will be rerouted immediately.

In other words, pressing ‘Leave’ is supposed to go to the page of the saved URL path.

Additional context

Previous discussions on attempted solutions to this issue can be found on Issue #1191 and Pull Request #1504. See the commit history of #1504, for commented-out attempts of using useNavigator() as a possible solution.

[huss]

@aduques I assigned you this issue since I think you wanted to try it. Let me know if you don't want this.

[aduques]

After familiarizing myself further with the useBlocker() documentation, it seems that this issue can be solved relatively quickly. My previous attempts at using useNavigate() were going in the right direction, as useBlocker() and useNavigate() work well together. However, the reason it was not working was because of the way that I was changing the blocker.state.

This code in ReadingsCSVUploadComponent.tsx (also found in other related files worked on), seems to be solely responsible for updating the blocker state.
const blocker = useBlocker(hasUnsavedChanges);

Across the files that I have worked on, I have mistakenly used 'blocker.state = 'unblocked'' to try and update the blocker state. However, I should've been using blocker.proceed() and blocker.reset() to properly handle the blocked actions. This mistake did not affect the functionality of the unsaved warning, but I thought I should go and update all related files.

I initially tried implementing the useNavigate() using the incorrect line of code, which is why I did not see results. Therefore, in addition to adding in the 'Leave' functionality, I will also go back and update the other files that I have incorrectly added 'blocker.state = 'unblocked'.'

In other words, in this issue, I am aiming to add 'Leave' functionality and update/remove redundant code.

Related documentation: https://reactrouter.com/api/hooks/useBlocker

[huss]

@aduques Thanks for figuring this out and updating us on what is going on. Let me know if you need anything and I look forward to adding this improvement to OED.

[aduques]

After familiarizing myself further with the useBlocker() documentation, it seems that this issue can be solved relatively quickly. My previous attempts at using useNavigate() were going in the right direction, as useBlocker() and useNavigate() work well together. However, the reason it was not working was because of the way that I was changing the blocker.state.

This code in ReadingsCSVUploadComponent.tsx (also found in other related files worked on), seems to be solely responsible for updating the blocker state. const blocker = useBlocker(hasUnsavedChanges);

Across the files that I have worked on, I have mistakenly used 'blocker.state = 'unblocked'' to try and update the blocker state. However, I should've been using blocker.proceed() and blocker.reset() to properly handle the blocked actions. This mistake did not affect the functionality of the unsaved warning, but I thought I should go and update all related files.

I initially tried implementing the useNavigate() using the incorrect line of code, which is why I did not see results. Therefore, in addition to adding in the 'Leave' functionality, I will also go back and update the other files that I have incorrectly added 'blocker.state = 'unblocked'.'

In other words, in this issue, I am aiming to add 'Leave' functionality and update/remove redundant code.

Related documentation: https://reactrouter.com/api/hooks/useBlocker

I was incorrect about blocker.state = 'unblocked' being used across multiple files. Actually, this line of code was only used on the two CSV pages. With that no longer being an issue, I can make a pull request that contains the updated code for the 'Leave' functionality soon.

Also, I've noticed that the Users page (CreateUserModalComponent.tsx and EditUnitModalComponent.tsx) also could make use of unsaved warnings. Should I go ahead and include that in the upcoming pull request?

[huss]

I think it would be nice to make all the modals warn about unsaved changes so doing these would be good. Maybe you meant edit user not edit unit?

[aduques]

I will work on the User pages as well before submitting the pull request. Yes, I meant edit user. I didn't realize the typo.