diff --git a/app/scripts/components/analysis/define/use-stac-collection-search.ts b/app/scripts/components/analysis/define/use-stac-collection-search.ts index 98f8c4db3..4f63f08d1 100644 --- 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 | 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(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 }; }