feat: русский UI, версии в футере, даты и устойчивость загрузки API
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:
Vaka.pro
2026-04-08 00:40:03 +03:00
parent fc995ed07d
commit 42ee36d0a2
22 changed files with 251 additions and 77 deletions

View File

@@ -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>

View File

@@ -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]);

View File

@@ -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>

View File

@@ -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]);