Skip to content

refactor(settings): migrated setting to TSQ and refactor large components#738

Merged
CodeWithCJ merged 2 commits intoCodeWithCJ:mainfrom
Sim-sat:migrate-settings
Feb 25, 2026
Merged

refactor(settings): migrated setting to TSQ and refactor large components#738
CodeWithCJ merged 2 commits intoCodeWithCJ:mainfrom
Sim-sat:migrate-settings

Conversation

@Sim-sat
Copy link
Contributor

@Sim-sat Sim-sat commented Feb 24, 2026

Description

  • migration of whole settings directoriy to tanstack query
  • split up SparkyFitnessFrontend/src/pages/Settings/SettingsPage.tsx and moved code into seperate components
  • split up the provider logic into view and form
  • created api functions for every bare api call
  • added types for return values
  • added test for validation of providers
  • this should also fix the issues of stale data due to removed legacy window events
  • fixes [Bug]: The ability to hide Default Meals is missing from v0.16.4.5 #731

The amount of lines changed is quite high but I changed very little just moved the code to different files. We now have a organized Settings and Provider page (before they had 1700 lines)

components
- migration of whole settings directoriy to tanstack query
- split up SparkyFitnessFrontend/src/pages/Settings/SettingsPage.tsx and
  moved code into seperate components
- split up the provider logic into view and form
- created api functions for every bare api call
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @Sim-sat, I'm Gemini Code Assist1! 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 undertakes a significant refactoring of the application's settings functionality. The primary goal was to modernize data management by migrating all settings-related data fetching and state to Tanstack Query. This transition not only streamlines data handling but also modularizes the settings page into smaller, more focused components, improving code organization and future extensibility. The changes also address previous issues with stale data by replacing legacy event-based refreshes with Tanstack Query's efficient caching and invalidation strategies.

Highlights

  • Tanstack Query Migration: The entire settings directory has been migrated to use Tanstack Query for data fetching and state management, significantly improving data freshness and reducing boilerplate.
  • Component Refactoring: The monolithic SettingsPage.tsx component has been split into numerous smaller, more manageable components, enhancing modularity and maintainability.
  • Dedicated API Services: All bare API calls have been encapsulated into dedicated API service functions, centralizing API logic and improving type safety with new return value types.
  • New Query Keys: New query keys have been introduced for various settings and diary-related data, ensuring efficient caching and invalidation with Tanstack Query.
  • Stale Data Fixes: Issues with stale data, particularly due to removed legacy window events, have been addressed by leveraging Tanstack Query's robust caching and invalidation mechanisms.
  • New Settings Sections: New dedicated components for Account Security, API Settings, Developer Resources, Profile Information, Preference Settings, and Water Tracking Settings have been added.
