gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Search execution, cancellation, and error handling per TZ §4.1.10/11/12

Browse Source 
- AbortController wired through ApiClient → api functions → hooks so a
  new search immediately aborts the previous in-flight request (§4.1.12)
- cancel() exposed from useOnlineBoard / useScheduleSearch; Escape key
  triggers it while the loader is showing (§4.1.12)
- «Отменить поиск» button rendered during loading; hides when idle (§4.1.12)
- data-searching attribute on search pages disables filter/tabs/breadcrumbs
  via pointer-events:none CSS while a search is running (§4.1.10/11)
- Submit buttons disabled for 30 s after each search (hardcoded, per TZ
  §4.1.10/11: «не должно выноситься в конфигурационный файл»)
- Per-status error messages: BOARD.ERROR-TIMEOUT / ERROR-4XX / ERROR-5XX
  replace the generic LOAD-FAILED-MESSAGE (§4.1.10.1/11.1)
- Error messages added to all 9 locales
- 8 new tests: 3 for AbortController wiring, 5 for error banners + cancel
  button visibility
This commit is contained in:
Anton
2026-04-21 22:08:11 +03:00
parent 2b0a7ecbe7
commit a5c64a2270
22 changed files with 615 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/online-board/api.ts
+2 -1
View File
@@ -66,6 +66,7 @@ export interface CalendarParams {
export async function searchFlights(
client: ApiClient,
params: SearchFlightsParams,
signal?: AbortSignal,
): Promise<IBoardResponse> {
const query: Record<string, string> = {
dateFrom: params.dateFrom,
@@ -78,7 +79,7 @@ export async function searchFlights(
if (params.timeFrom) query["timeFrom"] = params.timeFrom;
if (params.timeTo) query["timeTo"] = params.timeTo;
return client.get<IBoardResponse>(`flights/v1.1/${client.locale}/board`, query);
return client.get<IBoardResponse>(`flights/v1.1/${client.locale}/board`, query, signal);
}
/**
src/features/online-board/components/OnlineBoardFilter.tsx
+33 -3
View File
@@ -8,7 +8,7 @@
* @module
*/
import { type FC, useState, useCallback, useEffect, useRef, type FormEvent } from "react";
import { type FC, useState, useCallback, useEffect, useRef, type FormEvent, useMemo } from "react";
import { useNavigate } from "@modern-js/runtime/router";
import { useLocale } from "@/i18n/useLocale.js";
import { Calendar } from "primereact/calendar";
@@ -150,6 +150,23 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
const boardMinDate = useRef(getBoardMinDate()).current;
const boardMaxDate = useRef(getBoardMaxDate()).current;
// §4.1.10 — submit button locked for 30 seconds after each search.
// Value is the timestamp when the lock expires (or 0 if unlocked).
// The 30-second constant is intentionally hardcoded (not configurable).
const [submitLockedUntil, setSubmitLockedUntil] = useState(0);
const [now, setNow] = useState(() => Date.now());
// Tick every second while the lock is active so the disabled state
// updates reactively.
useEffect(() => {
if (submitLockedUntil === 0 || now >= submitLockedUntil) return;
const id = setTimeout(() => setNow(Date.now()), 1000);
return () => clearTimeout(id);
}, [submitLockedUntil, now]);
const isSubmitLocked = useMemo(
() => submitLockedUntil > 0 && now < submitLockedUntil,
[submitLockedUntil, now],
);
// Swap the Calendar input's display text to "Сегодня" / "Завтра" per
// TZ §4.1.9 Tables 11+12 — Angular ships this and the raw 'DD.MM.YYYY'
// reads clinical in comparison.
@@ -227,6 +244,7 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
const handleFlightSubmit = useCallback(
(e: FormEvent) => {
e.preventDefault();
if (isSubmitLocked) return;
const error = validateFlightNumber(flightNumber);
setFlightNumberError(error);
@@ -250,15 +268,20 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
searchExecuted: true,
});
// Lock submit for 30 seconds (§4.1.10 — hardcoded, not configurable)
setSubmitLockedUntil(Date.now() + 30_000);
setNow(Date.now());
const url = buildOnlineBoardUrl({ type: "flight", carrier, flightNumber: num, date: dateParam });
void navigate(`/${locale}/${url}`);
},
[flightNumber, flightDate, navigate, locale],
[flightNumber, flightDate, navigate, locale, isSubmitLocked],
);
const handleRouteSubmit = useCallback(
(e: FormEvent) => {
e.preventDefault();
if (isSubmitLocked) return;
// Mirrors Angular's OnlineBoardFilterService.toRoutePage + the
// UrlBuilder.getRoutePageUrl switch: one-sided searches (only
@@ -324,9 +347,12 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
});
url = buildOnlineBoardUrl({ type: "route", departure: depCode, arrival: arrCode, date: dateParam, ...timeExtras });
}
// Lock submit for 30 seconds (§4.1.10 — hardcoded, not configurable)
setSubmitLockedUntil(Date.now() + 30_000);
setNow(Date.now());
void navigate(`/${locale}/${url}`);
},
[routeDepartureCode, routeArrivalCode, routeDate, timeRange, navigate, locale],
[routeDepartureCode, routeArrivalCode, routeDate, timeRange, navigate, locale, isSubmitLocked],
);
return (
@@ -452,6 +478,8 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
type="submit"
className="search-button"
data-testid="search-submit"
disabled={isSubmitLocked}
aria-disabled={isSubmitLocked}
>
<span>{t("SHARED.SEARCH")}</span>
</button>
@@ -622,6 +650,8 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
type="submit"
className="search-button"
data-testid="search-submit"
disabled={isSubmitLocked}
aria-disabled={isSubmitLocked}
>
<span>{t("SHARED.SEARCH")}</span>
</button>
src/features/online-board/components/OnlineBoardSearchPage.error.test.tsx
+150
View File
@@ -0,0 +1,150 @@
/**
* Tests for per-status error messages in OnlineBoardSearchPage — TZ §4.1.10.1 / §4.1.12
*
* @vitest-environment jsdom
*/
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import type { OnlineBoardSearchPageProps } from "./OnlineBoardSearchPage.js";
import { ApiHttpError, ApiTimeoutError } from "@/shared/api/errors.js";
import type { UseOnlineBoardResult } from "../hooks/useOnlineBoard.js";
// ── shared mocks ──────────────────────────────────────────────────────────────
vi.mock("@/i18n/provider.js", () => ({
useTranslation: () => ({
t: (key: string) => key,
i18n: { language: "ru" },
}),
}));
vi.mock("@modern-js/runtime/router", () => ({
useNavigate: () => vi.fn(),
useParams: () => ({ lang: "ru-ru" }),
Link: ({ children, ...props }: Record<string, unknown>) =>
<a {...props}>{children as React.ReactNode}</a>,
}));
vi.mock("@/ui/layout/PageTabs.js", () => ({
PageTabs: () => <div data-testid="page-tabs" />,
}));
vi.mock("./OnlineBoardFilter.js", () => ({
OnlineBoardFilter: () => <div data-testid="online-board-filter" />,
}));
vi.mock("@/shared/hooks/useSearchHistory.js", () => ({
useSearchHistory: () => ({ items: [], add: vi.fn(), clear: vi.fn() }),
}));
vi.mock("@/features/flights-map/hooks/useFeatureFlag.js", () => ({
useFeatureFlag: () => false,
}));
vi.mock("../hooks/useLiveBoardSearch.js", () => ({
useLiveBoardSearch: (_params: unknown, initialFlights: unknown) => ({
flights: initialFlights,
connectionStatus: "idle" as const,
}),
}));
vi.mock("../hooks/useCalendarDays.js", () => ({
useCalendarDays: () => ({ days: [], loading: false }),
}));
vi.mock("@/shared/dictionaries/index.js", () => ({
useDictionaries: () => ({ dictionaries: null, loading: false, error: null }),
}));
// Hoisted mock for useOnlineBoard — overridden per test
const mockUseOnlineBoard = vi.fn<() => UseOnlineBoardResult>();
vi.mock("../hooks/useOnlineBoard.js", () => ({
useOnlineBoard: () => mockUseOnlineBoard(),
}));
// ── fixtures ──────────────────────────────────────────────────────────────────
const DEPARTURE_PARAMS: OnlineBoardSearchPageProps["params"] = {
type: "departure",
station: "SVO",
date: "20260115",
};
function noResult(): UseOnlineBoardResult {
return {
flights: [],
loading: false,
error: null,
refresh: vi.fn(),
cancel: vi.fn(),
};
}
// ── tests ─────────────────────────────────────────────────────────────────────
describe("OnlineBoardSearchPage — §4.1.10.1 per-status error messages", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("shows BOARD.ERROR-TIMEOUT for ApiTimeoutError", async () => {
// Dynamic import so the mock is already in place
const { OnlineBoardSearchPage } = await import("./OnlineBoardSearchPage.js");
mockUseOnlineBoard.mockReturnValue({
...noResult(),
error: new ApiTimeoutError(30_000),
});
render(<OnlineBoardSearchPage params={DEPARTURE_PARAMS} />);
expect(screen.getByTestId("search-error")).toBeTruthy();
expect(screen.getByText("BOARD.ERROR-TIMEOUT")).toBeTruthy();
});
it("shows BOARD.ERROR-5XX for ApiHttpError with status 5xx", async () => {
const { OnlineBoardSearchPage } = await import("./OnlineBoardSearchPage.js");
mockUseOnlineBoard.mockReturnValue({
...noResult(),
error: new ApiHttpError("Server error", 503),
});
render(<OnlineBoardSearchPage params={DEPARTURE_PARAMS} />);
expect(screen.getByText("BOARD.ERROR-5XX")).toBeTruthy();
});
it("shows BOARD.ERROR-4XX for ApiHttpError with status 4xx", async () => {
const { OnlineBoardSearchPage } = await import("./OnlineBoardSearchPage.js");
mockUseOnlineBoard.mockReturnValue({
...noResult(),
error: new ApiHttpError("Not found", 404),
});
render(<OnlineBoardSearchPage params={DEPARTURE_PARAMS} />);
expect(screen.getByText("BOARD.ERROR-4XX")).toBeTruthy();
});
it("shows cancel button while loading (§4.1.12)", async () => {
const { OnlineBoardSearchPage } = await import("./OnlineBoardSearchPage.js");
mockUseOnlineBoard.mockReturnValue({
...noResult(),
loading: true,
});
render(<OnlineBoardSearchPage params={DEPARTURE_PARAMS} />);
expect(screen.getByTestId("cancel-search-btn")).toBeTruthy();
expect(screen.getByText("SHARED.SEARCH-CANCEL")).toBeTruthy();
});
it("hides cancel button when not loading (§4.1.12)", async () => {
const { OnlineBoardSearchPage } = await import("./OnlineBoardSearchPage.js");
mockUseOnlineBoard.mockReturnValue(noResult());
render(<OnlineBoardSearchPage params={DEPARTURE_PARAMS} />);
expect(screen.queryByTestId("cancel-search-btn")).toBeNull();
});
});
src/features/online-board/components/OnlineBoardSearchPage.scss
+35
View File
@@ -72,6 +72,41 @@
display: none;
}
// §4.1.12 — loader bar with cancel button, shown while search is running
&__loader-bar {
display: flex;
justify-content: center;
padding: vars.$space-m vars.$space-xl;
}
&__cancel-btn {
display: inline-block;
padding: vars.$space-s2 vars.$space-xl;
background-color: colors.$blue-light;
color: colors.$white;
border: none;
border-radius: vars.$border-radius;
cursor: pointer;
font-size: fonts.$font-size-m;
font-weight: fonts.$font-medium;
transition: background-color 0.2s ease;
&:hover {
background-color: colors.$blue-light--hover;
}
}
// §4.1.10 — while search is running, block interactions with filter,
// tabs, and breadcrumbs so the user cannot start a conflicting search.
&[data-searching="true"] {
.page-layout__left,
.page-layout__sticky,
.page-layout__breadcrumbs {
pointer-events: none;
opacity: 0.6;
}
}
// Mirrors Angular `page-footer-notes` under `pages/schedule/home.scss`:
// a blue-extra-light card attached to the bottom of the flight-list
// frame, with a small `*` sort-note aligned to an inner line holding
src/features/online-board/components/OnlineBoardSearchPage.tsx
+44 -4
View File
@@ -14,6 +14,7 @@
import type { FC } from "react";
import { useCallback, useEffect } from "react";
import { ApiHttpError, ApiTimeoutError } from "@/shared/api/errors.js";
import { useNavigate } from "@modern-js/runtime/router";
import { useLocale } from "@/i18n/useLocale.js";
import { useTranslation } from "@/i18n/provider.js";
@@ -334,7 +335,17 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
// Data fetching
const searchParams = toSearchParams(params);
const { flights, loading, error, refresh } = useOnlineBoard(searchParams);
const { flights, loading, error, refresh, cancel } = useOnlineBoard(searchParams);
// §4.1.12 — Escape cancels while loader is showing
useEffect(() => {
if (!loading) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") cancel();
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [loading, cancel]);
// Live updates via SignalR
const liveBoardParams = toLiveBoardParams(params);
@@ -401,8 +412,23 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
? buildFlightListJsonLd(displayFlights, searchDescription)
: undefined;
// §4.1.10.1 — resolve per-status error message key
const errorMessageKey = (() => {
if (!error) return null;
if (error instanceof ApiTimeoutError) return "BOARD.ERROR-TIMEOUT";
if (error instanceof ApiHttpError) {
return error.status >= 500 ? "BOARD.ERROR-5XX" : "BOARD.ERROR-4XX";
}
return "BOARD.LOAD-FAILED-MESSAGE";
})();
return (
<div className="online-board-search" data-testid="online-board-search">
<div
className="online-board-search"
data-testid="online-board-search"
// §4.1.10 — flag so CSS can pointer-events:none filter/tabs/breadcrumbs
data-searching={loading ? "true" : undefined}
>
{jsonLd && <JsonLdRenderer data={jsonLd} />}
<PageLayout
headerLeft={<PageTabs viewType="onlineboard" />}
@@ -491,7 +517,21 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
)}
</div>
{/* Error state */}
{/* §4.1.12 — Cancel search button: visible while loading */}
{loading && (
<div className="online-board-search__loader-bar" data-testid="loader-bar">
<button
type="button"
className="online-board-search__cancel-btn"
data-testid="cancel-search-btn"
onClick={cancel}
>
{t("SHARED.SEARCH-CANCEL")}
</button>
</div>
)}
{/* §4.1.10.1 — Error state with per-status message */}
{error && (
<section className="frame" data-testid="search-error" role="alert">
<div className="online-board-search__error-card">
@@ -499,7 +539,7 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
{t("BOARD.LOAD-FAILED-TITLE")}
</h3>
<p className="online-board-search__error-message">
{t("BOARD.LOAD-FAILED-MESSAGE")}
{t(errorMessageKey ?? "BOARD.LOAD-FAILED-MESSAGE")}
</p>
<button
type="button"
src/features/online-board/hooks/useOnlineBoard.test.ts
+119
View File
@@ -0,0 +1,119 @@
/**
* Unit tests for useOnlineBoard hook — TZ §4.1.10, §4.1.12
*
* Covers:
* - AbortController wired: new search aborts the previous in-flight request
* - cancel() aborts the controller and resets loading
*
* @vitest-environment jsdom
*/
import { describe, it, expect, vi, beforeEach } from "vitest";
import { renderHook, act } from "@testing-library/react";
import type { ReactNode } from "react";
import React from "react";
import { useOnlineBoard } from "./useOnlineBoard.js";
import * as api from "../api.js";
import type { IBoardResponse } from "../types.js";
import { ApiClientProvider } from "@/shared/api/provider.js";
import type { ApiClient } from "@/shared/api/client.js";
// Minimal mock API client
function makeClient(): ApiClient {
return {
locale: "ru",
get: vi.fn(),
post: vi.fn(),
} as unknown as ApiClient;
}
function makeWrapper(client: ApiClient) {
return function Wrapper({ children }: { children: ReactNode }) {
return React.createElement(ApiClientProvider, { client, children });
};
}
const EMPTY_RESPONSE: IBoardResponse = {
data: { routes: [], partners: [] },
};
describe("useOnlineBoard — §4.1.12 cancellation", () => {
const baseParams = {
dateFrom: "2026-01-15T00:00:00",
dateTo: "2026-01-16T00:00:00",
departure: "SVO",
};
beforeEach(() => {
vi.clearAllMocks();
});
it("passes AbortSignal to searchFlights", async () => {
const client = makeClient();
const spy = vi.spyOn(api, "searchFlights").mockResolvedValue(EMPTY_RESPONSE);
renderHook(() => useOnlineBoard(baseParams), {
wrapper: makeWrapper(client),
});
// Wait for the async effect
await act(async () => {
await Promise.resolve();
});
expect(spy).toHaveBeenCalledOnce();
const [, , signal] = spy.mock.calls[0] as [unknown, unknown, AbortSignal | undefined];
expect(signal).toBeInstanceOf(AbortSignal);
});
it("cancel() aborts the request and sets loading to false", async () => {
const client = makeClient();
// Never resolve — simulates a slow in-flight request
vi.spyOn(api, "searchFlights").mockReturnValue(new Promise(() => {}));
const { result } = renderHook(() => useOnlineBoard(baseParams), {
wrapper: makeWrapper(client),
});
// Should be loading initially
expect(result.current.loading).toBe(true);
act(() => {
result.current.cancel();
});
expect(result.current.loading).toBe(false);
});
it("new param change aborts the previous in-flight request (§4.1.12)", async () => {
const client = makeClient();
const capturedSignals: AbortSignal[] = [];
vi.spyOn(api, "searchFlights").mockImplementation((_c, _p, signal) => {
if (signal) capturedSignals.push(signal);
return new Promise(() => {}); // Never resolves
});
const { rerender } = renderHook(
(params) => useOnlineBoard(params),
{
initialProps: baseParams,
wrapper: makeWrapper(client),
},
);
// Wait for first effect
await act(async () => { await Promise.resolve(); });
expect(capturedSignals).toHaveLength(1);
// Change params — triggers new effect which aborts the old controller
rerender({ ...baseParams, departure: "LED" });
await act(async () => { await Promise.resolve(); });
// First signal should now be aborted
expect(capturedSignals[0]?.aborted).toBe(true);
// Second request was started with a fresh (non-aborted) controller
expect(capturedSignals).toHaveLength(2);
expect(capturedSignals[1]?.aborted).toBe(false);
});
});
src/features/online-board/hooks/useOnlineBoard.ts
+31 -10
View File
@@ -2,6 +2,7 @@
* React hook for the online board search pages.
*
* Calls `searchFlights` on param change, manages loading/error/data state.
* Supports AbortController-based cancellation (§4.1.12).
* Thin wrapper — integration-tested by 2E/2H, not unit-tested here.
*
* @module
@@ -19,11 +20,13 @@ export interface UseOnlineBoardResult {
loading: boolean;
error: ApiError | null;
refresh: () => void;
/** Cancel the in-flight request (§4.1.12). Resets loading to false. */
cancel: () => void;
}
/**
* Hook for online board search pages. Fetches flights based on search params
* and provides refresh capability.
* and provides refresh + cancel capability.
*/
export function useOnlineBoard(
params: SearchFlightsParams,
@@ -38,10 +41,21 @@ export function useOnlineBoard(
const paramsRef = useRef(params);
paramsRef.current = params;
// AbortController for the current in-flight request (§4.1.12)
const abortRef = useRef<AbortController | null>(null);
const refresh = useCallback(() => {
setRefreshKey((k) => k + 1);
}, []);
const cancel = useCallback(() => {
if (abortRef.current) {
abortRef.current.abort();
abortRef.current = null;
}
setLoading(false);
}, []);
useEffect(() => {
// Callers pass empty strings when the search context isn't resolved
// yet (e.g. details page with no `?request=...`). Skip the fetch
@@ -54,27 +68,34 @@ export function useOnlineBoard(
return;
}
let cancelled = false;
// Abort any previous in-flight request (§4.1.12 — new search aborts in-flight)
if (abortRef.current) {
abortRef.current.abort();
}
const controller = new AbortController();
abortRef.current = controller;
setLoading(true);
setError(null);
searchFlights(client, paramsRef.current)
searchFlights(client, paramsRef.current, controller.signal)
.then((response) => {
if (!cancelled) {
if (!controller.signal.aborted) {
setFlights(response.data?.routes ?? []);
setLoading(false);
}
})
.catch((err: unknown) => {
// Ignore aborted requests — the user cancelled intentionally
if (controller.signal.aborted) return;
console.error("[useOnlineBoard] API error:", err);
if (!cancelled) {
setError(err as ApiError);
setLoading(false);
}
setError(err as ApiError);
setLoading(false);
});
return () => {
cancelled = true;
controller.abort();
abortRef.current = null;
};
}, [
client,
@@ -88,5 +109,5 @@ export function useOnlineBoard(
refreshKey,
]);
return { flights, loading, error, refresh };
return { flights, loading, error, refresh, cancel };
}
src/features/schedule/api.ts
+2
View File
@@ -33,6 +33,7 @@ import type {
export async function searchSchedule(
client: ApiClient,
params: IScheduleSearchRequest,
signal?: AbortSignal,
): Promise<IScheduleResponse> {
const query: Record<string, string> = {
departure: params.departure,
@@ -47,6 +48,7 @@ export async function searchSchedule(
return client.get<IScheduleResponse>(
`flights/1/${client.locale}/schedule`,
query,
signal,
);
}
src/features/schedule/components/ScheduleFilter.tsx
+22 -1
View File
@@ -8,7 +8,7 @@
* search is route-only.
*/
import { type FC, useState, useCallback, useRef, useEffect, type FormEvent } from "react";
import { type FC, useState, useCallback, useRef, useEffect, useMemo, type FormEvent } from "react";
import { useNavigate } from "@modern-js/runtime/router";
import { Calendar } from "primereact/calendar";
import { Slider, type SliderChangeEvent } from "primereact/slider";
@@ -136,6 +136,20 @@ export const ScheduleFilter: FC<ScheduleFilterProps> = ({
const scheduleMinDate = useRef(getScheduleMinDate()).current;
const scheduleMaxDate = useRef(getScheduleMaxDate()).current;
// §4.1.11 — submit button locked for 30 seconds after each search.
// The 30-second constant is intentionally hardcoded (not configurable).
const [submitLockedUntil, setSubmitLockedUntil] = useState(0);
const [nowTs, setNowTs] = useState(() => Date.now());
useEffect(() => {
if (submitLockedUntil === 0 || nowTs >= submitLockedUntil) return;
const id = setTimeout(() => setNowTs(Date.now()), 1000);
return () => clearTimeout(id);
}, [submitLockedUntil, nowTs]);
const isSubmitLocked = useMemo(
() => submitLockedUntil > 0 && nowTs < submitLockedUntil,
[submitLockedUntil, nowTs],
);
// Swap the Calendar input's displayed text to "Текущая неделя" per
// TZ §4.1.9 Table 14 when the selected range equals Mon-Sun of the
// current week. Uses inputRef + useEffect to override PrimeReact's
@@ -159,6 +173,7 @@ export const ScheduleFilter: FC<ScheduleFilterProps> = ({
const handleSubmit = useCallback(
(e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (isSubmitLocked) return;
const dep = departure.trim().toUpperCase();
const arr = arrival.trim().toUpperCase();
if (!dep || !arr) return;
@@ -258,6 +273,9 @@ export const ScheduleFilter: FC<ScheduleFilterProps> = ({
params = { type: "route", outbound };
}
const url = buildScheduleUrl(params);
// Lock submit for 30 seconds (§4.1.11 — hardcoded, not configurable)
setSubmitLockedUntil(Date.now() + 30_000);
setNowTs(Date.now());
void navigate(`/${locale}/${url}`);
},
[
@@ -271,6 +289,7 @@ export const ScheduleFilter: FC<ScheduleFilterProps> = ({
returnTimeRange,
navigate,
locale,
isSubmitLocked,
],
);
@@ -531,6 +550,8 @@ export const ScheduleFilter: FC<ScheduleFilterProps> = ({
type="submit"
className="search-button"
data-testid="search-submit"
disabled={isSubmitLocked}
aria-disabled={isSubmitLocked}
>
<span>{t("SHARED.SCHEDULES_VIEW")}</span>
</button>
src/features/schedule/components/ScheduleSearchPage.scss
+34
View File
@@ -16,6 +16,40 @@
color: colors.$red;
}
// §4.1.12 — loader bar with cancel button
&__loader-bar {
display: flex;
justify-content: center;
padding: vars.$space-m vars.$space-xl;
}
&__cancel-btn {
display: inline-block;
padding: vars.$space-s2 vars.$space-xl;
background-color: colors.$blue-light;
color: colors.$white;
border: none;
border-radius: vars.$border-radius;
cursor: pointer;
font-size: fonts.$font-size-m;
font-weight: fonts.$font-medium;
transition: background-color 0.2s ease;
&:hover {
background-color: colors.$blue-light--hover;
}
}
// §4.1.11 — block filter/tabs/breadcrumbs while loading
&[data-searching="true"] {
.page-layout__left,
.page-layout__sticky,
.page-layout__breadcrumbs {
pointer-events: none;
opacity: 0.6;
}
}
&__outbound,
&__inbound {
padding: vars.$space-xl 0;
src/features/schedule/components/ScheduleSearchPage.tsx
+53 -5
View File
@@ -10,6 +10,7 @@
import type { FC } from "react";
import { useCallback, useEffect, useState } from "react";
import { ApiHttpError, ApiTimeoutError } from "@/shared/api/errors.js";
import { useNavigate } from "@modern-js/runtime/router";
import { useLocale } from "@/i18n/useLocale.js";
import { useTranslation } from "@/i18n/provider.js";
@@ -263,7 +264,7 @@ export const ScheduleSearchPage: FC<ScheduleSearchPageProps> = ({ params }) => {
// Fetch outbound flights
const outboundRequest = toSearchRequest(outbound);
const { flights: outboundFlights, loading: outboundLoading, error: outboundError, refresh } =
const { flights: outboundFlights, loading: outboundLoading, error: outboundError, refresh, cancel: cancelOutbound } =
useScheduleSearch(outboundRequest);
// Fetch inbound flights (if round-trip)
@@ -271,9 +272,36 @@ export const ScheduleSearchPage: FC<ScheduleSearchPageProps> = ({ params }) => {
const {
flights: inboundFlights,
loading: inboundLoading,
cancel: cancelInbound,
} = useScheduleSearch(inboundRequest);
const _loading = outboundLoading || (inbound ? inboundLoading : false);
const isLoading = outboundLoading || (inbound ? inboundLoading : false);
// §4.1.12 — cancel both directions at once
const cancel = useCallback(() => {
cancelOutbound();
cancelInbound();
}, [cancelOutbound, cancelInbound]);
// §4.1.12 — Escape cancels while loader is showing
useEffect(() => {
if (!isLoading) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") cancel();
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [isLoading, cancel]);
// §4.1.11.1 — per-status error message key
const errorMessageKey = (() => {
if (!outboundError) return null;
if (outboundError instanceof ApiTimeoutError) return "BOARD.ERROR-TIMEOUT";
if (outboundError instanceof ApiHttpError) {
return outboundError.status >= 500 ? "BOARD.ERROR-5XX" : "BOARD.ERROR-4XX";
}
return "BOARD.LOAD-FAILED";
})();
/** Navigate to a different week (Monday → Sunday range). Updates the
* active direction's params and preserves the other direction. */
@@ -340,7 +368,12 @@ export const ScheduleSearchPage: FC<ScheduleSearchPageProps> = ({ params }) => {
: undefined;
return (
<div className="schedule-search" data-testid="schedule-search">
<div
className="schedule-search"
data-testid="schedule-search"
// §4.1.11 — block filter/tabs/breadcrumbs while searching
data-searching={isLoading ? "true" : undefined}
>
{jsonLd && <JsonLdRenderer data={jsonLd} />}
<PageLayout
headerLeft={<PageTabs viewType="schedule" />}
@@ -435,10 +468,25 @@ export const ScheduleSearchPage: FC<ScheduleSearchPageProps> = ({ params }) => {
</>
}
>
{/* §4.1.12 — cancel button visible while loading */}
{isLoading && (
<div className="schedule-search__loader-bar" data-testid="loader-bar">
<button
type="button"
className="schedule-search__cancel-btn"
data-testid="cancel-search-btn"
onClick={cancel}
>
{t("SHARED.SEARCH-CANCEL")}
</button>
</div>
)}
{/* §4.1.11.1 — per-status error message */}
{outboundError && (
<section className="frame" data-testid="search-error">
<section className="frame" data-testid="search-error" role="alert">
<div className="schedule-search__error">
<p>{t("BOARD.LOAD-FAILED")}</p>
<p>{t(errorMessageKey ?? "BOARD.LOAD-FAILED")}</p>
<button type="button" onClick={refresh}>{t("SHARED.RETRY")}</button>
</div>
</section>
src/features/schedule/hooks/useScheduleSearch.ts
+31 -10
View File
@@ -2,6 +2,7 @@
* React hook for schedule search pages.
*
* Calls `searchSchedule` on param change, manages loading/error/data state.
* Supports AbortController-based cancellation (§4.1.12).
* No SignalR -- schedule data is static.
*
* @module
@@ -18,11 +19,13 @@ export interface UseScheduleSearchResult {
loading: boolean;
error: ApiError | null;
refresh: () => void;
/** Cancel the in-flight request (§4.1.12). Resets loading to false. */
cancel: () => void;
}
/**
* Hook for schedule search pages. Fetches flights based on search params
* and provides refresh capability.
* and provides refresh + cancel capability.
*/
export function useScheduleSearch(
params: IScheduleSearchRequest,
@@ -36,31 +39,49 @@ export function useScheduleSearch(
const paramsRef = useRef(params);
paramsRef.current = params;
// AbortController for the current in-flight request (§4.1.12)
const abortRef = useRef<AbortController | null>(null);
const refresh = useCallback(() => {
setRefreshKey((k) => k + 1);
}, []);
const cancel = useCallback(() => {
if (abortRef.current) {
abortRef.current.abort();
abortRef.current = null;
}
setLoading(false);
}, []);
useEffect(() => {
let cancelled = false;
// Abort any previous in-flight request (§4.1.12 — new search aborts in-flight)
if (abortRef.current) {
abortRef.current.abort();
}
const controller = new AbortController();
abortRef.current = controller;
setLoading(true);
setError(null);
searchSchedule(client, paramsRef.current)
searchSchedule(client, paramsRef.current, controller.signal)
.then((response) => {
if (!cancelled) {
if (!controller.signal.aborted) {
setFlights(response);
setLoading(false);
}
})
.catch((err: ApiError) => {
if (!cancelled) {
setError(err);
setLoading(false);
}
// Ignore aborted requests — the user cancelled intentionally
if (controller.signal.aborted) return;
setError(err);
setLoading(false);
});
return () => {
cancelled = true;
controller.abort();
abortRef.current = null;
};
}, [
client,
@@ -74,5 +95,5 @@ export function useScheduleSearch(
refreshKey,
]);
return { flights, loading, error, refresh };
return { flights, loading, error, refresh, cancel };
}
src/i18n/locales/de/common.json
+3
View File
@@ -44,6 +44,9 @@
"ESTIMATED-TIME-NOTE": "Arrival times and distances are estimated. Times may change depending on weather and airport load.",
"FLIGHT-NOT-FOUND": "Flight not found.",
"LOAD-FAILED": "Failed to load data. Please try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BOARDING-STATUSES": {
src/i18n/locales/en/common.json
+3
View File
@@ -46,6 +46,9 @@
"LOAD-FAILED": "Failed to load data. Please try again.",
"LOAD-FAILED-TITLE": "Failed to load data",
"LOAD-FAILED-MESSAGE": "API server is unavailable. Check your connection and try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BREADCRUMBS": {
src/i18n/locales/es/common.json
+3
View File
@@ -44,6 +44,9 @@
"ESTIMATED-TIME-NOTE": "Arrival times and distances are estimated. Times may change depending on weather and airport load.",
"FLIGHT-NOT-FOUND": "Flight not found.",
"LOAD-FAILED": "Failed to load data. Please try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BOARDING-STATUSES": {
src/i18n/locales/fr/common.json
+3
View File
@@ -44,6 +44,9 @@
"ESTIMATED-TIME-NOTE": "Arrival times and distances are estimated. Times may change depending on weather and airport load.",
"FLIGHT-NOT-FOUND": "Flight not found.",
"LOAD-FAILED": "Failed to load data. Please try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BOARDING-STATUSES": {
src/i18n/locales/it/common.json
+3
View File
@@ -44,6 +44,9 @@
"ESTIMATED-TIME-NOTE": "Arrival times and distances are estimated. Times may change depending on weather and airport load.",
"FLIGHT-NOT-FOUND": "Flight not found.",
"LOAD-FAILED": "Failed to load data. Please try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BOARDING-STATUSES": {
src/i18n/locales/ja/common.json
+3
View File
@@ -44,6 +44,9 @@
"ESTIMATED-TIME-NOTE": "Arrival times and distances are estimated. Times may change depending on weather and airport load.",
"FLIGHT-NOT-FOUND": "Flight not found.",
"LOAD-FAILED": "Failed to load data. Please try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BOARDING-STATUSES": {
src/i18n/locales/ko/common.json
+3
View File
@@ -44,6 +44,9 @@
"ESTIMATED-TIME-NOTE": "Arrival times and distances are estimated. Times may change depending on weather and airport load.",
"FLIGHT-NOT-FOUND": "Flight not found.",
"LOAD-FAILED": "Failed to load data. Please try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BOARDING-STATUSES": {
src/i18n/locales/ru/common.json
+3
View File
@@ -46,6 +46,9 @@
"LOAD-FAILED": "Не удалось загрузить данные. Попробуйте снова.",
"LOAD-FAILED-TITLE": "Не удалось загрузить данные",
"LOAD-FAILED-MESSAGE": "API сервер недоступен. Проверьте подключение и попробуйте снова.",
"ERROR-TIMEOUT": "Время ожидания ответа от сервера истекло. Попробуйте снова.",
"ERROR-4XX": "Неверные параметры поиска. Проверьте введённые данные и попробуйте снова.",
"ERROR-5XX": "Сервер временно недоступен. Пожалуйста, повторите попытку позже.",
"OPERATED-BY": "Выполняет рейс"
},
"BREADCRUMBS": {
src/i18n/locales/zh/common.json
+3
View File
@@ -44,6 +44,9 @@
"ESTIMATED-TIME-NOTE": "Arrival times and distances are estimated. Times may change depending on weather and airport load.",
"FLIGHT-NOT-FOUND": "Flight not found.",
"LOAD-FAILED": "Failed to load data. Please try again.",
"ERROR-TIMEOUT": "The server did not respond in time. Please try again.",
"ERROR-4XX": "Invalid search parameters. Please check your input and try again.",
"ERROR-5XX": "The server is temporarily unavailable. Please try again later.",
"OPERATED-BY": "Operated by"
},
"BOARDING-STATUSES": {
src/shared/api/client.ts
+32 -4
View File
@@ -58,18 +58,19 @@ export class ApiClient {
async get<T>(
path: string,
query?: Record<string, string | number | boolean>,
signal?: AbortSignal,
): Promise<T> {
const url = this.buildUrl(path, query);
return this.executeWithRetry<T>(url, { method: "GET" });
return this.executeWithRetry<T>(url, { method: "GET" }, signal);
}
async post<T>(path: string, body: unknown): Promise<T> {
async post<T>(path: string, body: unknown, signal?: AbortSignal): Promise<T> {
const url = this.buildUrl(path);
return this.executeWithRetry<T>(url, {
method: "POST",
body: JSON.stringify(body),
headers: { "Content-Type": "application/json" },
});
}, signal);
}
private buildUrl(
@@ -89,6 +90,7 @@ export class ApiClient {
private async executeWithRetry<T>(
url: string,
init: RequestInit,
externalSignal?: AbortSignal,
): Promise<T> {
const headers = new Headers(init.headers ?? {});
headers.set("Accept-Language", this.locale);
@@ -106,11 +108,16 @@ export class ApiClient {
}
}
// Abort immediately if the external signal fired before we started.
if (externalSignal?.aborted) {
throw new ApiNetworkError(new Error("Aborted"));
}
try {
const response = await this.fetchWithTimeout(url, {
...init,
headers,
});
}, externalSignal);
if (response.ok) {
return (await response.json()) as T;
@@ -150,6 +157,11 @@ export class ApiClient {
throw err;
}
if (err instanceof Error) {
// External cancellation — don't retry, re-throw as-is so the
// caller can distinguish "user cancelled" from "network error".
if (err.name === "AbortError" || (externalSignal?.aborted)) {
throw new ApiNetworkError(err);
}
if (attempt < this.maxRetries) {
lastError = new ApiNetworkError(err);
continue;
@@ -166,10 +178,19 @@ export class ApiClient {
private async fetchWithTimeout(
url: string,
init: RequestInit,
externalSignal?: AbortSignal,
): Promise<Response> {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), this.timeoutMs);
// Forward external cancellation (e.g. user clicks "Отменить поиск")
// to the internal controller so the fetch is actually aborted.
let externalListener: (() => void) | undefined;
if (externalSignal) {
externalListener = () => controller.abort();
externalSignal.addEventListener("abort", externalListener);
}
try {
return await this.fetchFn(url, {
...init,
@@ -177,11 +198,18 @@ export class ApiClient {
});
} catch (err) {
if (err instanceof Error && err.name === "AbortError") {
// Distinguish user cancellation from timeout.
if (externalSignal?.aborted) {
throw err; // Let the caller handle it as a cancellation.
}
throw new ApiTimeoutError(this.timeoutMs);
}
throw err;
} finally {
clearTimeout(timeoutId);
if (externalSignal && externalListener) {
externalSignal.removeEventListener("abort", externalListener);
}
}
}