refactor: Full dashboard migration to React Query

BREAKING CHANGE: Dashboard now uses useDashboardData hook instead of
manual useState/useEffect data fetching.

Changes:
- Removed legacy useState declarations for stats, posts, activities, usage
- Removed 6 loader functions (loadDashboardData, loadStats, loadPostHistory,
  loadUserSettings, loadGitHubActivity, loadUsage, loadTemplates)
- Integrated useDashboardData hook with user-scoped cache keys
- Replaced loadStats/loadPostHistory calls with refetchStats/refetchPosts
- Auto-populate context from firstActivityContext
- Updated useDashboardData.ts with correct type imports

Result: ~120 lines of legacy code removed, automatic caching, background
refetching, and proper cache invalidation after post actions.

npm run build: PASSED

Author: cliff-de-tech

web/src/hooks/useDashboardData.ts

@@ -7,9 +7,11 @@
  * - Parallel data fetching with Promise.all behavior
  * - Type-safe response handling
  */
-import { useQuery, useQueries } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useAuth } from '@clerk/nextjs';
 import axios from 'axios';
+import type { GitHubActivity, Template, PostContext } from '@/types/dashboard';
+import type { Post } from '@/components/dashboard/PostHistory';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
 
@@ -40,35 +42,6 @@ export interface UsageData {
     resets_at: string | null;
 }
 
-export interface Post {
-    id: string | number;
-    post_content: string;
-    post_type?: string;
-    context?: Record<string, unknown>;
-    status?: string;
-    created_at: number;
-    published_at?: number;
-}
-
-export interface Template {
-    id: string;
-    name: string;
-    description: string;
-    icon: string;
-    context?: Record<string, unknown>;
-}
-
-export interface GitHubActivity {
-    id: string;
-    title: string;
-    description: string;
-    type: string;
-    timestamp: string;
-    repo?: string;
-    url?: string;
-    context: Record<string, unknown>;
-}
-
 // ============================================================================
 // FETCH FUNCTIONS
 // ============================================================================
@@ -96,6 +69,7 @@ async function fetchUsage(userId: string, getToken: () => Promise<string | null>
         params: { timezone },
         headers: { Authorization: `Bearer ${token}` }
     });
+    // Handle both { usage: {...} } and direct response formats
     return response.data?.usage || response.data || null;
 }
 
@@ -177,7 +151,7 @@ export function useDashboardData({ userId, enabled = true }: UseDashboardDataOpt
     });
 
     // Computed values
-    const isLoading = statsQuery.isLoading || postsQuery.isLoading || usageQuery.isLoading;
+    const isLoading = statsQuery.isLoading || postsQuery.isLoading || usageQuery.isLoading || settingsQuery.isLoading;
     const isError = statsQuery.isError || postsQuery.isError || usageQuery.isError;
 
     // Default stats
@@ -192,14 +166,21 @@ export function useDashboardData({ userId, enabled = true }: UseDashboardDataOpt
         draft_posts: 0
     };
 
