Use the new PrivateCode based StopAreaDetails links

Huulivoide · Huulivoide · commit 0e41656d9716 · 2025-08-01T21:07:37.000+03:00
diff --git a/ui/src/components/forms/stop/components/StopAreaInfoSection.tsx b/ui/src/components/forms/stop/components/StopAreaInfoSection.tsx
@@ -4,6 +4,7 @@ import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import { twMerge } from 'tailwind-merge';
+import { useObservationDateQueryParam } from '../../../../hooks';
 import { Path, routeDetails } from '../../../../router/routeDetails';
 import { ExpandButton } from '../../../../uiComponents';
 import { LabeledDetail } from '../../../stop-registry/stops/stop-details/layout';
@@ -39,6 +40,10 @@ export const StopAreaInfoSection: FC<StopAreaInfoSectionProps> = ({
   const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
 
+  const { observationDate } = useObservationDateQueryParam({
+    initialize: false,
+  });
+
   const stopArea = useWatch<StopFormState, 'stopArea'>({ name: 'stopArea' });
 
   if (!stopArea) {
@@ -49,7 +54,10 @@ export const StopAreaInfoSection: FC<StopAreaInfoSectionProps> = ({
     <div className={twMerge('flex flex-col', className)}>
       <Link
         className="flex self-end"
-        to={routeDetails[Path.stopAreaDetails].getLink(stopArea.netextId)}
+        to={routeDetails[Path.stopAreaDetails].getLink(
+          stopArea.privateCode,
+          observationDate,
+        )}
         target="_blank"
         title={t('accessibility:stopAreas.showStopAreaDetails', {
           areaLabel: stopArea.nameFin ?? stopArea.nameSwe,
diff --git a/ui/src/components/map/stop-areas/StopAreaPopup.tsx b/ui/src/components/map/stop-areas/StopAreaPopup.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { MdAddCircle, MdDelete } from 'react-icons/md';
 import { Popup } from 'react-map-gl/maplibre';
+import { useObservationDateQueryParam } from '../../../hooks';
 import { Column, Row } from '../../../layoutComponents';
 import { Path, routeDetails } from '../../../router/routeDetails';
 import { parseDate } from '../../../time';
@@ -41,6 +42,10 @@ export const StopAreaPopup = ({
 }: StopAreaPopupProps) => {
   const { t } = useTranslation();
 
+  const { observationDate } = useObservationDateQueryParam({
+    initialize: false,
+  });
+
   const point = getGeometryPoint(area.geometry);
   const areaLabel = area.privateCode?.value;
   const areaName = area.name ?? '';
@@ -64,7 +69,10 @@ export const StopAreaPopup = ({
             <Row className="items-center">
               <h3>
                 <a
-                  href={routeDetails[Path.stopAreaDetails].getLink(area.id)}
+                  href={routeDetails[Path.stopAreaDetails].getLink(
+                    areaLabel,
+                    observationDate,
+                  )}
                   target="_blank"
                   rel="noreferrer"
                   data-testid={testIds.label}
diff --git a/ui/src/components/stop-registry/search/for-stop-areas/ActionMenu/OpenAreaDetailsPage.tsx b/ui/src/components/stop-registry/search/for-stop-areas/ActionMenu/OpenAreaDetailsPage.tsx
@@ -1,30 +1,40 @@
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
+import { useObservationDateQueryParam } from '../../../../../hooks';
 import { Path, routeDetails } from '../../../../../router/routeDetails';
 import { SimpleDropdownMenuItem } from '../../../../../uiComponents';
 
 type OpenDetailsProps = {
   readonly className?: string;
-  readonly netexId: string | null | undefined;
+  readonly privateCode: string | null | undefined;
   readonly testId: string;
 };
 
 export const OpenDetails = forwardRef<HTMLButtonElement, OpenDetailsProps>(
-  ({ className, netexId, testId }, ref) => {
+  ({ className, privateCode, testId }, ref) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
 
+    const { observationDate } = useObservationDateQueryParam({
+      initialize: false,
+    });
+
     return (
       <SimpleDropdownMenuItem
         className={className}
         text={t('stopRegistrySearch.stopAreaRowActions.openDetails')}
         onClick={() =>
-          navigate(routeDetails[Path.stopAreaDetails].getLink(netexId))
+          navigate(
+            routeDetails[Path.stopAreaDetails].getLink(
+              privateCode,
+              observationDate,
+            ),
+          )
         }
         testId={testId}
         ref={ref}
-        disabled={!netexId}
+        disabled={!privateCode}
       />
     );
   },
diff --git a/ui/src/components/stop-registry/search/for-stop-areas/StopAreaHeader.tsx b/ui/src/components/stop-registry/search/for-stop-areas/StopAreaHeader.tsx
@@ -4,6 +4,7 @@ import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import { twMerge } from 'tailwind-merge';
+import { useObservationDateQueryParam } from '../../../../hooks';
 import { Path, routeDetails } from '../../../../router/routeDetails';
 import { Point } from '../../../../types';
 import { LocatorButton } from '../../../../uiComponents';
@@ -43,6 +44,10 @@ export const StopAreaHeader: FC<StopAreaHeaderProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const { observationDate } = useObservationDateQueryParam({
+    initialize: false,
+  });
+
   const showOnMap = useShowStopAreaOnMap();
   const point = centroidToPoint(stopArea.centroid);
 
@@ -59,7 +64,10 @@ export const StopAreaHeader: FC<StopAreaHeaderProps> = ({
       )}
     >
       <Link
-        to={routeDetails[Path.stopAreaDetails].getLink(stopArea.netex_id)}
+        to={routeDetails[Path.stopAreaDetails].getLink(
+          stopArea.private_code,
+          observationDate,
+        )}
         data-testid={testIds.stopAreaLink}
         title={t('accessibility:stopAreas.showStopAreaDetails', {
           areaLabel: stopArea.name_value,
@@ -85,7 +93,7 @@ export const StopAreaHeader: FC<StopAreaHeaderProps> = ({
         <OpenDetails
           key="openDetails"
           className={className}
-          netexId={stopArea.netex_id}
+          privateCode={stopArea.private_code}
           testId={testIds.showStopAreaDetails}
         />
         <ShowAreaOnMap
diff --git a/ui/src/components/stop-registry/search/for-stop-areas/StopAreaSearchNoStops.tsx b/ui/src/components/stop-registry/search/for-stop-areas/StopAreaSearchNoStops.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdOpenInNew } from 'react-icons/md';
 import { Link } from 'react-router';
+import { useObservationDateQueryParam } from '../../../../hooks';
 import { Path, routeDetails } from '../../../../router/routeDetails';
 import { FindStopAreaInfo } from './useFindStopAreas';
 
@@ -19,6 +20,10 @@ export const StopAreaSearchNoStops: FC<StopAreaSearchNoStopsProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const { observationDate } = useObservationDateQueryParam({
+    initialize: false,
+  });
+
   return (
     <div
       className="ml-2 mt-4 flex w-full flex-row items-center gap-1"
@@ -27,7 +32,10 @@ export const StopAreaSearchNoStops: FC<StopAreaSearchNoStopsProps> = ({
       <i className="icon-info text-2xl text-brand" />
       <p>{t('stopArea.noStops')}</p>
       <Link
-        to={routeDetails[Path.stopAreaDetails].getLink(stopArea.netex_id)}
+        to={routeDetails[Path.stopAreaDetails].getLink(
+          stopArea.private_code,
+          observationDate,
+        )}
         data-testid={testIds.stopAreaLink}
         title={t('accessibility:stopAreas.showStopAreaDetails', {
           areaLabel: stopArea.name_value,
diff --git a/ui/src/components/stop-registry/stops/stop-details/basic-details/BasicDetailsStopAreaFields.tsx b/ui/src/components/stop-registry/stops/stop-details/basic-details/BasicDetailsStopAreaFields.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
+import { useObservationDateQueryParam } from '../../../../../hooks';
 import { Path, routeDetails } from '../../../../../router/routeDetails';
 import { StopWithDetails } from '../../../../../types';
 import { AlternativeNames } from '../../../components/AlternativeNames/AlternativeNames';
@@ -34,12 +35,19 @@ export const StopAreaDetailsSection: FC<StopAreaDetailsSectionProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const { observationDate } = useObservationDateQueryParam({
+    initialize: false,
+  });
+
   return (
     <div className="-mx-5 -mt-5 bg-background px-5 pt-2.5">
       {/* Has negative margin to stretch grey bg to previous div */}
       <DetailRow>
         <Link
-          to={routeDetails[Path.stopAreaDetails].getLink(stop.stop_place?.id)}
+          to={routeDetails[Path.stopAreaDetails].getLink(
+            stop.stop_place?.privateCode?.value,
+            observationDate,
+          )}
           data-testid={testIds.areaLink}
           title={t('accessibility:stopAreas.showStopAreaDetails', {
             areaLabel: stop.stop_place?.name,
diff --git a/ui/src/router/routeDetails.ts b/ui/src/router/routeDetails.ts
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import qs from 'qs';
 import { QueryParameterName } from '../hooks/urlQuery/useUrlQuery';
 import { TranslationKey } from '../i18n';
@@ -126,7 +127,19 @@ export const routeDetails: Record<Path, RouteDetail> = {
     includeInNav: false,
   },
   [Path.stopAreaDetails]: {
-    getLink: (id: string) => Path.stopAreaDetails.replace(':id', id),
+    getLink: (id: string, observationDate: DateTime | string = '') => {
+      const observationDateStr =
+        observationDate instanceof DateTime
+          ? observationDate.toISODate()
+          : observationDate;
+      if (observationDateStr) {
+        return `${Path.stopAreaDetails.replace(':id', id)}?${qs.stringify({
+          [QueryParameterName.ObservationDate]: observationDateStr,
+        })}`;
+      }
+
+      return Path.stopAreaDetails.replace(':id', id);
+    },
     includeInNav: false,
   },
   [Path.terminalDetails]: {
