From 06b87af58fe96a92facc744a76e1c969199ae029 Mon Sep 17 00:00:00 2001
From: Emil Balitzki <emil.balitzki@gmail.com>
Date: Fri, 12 Jul 2024 15:01:25 +0200
Subject: [PATCH] Optimized datasets fetching

Signed-off-by: Emil Balitzki <emil.balitzki@gmail.com>
---
 frontend/src/components/DataView/DataRow.tsx  | 15 +++++-----
 frontend/src/components/DataView/DataView.tsx | 30 +++++++++++++++++--
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/DataView/DataRow.tsx b/frontend/src/components/DataView/DataRow.tsx
index ff403a45..77d18dd7 100644
--- a/frontend/src/components/DataView/DataRow.tsx
+++ b/frontend/src/components/DataView/DataRow.tsx
@@ -13,8 +13,7 @@ import {
 } from "@mui/material";
 import { CaretDown, CaretUp, MapPin } from "@phosphor-icons/react";
 import "./DataRow.css";
-import { fetchDatasets } from "../../services/datasetsService";
-import { Dataset } from "../../types/DatasetTypes";
+import { Dataset, DatasetBasicData } from "../../types/DatasetTypes";
 import CustomSvgIcon from "../DatasetsList/CustomSvgIcon";
 import { svgIconDefault } from "../DatasetsList/DatasetsList";
 import { AlertContext } from "../../contexts/AlertContext";
@@ -24,9 +23,10 @@ import { MapContext } from "../../contexts/MapContext";
 
 interface RowProps {
   row: DatasetItem;
+  currentDatasets: DatasetBasicData[];
 }
 
-const DataRow: React.FC<RowProps> = ({ row }) => {
+const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
   const [open, setOpen] = useState(false);
   const [shouldFlyTo, setShouldFlyTo] = useState<LatLng | null>(null);
   const { currentAlertCache, setCurrentAlertCache } = useContext(AlertContext);
@@ -38,7 +38,7 @@ const DataRow: React.FC<RowProps> = ({ row }) => {
    */
   useEffect(() => {
     if (shouldFlyTo && currentMapCache.mapInstance) {
-      currentMapCache.mapInstance.flyTo(shouldFlyTo);
+      currentMapCache.mapInstance.flyTo(shouldFlyTo, currentMapCache.zoom);
       setShouldFlyTo(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -48,9 +48,8 @@ const DataRow: React.FC<RowProps> = ({ row }) => {
     mapId: string | null,
     coordinates: number[] | null
   ) => {
-    const datasetsData = await fetchDatasets();
-    if (datasetsData) {
-      const datasetToOpen = datasetsData.find(
+    if (currentDatasets) {
+      const datasetToOpen = currentDatasets.find(
         (dataset) => dataset.datasetId === mapId
       );
       if (datasetToOpen) {
@@ -79,7 +78,7 @@ const DataRow: React.FC<RowProps> = ({ row }) => {
             setShouldFlyTo(latLng);
           } else {
             if (currentMapCache.mapInstance) {
-              currentMapCache.mapInstance.flyTo(latLng);
+              currentMapCache.mapInstance.flyTo(latLng, currentMapCache.zoom);
             }
           }
         }
diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx
index 0e7ef471..f112b54c 100644
--- a/frontend/src/components/DataView/DataView.tsx
+++ b/frontend/src/components/DataView/DataView.tsx
@@ -31,6 +31,8 @@ import {
 } from "../../types/MapSelectionTypes";
 import { MultiPolygon, Position } from "geojson";
 import DataRow from "./DataRow";
+import { fetchDatasets } from "../../services/datasetsService";
+import { DatasetBasicData } from "../../types/DatasetTypes";
 
 // Function to filter and return an array of outer polygons
 function getOuterPolygons(multiPolygon: MultiPolygon): Position[][] {
@@ -47,6 +49,22 @@ const DataView = () => {
   const [data, setData] = useState<LocationDataResponse | undefined>();
   const [showSelectionData, setShowSelectionData] = useState(true);
   const [showIndividualData, setShowIndividualData] = useState(true);
+  const [currentDatasets, setCurrentDatasets] = useState<DatasetBasicData[]>(
+    []
+  );
+
+  /**
+   * Fetch the current datasets
+   */
+  useEffect(() => {
+    const fetchCurrentDatasets = async () => {
+      const datasets = await fetchDatasets();
+      if (datasets) {
+        setCurrentDatasets(datasets);
+      }
+    };
+    fetchCurrentDatasets();
+  });
 
   const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFilterValue(event.target.value);
@@ -192,7 +210,11 @@ const DataView = () => {
                   <Table>
                     <TableBody>
                       {filterData(data?.selectionData ?? []).map((row) => (
-                        <DataRow key={row.datasetID} row={row} />
+                        <DataRow
+                          key={row.datasetID}
+                          row={row}
+                          currentDatasets={currentDatasets}
+                        />
                       ))}
                     </TableBody>
                   </Table>
@@ -210,7 +232,11 @@ const DataView = () => {
                   <Table>
                     <TableBody>
                       {filterData(data?.individualData ?? []).map((row) => (
-                        <DataRow key={row.datasetID} row={row} />
+                        <DataRow
+                          key={row.datasetID}
+                          row={row}
+                          currentDatasets={currentDatasets}
+                        />
                       ))}
                     </TableBody>
                   </Table>