Update stop area details

ui/src/components/stop-registry/stop-areas/stop-area-details/StopAreaDetailsPage.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
-import { useLoader } from '../../../../hooks';
+import { Navigate } from 'react-router-dom';
+import { useGetStopPlaceDetails, useLoader } from '../../../../hooks';
 import { Container } from '../../../../layoutComponents';
 import { LoadingState, Operation } from '../../../../redux';
 import {
@@ -10,22 +10,20 @@ import {
   StopAreaVersioningRow,
 } from './components';
 import { StopAreaEditableBlock } from './StopAreaEditableBlock';
-import { useGetStopAreaDetails } from './useGetStopAreaDetails';
 
 const testIds = {
   page: 'StopAreaDetailsPage::page',
 };
 
 export const StopAreaDetailsPage: FC<Record<string, never>> = () => {
-  const { id } = useParams();
 
   const [blockInEdit, setBlockInEdit] = useState<StopAreaEditableBlock | null>(
     null,
   );
 
-  const { area, loading, refetch } = useGetStopAreaDetails(id ?? '');
+  const { stopPlaceDetails, loading, refetch } = useGetStopPlaceDetails();
   const { setLoadingState } = useLoader(Operation.FetchStopAreaPageDetails, {
-    initialState: area ? LoadingState.NotLoading : LoadingState.MediumPriority,
+    initialState: stopPlaceDetails ? LoadingState.NotLoading : LoadingState.MediumPriority,
   });
 
   useEffect(() => {
@@ -34,27 +32,27 @@ export const StopAreaDetailsPage: FC<Record<string, never>> = () => {
     }
   }, [loading, setLoadingState]);
 
-  if (loading && !area) {
+  if (loading && !stopPlaceDetails) {
     return null;
   }
 
-  if (!area) {
+  if (!stopPlaceDetails) {
     return <Navigate to="/404" replace />;
   }
 
   return (
     <Container className="space-y-4" testId={testIds.page}>
-      <StopAreaTitleRow area={area} />
+      <StopAreaTitleRow area={stopPlaceDetails} />
       <hr />
-      <StopAreaVersioningRow area={area} />
+      <StopAreaVersioningRow area={stopPlaceDetails} />
       <StopAreaDetailsAndMap
-        area={area}
+        area={stopPlaceDetails}
         blockInEdit={blockInEdit}
         onEditBlock={setBlockInEdit}
         refetch={refetch}
       />
       <StopAreaMemberStops
-        area={area}
+        area={stopPlaceDetails}
         blockInEdit={blockInEdit}
         onEditBlock={setBlockInEdit}
         refetch={refetch}

ui/src/components/stop-registry/stop-areas/stop-area-details/components/StopAreaComponentProps.ts

@@ -1,14 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
-import { StopAreaDetailsFragment } from '../../../../../generated/graphql';
 import { StopAreaEditableBlock } from '../StopAreaEditableBlock';
+import { StopPlaceWithDetails } from '../../../../../hooks';
 
 export type StopAreaComponentProps = {
-  readonly area: StopAreaDetailsFragment;
+  readonly area: StopPlaceWithDetails;
   readonly className?: string;
 };
 
 export type EditableStopAreaComponentProps = {
-  readonly area: StopAreaDetailsFragment;
+  readonly area: StopPlaceWithDetails;
   readonly className?: string;
   readonly blockInEdit: StopAreaEditableBlock | null;
   readonly onEditBlock: Dispatch<SetStateAction<StopAreaEditableBlock | null>>;

ui/src/components/stop-registry/stop-areas/stop-area-details/components/StopAreaDetailsEdit.tsx

@@ -3,8 +3,8 @@ import React, { ForwardRefRenderFunction, forwardRef, useMemo } from 'react';
 import { FormProvider, UseFormReturn, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import { StopAreaDetailsFragment } from '../../../../../generated/graphql';
-import { useLoader } from '../../../../../hooks';
+import { StopAreaDetailsFragment, StopPlaceDetailsFragment } from '../../../../../generated/graphql';
+import { StopPlaceWithDetails, useLoader } from '../../../../../hooks';
 import { Column } from '../../../../../layoutComponents';
 import { Operation } from '../../../../../redux';
 import { mapToISODate } from '../../../../../time';
@@ -21,7 +21,6 @@ import {
   StopAreaFormState,
   TypedName,
   stopAreaFormSchema,
-  stopAreaMemberStopSchema,
   useUpsertStopArea,
 } from '../../../../forms/stop-area';
 
@@ -33,26 +32,22 @@ const testIds = {
 };
 
 export const mapStopAreaDataToFormState = (
-  area: StopAreaDetailsFragment,
+  area: StopPlaceWithDetails,
 ): Partial<FormState> => {
-  const { latitude, longitude } = mapLngLatToPoint(
-    area.geometry?.coordinates ?? [],
+  /*const { latitude, longitude } = mapLngLatToPoint(
+    area.stop_place?.geometry?.coordinates ?? [],
   );
 
-  const mappedMembers = area.members
-    ?.map((rawMember) => stopAreaMemberStopSchema.safeParse(rawMember))
-    .filter((parseResult) => parseResult.success)
-    .map((parseResult) => parseResult.data);
+  console.log('AREA', latitude)*/
 
   return {
-    label: area.name?.value ?? undefined,
-    name: area.description?.value ?? undefined,
-    latitude,
-    longitude,
-    memberStops: mappedMembers ?? [],
-    validityStart: mapToISODate(area.validBetween?.fromDate),
-    validityEnd: mapToISODate(area.validBetween?.toDate),
-    indefinite: !area.validBetween?.toDate,
+    label: area.stop_place?.name?.value ?? undefined,
+    name: area.stop_place?.name ?? undefined,
+    /*latitude,
+    longitude,*/
+    validityStart: mapToISODate(area.stop_place?.validityStart),
+    validityEnd: mapToISODate(area.stop_place?.validityEnd),
+    indefinite: !area.stop_place?.validityEnd,
   };
 };
 
@@ -71,7 +66,7 @@ function getOverriddenNames(
 }
 
 type StopAreaDetailsEditProps = {
-  readonly area: StopAreaDetailsFragment;
+  readonly area: StopPlaceWithDetails;
   readonly className?: string;
   readonly refetch: () => Promise<unknown>;
   readonly onFinishEditing: () => void;
@@ -88,7 +83,7 @@ const StopAreaDetailsEditImpl: ForwardRefRenderFunction<
   const onSubmit = async (state: StopAreaFormState) => {
     setIsLoading(true);
     try {
-      await upsertStopArea({ id: area.id, state });
+      await upsertStopArea({ id: area.stop_place?.id, state });
       await refetch();
 
       showSuccessToast(t('stopArea.editSuccess'));
@@ -160,7 +155,7 @@ const StopAreaDetailsEditImpl: ForwardRefRenderFunction<
           </FormRow>
 
           <NameConsistencyChecker.NameOnlyForm
-            stopAreaId={area.id as string}
+            stopAreaId={area.stop_place?.id as string}
             stopAreaNameOverrides={overriddenNames}
           />
         </FormColumn>

ui/src/components/stop-registry/stop-areas/stop-area-details/components/StopAreaDetailsView.tsx

@@ -1,22 +1,24 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import { StopAreaDetailsFragment } from '../../../../../generated/graphql';
 import { mapToShortDate } from '../../../../../time';
 import { DetailRow, LabeledDetail } from '../../../stops/stop-details/layout';
 import { StopAreaComponentProps } from './StopAreaComponentProps';
+import { StopPlaceWithDetails } from '../../../../../hooks';
 
 const testIds = {
   name: 'StopAreaDetails::name',
+  nameFin: 'StopAreaDetails::nameFin',
+  nameSwe: 'StopAreaDetails::nameSwe',
   description: 'StopAreaDetails::description',
   parentStopPlace: 'StopAreaDetails::parentStopPlace',
   areaSize: 'StopAreaDetails::areaSize',
   validityPeriod: 'StopAreaDetails::validityPeriod',
 };
 
-function validityPeriod(area: StopAreaDetailsFragment) {
-  const from = mapToShortDate(area.validBetween?.fromDate);
-  const to = mapToShortDate(area.validBetween?.toDate);
+function validityPeriod(area: StopPlaceWithDetails) {
+  const from = mapToShortDate(area.stop_place?.validityStart);
+  const to = mapToShortDate(area.stop_place?.validityEnd);
 
   if (from || to) {
     return `${from ?? ''}-${to ?? ''}`;
@@ -31,17 +33,19 @@ export const StopAreaDetailsView: FC<StopAreaComponentProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  console.log(area)
+
   return (
     <DetailRow className={twMerge('mb-0 flex-grow flex-wrap py-0', className)}>
       <LabeledDetail
         title={t('stopAreaDetails.basicDetails.name')}
-        detail={area.name?.value}
+        detail={area.stop_place?.name}
         testId={testIds.name}
       />
       <LabeledDetail
-        title={t('stopAreaDetails.basicDetails.description')}
-        detail={area.description?.value}
-        testId={testIds.description}
+        title={t('stopDetails.basicDetails.nameSwe')}
+        detail={area.stop_place?.nameSwe}
+        testId={testIds.nameSwe}
       />
       <LabeledDetail
         title={t('stopAreaDetails.basicDetails.parentTerminal')}

ui/src/components/stop-registry/stop-areas/stop-area-details/components/StopAreaMemberStopRows.tsx

@@ -3,7 +3,6 @@ import groupBy from 'lodash/groupBy';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import { StopAreaDetailsFragment } from '../../../../../generated/graphql';
 import { Priority } from '../../../../../types/enums';
 import { StopAreaFormMember } from '../../../../forms/stop-area';
 import { StopSearchRow, StopTableRow } from '../../../search';
@@ -14,9 +13,11 @@ import { mapMembersToStopSearchFormat } from '../utils';
 import { EditModeActionButton } from './MemberStopMenuActionButtons/EditModeActionButton';
 import { RemoveMemberStop } from './MemberStopMenuItems/RemoveMemberStop';
 import { StopAreaComponentProps } from './StopAreaComponentProps';
+import { StopPlaceWithDetails } from '../../../../../hooks';
+import { StopPlaceDetailsFragment } from '../../../../../generated/graphql';
 
 type StopAreaMemberRow = {
-  readonly stop: StopSearchRow;
+  readonly quay: StopSearchRow;
   readonly selected: boolean;
   readonly added: boolean;
 };
@@ -81,8 +82,8 @@ function tagRowWithStatusText(
 ): StopAreaMemberRow {
   return {
     ...row,
-    stop: {
-      ...row.stop,
+    quay: {
+      ...row.quay,
       timing_place: {
         __typename: 'timing_pattern_timing_place',
         timing_place_id: '',
@@ -94,15 +95,15 @@ function tagRowWithStatusText(
 
 function mapRows(
   t: TFunction,
-  area: StopAreaDetailsFragment,
+  area: StopPlaceWithDetails,
   inEditMode: boolean,
   inEditSelectedStops: ReadonlyArray<StopAreaFormMember>,
 ): Array<StopAreaMemberRow> {
   const existingAreaMembers = mapMembersToStopSearchFormat(area);
 
   if (!inEditMode) {
-    return existingAreaMembers.map((stop) => ({
-      stop,
+    return existingAreaMembers.map((quay) => ({
+      quay,
       selected: true,
       added: false,
     }));
@@ -120,12 +121,12 @@ function mapRows(
     .map(stopAreaFormMemberToStopSearchRow);
 
   return [
-    ...selected.map((stop) => ({ stop, selected: true, added: false })),
-    ...removed.map((stop) => ({ stop, selected: false, added: false })),
-    ...added.map((stop) => ({ stop, selected: true, added: true })),
+    ...selected.map((quay) => ({ quay, selected: true, added: false })),
+    ...removed.map((quay) => ({ quay, selected: false, added: false })),
+    ...added.map((quay) => ({ quay, selected: true, added: true })),
   ]
     .map((row) => tagRowWithStatusText(t, row))
-    .sort((a, b) => a.stop.label.localeCompare(b.stop.label));
+    .sort((a, b) => a.quay.label.localeCompare(b.quay.label));
 }
 
 function getRowBgClassName(added: boolean, selected: boolean) {
@@ -166,32 +167,32 @@ export const StopAreaMemberStopRows: FC<StopAreaMemberStopRowsProps> = ({
     >
       <tbody>
         {mapRows(t, area, inEditMode, inEditSelectedStops).map(
-          ({ stop, selected, added }) => (
+          ({ quay, selected, added }) => (
             <StopTableRow
               className={getRowBgClassName(added, selected)}
-              key={stop.scheduled_stop_point_id}
+              key={quay.scheduled_stop_point_id}
               inEditMode={inEditMode}
-              stop={stop}
+              stop={quay}
               actionButtons={
                 inEditMode ? (
                   <EditModeActionButton
                     onAddBack={onAddBack}
                     onRemove={onRemove}
                     selected={selected}
-                    stop={stop}
+                    stop={quay}
                   />
                 ) : (
-                  <LocatorActionButton stop={stop} />
+                  <LocatorActionButton stop={quay} />
                 )
               }
               menuItems={[
-                <OpenDetailsPage key="OpenDetailsPage" stop={stop} />,
+                <OpenDetailsPage key="OpenDetailsPage" stop={quay} />,
                 <RemoveMemberStop
                   key="RemoveMemberStop"
-                  stop={stop}
+                  stop={quay}
                   onRemove={onRemove}
                 />,
-                <ShowOnMap key="ShowOnMap" stop={stop} />,
+                <ShowOnMap key="ShowOnMap" stop={quay} />,
               ]}
             />
           ),

ui/src/components/stop-registry/stop-areas/stop-area-details/components/StopAreaMemberStops.tsx

@@ -138,7 +138,7 @@ export const StopAreaMemberStops: FC<EditableStopAreaComponentProps> = ({
 
     methods,
   } = useMemberStopFormControls(
-    area.id,
+    area.stop_place?.id,
     defaultValues,
     onEditBlock,
     refetch,
@@ -194,7 +194,7 @@ export const StopAreaMemberStops: FC<EditableStopAreaComponentProps> = ({
           <h2>{t('stopAreaDetails.memberStops.title')}</h2>
 
           <StopAreaMemberStopsHeader
-            areaId={area.id}
+            areaId={area.stop_place?.id}
             blockInEdit={blockInEdit}
             onCancel={onCancelEdit}
             onEditStops={onEditStops}

ui/src/components/stop-registry/stop-areas/stop-area-details/components/StopAreaMinimap.tsx

@@ -20,7 +20,7 @@ export const StopAreaMinimap: FC<StopAreaComponentProps> = ({
   const { t } = useTranslation();
   const showOnMap = useShowStopAreaOnMap();
 
-  const point = mapLngLatToPoint(area.geometry?.coordinates ?? []);
+  // const point = mapLngLatToPoint(area.stop_place?.geometry?.coordinates ?? []);
 
   return (
     <div
@@ -37,17 +37,17 @@ export const StopAreaMinimap: FC<StopAreaComponentProps> = ({
         <br />
         <span
           data-testid={testIds.marker}
-          data-longitude={point.longitude}
-          data-latitude={point.latitude}
+          data-longitude={area.stop_place?.locationLong}
+          data-latitude={area.stop_place?.locationLat}
         >
-          {area.description?.value}
+          {area.stop_place?.name}
         </span>
       </div>
 
       <SlimSimpleButton
         className="absolute right-2 top-2"
         inverted
-        onClick={() => showOnMap(area.id ?? undefined, point)}
+        onClick={() => showOnMap(area.stop_place?.id ?? undefined, point)}
         testId={testIds.openMapButton}
       >
         {t('stopAreaDetails.minimap.showOnMap')}