- Rewrote frontend from JSX to TypeScript (TSX) - AppLayout with MUI AppBar, ThemeProvider, CssBaseline - HomePage at / with dashboard metrics and recent updates - MetricsPanel with 4 metric cards (total, interviews, offers, rejection rate) - UpdateCard for each job update with status chip - LoadingSkeleton during data fetch - Error Alert on API failure - Create New Job Application button navigating to /applications/new - Vite proxy for /api → backend on :8000 - useDashboardData custom hook with concurrent fetch Closes #2
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import type { DashboardData, JobUpdate, DashboardMetrics } from "../types/index.ts";
|
|
|
|
interface UseDashboardDataResult {
|
|
data: DashboardData | null;
|
|
loading: boolean;
|
|
error: string | null;
|
|
refetch: () => void;
|
|
}
|
|
|
|
const API_BASE = "/api";
|
|
|
|
async function fetchJson<T>(url: string): Promise<T> {
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
return response.json() as Promise<T>;
|
|
}
|
|
|
|
export function useDashboardData(): UseDashboardDataResult {
|
|
const [data, setData] = useState<DashboardData | null>(null);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const [updates, metrics] = await Promise.all([
|
|
fetchJson<JobUpdate[]>(`${API_BASE}/updates/latest/`),
|
|
fetchJson<DashboardMetrics>(`${API_BASE}/updates/metrics/`),
|
|
]);
|
|
setData({ updates, metrics });
|
|
} catch (err: unknown) {
|
|
const message =
|
|
err instanceof Error ? err.message : "An unknown error occurred";
|
|
setError(message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
return { data, loading, error, refetch: fetchData };
|
|
} |