Port Angular's closest-flight auto-select + scroll-into-view behavior
Angular's route/departure/arrival search result list picks a 'current flight' on load and auto-expands + scrolls it into view — the flight whose dep/arr time is closest to 'now' for today's searches, or the first/last flight when the search is for a future/past day. React was always rendering the list scrolled to the top, so on today's route search the user sees flights from 00:30 onwards instead of landing on whatever is departing right now. - Add features/online-board/closestFlight.ts with a React-flavored port of find-closest-flight.ts (plus a today-guard that reuses the same 'yyyymmdd' shape the URL parser produces). - FlightList takes an optional initialCurrentFlightId, attaches a ref to each card, and scrollIntoView's it on mount / list change. - FlightCard takes an initialExpanded prop and seeds its useState so the selected flight lands expanded, matching the Angular 'expanded: true' assignment after setCurrentFlight. - OnlineBoardSearchPage computes the id via findClosestFlightId using the current params (type + date) and forwards it to FlightList.
This commit is contained in:
@@ -25,6 +25,11 @@ export interface FlightCardProps {
|
||||
* fires onViewDetails. Matches Angular's board-flight-header behaviour.
|
||||
*/
|
||||
expandable?: boolean;
|
||||
/**
|
||||
* Opens the inline panel on mount — used by the 'closest flight'
|
||||
* auto-selection Angular ships on search results.
|
||||
*/
|
||||
initialExpanded?: boolean;
|
||||
/** Fired when the user clicks 'Детали рейса' in the expanded panel. */
|
||||
onViewDetails?: () => void;
|
||||
}
|
||||
@@ -67,6 +72,7 @@ export const FlightCard: FC<FlightCardProps> = ({
|
||||
flight,
|
||||
onClick,
|
||||
expandable,
|
||||
initialExpanded,
|
||||
onViewDetails,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -85,7 +91,7 @@ export const FlightCard: FC<FlightCardProps> = ({
|
||||
departureLeg.equipment?.aircraft?.scheduled?.title ??
|
||||
null;
|
||||
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [expanded, setExpanded] = useState(Boolean(initialExpanded));
|
||||
const rowClickable = expandable || Boolean(onClick);
|
||||
const toggleExpanded = (): void => {
|
||||
if (expandable) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { FC } from "react";
|
||||
import { type FC, useEffect, useRef } from "react";
|
||||
import { useTranslation } from "@/i18n/provider.js";
|
||||
import type { ISimpleFlight } from "@/features/online-board/types.js";
|
||||
import { FlightCard } from "./FlightCard.js";
|
||||
@@ -14,6 +14,12 @@ export interface FlightListProps {
|
||||
skeletonCount?: number;
|
||||
/** Click handler — makes each card act as a link to the details page */
|
||||
onFlightClick?: (flight: ISimpleFlight) => void;
|
||||
/**
|
||||
* Id of a flight to auto-expand and scroll into view on mount / list
|
||||
* change. Matches Angular's 'closest flight' behavior (today → closest
|
||||
* to now; other days → first/last).
|
||||
*/
|
||||
initialCurrentFlightId?: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -27,8 +33,20 @@ export const FlightList: FC<FlightListProps> = ({
|
||||
loading = false,
|
||||
skeletonCount = 5,
|
||||
onFlightClick,
|
||||
initialCurrentFlightId,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const cardRefs = useRef<Map<string, HTMLDivElement>>(new Map());
|
||||
|
||||
useEffect(() => {
|
||||
if (!initialCurrentFlightId) return;
|
||||
const el = cardRefs.current.get(initialCurrentFlightId);
|
||||
// jsdom doesn't implement scrollIntoView, so guard the call.
|
||||
if (el && typeof el.scrollIntoView === "function") {
|
||||
el.scrollIntoView({ block: "center", behavior: "smooth" });
|
||||
}
|
||||
}, [initialCurrentFlightId, flights]);
|
||||
|
||||
if (loading) {
|
||||
return <FlightListSkeleton count={skeletonCount} />;
|
||||
}
|
||||
@@ -44,14 +62,25 @@ export const FlightList: FC<FlightListProps> = ({
|
||||
return (
|
||||
<div className="flight-list">
|
||||
{flights.map((flight) => (
|
||||
<FlightCard
|
||||
<div
|
||||
key={flight.id}
|
||||
flight={flight}
|
||||
expandable={Boolean(onFlightClick)}
|
||||
{...(onFlightClick
|
||||
? { onViewDetails: () => onFlightClick(flight) }
|
||||
: {})}
|
||||
/>
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
cardRefs.current.set(flight.id, el);
|
||||
} else {
|
||||
cardRefs.current.delete(flight.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FlightCard
|
||||
flight={flight}
|
||||
expandable={Boolean(onFlightClick)}
|
||||
initialExpanded={flight.id === initialCurrentFlightId}
|
||||
{...(onFlightClick
|
||||
? { onViewDetails: () => onFlightClick(flight) }
|
||||
: {})}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user