refactor(onboarding): Migrate onboarding services to Tanstack Query

[Sim-sat]

Description

This commit refactors the onboarding-related API calls and state management to utilize Tanstack Query. This is a step towards migrating the entire project to Tanstack Query for improved data fetching and caching. This follows the same pattern as the previous migration

Part of #657

[gemini-code-assist]

Summary of Changes

Hello @Sim-sat, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request continues the project's strategic migration towards Tanstack Query for data management, specifically focusing on the onboarding process. By refactoring existing onboarding services into dedicated Tanstack Query hooks, the change centralizes data fetching, mutation, and caching logic, leading to a more robust, maintainable, and performant application. This approach streamlines component interactions with the API and aligns with the broader goal of improving the application's data layer.

Highlights

• Tanstack Query Migration: Migrated all onboarding-related API calls and state management to use Tanstack Query, enhancing data fetching, caching, and synchronization capabilities.
• New Onboarding Hooks: Introduced dedicated Tanstack Query hooks (useOnboardingStatus, useSubmitOnboarding, useResetOnboarding) to encapsulate onboarding logic, promoting reusability and cleaner component code.
• Centralized Query Keys: Created onboardingKeys.ts to centralize and standardize query keys for onboarding data, improving cache management and invalidation.
• Simplified Component Logic: Refactored OnBoarding.tsx, Goals.tsx, and Index.tsx to consume the new Tanstack Query hooks, significantly reducing boilerplate for data fetching, mutation, and error/success handling.
• Toast Message Integration: Leveraged Tanstack Query's meta option within mutation hooks to handle success and error toast messages, removing direct toast calls from components.

Changelog

• SparkyFitnessFrontend/src/api/Onboarding/onboarding.ts
  • Renamed onboardingService.ts to onboarding.ts and moved it to the api/Onboarding directory.
  • Updated the import path for apiCall and exported the OnboardingData interface for broader use.
• SparkyFitnessFrontend/src/api/keys/onboarding.ts
  • Created a new file to define onboardingKeys object, providing standardized query keys for Tanstack Query operations related to onboarding status.
• SparkyFitnessFrontend/src/components/Onboarding/OnBoarding.tsx
  • Removed direct import of submitOnboardingData and toast.
  • Imported and utilized the useSubmitOnboarding hook for handling onboarding data submission.
  • Replaced manual try-catch blocks for submission with the mutateAsync function from the new hook, simplifying error and success handling.
• SparkyFitnessFrontend/src/hooks/Onboarding/useOnboarding.ts
  • Added a new file containing useOnboardingStatus, useSubmitOnboarding, and useResetOnboarding custom hooks.
  • These hooks encapsulate Tanstack Query logic for fetching onboarding status, submitting onboarding data, and resetting onboarding status.
  • Implemented onSuccess invalidation for relevant query keys and utilized the meta option for localized toast messages.
• SparkyFitnessFrontend/src/pages/Goals/Goals.tsx
  • Removed direct import of resetOnboardingStatus.
  • Imported and utilized the useResetOnboarding hook for resetting onboarding status.
  • Replaced the manual try-catch block for resetting onboarding status with the mutateAsync function from the new hook, simplifying logic and removing direct toast calls.
• SparkyFitnessFrontend/src/pages/Index.tsx
  • Removed the useEffect hook responsible for manual onboarding status checking.
  • Imported and utilized the useOnboardingStatus hook to fetch and manage onboarding status.
  • Refactored the component to use the data and isLoading states from the Tanstack Query hook, simplifying the component's loading and conditional rendering logic.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully refactors the onboarding API calls to use Tanstack Query, which is a great step for improving data fetching and state management. The new hooks for handling onboarding status, submission, and reset are well-structured. However, the refactoring has introduced a couple of issues where component loading states (isSubmitting, saving) are no longer correctly managed on API failure, potentially leaving the UI in a stuck state. I've added comments with suggestions to fix these. Additionally, I've provided minor suggestions to improve the implementation within the new Tanstack Query hooks.