From 58d656f61f6ff58d75889d792e98d4e840d64635 Mon Sep 17 00:00:00 2001
From: santiago <108626122+marcosantiagomuro@users.noreply.github.com>
Date: Sun, 8 Oct 2023 19:05:27 +0200
Subject: [PATCH] test-graph-view | added force map update on conditions map to
 trigger "referesh"

---
 frontend/src/Components/Map/ForceMapUpdate.tsx        |  1 +
 .../src/Components/RoadConditions/ConditionsMap.tsx   | 11 ++++++++---
 frontend/src/pages/RoadConditions.tsx                 |  6 +++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/Map/ForceMapUpdate.tsx b/frontend/src/Components/Map/ForceMapUpdate.tsx
index 2034f8bd..b59a5bef 100644
--- a/frontend/src/Components/Map/ForceMapUpdate.tsx
+++ b/frontend/src/Components/Map/ForceMapUpdate.tsx
@@ -16,6 +16,7 @@ const ForceMapUpdate: React.FC<Props> = ({ triggerUpdate, position }) => {
   const map = useMap();
 
   useEffect(() => {
+    console.log('hello');
     map.invalidateSize();
   }, [triggerUpdate]);
 
diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx
index 3380c0ed..9e4d6214 100644
--- a/frontend/src/Components/RoadConditions/ConditionsMap.tsx
+++ b/frontend/src/Components/RoadConditions/ConditionsMap.tsx
@@ -1,15 +1,20 @@
 import MapWrapper from '../Map/MapWrapper';
 import { FC } from 'react';
 import '../../css/road_conditions.css';
+import ForceMapUpdate from '../Map/ForceMapUpdate';
 
-interface Props {}
+interface Props {
+  triggerUpdate: number;
+}
 
-const ConditionsMap: FC<Props> = () => {
+const ConditionsMap: FC<Props> = ({ triggerUpdate }) => {
   //TODO trigger redrwaw the plot
 
   return (
     <div className="road-conditions-map">
-      <MapWrapper></MapWrapper>
+      <MapWrapper>
+        <ForceMapUpdate triggerUpdate={triggerUpdate} />
+      </MapWrapper>
     </div>
   );
 };
diff --git a/frontend/src/pages/RoadConditions.tsx b/frontend/src/pages/RoadConditions.tsx
index 0465b414..3797b18b 100644
--- a/frontend/src/pages/RoadConditions.tsx
+++ b/frontend/src/pages/RoadConditions.tsx
@@ -16,6 +16,7 @@ import { getConditionsWay } from '../queries/conditions';
 const RoadConditions = () => {
   const [wayData, setWayData] =
     useState<ChartData<'scatter', number[], number>>();
+  const [triggerUpdate, setTriggerUpdate] = useState<number>(0);
 
   console.log(wayData);
 
@@ -60,9 +61,12 @@ const RoadConditions = () => {
         sizes={[45, 55]}
         minSize={150}
         snapOffset={10}
+        onDragEnd={() => {
+          setTriggerUpdate((prev) => prev + 1);
+        }}
         // dragInterval={50}
       >
-        <ConditionsMap />
+        <ConditionsMap triggerUpdate={triggerUpdate} />
         <ConditionsGraph data={wayData} />
       </Split>
     </GraphProvider>