null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

fix(settings): invalidate ['settings'] cache on save so tracker toggles apply 

Tier B moved the tracker's display settings onto a React Query cache
(staleTime 5m). SettingsPage saves via its own path and didn't touch that
cache, so toggling a region off (e.g. the Overdue Command Center) could leave
the tracker showing the stale value for up to 5 minutes. Invalidate the
['settings'] query after a successful save so returning to the tracker refetches
and the toggle takes effect immediately.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
null 2026-07-05 15:06:57 -05:00
parent 21651b3f67
commit 1d73c8f13e
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/pages/SettingsPage.tsx
View File

@ -1,5 +1,6 @@
import { useState, useEffect, useCallback, type ComponentType, type ReactNode } from 'react'; import { useState, useEffect, useCallback, type ComponentType, type ReactNode } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { AlertCircle, Moon, RefreshCw, Sun, Users } from 'lucide-react'; import { AlertCircle, Moon, RefreshCw, Sun, Users } from 'lucide-react';
import { api } from '@/api'; import { api } from '@/api';
@ -318,6 +319,8 @@ export default function SettingsPage() {
useEffect(() => { loadSettings(); }, [loadSettings]); useEffect(() => { loadSettings(); }, [loadSettings]);
const queryClient = useQueryClient();
const buildPayload = (s: SettingsState) => ({ const buildPayload = (s: SettingsState) => ({
currency: s.currency, currency: s.currency,
date_format: s.date_format, date_format: s.date_format,
@ -334,12 +337,16 @@ export default function SettingsPage() {
// Auto-save: every change persists on its own — no Save button. Toggles and // Auto-save: every change persists on its own — no Save button. Toggles and
// selects feel instant (short debounce); typed inputs get a longer one so we // selects feel instant (short debounce); typed inputs get a longer one so we
// don't save half-typed numbers. // don't save half-typed numbers. After a save, invalidate the ['settings']
// query so the tracker (which reads its display toggles from that cache) picks
// up the change instead of showing a stale value for up to its staleTime.
const { status: saveStatus, schedule } = useAutoSave( const { status: saveStatus, schedule } = useAutoSave(
(payload) => api.saveSettings(payload).catch((err) => { (payload) => api.saveSettings(payload)
toast.error(errMessage(err, 'Failed to save settings.')); .then((res) => { queryClient.invalidateQueries({ queryKey: ['settings'] }); return res; })
throw err; .catch((err) => {
}), toast.error(errMessage(err, 'Failed to save settings.'));
throw err;
}),
); );
const set = (k: string, v: unknown, delay?: number) => setSettings((p) => { const set = (k: string, v: unknown, delay?: number) => setSettings((p) => {