StopSearch: Flow down observationDate

Huulivoide · Huulivoide · commit 08126e678571 · 2025-10-15T13:34:29.000+03:00
Instead of using the old `useObservationDateQueryParam`, which in turn
uses `useUrlQuery` to read and parse the value, the original value is
passed down directly from the source of truth. Thus, ridding the Stop
Search page completely from the old untyped `useUrlQuery`
implementation.
diff --git a/ui/src/components/stop-registry/search/by-line/LineRoutesListing.tsx b/ui/src/components/stop-registry/search/by-line/LineRoutesListing.tsx
@@ -1,15 +1,18 @@
+import { DateTime } from 'luxon';
 import { FC, useDeferredValue } from 'react';
 import { SortingInfo } from '../types';
 import { RouteStopsTable } from './RouteStopsTable';
 import { FindStopByLineInfo } from './useFindLinesByStopSearch';
 
 type LineRoutesListingProps = {
   readonly line: FindStopByLineInfo;
+  readonly observationDate: DateTime;
   readonly sortingInfo: SortingInfo;
 };
 
 export const LineRoutesListing: FC<LineRoutesListingProps> = ({
   line,
+  observationDate,
   sortingInfo,
 }) => {
   // Rendering all the routes into tables is a slow process.
@@ -23,6 +26,7 @@ export const LineRoutesListing: FC<LineRoutesListingProps> = ({
           className="mt-6"
           key={route.route_id}
           lineTransitionInProgress={lineTransitionInProgress}
+          observationDate={observationDate}
           route={route}
           sortingInfo={sortingInfo}
         />
diff --git a/ui/src/components/stop-registry/search/by-line/RouteStopsTable.tsx b/ui/src/components/stop-registry/search/by-line/RouteStopsTable.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Visible } from '../../../../layoutComponents';
@@ -21,13 +22,15 @@ type RouteStopsTableProps = {
   // Enable asynchronous rendering of the result tables on the background.
   // Aka, do not lock up the ui.
   readonly lineTransitionInProgress: boolean;
+  readonly observationDate: DateTime;
   readonly route: FindStopByLineRouteInfo;
   readonly sortingInfo: SortingInfo;
 };
 
 export const RouteStopsTable: FC<RouteStopsTableProps> = ({
   className,
   lineTransitionInProgress,
+  observationDate,
   route,
   sortingInfo,
 }) => {
@@ -53,7 +56,10 @@ export const RouteStopsTable: FC<RouteStopsTableProps> = ({
         loading={lineTransitionInProgress || (loading && stops.length === 0)}
       >
         <Visible visible={!lineTransitionInProgress && stops.length > 0}>
-          <StopSearchResultStopsTable stops={stops} />
+          <StopSearchResultStopsTable
+            observationDate={observationDate}
+            stops={stops}
+          />
         </Visible>
       </LoadingWrapper>
     </div>
diff --git a/ui/src/components/stop-registry/search/by-line/StopsByLineNongroupedStopsResults.tsx b/ui/src/components/stop-registry/search/by-line/StopsByLineNongroupedStopsResults.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import { Dispatch, FC, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Visible } from '../../../../layoutComponents';
@@ -19,6 +20,7 @@ const testIds = {
 
 type StopsByLineNongroupedStopsResultsProps = {
   readonly lines: ReadonlyArray<FindStopByLineInfo>;
+  readonly observationDate: DateTime;
   readonly pagingInfo: PagingInfo;
   readonly setPagingInfo: (pagingInfo: PagingInfo) => void;
   readonly setSortingInfo: Dispatch<SetStateAction<SortingInfo>>;
@@ -27,7 +29,14 @@ type StopsByLineNongroupedStopsResultsProps = {
 
 export const StopsByLineNongroupedStopsResults: FC<
   StopsByLineNongroupedStopsResultsProps
-> = ({ lines, pagingInfo, setPagingInfo, setSortingInfo, sortingInfo }) => {
+> = ({
+  lines,
+  observationDate,
+  pagingInfo,
+  setPagingInfo,
+  setSortingInfo,
+  sortingInfo,
+}) => {
   const { t } = useTranslation();
 
   const {
@@ -67,7 +76,12 @@ export const StopsByLineNongroupedStopsResults: FC<
         <LoadingStopsErrorRow error={error} refetch={stopsRefetch} />
       )}
 
-      {!error && <StopSearchResultStopsTable stops={stops} />}
+      {!error && (
+        <StopSearchResultStopsTable
+          observationDate={observationDate}
+          stops={stops}
+        />
+      )}
 
       <Visible visible={!!resultCount}>
         <div className="grid grid-cols-4">
diff --git a/ui/src/components/stop-registry/search/by-line/StopsByLineSearchGroupedStopsResults.tsx b/ui/src/components/stop-registry/search/by-line/StopsByLineSearchGroupedStopsResults.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import {
   Dispatch,
   FC,
@@ -16,14 +17,21 @@ import { FindStopByLineInfo } from './useFindLinesByStopSearch';
 
 type StopsByLineSearchGroupedStopsResultsProps = {
   readonly lines: ReadonlyArray<FindStopByLineInfo>;
+  readonly observationDate: DateTime;
   readonly setPagingInfo: (pagingInfo: PagingInfo) => void;
   readonly setSortingInfo: Dispatch<SetStateAction<SortingInfo>>;
   readonly sortingInfo: SortingInfo;
 };
 
 export const StopsByLineSearchGroupedStopsResults: FC<
   StopsByLineSearchGroupedStopsResultsProps
-> = ({ lines, setPagingInfo, setSortingInfo, sortingInfo }) => {
+> = ({
+  lines,
+  observationDate,
+  setPagingInfo,
+  setSortingInfo,
+  sortingInfo,
+}) => {
   const [activeLineIds, setActiveLineIds] =
     useState<ReadonlyArray<UUID> | null>(
       lines.at(0)?.line_id ? [lines.at(0)?.line_id as string] : null,
@@ -83,7 +91,11 @@ export const StopsByLineSearchGroupedStopsResults: FC<
       {linesToShow.map((line) => (
         <>
           <ActiveLineHeader line={line} className="mt-6" />
-          <LineRoutesListing line={line} sortingInfo={sortingInfo} />
+          <LineRoutesListing
+            observationDate={observationDate}
+            line={line}
+            sortingInfo={sortingInfo}
+          />
         </>
       ))}
     </>
diff --git a/ui/src/components/stop-registry/search/by-line/StopsByLineSearchResults.tsx b/ui/src/components/stop-registry/search/by-line/StopsByLineSearchResults.tsx
@@ -35,13 +35,15 @@ export const StopsByLineSearchResults: FC<StopSearchResultsProps> = ({
       {groupByLine ? (
         <StopsByLineSearchGroupedStopsResults
           lines={lines}
+          observationDate={filters.observationDate}
           setPagingInfo={setPagingInfo}
           setSortingInfo={setSortingInfo}
           sortingInfo={sortingInfo}
         />
       ) : (
         <StopsByLineNongroupedStopsResults
           lines={lines}
+          observationDate={filters.observationDate}
           pagingInfo={pagingInfo}
           setPagingInfo={setPagingInfo}
           setSortingInfo={setSortingInfo}
diff --git a/ui/src/components/stop-registry/search/by-stop/StopSearchByStopResults.tsx b/ui/src/components/stop-registry/search/by-stop/StopSearchByStopResults.tsx
@@ -45,7 +45,10 @@ export const StopSearchByStopResults: FC<StopSearchResultsProps> = ({
       {error ? (
         <LoadingStopsErrorRow error={error} refetch={refetch} />
       ) : (
-        <StopSearchResultStopsTable stops={stops} />
+        <StopSearchResultStopsTable
+          observationDate={filters.observationDate}
+          stops={stops}
+        />
       )}
 
       <Visible visible={!!resultCount}>
diff --git a/ui/src/components/stop-registry/search/components/StopPlaceSharedComponents/GroupedStopsResults.tsx b/ui/src/components/stop-registry/search/components/StopPlaceSharedComponents/GroupedStopsResults.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import {
   ComponentType,
   Dispatch,
@@ -24,6 +25,7 @@ type NoStopsComponentProps = {
 };
 
 type SearchGroupedStopsResultsProps = {
+  readonly observationDate: DateTime;
   readonly setPagingInfo: (pagingInfo: PagingInfo) => void;
   readonly setSortingInfo: Dispatch<SetStateAction<SortingInfo>>;
   readonly sortingInfo: SortingInfo;
@@ -35,6 +37,7 @@ type SearchGroupedStopsResultsProps = {
 };
 
 export const SearchGroupedStopsResults: FC<SearchGroupedStopsResultsProps> = ({
+  observationDate,
   setPagingInfo,
   setSortingInfo,
   sortingInfo,
@@ -106,9 +109,10 @@ export const SearchGroupedStopsResults: FC<SearchGroupedStopsResultsProps> = ({
 
       {selectedStopPlaces.map((stopPlace) => (
         <StopsTable
+          className="mb-6 last:mb-0"
           key={stopPlace.id}
+          observationDate={observationDate}
           stopPlace={stopPlace}
-          className="mb-6 last:mb-0"
           HeaderComponent={HeaderComponent}
           NoStopsComponent={NoStopsComponent}
         />
diff --git a/ui/src/components/stop-registry/search/components/StopPlaceSharedComponents/NongroupedStopsResults.tsx b/ui/src/components/stop-registry/search/components/StopPlaceSharedComponents/NongroupedStopsResults.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import { ComponentType, Dispatch, FC, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Visible } from '../../../../../layoutComponents';
@@ -16,6 +17,7 @@ const testIds = {
 };
 
 type NongroupedStopsResults = {
+  readonly observationDate: DateTime;
   readonly pagingInfo: PagingInfo;
   readonly setPagingInfo: (pagingInfo: PagingInfo) => void;
   readonly setSortingInfo: Dispatch<SetStateAction<SortingInfo>>;
@@ -25,6 +27,7 @@ type NongroupedStopsResults = {
 };
 
 export const NongroupedStopsResults: FC<NongroupedStopsResults> = ({
+  observationDate,
   pagingInfo,
   setPagingInfo,
   setSortingInfo,
@@ -55,7 +58,10 @@ export const NongroupedStopsResults: FC<NongroupedStopsResults> = ({
       {error ? (
         <LoadingStopsErrorRow error={error} refetch={refetch} />
       ) : (
-        <StopSearchResultStopsTable stops={stops} />
+        <StopSearchResultStopsTable
+          observationDate={observationDate}
+          stops={stops}
+        />
       )}
 
       <Visible visible={!!resultCount}>
diff --git a/ui/src/components/stop-registry/search/components/StopPlaceSharedComponents/StopsTable.tsx b/ui/src/components/stop-registry/search/components/StopPlaceSharedComponents/StopsTable.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import { ComponentType, FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Visible } from '../../../../../layoutComponents';
@@ -13,6 +14,7 @@ const testIds = {
 
 type StopsTableProps = {
   readonly className?: string;
+  readonly observationDate: DateTime;
   readonly stopPlace: FindStopPlaceInfo;
   readonly HeaderComponent: ComponentType<{
     stopPlace: FindStopPlaceInfo;
@@ -25,6 +27,7 @@ type StopsTableProps = {
 
 export const StopsTable: FC<StopsTableProps> = ({
   className,
+  observationDate,
   stopPlace,
   HeaderComponent,
   NoStopsComponent,
@@ -51,7 +54,10 @@ export const StopsTable: FC<StopsTableProps> = ({
         loading={loading && stops.length === 0}
       >
         <Visible visible={stops.length > 0}>
-          <StopSearchResultStopsTable stops={stops} />
+          <StopSearchResultStopsTable
+            observationDate={observationDate}
+            stops={stops}
+          />
         </Visible>
       </LoadingWrapper>
 
diff --git a/ui/src/components/stop-registry/search/components/StopSearchResultStopsTable.tsx b/ui/src/components/stop-registry/search/components/StopSearchResultStopsTable.tsx
@@ -1,7 +1,6 @@
 import { DateTime } from 'luxon';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useObservationDateQueryParam } from '../../../../hooks';
 import { getGeometryPoint } from '../../../../utils';
 import {
   LocatorActionButton,
@@ -45,16 +44,13 @@ const StopSearchResultRow: FC<StopSearchResultRowProps> = ({
 
 type StopSearchResultStopsTableProps = {
   readonly className?: string;
+  readonly observationDate: DateTime;
   readonly stops: ReadonlyArray<StopSearchRow>;
 };
 
 export const StopSearchResultStopsTable: FC<
   StopSearchResultStopsTableProps
-> = ({ className, stops }) => {
-  const { observationDate } = useObservationDateQueryParam({
-    initialize: false,
-  });
-
+> = ({ className, observationDate, stops }) => {
   return (
     <table
       className={twMerge('h-1 w-full border-x border-x-light-grey', className)}
@@ -64,7 +60,7 @@ export const StopSearchResultStopsTable: FC<
         {stops.map((stop: StopSearchRow) => (
           <StopSearchResultRow
             key={stop.id}
-            observationDate={observationDate ?? null}
+            observationDate={observationDate}
             stop={stop}
           />
         ))}
diff --git a/ui/src/components/stop-registry/search/for-stop-areas/StopAreaSearchResults.tsx b/ui/src/components/stop-registry/search/for-stop-areas/StopAreaSearchResults.tsx
@@ -37,6 +37,7 @@ export const StopAreaSearchResults: FC<StopSearchResultsProps> = ({
     >
       {groupByArea ? (
         <SearchGroupedStopsResults
+          observationDate={filters.observationDate}
           setPagingInfo={setPagingInfo}
           setSortingInfo={setSortingInfo}
           sortingInfo={sortingInfo}
@@ -48,6 +49,7 @@ export const StopAreaSearchResults: FC<StopSearchResultsProps> = ({
         />
       ) : (
         <NongroupedStopsResults
+          observationDate={filters.observationDate}
           stopPlaces={stopPlaces}
           sortingInfo={sortingInfo}
           setSortingInfo={setSortingInfo}
diff --git a/ui/src/components/stop-registry/search/for-terminals/TerminalSearchResults.tsx b/ui/src/components/stop-registry/search/for-terminals/TerminalSearchResults.tsx
@@ -37,6 +37,7 @@ export const TerminalSearchResults: FC<StopSearchResultsProps> = ({
     >
       {groupByTerminal ? (
         <SearchGroupedStopsResults
+          observationDate={filters.observationDate}
           setPagingInfo={setPagingInfo}
           setSortingInfo={setSortingInfo}
           sortingInfo={sortingInfo}
@@ -48,6 +49,7 @@ export const TerminalSearchResults: FC<StopSearchResultsProps> = ({
         />
       ) : (
         <NongroupedStopsResults
+          observationDate={filters.observationDate}
           stopPlaces={stopPlaces}
           sortingInfo={sortingInfo}
           setSortingInfo={setSortingInfo}
