From 946aba7f9a9a79f008774183d042d568be794ea0 Mon Sep 17 00:00:00 2001
From: Jonas Geertsen Lund <jgl21@student.aau.dk>
Date: Thu, 7 Nov 2024 10:05:19 +0100
Subject: [PATCH] Fetch vessel path on duration change

---
 src/components/vesselDetailsBox.tsx | 62 ++++++++++-------------------
 1 file changed, 22 insertions(+), 40 deletions(-)

diff --git a/src/components/vesselDetailsBox.tsx b/src/components/vesselDetailsBox.tsx
index e9a5827..f493e36 100644
--- a/src/components/vesselDetailsBox.tsx
+++ b/src/components/vesselDetailsBox.tsx
@@ -11,6 +11,7 @@ export default function VesselDetailsBox() {
   const [vesselDetails, setVesselDetails] = useState<IDetailedVessel | undefined>(undefined)
   const [loading, setLoading] = useState(true)
   const [pathDuration, setPathDuration] = useState<number>(1)
+  const [pathIsShown, setPathIsShown] = useState<boolean>(false)
   const [isCollapsed, setIsCollapsed] = useState<boolean>(false)
 
   // Fetch vessel details on selected vessel change
@@ -31,49 +32,30 @@ export default function VesselDetailsBox() {
 
     fetchDetails()
     setLoading(false)
-  }, [clientHandler, selectedVesselmmsi])
+  }, [clientHandler, myDateTimeRef, selectedVesselmmsi])
 
-  async function tryGetVesselPath() {
-    if (!selectedVesselmmsi) return
-    try {
-      const res = await clientHandler.getVesselPath({
-        mmsi: selectedVesselmmsi,
-        endtime: myDateTimeRef.current.getTime() / 1000,
-        starttime: myDateTimeRef.current.getTime() / 1000 - pathDuration * 60 * 60,
-      }) //time is in seconds
-      setSelectedVesselPath(res.pathHistory.locations)
-    } catch (e) {
-      console.error(e)
+  // Fetch path history on path duration change and show path
+  useEffect(() => {
+    async function tryGetVesselPath() {
+      if (!selectedVesselmmsi) return
+      try {
+        const res = await clientHandler.getVesselPath({
+          mmsi: selectedVesselmmsi,
+          endtime: myDateTimeRef.current.getTime() / 1000,
+          starttime: myDateTimeRef.current.getTime() / 1000 - pathDuration * 60 * 60,
+        }) //time is in seconds
+        setSelectedVesselPath(res.pathHistory.locations)
+      } catch (e) {
+        console.error(e)
+      }
     }
-  }
 
-  const pathIsShown = selectedVesselPath.length > 0
-
-  async function controlVesselPath() {
-    if (pathIsShown) {
+    if (!pathIsShown) {
       setSelectedVesselPath([])
-      return
-    }
-    await tryGetVesselPath()
-  }
-
-  async function handleDurationChange(val: string) {
-    try {
-      const parsed = parseFloat(val)
-      setPathDuration(Math.max(0, parsed))
-    } catch (e) {
-      console.error(e)
-      setPathDuration(1)
-    }
-  }
-
-  // Fetch path history on path duration change
-  useEffect(() => {
-    async function doSomething() {
-      await tryGetVesselPath()
+    } else {
+      tryGetVesselPath()
     }
-    if (pathIsShown) doSomething()
-  }, [pathDuration, pathIsShown, tryGetVesselPath])
+  }, [clientHandler, myDateTimeRef, pathDuration, pathIsShown, selectedVesselmmsi, setSelectedVesselPath])
 
   const vesselDetailsContent = [
     { displayName: 'Name', value: vesselDetails?.name },
@@ -127,11 +109,11 @@ export default function VesselDetailsBox() {
                       max="24"
                       placeholder="Path duration Hours"
                       value={pathDuration}
-                      onChange={(e) => handleDurationChange(e.target.value)}
+                      onChange={(e) => setPathDuration(Math.max(0, parseFloat(e.target.value)))}
                     ></input>
                   </div>
 
-                  <button className="blue-badge w-24 py-1" onClick={controlVesselPath}>
+                  <button className="blue-badge w-24 py-1" onClick={() => setPathIsShown(!pathIsShown)}>
                     {selectedVesselPath.length > 0 ? 'Hide Path' : 'Show Path'}
                   </button>
                 </div>