Refactor Request
Describe the problem
Dashboard widget components directly call fetch() inside useEffect hooks, leading to duplicated loading/error state logic, inconsistent error handling, and difficulty in testing.
Describe the solution you'd like
Extract API calls into reusable custom hooks:
useMetrics() — fetches /api/metricsuseStreak() — fetches /api/streakuseNotifications() — fetches /api/notificationsuseUserSettings() — fetches /api/user/settings
Hook structure
function useMetrics() {
const [data, setData] = useState<Metrics | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
// fetch logic...
return { data, loading, error, refetch };
}Implementation Details
- Create
src/hooks/ directory
- One file per hook
- Each hook handles loading, error, and data states consistently
- Hooks support manual refetch
- Update consuming components to use hooks
Acceptance Criteria
Refactor Request
Describe the problem
Dashboard widget components directly call
fetch()insideuseEffecthooks, leading to duplicated loading/error state logic, inconsistent error handling, and difficulty in testing.Describe the solution you'd like
Extract API calls into reusable custom hooks:
useMetrics()— fetches/api/metricsuseStreak()— fetches/api/streakuseNotifications()— fetches/api/notificationsuseUserSettings()— fetches/api/user/settingsHook structure
Implementation Details
src/hooks/directoryAcceptance Criteria
src/hooks/