Use react query to fetch collection data

NASA-IMPACT · Sep 21, 2023 · 5eaa819 · 5eaa819
1 parent f832922
commit 5eaa819
Showing 1 changed file with 59 additions and 52 deletions.
diff --git a/app/scripts/components/analysis/define/use-stac-collection-search.ts b/app/scripts/components/analysis/define/use-stac-collection-search.ts
@@ -2,6 +2,7 @@ import { DatasetLayer } from 'veda';
 import { FeatureCollection, Polygon } from 'geojson';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
 import booleanIntersects from '@turf/boolean-intersects';
 import bboxPolygon from '@turf/bbox-polygon';
 import { areIntervalsOverlapping } from 'date-fns';
@@ -22,7 +23,13 @@ interface UseStacSearchProps {
   aoi?: FeatureCollection<Polygon> | null;
 }
 
-export function useStacSearch({ start, end, aoi }: UseStacSearchProps) {
+const collectionUrl = `${process.env.API_STAC_ENDPOINT}/collections`;
+
+export function useStacCollectionSearch({
+  start,
+  end,
+  aoi
+}: UseStacSearchProps) {
   const readyToLoadDatasets = !!(start && end && aoi);
 
   const [selectableDatasetLayers, setSelectableDatasetLayers] = useState<
@@ -32,66 +39,66 @@ export function useStacSearch({ start, end, aoi }: UseStacSearchProps) {
   const [stacSearchStatus, setStacSearchStatus] =
     useState<ActionStatus>(S_IDLE);
 
-  useEffect(() => {
-    if (!readyToLoadDatasets) return;
-    const controller = new AbortController();
-
-    const load = async () => {
+  const { data: collectionData } = useQuery({
+    queryKey: ['stacCollection'],
+    queryFn: async ({ signal }) => {
       setStacSearchStatus(S_LOADING);
       try {
-        const collectionUrl = `${process.env.API_STAC_ENDPOINT}/collections`;
         const collectionResponse = await axios.get(collectionUrl, {
-          signal: controller.signal
+          signal
         });
-
-        const matchingCollectionIds = collectionResponse.data.collections
-          .filter(
-            (col) => col.extent.spatial.bbox && col.extent.temporal.interval
-          )
-          .map((col) => {
-            return {
-              id: col.id,
-              bbox: col.extent.spatial.bbox[0], // Check
-              start: utcString2userTzDate(col.extent.temporal.interval[0][0]),
-              end: utcString2userTzDate(col.extent.temporal.interval[0][1])
-            };
-          })
-          .filter((col) => {
-            return (
-              aoi.features.some((feature) =>
-                booleanIntersects(feature, bboxPolygon(col.bbox))
-              ) &&
-              areIntervalsOverlapping(
-                { start: new Date(start), end: new Date(end) },
-                {
-                  start: new Date(col.start),
-                  end: new Date(col.end)
-                }
-              )
-            );
-          })
-          .map((c) => c.id);
-
         setStacSearchStatus(S_SUCCEEDED);
-
-        setSelectableDatasetLayers(
-          allAvailableDatasetsLayers.filter((l) =>
-            matchingCollectionIds.includes(l.stacCol)
-          )
-        );
-      } catch (error) {
-        if (!controller.signal.aborted) {
+        return collectionResponse.data.collections;
+      } catch (e) {
+        if (!signal?.aborted) {
           setStacSearchStatus(S_FAILED);
         }
       }
-    };
-
-    load();
+    },
+    enabled: readyToLoadDatasets
+  });
 
-    return () => {
-      controller.abort();
-    };
-  }, [start, end, aoi, readyToLoadDatasets]);
+  useEffect(() => {
+    if (!collectionData || !readyToLoadDatasets) return;
+    try {
+      setStacSearchStatus(S_LOADING);
+      const matchingCollectionIds = collectionData
+        .filter(
+          (col) => col.extent.spatial.bbox && col.extent.temporal.interval
+        )
+        .map((col) => {
+          return {
+            id: col.id,
+            bbox: col.extent.spatial.bbox[0],
+            start: utcString2userTzDate(col.extent.temporal.interval[0][0]),
+            end: utcString2userTzDate(col.extent.temporal.interval[0][1])
+          };
+        })
+        .filter((col) => {
+          return (
+            aoi.features.some((feature) =>
+              booleanIntersects(feature, bboxPolygon(col.bbox))
+            ) &&
+            areIntervalsOverlapping(
+              { start: new Date(start), end: new Date(end) },
+              {
+                start: new Date(col.start),
+                end: new Date(col.end)
+              }
+            )
+          );
+        })
+        .map((c) => c.id);
+      setSelectableDatasetLayers(
+        allAvailableDatasetsLayers.filter((l) =>
+          matchingCollectionIds.includes(l.stacCol)
+        )
+      );
+    } catch (e) {
+      setStacSearchStatus(S_FAILED);
+    }
+    setStacSearchStatus(S_SUCCEEDED);
+  }, [collectionData, start, end, aoi, readyToLoadDatasets]);
 
   return { selectableDatasetLayers, stacSearchStatus, readyToLoadDatasets };
 }