diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx index f117caebc..f51a80836 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx @@ -384,10 +384,8 @@ const DataCard = ({ const basename = useBasename(); const mapFunctions = useMap(); const { record } = useShowContext(); - const { polygonsIndicator, treeCoverLossData, treeCoverLossFiresData, isLoadingIndicator } = useMonitoredData( - type!, - record.uuid - ); + const { polygonsIndicator, treeCoverLossData, treeCoverLossFiresData, isLoadingIndicator, polygonOptions } = + useMonitoredData(type!, record.uuid); const filteredPolygonsIndicator = selectedPolygonUuid !== "0" ? polygonsIndicator?.filter((polygon: any) => polygon.poly_id === selectedPolygonUuid) @@ -428,14 +426,6 @@ const DataCard = ({ const [topHeaderSecondTable, setTopHeaderSecondTable] = useState("70px"); const totalElemIndicator = filteredPolygonsIndicator?.length ? filteredPolygonsIndicator?.length - 1 : null; - const polygonsList = [ - { title: "All Polygons", value: "0" }, - ...(polygonsIndicator ?? []).map((item: any) => ({ - title: item.poly_name, - value: item.poly_id - })) - ]; - useEffect(() => { if (typeof window !== "undefined") { const width = window.innerWidth; @@ -661,7 +651,7 @@ const DataCard = ({ })} optionsClassName="!w-max right-0" className="w-max" - options={polygonsList} + options={polygonOptions} defaultValue={["0"]} onChange={option => setSelectedPolygonUuid(option[0])} /> diff --git a/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts b/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts index fb8fc452f..00d374bd9 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts +++ b/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts @@ -1,5 +1,5 @@ import { useT } from "@transifex/react"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { ModalId } from "@/components/extensive/Modal/ModalConst"; import { useModalContext } from "@/context/modal.provider"; @@ -82,6 +82,11 @@ type InterfaceIndicatorPolygonsStatus = { approved: number; }; +interface PolygonOption { + title: string; + value: string; +} + export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { const t = useT(); const { searchTerm, indicatorSlug, setLoadingAnalysis, setIndicatorSlugAnalysis } = useMonitoredDataContext(); @@ -89,6 +94,7 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { const [isLoadingVerify, setIsLoadingVerify] = useState(false); const { openNotification } = useNotificationContext(); const [treeCoverLossData, setTreeCoverLossData] = useState([]); + const [polygonOptions, setPolygonOptions] = useState([{ title: "All Polygons", value: "0" }]); const [treeCoverLossFiresData, setTreeCoverLossFiresData] = useState([]); const [analysisToSlug, setAnalysisToSlug] = useState({ treeCoverLoss: [], @@ -172,11 +178,33 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { } ); - const filteredPolygons = indicatorData?.filter( - (polygon: Indicators) => - polygon?.poly_name?.toLowerCase().includes(searchTerm?.toLowerCase()) || - polygon?.site_name?.toLowerCase().includes(searchTerm?.toLowerCase()) - ); + const filteredPolygons = useMemo(() => { + if (!indicatorData) return []; + + return indicatorData + .filter( + (polygon: Indicators) => + polygon?.poly_name?.toLowerCase().includes(searchTerm?.toLowerCase()) || + polygon?.site_name?.toLowerCase().includes(searchTerm?.toLowerCase()) + ) + .sort((a, b) => (a.poly_name || "").localeCompare(b.poly_name || "")); + }, [indicatorData, searchTerm]); + + useEffect(() => { + if (!indicatorData) return; + + const options = [ + { title: "All Polygons", value: "0" }, + ...indicatorData + .map((item: any) => ({ + title: item.poly_name || "", + value: item.poly_id || "" + })) + .sort((a, b) => a.title.localeCompare(b.title)) + ]; + + setPolygonOptions(options); + }, [indicatorData]); const headerBarPolygonStatus = dataPolygonOverview.map(status => { const key = status.status_key as keyof InterfaceIndicatorPolygonsStatus; @@ -251,6 +279,7 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { return { polygonsIndicator: filteredPolygons, + polygonOptions, indicatorPolygonsStatus, headerBarPolygonStatus, totalPolygonsStatus: totalPolygonsApproved,