+    // Get first activity context for auto-selection
+    const activities = githubQuery.data || [];
+    const firstActivityContext = activities.length > 0 && activities[0].context
+        ? activities[0].context as PostContext
+        : null;
+
     return {
         // Data
         stats: statsQuery.data || defaultStats,
         posts: postsQuery.data || [],
         usage: usageQuery.data || null,
         templates: templatesQuery.data || [],
-        githubActivities: githubQuery.data || [],
+        githubActivities: activities,
         githubUsername,
+        firstActivityContext,
 
         // Loading states
         isLoading,

web/src/pages/dashboard.tsx

@@ -57,16 +57,26 @@ export default function Dashboard() {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
-  // ========== REACT QUERY DATA FETCHING (AVAILABLE) ==========
-  // The useDashboardData hook is imported and ready for use.
-  // Current implementation still uses legacy useState pattern for stability.
-  // To migrate, replace the useState declarations below with:
-  // const { stats, posts: postHistory, usage, templates, githubActivities, ... } = useDashboardData({ userId, enabled: isAuthenticated });
-
-  // Usage tracking for free tier
-  const [usage, setUsage] = useState<UsageData | null>(null);
-
-  // State
+  // ========== REACT QUERY DATA FETCHING ==========
+  // User-scoped queries with automatic caching and background refetching
+  const {
+    stats,
+    posts: postHistory,
+    usage,
+    templates,
+    githubActivities,
+    githubUsername,
+    firstActivityContext,
+    isLoading: loadingData,
+    refetchStats,
+    refetchPosts,
+    refetchAll,
+  } = useDashboardData({ userId, enabled: isAuthenticated && !!userId });
+
+  // Alias for backwards compatibility with existing JSX
+  const usageData = usage;
+
+  // State for post generation
   const [context, setContext] = useState<PostContext>({
     type: 'push',
     commits: 3,
@@ -78,36 +88,15 @@ export default function Dashboard() {
   const [loading, setLoading] = useState(false);
   const [status, setStatus] = useState('');
 
-  // Data
-  const [githubUsername, setGithubUsername] = useState('');
-  const [githubActivities, setGithubActivities] = useState<GitHubActivity[]>([]);
-  const [postHistory, setPostHistory] = useState<Post[]>([]);
-  const [templates, setTemplates] = useState<Template[]>([]);
-  const [stats, setStats] = useState({
-    posts_generated: 0,
-    credits_remaining: 50,
-    posts_published: 0,
-    posts_this_month: 0,
-    posts_this_week: 0,
-    posts_last_week: 0,
-    growth_percentage: 0,
-    draft_posts: 0
-  });
-  const [usageData, setUsageData] = useState<{
-    tier: string;
-    posts_today: number;
-    posts_limit: number;
-    posts_remaining: number;
-    scheduled_count: number;
-    scheduled_limit: number;
-    scheduled_remaining: number;
-    resets_in_seconds: number;
-    resets_at: string | null;
-  } | null>(null);
-  const [loadingData, setLoadingData] = useState(true);
-
   // Computed: is daily limit reached?
-  const isLimitReached = usageData?.posts_remaining === 0;
+  const isLimitReached = usage?.posts_remaining === 0;
+
+  // Auto-populate context from first GitHub activity
+  useEffect(() => {
+    if (firstActivityContext && context.repo === 'my-project') {
+      setContext(firstActivityContext);
+    }
+  }, [firstActivityContext]);
 
 
   // Modals
@@ -162,8 +151,6 @@ export default function Dashboard() {
       console.log('🧪 DEV TEST MODE: Bypassing auth');
       setIsAuthenticated(true);
       setIsLoading(false);
-      setGithubUsername('test-user'); // Mock GitHub username
-      loadDashboardData(testUserId);
       return;
     }
 
@@ -190,7 +177,6 @@ export default function Dashboard() {
 
       if (linkedinUrn || authVerified) {
         setIsAuthenticated(true);
-        loadDashboardData(uid);
         setIsLoading(false);
         return;
       }
@@ -203,7 +189,6 @@ export default function Dashboard() {
 
       if (response.data.access_token || response.data.authenticated) {
         setIsAuthenticated(true);
-        loadDashboardData(uid);
       } else {
         // User hasn't completed onboarding - redirect them
         setIsAuthenticated(false);
@@ -215,7 +200,6 @@ export default function Dashboard() {
       const linkedinUrn = localStorage.getItem('linkedin_user_urn');
       if (linkedinUrn) {
         setIsAuthenticated(true);
-        loadDashboardData(uid);
       } else {
         // Redirect to onboarding for incomplete setup
         setIsAuthenticated(false);
@@ -226,113 +210,6 @@ export default function Dashboard() {
     }
   };
 
-  const loadDashboardData = async (uid: string) => {
-    setLoadingData(true);
-    try {
-      await Promise.all([
-        loadUserSettings(uid),
-        loadStats(uid),
-        loadPostHistory(uid),
-        loadTemplates(),
-        loadUsage(uid)
-      ]);
-    } finally {
-      setLoadingData(false);
-    }
-  };
-
-  const loadUsage = async (uid: string) => {
-    try {
-      // Get user's timezone for accurate reset time
-      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      const token = await getToken();
-      const response = await axios.get(`${API_BASE}/api/usage/${uid}`, {
-        params: { timezone },
-        headers: { Authorization: `Bearer ${token}` }
-      });
-      if (response.data?.success && response.data?.usage) {
-        setUsage(response.data.usage);
-      }
-      // Also set usageData for limit tracking
-      if (response.data) {
-        setUsageData(response.data);
-      }
-    } catch (error) {
-      console.error('Error loading usage:', error);
-    }
-  };
-
-
-  useEffect(() => {
-    if (githubUsername && isAuthenticated) {
-      loadGitHubActivity(githubUsername);
-    }
-  }, [githubUsername, isAuthenticated]);
-
-  const loadUserSettings = async (uid: string) => {
-    try {
-      const token = await getToken();
-      const response = await axios.get(`${API_BASE}/api/settings/${uid}`, {
-        headers: { Authorization: `Bearer ${token}` }
-      });
-      if (response.data && response.data.github_username) {
-        setGithubUsername(response.data.github_username);
-      }
-    } catch (error) {
-      console.log('No settings found');
-    }
-  };
-
-  const loadGitHubActivity = async (username: string) => {
-    try {
-      const response = await axios.get(`${API_BASE}/api/github/activity/${username}`);
-      const activities = response.data.activities || [];
-      setGithubActivities(activities);
-
-      // Auto-select the first activity to populate the Post Context card
-      // This ensures the user sees real data immediately instead of placeholders
-      if (activities.length > 0 && activities[0].context) {
-        setContext(activities[0].context as PostContext);
-      }
-    } catch (error) {
-      // Don't show toast on load, just log
-      console.error('Error loading GitHub activity:', error);
-    }
-  };
-
-  const loadPostHistory = async (uid: string) => {
-    try {
-      const token = await getToken();
-      const response = await axios.get(`${API_BASE}/api/posts/${uid}?limit=10`, {
-        headers: { Authorization: `Bearer ${token}` }
-      });
-      setPostHistory(response.data.posts || []);
-    } catch (error) {
-      console.error('Error loading post history:', error);
-    }
-  };
-
-  const loadTemplates = async () => {
-    try {
-      const response = await axios.get(`${API_BASE}/api/templates`);
-      setTemplates(response.data.templates || []);
-    } catch (error) {
-      console.error('Error loading templates:', error);
-    }
-  };
-
-  const loadStats = async (uid: string) => {
-    try {
-      const token = await getToken();
-      const response = await axios.get(`${API_BASE}/api/stats/${uid}`, {
-        headers: { Authorization: `Bearer ${token}` }
-      });
-      setStats(prev => ({ ...prev, ...response.data }));
-    } catch (error) {
-      console.error('Error loading stats:', error);
-    }
-  };
-
   const handleGeneratePreview = async () => {
     setLoading(true);
     setStatus('');
@@ -349,8 +226,8 @@ export default function Dashboard() {
       await savePost(result.post, 'draft');
 
       // Refresh stats to update "Generated Posts" card immediately
-      await loadStats(userId);
-      await loadPostHistory(userId);
+      await refetchStats();
+      await refetchPosts();
     } catch (error: unknown) {
       showToast.dismiss(toastId);
       const message = error instanceof Error ? error.message : 'An error occurred';
@@ -372,8 +249,8 @@ export default function Dashboard() {
       }, {
         headers: { Authorization: `Bearer ${token}` }
       });
-      loadPostHistory(userId);
-      loadStats(userId);
+      refetchPosts();
+      refetchStats();
     } catch (error) {
       showToast.error('Failed to save post');
       console.error('Error saving post:', error);
@@ -407,8 +284,8 @@ export default function Dashboard() {
           }
 
           // Refresh stats to update "Published" card immediately
-          await loadStats(userId);
-          await loadPostHistory(userId);
+          await refetchStats();
+          await refetchPosts();
         }
       }
     } catch (error: unknown) {