refactor use cases

apps/website/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import {
@@ -24,8 +24,7 @@ import {
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 
-import { useServices } from '@/lib/services/ServiceProvider';
-import { DashboardOverviewViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
+import { useDashboardOverview } from '@/hooks/useDashboardService';
 
 
 // Helper functions
@@ -80,26 +79,7 @@ function getGreeting(): string {
 import { DashboardFeedItemSummaryViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
 
 export default function DashboardPage() {
-    const { dashboardService } = useServices();
-    const [dashboardData, setDashboardData] = useState<DashboardOverviewViewModel | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-      const fetchDashboardData = async () => {
-        try {
-          const data = await dashboardService.getDashboardOverview();
-          setDashboardData(data);
-        } catch (err) {
-          console.error('Failed to fetch dashboard data:', err);
-          setError('Failed to load dashboard data');
-        } finally {
-          setIsLoading(false);
-        }
-      };
-
-      fetchDashboardData();
-    }, [dashboardService]);
+    const { data: dashboardData, isLoading, error } = useDashboardOverview();
 
    if (isLoading) {
      return (
@@ -112,7 +92,7 @@ export default function DashboardPage() {
    if (error || !dashboardData) {
      return (
        <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-         <div className="text-red-400">{error || 'Failed to load dashboard'}</div>
+         <div className="text-red-400">Failed to load dashboard</div>
        </main>
      );
    }