feat(frontend): add dashboard and race calendar views
Implement dashboard metrics and split race lists with BEM-styled cards using the typed races API. Made-with: Cursor
This commit is contained in:
Anton
@@ -1,8 +1,167 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import type { Race } from "../api";
|
||||
import { ApiError, getRaces } from "../api";
|
||||
import {
|
||||
formatDistance,
|
||||
formatRaceDate,
|
||||
getRaceCountdownLabel,
|
||||
parseFinishTimeToSeconds,
|
||||
splitRacesByDate,
|
||||
} from "../lib";
|
||||
|
||||
function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof ApiError) {
|
||||
return error.message;
|
||||
}
|
||||
return "Не удалось загрузить данные dashboard.";
|
||||
}
|
||||
|
||||
export function DashboardPage(): JSX.Element {
|
||||
const [races, setRaces] = useState<Race[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
async function loadDashboardData(): Promise<void> {
|
||||
try {
|
||||
const items = await getRaces();
|
||||
if (!isMounted) {
|
||||
return;
|
||||
}
|
||||
setRaces(items);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void loadDashboardData();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const dashboardMetrics = useMemo(() => {
|
||||
const { upcoming, past } = splitRacesByDate(races);
|
||||
const completed = races.filter((race) => race.status === "completed");
|
||||
|
||||
const nextRace = upcoming[0] ?? null;
|
||||
const lastResult = past.find((race) => race.status === "completed") ?? null;
|
||||
|
||||
let personalRecord: Race | null = null;
|
||||
let personalRecordSeconds = Number.POSITIVE_INFINITY;
|
||||
|
||||
for (const race of completed) {
|
||||
const finishSeconds = parseFinishTimeToSeconds(race.finishTime);
|
||||
if (!finishSeconds) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const candidate = finishSeconds / race.distanceKm;
|
||||
if (candidate < personalRecordSeconds) {
|
||||
personalRecordSeconds = candidate;
|
||||
personalRecord = race;
|
||||
}
|
||||
}
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const seasonRaces = races.filter((race) => new Date(`${race.date}T00:00:00`).getFullYear() === currentYear);
|
||||
const seasonCompleted = seasonRaces.filter((race) => race.status === "completed");
|
||||
|
||||
return {
|
||||
nextRace,
|
||||
lastResult,
|
||||
personalRecord,
|
||||
seasonTotal: seasonRaces.length,
|
||||
seasonCompletedCount: seasonCompleted.length,
|
||||
};
|
||||
}, [races]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="page page--dashboard" aria-busy="true">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<p className="page__subtitle">Загружаем ваши старты...</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (errorMessage) {
|
||||
return (
|
||||
<section className="page page--dashboard" role="alert">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<p className="page__subtitle page__subtitle--error">{errorMessage}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="page page--dashboard">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<p className="page__subtitle">Overview cards and quick actions will be added in the next task.</p>
|
||||
<p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
|
||||
|
||||
<div className="dashboard-grid" aria-label="Ключевые метрики">
|
||||
<article className="dashboard-card">
|
||||
<h2 className="dashboard-card__title">Ближайший старт</h2>
|
||||
{dashboardMetrics.nextRace ? (
|
||||
<>
|
||||
<p className="dashboard-card__value">{dashboardMetrics.nextRace.title}</p>
|
||||
<p className="dashboard-card__meta">
|
||||
{formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
|
||||
</p>
|
||||
<p className="dashboard-card__hint">{getRaceCountdownLabel(dashboardMetrics.nextRace.date)}</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Нет запланированных стартов.</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="dashboard-card">
|
||||
<h2 className="dashboard-card__title">Последний результат</h2>
|
||||
{dashboardMetrics.lastResult ? (
|
||||
<>
|
||||
<p className="dashboard-card__value">{dashboardMetrics.lastResult.finishTime ?? "время не указано"}</p>
|
||||
<p className="dashboard-card__meta">
|
||||
{dashboardMetrics.lastResult.title} · {formatDistance(dashboardMetrics.lastResult.distanceKm)}
|
||||
</p>
|
||||
<p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastResult.date)}</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="dashboard-card">
|
||||
<h2 className="dashboard-card__title">Личный рекорд</h2>
|
||||
{dashboardMetrics.personalRecord ? (
|
||||
<>
|
||||
<p className="dashboard-card__value">{dashboardMetrics.personalRecord.finishTime ?? "время не указано"}</p>
|
||||
<p className="dashboard-card__meta">
|
||||
{dashboardMetrics.personalRecord.title} · {formatDistance(dashboardMetrics.personalRecord.distanceKm)}
|
||||
</p>
|
||||
<p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Недостаточно данных для PR.</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="dashboard-card">
|
||||
<h2 className="dashboard-card__title">Сезон</h2>
|
||||
<p className="dashboard-card__value">{dashboardMetrics.seasonTotal}</p>
|
||||
<p className="dashboard-card__meta">стартов в этом году</p>
|
||||
<p className="dashboard-card__hint">Завершено: {dashboardMetrics.seasonCompletedCount}</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,113 @@
|
||||
export function RacesPage(): JSX.Element {
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import type { Race } from "../api";
|
||||
import { ApiError, getRaces } from "../api";
|
||||
import { formatDistance, formatRaceDate, getRaceStatusLabel, splitRacesByDate } from "../lib";
|
||||
|
||||
function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof ApiError) {
|
||||
return error.message;
|
||||
}
|
||||
return "Не удалось загрузить календарь стартов.";
|
||||
}
|
||||
|
||||
function RaceList(props: { title: string; races: Race[] }): JSX.Element {
|
||||
const { title, races } = props;
|
||||
|
||||
return (
|
||||
<section className="page page--races">
|
||||
<h1 className="page__title">Races</h1>
|
||||
<p className="page__subtitle">Upcoming and completed race lists will be added in the next task.</p>
|
||||
<section className="race-list" aria-label={title}>
|
||||
<h2 className="race-list__title">{title}</h2>
|
||||
{races.length > 0 ? (
|
||||
<ul className="race-list__items">
|
||||
{races.map((race) => (
|
||||
<li key={race.id} className="race-card">
|
||||
<div className="race-card__main">
|
||||
<p className="race-card__title">{race.title}</p>
|
||||
<p className="race-card__meta">
|
||||
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={
|
||||
race.status === "completed"
|
||||
? "race-card__status race-card__status--completed"
|
||||
: "race-card__status race-card__status--planned"
|
||||
}
|
||||
>
|
||||
{getRaceStatusLabel(race.status)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="race-list__empty">Пока нет данных в этом разделе.</p>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function RacesPage(): JSX.Element {
|
||||
const [races, setRaces] = useState<Race[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
async function loadRaces(): Promise<void> {
|
||||
try {
|
||||
const items = await getRaces();
|
||||
if (!isMounted) {
|
||||
return;
|
||||
}
|
||||
setRaces(items);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void loadRaces();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const { upcoming, past } = useMemo(() => splitRacesByDate(races), [races]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="page page--races" aria-busy="true">
|
||||
<h1 className="page__title">Календарь стартов</h1>
|
||||
<p className="page__subtitle">Загружаем данные...</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (errorMessage) {
|
||||
return (
|
||||
<section className="page page--races" role="alert">
|
||||
<h1 className="page__title">Календарь стартов</h1>
|
||||
<p className="page__subtitle page__subtitle--error">{errorMessage}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="page page--races">
|
||||
<h1 className="page__title">Календарь стартов</h1>
|
||||
<p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
|
||||
|
||||
<div className="race-lists">
|
||||
<RaceList title="Будущие" races={upcoming} />
|
||||
<RaceList title="Прошедшие" races={past} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user