healthyregions / spatial-access

3 stars 2 forks source link

#23: fix homepage caching issue #27

Closed pengyin-shan closed 3 weeks ago

pengyin-shan commented 1 month ago

This PR is for #23.

The useFileColumns.ts file has a useEffect function defined that somehow conflicts with the previous useEffect function I added on the home page. This conflict causes the homepage caching issues to return sometimes. Therefore, I moved the code to useFileColumns.ts and removed the savedJob function to prevent the saved file locations in local storage from distributing the workflow.

To make the user's path clearer, I also added a "Restart Process" button to reload the page (i.e., bring the job to its initial condition) if the user wants to restart the process. Previously, users could only click the refresh button in their web browser; now, they can use both methods.

How to Test

  1. Go to the home page and open the console to find the initial job status reflecting the initalJob data: Screenshot 2024-06-21 at 9 21 26 AM

  1. Follow through each option until you need to upload a resource file (or resource + population file, based on your selection). Choose a random csv file to upload, and you should see the "destinationFile" attribute being added to local storage: Screenshot 2024-06-21 at 9 21 49 AM

  1. Click the "Restart Process" button or refresh the page. You should see the local storage reset to the initialJob data (i.e., the destinationFile is deleted). By doing this, we eliminate the possibility that the system will assume there are existing destination files and thus disable the user from re-uploading them.
netlify[bot] commented 1 month ago

Deploy Preview for spatial-access ready!

Name Link
Latest commit 8b9e59011113eb19a7f8587774f761309c567de9
Latest deploy log https://app.netlify.com/sites/spatial-access/deploys/6675cacafb247d0008eda90c
Deploy Preview https://deploy-preview-27--spatial-access.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.

pengyin-shan commented 1 month ago

The new Restart Process button is a good addition. There are a couple of UX/UI-related things that I think would improve the workflow though: 1) Could you set the button to disabled until a change (any change) has been made on the form? Conceptually, it's a little confusing to be able to restart a process that you haven't actually started yet. 2) Could you unify this button with the Start Over button that appears at the end of the process? When I click that button, it does some refresh but doesn't set the scroll back at the top of the page, so I like the Restart Process button better, and I think it could replace the existing Start Over button.

To confirm, for 2) you meant to replace the Start Over button with this Restart Process Button right?

mradamcox commented 1 month ago

Yeah, unless the Start Over button is doing something more advanced, I didn't look into it too closely. Better way to think of it: Let's just have one button, not two. Seems like the Restart Process button would be sufficient.

pengyin-shan commented 1 month ago

@mradamcox Based on your request, here is the new workflow:

  1. The "Restart Process" button will NOT appear until the user finishes selecting a file. Before this step, the user can simply scroll up and change their selection without any issue. If the user wants to refresh the page, they can do so themselves and this will reset the job to the initial state.

  2. After the user selects a file, the "Restart Process" button will remain available until the end, allowing the user to restart and reselect the file.

  3. In the final step, the "Restart Process" and "Download" buttons will be displayed. The workflow now ensures that only the "Restart Process" button is responsible for resetting the job, with no other buttons duplicating this feature.

Please let me know if this looks better to you. Thanks!

mradamcox commented 3 weeks ago

Yes, looks good! Sorry for the delay in merging this!