Default schedule day groups to collapsed
Match Angular's p-accordion default-collapsed state on the schedule results page. State now tracks expanded days (default empty) instead of collapsed days (default empty), so the initial render shows day headers only and the user clicks to reveal flights.
This commit is contained in:
@@ -121,10 +121,10 @@ export const DayGroupedFlightList: FC<DayGroupedFlightListProps> = ({
|
||||
const { language } = useLocale();
|
||||
const { t } = useTranslation();
|
||||
const [sortMode, setSortMode] = useState<SortMode>("none");
|
||||
// Track collapsed days. Default: every day group expanded — matches
|
||||
// Angular which auto-opens days on initial render. User can collapse
|
||||
// individual days by clicking the header chevron.
|
||||
const [collapsedDays, setCollapsedDays] = useState<Set<string>>(() => new Set());
|
||||
// Track which days the user has expanded. Default: empty — matches
|
||||
// Angular's `p-accordion` collapsed-on-load behaviour, where the
|
||||
// user clicks a day header to reveal its flights.
|
||||
const [expandedDays, setExpandedDays] = useState<Set<string>>(() => new Set());
|
||||
const groups = useMemo(() => {
|
||||
const g = groupFlightsByDay(flights);
|
||||
return g.map((day) => ({ ...day, flights: sortFlights(day.flights, sortMode) }));
|
||||
@@ -233,7 +233,7 @@ export const DayGroupedFlightList: FC<DayGroupedFlightListProps> = ({
|
||||
});
|
||||
|
||||
const toggleDay = (date: string): void => {
|
||||
setCollapsedDays((prev) => {
|
||||
setExpandedDays((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(date)) next.delete(date);
|
||||
else next.add(date);
|
||||
@@ -247,7 +247,7 @@ export const DayGroupedFlightList: FC<DayGroupedFlightListProps> = ({
|
||||
{groups.map((g) => {
|
||||
const weekday = weekdayFmt.format(g.parsed);
|
||||
const dayMonth = dayMonthFmt.format(g.parsed);
|
||||
const collapsed = collapsedDays.has(g.date);
|
||||
const collapsed = !expandedDays.has(g.date);
|
||||
return (
|
||||
<section
|
||||
key={g.date}
|
||||
|
||||
Reference in New Issue
Block a user