Changelog
  • SparkyFitnessFrontend/src/api/Diary/waterIntakteService.ts
    • Added new API service for water intake management.
  • SparkyFitnessFrontend/src/api/Exercises/exerciseEntryService.ts
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/api/Foods/enhancedCustomFoodFormService.ts
    • Renamed file from src/services and updated internal import paths.
  • SparkyFitnessFrontend/src/api/Integrations/integrations.ts
    • Added Garmin login payload, provider data, response interfaces, and a new loginGarmin function.
  • SparkyFitnessFrontend/src/api/Reports/reportsService.ts
    • Renamed file from src/services and updated internal import paths.
  • SparkyFitnessFrontend/src/api/Settings/aiServiceSettingsService.ts
    • Renamed file from src/services and updated internal import paths.
  • SparkyFitnessFrontend/src/api/Settings/customCategoryService.ts
    • Renamed file from src/services, updated internal import paths, and removed logging parameters from functions.
  • SparkyFitnessFrontend/src/api/Settings/externalProviderService.ts
    • Added new API service for external data providers, including status fetching and integration handlers.
  • SparkyFitnessFrontend/src/api/Settings/familyAccessService.ts
    • Renamed file from src/services, updated internal import paths, and exported FamilyAccessPayload interface.
  • SparkyFitnessFrontend/src/api/Settings/nutrientPreferences.ts
    • Added new API service for updating and resetting nutrient display preferences.
  • SparkyFitnessFrontend/src/api/Settings/passkey.ts
    • Added new API service for managing passkeys.
  • SparkyFitnessFrontend/src/api/Settings/profileService.ts
    • Added new API service for fetching and updating user profile data and avatars.
  • SparkyFitnessFrontend/src/api/Settings/waterContainerService.ts
    • Renamed file from src/services and updated internal import paths.
  • SparkyFitnessFrontend/src/api/keys/diary.ts
    • Added waterIntakeKeys for Tanstack Query caching.
  • SparkyFitnessFrontend/src/api/keys/integrations.ts
    • Added new file with garminKeys for Tanstack Query caching.
  • SparkyFitnessFrontend/src/api/keys/settings.ts
    • Added new file with various query keys for settings-related data.
  • SparkyFitnessFrontend/src/components/DraggableChatbotButton.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/components/EnhancedCustomFoodForm.tsx
    • Updated import path for enhanced custom food form service.
  • SparkyFitnessFrontend/src/components/EnhancedFoodSearch.tsx
    • Updated import path for external provider service.
  • SparkyFitnessFrontend/src/components/GlobalSyncButton.tsx
    • Updated import path for external provider service and replaced useSyncAll with useSyncAllMutation.
  • SparkyFitnessFrontend/src/components/ai/GlobalOverrideBanner.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/components/ai/ServiceList.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/components/ai/ServiceListItem.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/components/ai/UserChatPreferences.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/components/ai/UserServiceListItem.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/contexts/PreferencesContext.tsx
    • Updated import path for water container service.
  • SparkyFitnessFrontend/src/contexts/WaterContainerContext.tsx
    • Refactored water container context to use Tanstack Query hooks for data management.
  • SparkyFitnessFrontend/src/hooks/AI/useAIServiceSettings.ts
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/hooks/AI/useGlobalAIServiceSettings.ts
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/hooks/Admin/useSettings.ts
    • Added authClient import and refetch session on successful settings update.
  • SparkyFitnessFrontend/src/hooks/Diary/useMealTypes.ts
    • Added new mutations for creating, updating, and deleting meal types.
  • SparkyFitnessFrontend/src/hooks/Diary/useWaterIntake.ts
    • Added new file with Tanstack Query hooks for water goal and intake management.
  • SparkyFitnessFrontend/src/hooks/Exercises/useExerciseSearch.ts
    • Updated import path for external provider service.
  • SparkyFitnessFrontend/src/hooks/Foods/useFoodVariants.ts
    • Updated import path for enhanced custom food form service.
  • SparkyFitnessFrontend/src/hooks/Integrations/useIntegrations.ts
    • Added new integration mutations for various services (Withings, Garmin, Fitbit, Polar, Strava, Hevy) and a Garmin status query hook.
  • SparkyFitnessFrontend/src/hooks/Integrations/useSyncAll.ts
    • Refactored useSyncAllMutation to use new integration service functions and improved error handling.
  • SparkyFitnessFrontend/src/hooks/Reports/useReports.ts
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/hooks/Settings/useAccountSecurity.ts
    • Added new file with Tanstack Query hooks for changing email and password.
  • SparkyFitnessFrontend/src/hooks/Settings/useApiKeys.ts
    • Added new file with Tanstack Query hooks for API key management.
  • SparkyFitnessFrontend/src/hooks/Settings/useCustomCategories.ts
    • Added new file with Tanstack Query hooks for custom categories.
  • SparkyFitnessFrontend/src/hooks/Settings/useExternalProviderSettings.ts
    • Added new file with Tanstack Query hooks for external provider settings.
  • SparkyFitnessFrontend/src/hooks/Settings/useFamilyAccess.ts
    • Added new file with Tanstack Query hooks for family access management.
  • SparkyFitnessFrontend/src/hooks/Settings/useNutrientPreferences.ts
    • Added new file with Tanstack Query hooks for nutrient display preferences.
  • SparkyFitnessFrontend/src/hooks/Settings/usePasskeys.ts
    • Added new file with Tanstack Query hooks for passkey management.
  • SparkyFitnessFrontend/src/hooks/Settings/useProfile.ts
    • Added new file with Tanstack Query hooks for profile data and avatar management.
  • SparkyFitnessFrontend/src/hooks/Settings/useWaterContainers.ts
    • Added new file with Tanstack Query hooks for water container management.
  • SparkyFitnessFrontend/src/pages/Admin/GlobalAISettings.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/pages/Chat/SparkyChat.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/pages/Chat/SparkyChatInterface.tsx
    • Updated import path for AI service settings.
  • SparkyFitnessFrontend/src/pages/Diary/DailyProgress.tsx
    • Removed an empty line in the component logic.
  • SparkyFitnessFrontend/src/pages/Diary/WaterIntake.tsx
    • Refactored water intake component to use new Tanstack Query hooks.
  • SparkyFitnessFrontend/src/pages/Exercises/ExerciseSearch.tsx
    • Updated import path for external provider service.
  • SparkyFitnessFrontend/src/pages/Reports/BodyBatteryCard.tsx
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/pages/Reports/CustomCategoryReport.tsx
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/pages/Reports/ExerciseReportsDashboard.tsx
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/pages/Reports/NutritionChartsGrid.tsx
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/pages/Reports/Reports.tsx
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/pages/Reports/ReportsTables.tsx
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/pages/Reports/RespirationCard.tsx
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/pages/Settings/AIServiceSettings.tsx
    • Updated import path for AI service settings and simplified loading state checks.
  • SparkyFitnessFrontend/src/pages/Settings/AccountSecurity.tsx
    • Added new component for account security settings, including email, password, MFA, and passkey management.
  • SparkyFitnessFrontend/src/pages/Settings/AddExternalProviderForm.tsx
    • Refactored to use new integration and external provider hooks, and extracted provider-specific fields into a separate component.
  • SparkyFitnessFrontend/src/pages/Settings/ApiSettings.tsx
    • Added new component for API key management, including generation, deletion, and cleanup of keys.
  • SparkyFitnessFrontend/src/pages/Settings/CalculationSettings.tsx
    • Removed direct React import, added useQueryClient and dailyProgressKeys import, and updated handlePreferencesUpdate to invalidate relevant queries.
  • SparkyFitnessFrontend/src/pages/Settings/CustomCategoryManager.tsx
    • Refactored custom category manager to use new Tanstack Query hooks.
  • SparkyFitnessFrontend/src/pages/Settings/DevloperResources.tsx
    • Added new component for developer resources, providing links to API documentation.
  • SparkyFitnessFrontend/src/pages/Settings/EditProviderForm.tsx
    • Added new component for editing external provider details.
  • SparkyFitnessFrontend/src/pages/Settings/ExternalProviderList.tsx
    • Refactored external provider list to use new hooks and ProviderCard component.
  • SparkyFitnessFrontend/src/pages/Settings/ExternalProviderSettings.tsx
    • Refactored external provider settings to use new hooks and modular components, removing extensive local state and direct API calls.
  • SparkyFitnessFrontend/src/pages/Settings/FamilyAccessManager.tsx
    • Refactored family access manager to use new Tanstack Query hooks.
  • SparkyFitnessFrontend/src/pages/Settings/GarminConnectSettings.tsx
    • Refactored Garmin Connect settings to use new integration hooks for login and MFA handling.
  • SparkyFitnessFrontend/src/pages/Settings/MFASettings.tsx
    • Removed a debug console log statement.
  • SparkyFitnessFrontend/src/pages/Settings/MealTypeManager.tsx
    • Refactored meal type manager to use new Tanstack Query hooks.
  • SparkyFitnessFrontend/src/pages/Settings/NutrientDisplaySettings.tsx
    • Refactored nutrient display settings to use new Tanstack Query hooks.
  • SparkyFitnessFrontend/src/pages/Settings/PasskeySettings.tsx
    • Refactored passkey settings to use new Tanstack Query hooks.
  • SparkyFitnessFrontend/src/pages/Settings/PreferenceSettings.tsx
    • Added new component for user preference settings.
  • SparkyFitnessFrontend/src/pages/Settings/ProfileFormContent.tsx
    • Added new component for the profile information form fields.
  • SparkyFitnessFrontend/src/pages/Settings/ProfileInformation.tsx
    • Added new component for profile information settings, including avatar upload and profile form.
  • SparkyFitnessFrontend/src/pages/Settings/ProviderCard.tsx
    • Added new component to display individual external provider details and actions.
  • SparkyFitnessFrontend/src/pages/Settings/ProviderSpecificFields.tsx
    • Added new component to render input fields specific to each external provider type.
  • SparkyFitnessFrontend/src/pages/Settings/SettingsPage.tsx
    • Refactored the main settings page to integrate new modular components for each settings section, significantly reducing its complexity.
  • SparkyFitnessFrontend/src/pages/Settings/WaterContainerManager.tsx
    • Refactored water container manager to use new Tanstack Query hooks.
  • SparkyFitnessFrontend/src/pages/Settings/WaterTrackingSettings.tsx
    • Added new component for water tracking settings.
  • SparkyFitnessFrontend/src/services/Chatbot/Chatbot_WaterHandler.ts
    • Updated import path for water container service.
  • SparkyFitnessFrontend/src/services/externalProviderService.ts
    • Removed file, its functionalities are now distributed among new API services and hooks.
  • SparkyFitnessFrontend/src/services/preferenceService.ts
    • Removed getUserPreferences export, as preference fetching is now handled by Tanstack Query hooks.
  • SparkyFitnessFrontend/src/services/sparkyChatService.ts
    • Updated import paths for Chatbot services and AI service settings.
  • SparkyFitnessFrontend/src/tests/components/AIServiceSettings.test.tsx
    • Updated mock path for AI service settings service.
  • SparkyFitnessFrontend/src/tests/services/aiServiceSettingsService.test.ts
    • Updated import path for AI service settings service.
  • SparkyFitnessFrontend/src/tests/services/validateProvider.test.ts
    • Added new test file for validateProvider utility function.
  • SparkyFitnessFrontend/src/utils/reportUtil.ts
    • Updated import path for reports service.
  • SparkyFitnessFrontend/src/utils/settings.ts
    • Added new file with utility functions for settings, including provider requirements, validation, and initial fetching.
Ignored Files
  • Ignored by pattern: .github/workflows/** (1)
    • .github/workflows/ci-tests.yml
Activity
  • The pull request description indicates that the changes should fix issues with stale data due to the removal of legacy window events, implying previous data consistency problems.
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.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This is an excellent and extensive refactoring. Migrating to TanStack Query and breaking down large components into smaller, more focused ones significantly improves the codebase's maintainability, testability, and overall structure. The new API service layer and custom hooks are well-designed abstractions. I've left a few comments on minor inconsistencies and areas for further improvement, but overall, this is a fantastic contribution.

@CodeWithCJ CodeWithCJ merged commit 6d49f63 into CodeWithCJ:main Feb 25, 2026
6 checks passed
@Sim-sat Sim-sat deleted the migrate-settings branch February 28, 2026 15:06
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.

[Bug]: The ability to hide Default Meals is missing from v0.16.4.5

2 participants