From d7ee43c2b6ac796909ddeb565005e5dee133153f Mon Sep 17 00:00:00 2001
From: Seb-sti1 <65665540+seb-sti1@users.noreply.github.com>
Date: Thu, 12 Oct 2023 10:06:48 +0200
Subject: [PATCH] SearchBar: Make it fly to the selected road

---
 .../src/Components/Conditions/ConditionsMap.tsx     | 13 +++++++++++++
 frontend/src/Components/Map/ForceMapUpdate.tsx      |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/Conditions/ConditionsMap.tsx b/frontend/src/Components/Conditions/ConditionsMap.tsx
index 9f8fd23b..425a7d72 100644
--- a/frontend/src/Components/Conditions/ConditionsMap.tsx
+++ b/frontend/src/Components/Conditions/ConditionsMap.tsx
@@ -17,6 +17,8 @@ import { getConditions } from '../../queries/fetchConditions';
 import { IRoad } from '../../models/path';
 import { getRoads } from '../../queries/road';
 import Roads from '../Map/Roads';
+import { LatLng } from '../../models/models';
+import ForceMapUpdate from '../Map/ForceMapUpdate';
 
 const ALL = 'ALL';
 const KPI = 'KPI';
@@ -385,6 +387,8 @@ const ConditionsMap = (props: any) => {
     getRoads(setRoads);
   }, []);
 
+  const [moveToPosition, setMoveToPosition] = useState<LatLng>();
+
   return (
     <div style={{ height: '100%' }}>
       <div className="nav-wrapper">
@@ -392,6 +396,14 @@ const ConditionsMap = (props: any) => {
           <Search
             onPlaceSelect={(value: any) => {
               console.log(value);
+              const coordinates = value?.geometry?.coordinates;
+              if (coordinates) {
+                const position = {
+                  lat: coordinates[Math.floor(coordinates.length / 2)][1],
+                  lng: coordinates[Math.floor(coordinates.length / 2)][0],
+                };
+                setMoveToPosition(position);
+              }
             }}
           />
         </div>
@@ -423,6 +435,7 @@ const ConditionsMap = (props: any) => {
       <div style={{ height: '100%' }}>
         <MapWrapper>
           <Roads roads={roads} />
+          <ForceMapUpdate position={moveToPosition} />
           {dataAll !== undefined && (
             <GeoJSON
               ref={geoJsonRef}
diff --git a/frontend/src/Components/Map/ForceMapUpdate.tsx b/frontend/src/Components/Map/ForceMapUpdate.tsx
index b59a5bef..10a58e79 100644
--- a/frontend/src/Components/Map/ForceMapUpdate.tsx
+++ b/frontend/src/Components/Map/ForceMapUpdate.tsx
@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 
 interface Props {
   /** A modification of this value is used to trigger an update of the map */
-  triggerUpdate: number;
+  triggerUpdate?: number;
   /** The coordinates of the map center*/
   position?: LatLng;
 }