42ee36d0a2
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, без английских фраз в интерфейсе
423 lines
13 KiB
TypeScript
423 lines
13 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||
import { ApiError, createRace, getRaceById, updateRace } from "../api";
|
||
import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
|
||
|
||
function slugify(text: string): string {
|
||
return text
|
||
.toLowerCase()
|
||
.replace(/[«»"]/g, "")
|
||
.replace(/[^a-zа-яё0-9]+/gi, "-")
|
||
.replace(/(^-|-$)/g, "")
|
||
.substring(0, 60);
|
||
}
|
||
|
||
function generateId(date: string, title: string): string {
|
||
return `${date}-${slugify(title)}`;
|
||
}
|
||
|
||
const STATUS_OPTIONS: { value: string; label: string }[] = [
|
||
{ value: "", label: "Не указан" },
|
||
{ value: "planned", label: "Планирую" },
|
||
{ value: "registered", label: "Зарегистрирован" },
|
||
{ value: "completed", label: "Пробежал" },
|
||
];
|
||
|
||
interface FormData {
|
||
date: string;
|
||
title: string;
|
||
distanceKm: string;
|
||
status: string;
|
||
officialUrl: string;
|
||
startTime: string;
|
||
clusterSchedule: string;
|
||
bibPickup: string;
|
||
bibNumber: string;
|
||
finishTime: string;
|
||
finishPlace: string;
|
||
notes: string;
|
||
}
|
||
|
||
const EMPTY_FORM: FormData = {
|
||
date: "",
|
||
title: "",
|
||
distanceKm: "",
|
||
status: "planned",
|
||
officialUrl: "",
|
||
startTime: "",
|
||
clusterSchedule: "",
|
||
bibPickup: "",
|
||
bibNumber: "",
|
||
finishTime: "",
|
||
finishPlace: "",
|
||
notes: "",
|
||
};
|
||
|
||
function raceToFormData(race: Race): FormData {
|
||
const dateValue = race.date.length >= 10 ? race.date.slice(0, 10) : race.date;
|
||
return {
|
||
date: dateValue,
|
||
title: race.title,
|
||
distanceKm: String(race.distanceKm),
|
||
status: race.status ?? "",
|
||
officialUrl: race.officialUrl ?? "",
|
||
startTime: race.startTime ?? "",
|
||
clusterSchedule: race.clusterSchedule ?? "",
|
||
bibPickup: race.bibPickup ?? "",
|
||
bibNumber: race.bibNumber ?? "",
|
||
finishTime: race.finishTime ?? "",
|
||
finishPlace: race.finishPlace ?? "",
|
||
notes: race.notes ?? "",
|
||
};
|
||
}
|
||
|
||
function emptyToNull(value: string): string | null {
|
||
const trimmed = value.trim();
|
||
return trimmed === "" ? null : trimmed;
|
||
}
|
||
|
||
function validateForm(form: FormData): string[] {
|
||
const errors: string[] = [];
|
||
if (!form.date.trim()) {
|
||
errors.push("Дата обязательна.");
|
||
}
|
||
if (!form.title.trim()) {
|
||
errors.push("Название обязательно.");
|
||
}
|
||
const km = parseFloat(form.distanceKm);
|
||
if (Number.isNaN(km) || km <= 0) {
|
||
errors.push("Дистанция должна быть положительным числом.");
|
||
}
|
||
return errors;
|
||
}
|
||
|
||
export function RaceFormPage(): JSX.Element {
|
||
const { raceId } = useParams<{ raceId: string }>();
|
||
const navigate = useNavigate();
|
||
const isEditMode = Boolean(raceId);
|
||
|
||
const [form, setForm] = useState<FormData>(EMPTY_FORM);
|
||
const [isLoading, setIsLoading] = useState<boolean>(isEditMode);
|
||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||
const [validationErrors, setValidationErrors] = useState<string[]>([]);
|
||
|
||
useEffect(() => {
|
||
if (!raceId) {
|
||
return;
|
||
}
|
||
|
||
let isMounted = true;
|
||
|
||
async function loadRace(): Promise<void> {
|
||
try {
|
||
const race = await getRaceById(raceId!);
|
||
if (!isMounted) {
|
||
return;
|
||
}
|
||
setForm(raceToFormData(race));
|
||
setErrorMessage(null);
|
||
} catch (error) {
|
||
if (!isMounted) {
|
||
return;
|
||
}
|
||
setErrorMessage(error instanceof ApiError ? error.message : "Не удалось загрузить данные старта.");
|
||
} finally {
|
||
if (isMounted) {
|
||
setIsLoading(false);
|
||
}
|
||
}
|
||
}
|
||
|
||
void loadRace();
|
||
return () => {
|
||
isMounted = false;
|
||
};
|
||
}, [raceId]);
|
||
|
||
const handleChange = useCallback(
|
||
(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||
const { name, value } = event.target;
|
||
setForm((prev) => ({ ...prev, [name]: value }));
|
||
},
|
||
[],
|
||
);
|
||
|
||
const handleSubmit = useCallback(
|
||
async (event: React.FormEvent) => {
|
||
event.preventDefault();
|
||
setErrorMessage(null);
|
||
|
||
const errors = validateForm(form);
|
||
setValidationErrors(errors);
|
||
if (errors.length > 0) {
|
||
return;
|
||
}
|
||
|
||
setIsSaving(true);
|
||
|
||
try {
|
||
const statusValue: RaceStatus | null =
|
||
form.status === "planned" || form.status === "registered" || form.status === "completed"
|
||
? form.status
|
||
: null;
|
||
|
||
if (isEditMode && raceId) {
|
||
const payload: UpdateRacePayload = {
|
||
date: form.date.trim(),
|
||
title: form.title.trim(),
|
||
distanceKm: parseFloat(form.distanceKm),
|
||
status: statusValue,
|
||
officialUrl: emptyToNull(form.officialUrl),
|
||
startTime: emptyToNull(form.startTime),
|
||
clusterSchedule: emptyToNull(form.clusterSchedule),
|
||
bibPickup: emptyToNull(form.bibPickup),
|
||
bibNumber: emptyToNull(form.bibNumber),
|
||
finishTime: emptyToNull(form.finishTime),
|
||
finishPlace: emptyToNull(form.finishPlace),
|
||
notes: emptyToNull(form.notes),
|
||
};
|
||
|
||
await updateRace(raceId, payload);
|
||
navigate(`/races/${raceId}`);
|
||
} else {
|
||
const id = generateId(form.date.trim(), form.title.trim());
|
||
const payload: CreateRacePayload = {
|
||
id,
|
||
date: form.date.trim(),
|
||
title: form.title.trim(),
|
||
distanceKm: parseFloat(form.distanceKm),
|
||
status: statusValue,
|
||
officialUrl: emptyToNull(form.officialUrl),
|
||
startTime: emptyToNull(form.startTime),
|
||
clusterSchedule: emptyToNull(form.clusterSchedule),
|
||
bibPickup: emptyToNull(form.bibPickup),
|
||
bibNumber: emptyToNull(form.bibNumber),
|
||
finishTime: emptyToNull(form.finishTime),
|
||
finishPlace: emptyToNull(form.finishPlace),
|
||
notes: emptyToNull(form.notes),
|
||
};
|
||
|
||
const created = await createRace(payload);
|
||
navigate(`/races/${created.id}`);
|
||
}
|
||
} catch (error) {
|
||
if (error instanceof ApiError) {
|
||
setErrorMessage(error.details.length > 0 ? error.details.join("; ") : error.message);
|
||
} else {
|
||
setErrorMessage("Произошла ошибка при сохранении.");
|
||
}
|
||
} finally {
|
||
setIsSaving(false);
|
||
}
|
||
},
|
||
[form, isEditMode, raceId, navigate],
|
||
);
|
||
|
||
const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<section className="page page--race-form" aria-busy="true">
|
||
<h1 className="page__title">{pageTitle}</h1>
|
||
<p className="page__subtitle">Загружаем данные...</p>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<section className="page page--race-form">
|
||
<h1 className="page__title">{pageTitle}</h1>
|
||
|
||
{errorMessage ? (
|
||
<p className="page__subtitle page__subtitle--error" role="alert">{errorMessage}</p>
|
||
) : null}
|
||
|
||
{validationErrors.length > 0 ? (
|
||
<ul className="form-errors" role="alert">
|
||
{validationErrors.map((msg) => (
|
||
<li key={msg} className="form-errors__item">{msg}</li>
|
||
))}
|
||
</ul>
|
||
) : null}
|
||
|
||
<form className="race-form" onSubmit={handleSubmit} noValidate>
|
||
<fieldset className="race-form__group">
|
||
<legend className="race-form__legend">Основная информация</legend>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Дата *</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="date"
|
||
name="date"
|
||
value={form.date}
|
||
onChange={handleChange}
|
||
required
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Название *</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="text"
|
||
name="title"
|
||
value={form.title}
|
||
onChange={handleChange}
|
||
required
|
||
placeholder="Казанский марафон"
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Дистанция, км *</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="number"
|
||
name="distanceKm"
|
||
value={form.distanceKm}
|
||
onChange={handleChange}
|
||
required
|
||
min="0.1"
|
||
step="0.001"
|
||
placeholder="21.1"
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Статус</span>
|
||
<select
|
||
className="race-form__input"
|
||
name="status"
|
||
value={form.status}
|
||
onChange={handleChange}
|
||
>
|
||
{STATUS_OPTIONS.map((opt) => (
|
||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</fieldset>
|
||
|
||
<fieldset className="race-form__group">
|
||
<legend className="race-form__legend">Организация</legend>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Сайт организатора</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="url"
|
||
name="officialUrl"
|
||
value={form.officialUrl}
|
||
onChange={handleChange}
|
||
placeholder="https://…"
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Время старта</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="text"
|
||
name="startTime"
|
||
value={form.startTime}
|
||
onChange={handleChange}
|
||
placeholder="09:30"
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Расписание кластеров</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="text"
|
||
name="clusterSchedule"
|
||
value={form.clusterSchedule}
|
||
onChange={handleChange}
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Выдача номеров</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="text"
|
||
name="bibPickup"
|
||
value={form.bibPickup}
|
||
onChange={handleChange}
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Стартовый номер</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="text"
|
||
name="bibNumber"
|
||
value={form.bibNumber}
|
||
onChange={handleChange}
|
||
placeholder="1234"
|
||
/>
|
||
</label>
|
||
</fieldset>
|
||
|
||
<fieldset className="race-form__group">
|
||
<legend className="race-form__legend">Результаты</legend>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Финишное время</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="text"
|
||
name="finishTime"
|
||
value={form.finishTime}
|
||
onChange={handleChange}
|
||
placeholder="1:45:30"
|
||
/>
|
||
</label>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Место на финише</span>
|
||
<input
|
||
className="race-form__input"
|
||
type="text"
|
||
name="finishPlace"
|
||
value={form.finishPlace}
|
||
onChange={handleChange}
|
||
placeholder="12/340"
|
||
/>
|
||
</label>
|
||
</fieldset>
|
||
|
||
<fieldset className="race-form__group">
|
||
<legend className="race-form__legend">Дополнительно</legend>
|
||
|
||
<label className="race-form__field">
|
||
<span className="race-form__label">Заметки</span>
|
||
<textarea
|
||
className="race-form__input race-form__input--textarea"
|
||
name="notes"
|
||
value={form.notes}
|
||
onChange={handleChange}
|
||
rows={4}
|
||
/>
|
||
</label>
|
||
</fieldset>
|
||
|
||
<div className="race-form__actions">
|
||
<button className="btn btn--primary" type="submit" disabled={isSaving}>
|
||
{isSaving ? "Сохраняем…" : isEditMode ? "Сохранить" : "Создать"}
|
||
</button>
|
||
<Link
|
||
className="btn btn--secondary"
|
||
to={isEditMode && raceId ? `/races/${raceId}` : "/races"}
|
||
>
|
||
Отмена
|
||
</Link>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
);
|
||
}
|