Move copy stop feature under EditStopLayer

Author: Jontzii

ui/src/components/map/stops/CopyStopLayer.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, useImperativeHandle, useMemo } from 'react';
+import { DateTime } from 'luxon';
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 import { MapLayerMouseEvent } from 'react-map-gl/maplibre';
 import { useDispatch } from 'react-redux';
 import { ReusableComponentsVehicleModeEnum } from '../../../generated/graphql';
@@ -7,7 +8,9 @@ import {
   MapEntityEditorViewState,
   Operation,
   closeTimingPlaceModalAction,
+  isCopyMode,
   isModalOpen,
+  selectCopyStopId,
   selectEditedStopAreaData,
   selectMapStopViewState,
   setCopyStopIdAction,
@@ -29,6 +32,8 @@ import {
   mapStopToCommonConflictItem,
 } from '../../routes-and-lines/common/ConflictResolverModal';
 import { EditStoplayerRef } from '../refTypes';
+import { CopyStopConfirmationDialog } from './CopyStopConfirmationDialog';
+import { CopyStopModal } from './CopyStopModal';
 import { DeleteStopConfirmationDialog } from './DeleteStopConfirmationDialog';
 import { EditStopConfirmationDialog } from './EditStopConfirmationDialog';
 import { EditStopModal } from './EditStopModal';
@@ -40,6 +45,7 @@ import {
   useDeleteStopUtils,
   useEditStopUtils,
 } from './hooks';
+import { useMapCopyStopUtils } from './hooks/useMapCopyStopUtils';
 import { LineToActiveStopArea } from './LineToActiveStopArea';
 import { LineToClosestInfraLink } from './LineToClosestInfraLink';
 import { Stop } from './Stop';
@@ -107,27 +113,46 @@ function useDefaultValues(
 type EditStopLayerProps = {
   readonly draftLocation: Point | null;
   readonly onEditingFinished: (netexId: string | null) => void;
+  readonly onCopyFinished: (
+    netexId: string,
+    validityStart: DateTime,
+    validityEnd?: DateTime,
+  ) => void;
   readonly onPopupClose: () => void;
   readonly selectedStopId: string | null;
 };
 
 export const EditStopLayer = forwardRef<EditStoplayerRef, EditStopLayerProps>(
-  ({ draftLocation, onEditingFinished, onPopupClose, selectedStopId }, ref) => {
-    const { stopInfo, loading } = useGetStopInfoForEditingOnMap(selectedStopId);
-    useMapDataLayerLoader(
-      Operation.FetchStopInfo,
-      !!stopInfo || !selectedStopId,
-      loading,
-    );
-
+  (
+    {
+      draftLocation,
+      onEditingFinished,
+      onCopyFinished,
+      onPopupClose,
+      selectedStopId,
+    },
+    ref,
+  ) => {
     const dispatch = useDispatch();
 
+    const copyStopId = useAppSelector(selectCopyStopId);
     const mapStopViewState = useAppSelector(selectMapStopViewState);
     const setMapStopViewState = useAppAction(setMapStopViewStateAction);
     const setCopyStopId = useAppAction(setCopyStopIdAction);
 
+    const { stopInfo, loading } = useGetStopInfoForEditingOnMap(
+      selectedStopId ?? copyStopId,
+    );
+    useMapDataLayerLoader(
+      Operation.FetchStopInfo,
+      !!stopInfo || (!selectedStopId && !copyStopId),
+      loading,
+    );
+
     const defaultValues = useDefaultValues(draftLocation, stopInfo);
 
+    const [copyDialogOpen, setCopyDialogOpen] = useState(false);
+
     const onCloseEditors = () => {
       setMapStopViewState(MapEntityEditorViewState.NONE);
       dispatch(closeTimingPlaceModalAction());
@@ -154,6 +179,19 @@ export const EditStopLayer = forwardRef<EditStoplayerRef, EditStopLayerProps>(
     const { deleteChanges, onDeleteStop, onConfirmDelete, onCancelDelete } =
       useDeleteStopUtils(stopInfo, onFinishEditing);
 
+    const {
+      defaultStopFormValues,
+      onStartCopyStop,
+      onCancelCopyStop,
+      onCloseCopyModal,
+      onCopyStopFormSubmit,
+    } = useMapCopyStopUtils(
+      stopInfo,
+      onCopyFinished,
+      onPopupClose,
+      setCopyDialogOpen,
+    );
+
     if (createChanges && editChanges) {
       throw new Error('Undefined state');
     }
@@ -184,9 +222,10 @@ export const EditStopLayer = forwardRef<EditStoplayerRef, EditStopLayerProps>(
       dispatch(setSelectedRouteIdAction(undefined));
     };
 
-    const onStartCopyStop = () => {
+    const onInitCopyStop = () => {
       if (selectedStopId) {
         setCopyStopId(selectedStopId);
+        setCopyDialogOpen(true);
       }
     };
 
@@ -215,7 +254,7 @@ export const EditStopLayer = forwardRef<EditStoplayerRef, EditStopLayerProps>(
             onMove={onStartMoveStop}
             onDelete={onDeleteStop}
             onClose={onCloseEditors}
-            onCopy={onStartCopyStop}
+            onCopy={onInitCopyStop}
           />
         )}
 
@@ -256,6 +295,21 @@ export const EditStopLayer = forwardRef<EditStoplayerRef, EditStopLayerProps>(
             deleteChanges={deleteChanges}
           />
         )}
+
+        <CopyStopConfirmationDialog
+          isOpen={copyDialogOpen}
+          onConfirm={onStartCopyStop}
+          onCancel={onCancelCopyStop}
+        />
+
+        {isCopyMode(mapStopViewState) && !!defaultStopFormValues && (
+          <CopyStopModal
+            defaultValues={defaultStopFormValues}
+            onCancel={onCloseCopyModal}
+            onClose={onCloseCopyModal}
+            onSubmit={onCopyStopFormSubmit}
+          />
+        )}
       </>
     );
   },

ui/src/components/map/stops/EditStopLayer.tsx

@@ -15,7 +15,6 @@ import {
   Operation,
   isEditorOpen,
   isPlacingOrMoving,
-  selectCopyStopId,
   selectDraftLocation,
   selectSelectedStopAreaId,
   selectSelectedStopId,
@@ -39,7 +38,6 @@ import { EditStoplayerRef, StopsRef } from '../refTypes';
 import { MapStop, MapStopArea, MapTerminal } from '../types';
 import { useMapUrlStateContext } from '../utils/mapUrlState';
 import { useMapViewState } from '../utils/useMapViewState';
-import { CopyStopLayer } from './CopyStopLayer';
 import { CreateStopMarker } from './CreateStopMarker';
 import { EditStopLayer } from './EditStopLayer';
 import {
@@ -107,7 +105,6 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
     setFlatUrlState,
   } = useMapUrlStateContext();
 
-  const copyStopId = useAppSelector(selectCopyStopId);
   const selectedStopId = useAppSelector(selectSelectedStopId);
   const selectedStopAreaId = useAppSelector(selectSelectedStopAreaId);
   const selectedTerminalId = useAppSelector(selectSelectedTerminalId);
@@ -277,15 +274,8 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
           selectedStopId={selectedStopId ?? null}
           draftLocation={draftLocation ?? null}
           onEditingFinished={onEditingFinished}
-          onPopupClose={onPopupClose}
-        />
-      )}
-
-      {/* Copy a stop on the map */}
-      {copyStopId && (
-        <CopyStopLayer
-          onPopupClose={onPopupClose}
           onCopyFinished={onCopyFinished}
+          onPopupClose={onPopupClose}
         />
       )}
 

ui/src/components/map/stops/Stops.tsx

@@ -5,7 +5,6 @@ import { useDispatch } from 'react-redux';
 import { useAppAction, useAppSelector } from '../../../../hooks';
 import {
   MapEntityEditorViewState,
-  Operation,
   closeTimingPlaceModalAction,
   selectCopyStopId,
   selectDraftLocation,
@@ -17,12 +16,8 @@ import {
 import { parseDate } from '../../../../time';
 import { Point } from '../../../../types';
 import { showDangerToast } from '../../../../utils';
-import { useMapDataLayerLoader } from '../../../common/hooks';
 import { StopFormState } from '../../../forms/stop';
-import {
-  StopInfoForEditingOnMap,
-  useGetStopInfoForEditingOnMap,
-} from '../../../forms/stop/utils/useGetStopInfoForEditingOnMap';
+import { StopInfoForEditingOnMap } from '../../../forms/stop/utils/useGetStopInfoForEditingOnMap';
 import {
   mapStopFormStateToInputs,
   useCopyStop,
@@ -52,6 +47,7 @@ function useDefaultValues(
 }
 
 export function useMapCopyStopUtils(
+  stopInfo: StopInfoForEditingOnMap | null,
   onCopyFinished: (
     netexId: string,
     validityStart: DateTime,
@@ -77,13 +73,6 @@ export function useMapCopyStopUtils(
   const setMapStopViewState = useAppAction(setMapStopViewStateAction);
   const setDraftStopLocation = useAppAction(setDraftLocationAction);
 
-  const { stopInfo, loading } = useGetStopInfoForEditingOnMap(copyStopId);
-  useMapDataLayerLoader(
-    Operation.FetchStopInfo,
-    !!stopInfo || !copyStopId,
-    loading,
-  );
-
   const getStopDetails = useGetStopDetailsLazy();
   const copyStop = useCopyStop();
 
@@ -101,13 +90,13 @@ export function useMapCopyStopUtils(
   };
 
   const onCancelCopyStop = () => {
+    setDialogOpen(false);
     setSelectedStopId(copyStopId);
     setCopyStopId(undefined);
     setDraftStopLocation(undefined);
-    setDialogOpen(true);
   };
 
-  const onCloseModal = () => {
+  const onCloseCopyModal = () => {
     onCancelCopyStop();
 
     if (stopInfo) {
@@ -119,7 +108,7 @@ export function useMapCopyStopUtils(
     }
   };
 
-  const onStopFormSubmit = async (
+  const onCopyStopFormSubmit = async (
     changes: CreateChanges,
     state: StopFormState,
   ) => {
@@ -156,7 +145,7 @@ export function useMapCopyStopUtils(
     });
 
     setCopyStopId(undefined);
-    setDialogOpen(true);
+    setDialogOpen(false);
     onCopyFinished(
       quayId,
       parseDate(state.validityStart),
@@ -168,7 +157,7 @@ export function useMapCopyStopUtils(
     defaultStopFormValues: defaultValues,
     onStartCopyStop,
     onCancelCopyStop,
-    onCloseModal,
-    onStopFormSubmit,
+    onCloseCopyModal,
+    onCopyStopFormSubmit,
   };
 }