feat: русский UI, версии в футере, даты и устойчивость загрузки API
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- API: дата старта всегда YYYY-MM-DD; фронт: parseRaceDate без двойного T00:00:00 - GET /health с version из package.json; Vite define __FRONTEND_VERSION__ - Футер с версиями клиента/сервера (BEM), сетка app-shell на три ряда - AbortController для карточки старта; ретраи GET при 502–504 и понятные ошибки шлюза - Русские подписи навигации/страниц, lang=ru, без английских фраз в интерфейсе
This commit is contained in:
@@ -9,6 +9,7 @@ import {
|
||||
getPaceLabel,
|
||||
isCloseDistance,
|
||||
parseFinishTimeToSeconds,
|
||||
parseRaceDate,
|
||||
splitRacesByDate,
|
||||
} from "../lib";
|
||||
|
||||
@@ -18,7 +19,7 @@ function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof ApiError) {
|
||||
return error.message;
|
||||
}
|
||||
return "Не удалось загрузить данные dashboard.";
|
||||
return "Не удалось загрузить данные обзора.";
|
||||
}
|
||||
|
||||
export function DashboardPage(): JSX.Element {
|
||||
@@ -28,23 +29,24 @@ export function DashboardPage(): JSX.Element {
|
||||
const [chartDistanceKm, setChartDistanceKm] = useState<number>(10);
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
async function loadDashboardData(): Promise<void> {
|
||||
try {
|
||||
const items = await getRaces();
|
||||
if (!isMounted) {
|
||||
const items = await getRaces(undefined, { signal: ac.signal });
|
||||
if (!isMounted || ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setRaces(items);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
if (ac.signal.aborted || !isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
if (isMounted && !ac.signal.aborted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -53,6 +55,7 @@ export function DashboardPage(): JSX.Element {
|
||||
void loadDashboardData();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, []);
|
||||
|
||||
@@ -80,7 +83,7 @@ export function DashboardPage(): JSX.Element {
|
||||
}
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const seasonRaces = races.filter((race) => new Date(`${race.date}T00:00:00`).getFullYear() === currentYear);
|
||||
const seasonRaces = races.filter((race) => parseRaceDate(race.date).getFullYear() === currentYear);
|
||||
const seasonCompleted = seasonRaces.filter((race) => race.status === "completed");
|
||||
|
||||
return {
|
||||
@@ -130,7 +133,7 @@ export function DashboardPage(): JSX.Element {
|
||||
.filter((race) => race.status === "completed")
|
||||
.map((race) => ({
|
||||
id: race.id,
|
||||
year: new Date(`${race.date}T00:00:00`).getFullYear(),
|
||||
year: parseRaceDate(race.date).getFullYear(),
|
||||
title: race.title,
|
||||
distance: formatDistance(race.distanceKm),
|
||||
finishTime: race.finishTime ?? "время не указано",
|
||||
@@ -143,7 +146,7 @@ export function DashboardPage(): JSX.Element {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="page page--dashboard" aria-busy="true">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<h1 className="page__title">Обзор</h1>
|
||||
<p className="page__subtitle">Загружаем ваши старты...</p>
|
||||
</section>
|
||||
);
|
||||
@@ -152,7 +155,7 @@ export function DashboardPage(): JSX.Element {
|
||||
if (errorMessage) {
|
||||
return (
|
||||
<section className="page page--dashboard" role="alert">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<h1 className="page__title">Обзор</h1>
|
||||
<p className="page__subtitle page__subtitle--error">{errorMessage}</p>
|
||||
</section>
|
||||
);
|
||||
@@ -160,7 +163,7 @@ export function DashboardPage(): JSX.Element {
|
||||
|
||||
return (
|
||||
<section className="page page--dashboard">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<h1 className="page__title">Обзор</h1>
|
||||
<p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
|
||||
|
||||
<div className="dashboard-grid" aria-label="Ключевые метрики">
|
||||
@@ -205,7 +208,7 @@ export function DashboardPage(): JSX.Element {
|
||||
<p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Недостаточно данных для PR.</p>
|
||||
<p className="dashboard-card__empty">Недостаточно данных для личного рекорда.</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
@@ -242,7 +245,7 @@ export function DashboardPage(): JSX.Element {
|
||||
</section>
|
||||
|
||||
<section className="dashboard-section" aria-label="Личные рекорды по дистанциям">
|
||||
<h2 className="dashboard-section__title">PR по дистанциям</h2>
|
||||
<h2 className="dashboard-section__title">Рекорды по дистанциям</h2>
|
||||
<div className="dashboard-grid dashboard-grid--pr">
|
||||
{personalRecordsByDistance.map((item) => (
|
||||
<article key={item.distanceKm} className="dashboard-card">
|
||||
@@ -291,7 +294,7 @@ export function DashboardPage(): JSX.Element {
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Нет completed-стартов для сравнения.</p>
|
||||
<p className="dashboard-card__empty">Нет завершённых стартов для сравнения.</p>
|
||||
)}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -57,6 +57,7 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
async function loadRace(): Promise<void> {
|
||||
@@ -67,19 +68,19 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
}
|
||||
|
||||
try {
|
||||
const item = await getRaceById(raceId);
|
||||
if (!isMounted) {
|
||||
const item = await getRaceById(raceId, { signal: ac.signal });
|
||||
if (!isMounted || ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setRace(item);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
if (ac.signal.aborted || !isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
if (isMounted && !ac.signal.aborted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -88,6 +89,7 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
void loadRace();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, [raceId]);
|
||||
|
||||
|
||||
@@ -54,8 +54,9 @@ const EMPTY_FORM: FormData = {
|
||||
};
|
||||
|
||||
function raceToFormData(race: Race): FormData {
|
||||
const dateValue = race.date.length >= 10 ? race.date.slice(0, 10) : race.date;
|
||||
return {
|
||||
date: race.date,
|
||||
date: dateValue,
|
||||
title: race.title,
|
||||
distanceKm: String(race.distanceKm),
|
||||
status: race.status ?? "",
|
||||
@@ -310,7 +311,7 @@ export function RaceFormPage(): JSX.Element {
|
||||
name="officialUrl"
|
||||
value={form.officialUrl}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com"
|
||||
placeholder="https://…"
|
||||
/>
|
||||
</label>
|
||||
|
||||
|
||||
@@ -100,24 +100,25 @@ export function RacesPage(): JSX.Element {
|
||||
}, [yearFilter, monthFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
async function loadRaces(): Promise<void> {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const items = await getRaces(listQuery);
|
||||
if (!isMounted) {
|
||||
const items = await getRaces(listQuery, { signal: ac.signal });
|
||||
if (!isMounted || ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setRaces(items);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
if (ac.signal.aborted || !isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
if (isMounted && !ac.signal.aborted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -126,6 +127,7 @@ export function RacesPage(): JSX.Element {
|
||||
void loadRaces();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, [listQuery]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user