Merge pull request #342 from dataforgoodfr/enhancement/frontend/left-…

…bar-for-tracking

Enhancement/frontend/left bar for tracking

docker/frontend/dev.Dockerfile

@@ -5,6 +5,8 @@ WORKDIR ${APP_DIR}
 
 # Install dependencies based on the preferred package manager
 COPY frontend/package.json frontend/yarn.lock* frontend/package-lock.json* frontend/pnpm-lock.yaml* ./
+RUN mkdir -p ./app
+
 RUN \
   if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
   elif [ -f package-lock.json ]; then npm ci; \

frontend/.eslintrc.json

@@ -12,7 +12,8 @@
     "@next/next/no-page-custom-font": "off",
     "react/jsx-key": "off",
     "tailwindcss/no-custom-classname": "off",
-    "tailwindcss/classnames-order": "off"
+    "tailwindcss/classnames-order": "off",
+    "react-hooks/exhaustive-deps": "off"
   },
   "settings": {
     "tailwindcss": {

frontend/app/dashboard/page.tsx

@@ -22,8 +22,6 @@ export default function DashboardPage() {
     isLoading,
   } = useDashboardData(startAt, endAt)
 
-  console.log("totalVesselsTracked", totalVesselsTracked)
-
   return (
     <section className="flex h-full items-center justify-center overflow-auto bg-color-3 p-2 2xl:p-4">
       <div className="flex size-full max-w-screen-xl flex-col gap-2 2xl:gap-4">

frontend/app/details/amp/[id]/page.tsx

@@ -2,11 +2,10 @@
 
 import { useMemo, useState } from "react"
 import { getZoneDetails } from "@/services/backend-rest-client"
-import { swrOptions } from "@/services/swr"
 import { getCountryNameFromIso3 } from "@/utils/vessel.utils"
 import useSWR from "swr"
 
-import { convertDurationInHours, getDateRange } from "@/libs/dateUtils"
+import { convertDurationInHoursStr, getDateRange } from "@/libs/dateUtils"
 import DetailsContainer from "@/components/details/details-container"
 
 export default function AmpDetailsPage({ params }: { params: { id: string } }) {
@@ -42,7 +41,7 @@ export default function AmpDetailsPage({ params }: { params: { id: string } }) {
           id: vessel.id.toString(),
           title: `${vessel.ship_name} - ${getCountryNameFromIso3(vessel.country_iso3)}`,
           description: `IMO: ${vessel.imo} - MMSI: ${vessel.mmsi} - Type: ${vessel.type} - Length: ${vessel.length} m`,
-          value: `${convertDurationInHours(zone_visiting_time_by_vessel)}h`,
+          value: `${convertDurationInHoursStr(zone_visiting_time_by_vessel)}h`,
           type: "vessels",
         }
       }),

frontend/app/details/vessel/[id]/page.tsx

@@ -1,14 +1,11 @@
 "use client"
 
 import { useMemo, useState } from "react"
-import {
-  getTimeByZone,
-  getTopZonesVisited,
-} from "@/services/backend-rest-client"
+import { getTimeByZone } from "@/services/backend-rest-client"
 import { getCountryNameFromIso3 } from "@/utils/vessel.utils"
 import useSWR from "swr"
 
-import { convertDurationInHours, getDateRange } from "@/libs/dateUtils"
+import { convertDurationInHoursStr, getDateRange } from "@/libs/dateUtils"
 import DetailsContainer from "@/components/details/details-container"
 
 export default function VesselDetailsPage({
@@ -51,7 +48,7 @@ export default function VesselDetailsPage({
           id: zone.id.toString(),
           title: zone.name,
           description: zone.sub_category,
-          value: `${convertDurationInHours(vessel_visiting_time_by_zone)}h`,
+          value: `${convertDurationInHoursStr(vessel_visiting_time_by_zone)}h`,
           type: "zones",
         }
       }),

frontend/app/layout.tsx

@@ -1,4 +1,5 @@
 import "@/styles/globals.css"
+import "react-day-picker/dist/style.css"
 
 import { Metadata } from "next"
 

frontend/app/map/layout.tsx

@@ -3,8 +3,6 @@ import "@/styles/globals.css"
 import { Metadata } from "next"
 
 import { siteConfig } from "@/config/site"
-import { MapStoreProvider } from "@/components/providers/map-store-provider"
-import { VesselsStoreProvider } from "@/components/providers/vessels-store-provider"
 
 export const metadata: Metadata = {
   title: {
@@ -30,11 +28,7 @@ interface RootLayoutProps {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <section className="relative flex h-screen w-full flex-row">
-      <MapStoreProvider>
-        <VesselsStoreProvider>
-          {children}
-        </VesselsStoreProvider>
-      </MapStoreProvider>
+      {children}
     </section>
   )
 }

frontend/app/map/page.tsx

@@ -1,14 +1,25 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
+import {
+  getVesselExcursions,
+  getVessels,
+  getVesselSegments,
+  getVesselsLatestPositions,
+} from "@/services/backend-rest-client"
 import useSWR from "swr"
+import { useShallow } from 'zustand/react/shallow'
 
 import { Vessel, VesselPosition } from "@/types/vessel"
 import { ZoneWithGeometry } from "@/types/zone"
 import LeftPanel from "@/components/core/left-panel"
 import MapControls from "@/components/core/map-controls"
 import Map from "@/components/core/map/main-map"
 import PositionPreview from "@/components/core/map/position-preview"
+import { useMapStore } from "@/libs/stores/map-store"
+import { useVesselsStore } from "@/libs/stores/vessels-store"
+import { useLoaderStore } from "@/libs/stores/loader-store"
+import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
 
 const fetcher = async (url: string) => {
   const response = await fetch(url, {
@@ -18,6 +29,19 @@ const fetcher = async (url: string) => {
 }
 
 export default function MapPage() {
+  const setVessels = useVesselsStore((state) => state.setVessels)
+
+  const { setZonesLoading, setPositionsLoading, setVesselsLoading, setExcursionsLoading } = useLoaderStore(useShallow((state) => ({
+    setZonesLoading: state.setZonesLoading,
+    setPositionsLoading: state.setPositionsLoading,
+    setVesselsLoading: state.setVesselsLoading,
+    setExcursionsLoading: state.setExcursionsLoading,
+  })))
+
+  const { mode: mapMode } = useMapStore(useShallow((state) => ({
+    mode: state.mode
+  })))
+
   const { data: vessels = [], isLoading: isLoadingVessels } = useSWR<Vessel[]>(
     "/api/vessels",
     fetcher,
@@ -28,6 +52,12 @@ export default function MapPage() {
     }
   )
 
+  useEffect(() => {
+    if (!isLoadingVessels) {
+      setVessels(vessels);
+    }
+  }, [vessels, isLoadingVessels]);
+
   const { data: zones = [], isLoading: isLoadingZones } = useSWR<
     ZoneWithGeometry[]
   >("/api/zones", fetcher, {
@@ -46,21 +76,45 @@ export default function MapPage() {
     refreshInterval: 900000, // 15 minutes in milliseconds
   })
 
-  const isLoading = isLoadingVessels || isLoadingPositions || isLoadingZones
+  const { startDate, endDate, trackedVesselIDs, setVesselExcursions } = useTrackModeOptionsStore(useShallow((state) => ({
+    startDate: state.startDate,
+    endDate: state.endDate,
+    trackedVesselIDs: state.trackedVesselIDs,
+    setVesselExcursions: state.setVesselExcursions,
+  })))
+
+  useEffect(() => {
+    setZonesLoading(isLoadingZones)
+    setPositionsLoading(isLoadingPositions)
+    setVesselsLoading(isLoadingVessels)
+  }, [isLoadingZones, isLoadingPositions, isLoadingVessels])
+
+  useEffect(() => {
+    const resetExcursions = async () => {
+      setExcursionsLoading(true);
+      for (const vesselID of trackedVesselIDs) {
+        const vesselExcursions = await getVesselExcursions(vesselID, startDate, endDate);
+        for (const excursion of vesselExcursions.data) {
+          const segments = await getVesselSegments(vesselID, excursion.id);
+          excursion.segments = segments.data;
+        }
+        setVesselExcursions(vesselID, vesselExcursions.data);
+      }
+      setExcursionsLoading(false);
+    }
+    if (mapMode === "track") {
+      resetExcursions();
+    }
+  }, [startDate, endDate, mapMode, trackedVesselIDs])
 
   return (
     <>
-      <LeftPanel vessels={vessels} isLoading={isLoadingVessels} />
+      <LeftPanel/>
       <Map
         vesselsPositions={latestPositions}
         zones={zones}
-        isLoading={{
-          vessels: isLoadingVessels,
-          positions: isLoadingPositions,
-          zones: isLoadingZones,
-        }}
       />
-      <MapControls zoneLoading={isLoading} />
+      <MapControls zoneLoading={isLoadingZones} />
       <PositionPreview />
     </>
   )

frontend/components/core/command/vessel-finder.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useShallow } from "zustand/react/shallow"
 import { useState } from "react"
 import { getVesselFirstExcursionSegments } from "@/services/backend-rest-client"
 import { FlyToInterpolator } from "deck.gl"
@@ -14,8 +15,9 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command"
-import { useMapStore } from "@/components/providers/map-store-provider"
-import { useVesselsStore } from "@/components/providers/vessels-store-provider"
+import { useMapStore } from "@/libs/stores/map-store"
+import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
+import { useVesselsStore } from "@/libs/stores/vessels-store"
 
 type Props = {
   wideMode: boolean
@@ -26,21 +28,39 @@ const SEPARATOR = "___"
 export function VesselFinderDemo({ wideMode }: Props) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState<string>("")
+
+  const { addTrackedVessel, trackedVesselIDs } = useTrackModeOptionsStore(
+    useShallow((state) => ({
+      addTrackedVessel: state.addTrackedVessel,
+      trackedVesselIDs: state.trackedVesselIDs,
+    }))
+  )
+
   const {
-    addTrackedVessel,
-    trackedVesselIDs,
     setActivePosition,
     viewState,
+    latestPositions,
     setViewState,
-  } = useMapStore((state) => state)
-  const { vessels: allVessels } = useVesselsStore((state) => state)
-  const { latestPositions } = useMapStore((state) => state)
+  } = useMapStore(
+    useShallow((state) => ({
+      viewState: state.viewState,
+      latestPositions: state.latestPositions,
+      setActivePosition: state.setActivePosition,
+      setViewState: state.setViewState,
+    }))
+  )
+
+  const { vessels: allVessels } = useVesselsStore(
+    useShallow((state) => ({
+      vessels: state.vessels,
+    }))
+  )
 
   const onSelectVessel = async (vesselIdentifier: string) => {
     const vesselId = parseInt(vesselIdentifier.split(SEPARATOR)[3])
     const response = await getVesselFirstExcursionSegments(vesselId)
     if (vesselId && !trackedVesselIDs.includes(vesselId)) {
-      addTrackedVessel(vesselId, response)
+      addTrackedVessel(vesselId)
     }
     if (vesselId) {
       const selectedVesselLatestPosition = latestPositions.find(