#213 - feat(feedback): Reduce Frontend API calls

[eo2000]

Summary

This PR reduces frontend API calls by caching them using react-query.

Changes Made

• Added react-query Integration
• Optimized API calls in SettingsPanel and AvailableDatasets:
  - Implemented useQuery to fetch and cache data on component mount, optimizing API calls by setting a 5-minute staleTime and a 10-minute cacheTime.
  - Added useMutation to handle data updates and directly sync the cache using setQueryData, ensuring immediate UI updates and reducing unnecessary refetching.

Testing Instructions

1. Open the app and wait for the initial getConfig request (in Network tab on inspect).
2. Click the Settings button/Language Button (in Settings Panel) or Name/Date filters in Available Datasets 3-5 times within 5 minutes.
3. Check the Network tab for getConfig requests—only one should occur on mount.

Video Demo

Setting Panel API calls before react-query

SettingsNoRQ.mov

Setting Panel API calls with react-query

SettingsWithRQ.mov

AvailableDatasets API calls before react-query

AvailDatasetsNoRQ.mov

AvailableDatasets API calls with react-query

AvailDatasetsRQ.mov

Additional Notes

I ran into some issues while implementing the react-query caching in the Footer and MapMetaData components. Since we aim to complete coding ASAP, I decided to leave those out for now. However, there are still opportunities for further optimizations to reduce API calls using react-query.

[eo2000]

This is a draft pull request capturing work in progress during Release 3. It is not fully ready for merge, but is being documented here for transparency and potential future continuation.
As part of the capstone handoff, we are unassigning ourselves from this pull request.

Next steps for this PR:

• Fix tests for AvailableDatasets
• Use similar approach done in SettingsPanel and AvailableDatasets to reduce the API calls for the other frontend components