fixup! front: editor: fix route tool selection

OpenRailAssociation · Nov 15, 2023 · ee472d6 · ee472d6
1 parent d2033ab
commit ee472d6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/front/src/applications/editor/tools/routeEdition/components/Endpoints.tsx b/front/src/applications/editor/tools/routeEdition/components/Endpoints.tsx
@@ -1,25 +1,26 @@
 import Select from 'react-select';
-import React, { FC, useContext, useMemo } from 'react';
+import React, { FC, useContext, useMemo, useState } from 'react';
 import { BsArrowBarRight, BsBoxArrowInRight } from 'react-icons/bs';
 import { HiSwitchVertical } from 'react-icons/hi';
 import { FaFlagCheckered } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getInfraID } from 'reducers/osrdconf/selectors';
-import WayPointInput from './WayPointInput';
 import {
   BufferStopEntity,
   DetectorEntity,
   DIRECTIONS,
+  EndPoint,
   WayPoint,
   WayPointEntity,
-} from '../../../../../types';
-import { RouteState } from '../types';
-import EditorContext from '../../../context';
-import { getEntity } from '../../../data/api';
-import EntitySumUp from '../../../components/EntitySumUp';
-import TOOL_TYPES from '../../toolTypes';
+} from 'types';
+import EditorContext from 'applications/editor/context';
+import { getEntity } from 'applications/editor/data/api';
+import EntitySumUp from 'applications/editor/components/EntitySumUp';
+import TOOL_TYPES from 'applications/editor/tools/toolTypes';
+import { RouteState } from 'applications/editor/tools/routeEdition/types';
+import WayPointInput from './WayPointInput';
 
 export const EditEndpoints: FC<{ state: RouteState; onChange: (newState: RouteState) => void }> = ({
   state,
@@ -41,12 +42,16 @@ export const EditEndpoints: FC<{ state: RouteState; onChange: (newState: RouteSt
     [options, entryPointDirection]
   );
 
+  const [selectedEndpoint, setSelectedEndpoint] = useState<EndPoint | null>(null);
+
   return (
     <>
       <h5 className="mt-4">
         <BsArrowBarRight /> {t('Editor.tools.routes-edition.start')}
       </h5>
       <WayPointInput
+        selectedEndpoint={selectedEndpoint}
+        setSelectedEndpoint={setSelectedEndpoint}
         endPoint="BEGIN"
         wayPoint={entryPoint}
         onChange={(wayPoint) => onChange({ ...state, entryPoint: wayPoint })}
@@ -87,6 +92,8 @@ export const EditEndpoints: FC<{ state: RouteState; onChange: (newState: RouteSt
         <FaFlagCheckered /> {t('Editor.tools.routes-edition.end')}
       </h5>
       <WayPointInput
+        selectedEndpoint={selectedEndpoint}
+        setSelectedEndpoint={setSelectedEndpoint}
         endPoint="END"
         wayPoint={exitPoint}
         onChange={(wayPoint) => onChange({ ...state, exitPoint: wayPoint })}

diff --git a/front/src/applications/editor/tools/routeEdition/components/WayPointInput.tsx b/front/src/applications/editor/tools/routeEdition/components/WayPointInput.tsx
@@ -14,10 +14,12 @@ import { ExtendedEditorContextType } from 'applications/editor/tools/editorConte
 import { EndPoint, WayPoint, WayPointEntity } from 'types';
 
 const WayPointInput: FC<{
+  selectedEndpoint: EndPoint | null;
+  setSelectedEndpoint: (endPoint: EndPoint | null) => void;
   endPoint: EndPoint;
   wayPoint: WayPoint | null;
   onChange: (newWayPoint: WayPoint & { position: Position }) => void;
-}> = ({ endPoint, wayPoint, onChange }) => {
+}> = ({ selectedEndpoint, setSelectedEndpoint, endPoint, wayPoint, onChange }) => {
   const dispatch = useDispatch();
   const { state, setState } = useContext(
     EditorContext
@@ -28,7 +30,7 @@ const WayPointInput: FC<{
     { type: 'data'; entity: WayPointEntity } | { type: 'loading' } | { type: 'empty' }
   >({ type: 'empty' });
 
-  const [isPicking, setIsPicking] = useState(false);
+  const isPicking = selectedEndpoint === endPoint;
 
   const startPickingWayPoint = useCallback(() => {
     // Cancel current selection:
@@ -41,7 +43,7 @@ const WayPointInput: FC<{
       });
     }
     // Start selecting:
-    else {
+    else if (selectedEndpoint === null) {
       setState({
         ...state,
         extremityEditionState: {
@@ -55,12 +57,12 @@ const WayPointInput: FC<{
               id: newWayPoint.properties.id,
               position: newWayPoint.geometry.coordinates,
             });
-            setIsPicking(false);
+            setSelectedEndpoint(null);
           },
         },
       });
     }
-  }, [endPoint, isPicking, onChange, setState, state]);
+  }, [endPoint, selectedEndpoint, onChange, setState, state]);
 
   useEffect(() => {
     if (
@@ -96,9 +98,10 @@ const WayPointInput: FC<{
             type="button"
             className="btn btn-primary px-3"
             onClick={() => {
-              setIsPicking(!isPicking);
+              setSelectedEndpoint(selectedEndpoint === null ? endPoint : null);
               startPickingWayPoint();
             }}
+            disabled={selectedEndpoint !== null && !isPicking}
           >
             {isPicking ? <FaTimesCircle /> : <FaMapMarkedAlt />}
           </button>