bfeea743f7
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Convert tasks, calendar, and dashboard pages from synchronous mock data to async loading pattern with useState/useEffect. Each page now shows a loading state via child components while data loads, and displays a PDA-friendly amber-styled message with a retry button if loading fails. This prepares these pages for real API integration by establishing the async data flow pattern. Child components (TaskList, Calendar, dashboard widgets) already handled isLoading props — now the pages actually use them. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import type { ReactElement } from "react";
|
|
import { RecentTasksWidget } from "@/components/dashboard/RecentTasksWidget";
|
|
import { UpcomingEventsWidget } from "@/components/dashboard/UpcomingEventsWidget";
|
|
import { QuickCaptureWidget } from "@/components/dashboard/QuickCaptureWidget";
|
|
import { DomainOverviewWidget } from "@/components/dashboard/DomainOverviewWidget";
|
|
import { mockTasks } from "@/lib/api/tasks";
|
|
import { mockEvents } from "@/lib/api/events";
|
|
import type { Task, Event } from "@mosaic/shared";
|
|
|
|
export default function DashboardPage(): ReactElement {
|
|
const [tasks, setTasks] = useState<Task[]>([]);
|
|
const [events, setEvents] = useState<Event[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
void loadDashboardData();
|
|
}, []);
|
|
|
|
async function loadDashboardData(): Promise<void> {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// TODO: Replace with real API calls when backend is ready
|
|
// const [tasksData, eventsData] = await Promise.all([fetchTasks(), fetchEvents()]);
|
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
|
setTasks(mockTasks);
|
|
setEvents(mockEvents);
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof Error
|
|
? err.message
|
|
: "We had trouble loading your dashboard. Please try again when you're ready."
|
|
);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="container mx-auto px-4 py-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
|
<p className="text-gray-600 mt-2">Welcome back! Here's your overview</p>
|
|
</div>
|
|
|
|
{error !== null ? (
|
|
<div className="rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
|
|
<p className="text-amber-800">{error}</p>
|
|
<button
|
|
onClick={() => void loadDashboardData()}
|
|
className="mt-4 rounded-md bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700 transition-colors"
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Top row: Domain Overview and Quick Capture */}
|
|
<div className="lg:col-span-2">
|
|
<DomainOverviewWidget tasks={tasks} isLoading={isLoading} />
|
|
</div>
|
|
|
|
<RecentTasksWidget tasks={tasks} isLoading={isLoading} />
|
|
<UpcomingEventsWidget events={events} isLoading={isLoading} />
|
|
|
|
<div className="lg:col-span-2">
|
|
<QuickCaptureWidget />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|