From c7026b04cc44d35749fc5d8c0c7ab5ad6982ff69 Mon Sep 17 00:00:00 2001
From: SarahBellaha <sarah.bellaha@sncf.fr>
Date: Wed, 15 Nov 2023 16:02:47 +0100
Subject: [PATCH] fixup! fixup! front: editor: fix route tool selection

---
 .../routeEdition/components/Endpoints.tsx     | 17 ++-----------
 .../routeEdition/components/WayPointInput.tsx | 24 +++++++++----------
 2 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/front/src/applications/editor/tools/routeEdition/components/Endpoints.tsx b/front/src/applications/editor/tools/routeEdition/components/Endpoints.tsx
index 72268546f35..758b0ffffe9 100644
--- a/front/src/applications/editor/tools/routeEdition/components/Endpoints.tsx
+++ b/front/src/applications/editor/tools/routeEdition/components/Endpoints.tsx
@@ -1,5 +1,5 @@
 import Select from 'react-select';
-import React, { FC, useContext, useMemo, useState } from 'react';
+import React, { FC, useContext, useMemo } from 'react';
 import { BsArrowBarRight, BsBoxArrowInRight } from 'react-icons/bs';
 import { HiSwitchVertical } from 'react-icons/hi';
 import { FaFlagCheckered } from 'react-icons/fa';
@@ -7,14 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getInfraID } from 'reducers/osrdconf/selectors';
-import {
-  BufferStopEntity,
-  DetectorEntity,
-  DIRECTIONS,
-  EndPoint,
-  WayPoint,
-  WayPointEntity,
-} from 'types';
+import { BufferStopEntity, DetectorEntity, DIRECTIONS, WayPoint, WayPointEntity } from 'types';
 import EditorContext from 'applications/editor/context';
 import { getEntity } from 'applications/editor/data/api';
 import EntitySumUp from 'applications/editor/components/EntitySumUp';
@@ -42,16 +35,12 @@ 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 })}
@@ -92,8 +81,6 @@ 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
index 74d2054507b..0aba21848a0 100644
--- a/front/src/applications/editor/tools/routeEdition/components/WayPointInput.tsx
+++ b/front/src/applications/editor/tools/routeEdition/components/WayPointInput.tsx
@@ -14,12 +14,10 @@ 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;
-}> = ({ selectedEndpoint, setSelectedEndpoint, endPoint, wayPoint, onChange }) => {
+}> = ({ endPoint, wayPoint, onChange }) => {
   const dispatch = useDispatch();
   const { state, setState } = useContext(
     EditorContext
@@ -30,7 +28,13 @@ const WayPointInput: FC<{
     { type: 'data'; entity: WayPointEntity } | { type: 'loading' } | { type: 'empty' }
   >({ type: 'empty' });
 
-  const isPicking = selectedEndpoint === endPoint;
+  const isPicking =
+    state.extremityEditionState.type === 'selection' &&
+    state.extremityEditionState.extremity === endPoint;
+  const isDisabled =
+    state.extremityEditionState.type === 'selection' &&
+    !isPicking &&
+    state.extremityEditionState.extremity !== endPoint;
 
   const startPickingWayPoint = useCallback(() => {
     // Cancel current selection:
@@ -43,7 +47,7 @@ const WayPointInput: FC<{
       });
     }
     // Start selecting:
-    else if (selectedEndpoint === null) {
+    else {
       setState({
         ...state,
         extremityEditionState: {
@@ -57,12 +61,11 @@ const WayPointInput: FC<{
               id: newWayPoint.properties.id,
               position: newWayPoint.geometry.coordinates,
             });
-            setSelectedEndpoint(null);
           },
         },
       });
     }
-  }, [endPoint, selectedEndpoint, onChange, setState, state]);
+  }, [endPoint, isPicking, onChange, setState, state]);
 
   useEffect(() => {
     if (
@@ -97,11 +100,8 @@ const WayPointInput: FC<{
           <button
             type="button"
             className="btn btn-primary px-3"
-            onClick={() => {
-              setSelectedEndpoint(selectedEndpoint === null ? endPoint : null);
-              startPickingWayPoint();
-            }}
-            disabled={selectedEndpoint !== null && !isPicking}
+            onClick={startPickingWayPoint}
+            disabled={isDisabled}
           >
             {isPicking ? <FaTimesCircle /> : <FaMapMarkedAlt />}
           </button>