[TM-1461] waiting load in site view

src/admin/components/Fields/ColoredChipFieldArray.tsx

@@ -35,7 +35,9 @@ function groupPolygonsByStatus(polygons: any[]) {
 
 const ColoredChipFieldArray = (props: ColoredChipFieldArrayProps) => {
   const recordContext = useRecordContext();
-  const { data: getPolygonsToSite } = useGetV2SitesSitePolygon({ pathParams: { site: recordContext.uuid } });
+  const { data: getPolygonsToSite } = useGetV2SitesSitePolygon({
+    pathParams: { site: recordContext.uuid }
+  });
 
   if (!getPolygonsToSite?.length || !Array.isArray(getPolygonsToSite)) {
     return (

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/PolygonDrawer.tsx

@@ -18,7 +18,6 @@ import {
   fetchPostV2TerrafundValidationPolygon,
   fetchPutV2ENTITYUUIDStatus,
   useGetV2SitePolygonUuidVersions,
-  useGetV2TerrafundValidationCriteriaData,
   usePostV2TerrafundClipPolygonsPolygonUuid,
   usePostV2TerrafundValidationPolygon
 } from "@/generated/apiComponents";
@@ -88,14 +87,18 @@ const PolygonDrawer = ({
   const sitePolygonRefresh = context?.reloadSiteData;
   const openEditNewPolygon = contextMapArea?.isUserDrawingEnabled;
   const selectedPolygon = sitePolygonData?.find((item: SitePolygon) => item?.poly_id === polygonSelected);
-  const { statusSelectedPolygon, setStatusSelectedPolygon, setShouldRefetchValidation } = contextMapArea;
+  const {
+    statusSelectedPolygon,
+    setStatusSelectedPolygon,
+    setShouldRefetchValidation,
+    polygonCriteriaMap: polygonMap
+  } = contextMapArea;
   const { showLoader, hideLoader } = useLoading();
   const { openNotification } = useNotificationContext();
   const wrapperRef = useRef(null);
 
   const { mutate: getValidations } = usePostV2TerrafundValidationPolygon({
     onSuccess: () => {
-      reloadCriteriaValidation();
       setCheckPolygonValidation(false);
       openNotification(
         "success",
@@ -111,16 +114,6 @@ const PolygonDrawer = ({
     }
   });
   const mutateSitePolygons = fetchPutV2ENTITYUUIDStatus;
-  const { data: criteriaData, refetch: reloadCriteriaValidation } = useGetV2TerrafundValidationCriteriaData(
-    {
-      queryParams: {
-        uuid: polygonSelected
-      }
-    },
-    {
-      enabled: !!polygonSelected
-    }
-  );
 
   const { mutate: clipPolygons } = usePostV2TerrafundClipPolygonsPolygonUuid({
     onSuccess: async (data: ClippedPolygonResponse) => {
@@ -138,6 +131,9 @@ const PolygonDrawer = ({
       await refetchPolygonVersions();
       await sitePolygonRefresh?.();
       await refresh?.();
+      if (!selectedPolygon?.primary_uuid) {
+        return;
+      }
       const response = (await fetchGetV2SitePolygonUuidVersions({
         pathParams: { uuid: selectedPolygon?.primary_uuid as string }
       })) as SitePolygonsDataResponse;
@@ -164,7 +160,6 @@ const PolygonDrawer = ({
     if (checkPolygonValidation) {
       showLoader();
       getValidations({ queryParams: { uuid: polygonSelected } });
-      reloadCriteriaValidation();
     }
   }, [checkPolygonValidation]);
 
@@ -173,13 +168,14 @@ const PolygonDrawer = ({
   }, [isPolygonStatusOpen]);
 
   useEffect(() => {
+    const criteriaData = polygonMap[polygonSelected];
     if (criteriaData?.criteria_list && criteriaData?.criteria_list.length > 0) {
       setPolygonValidationData(parseValidationData(criteriaData));
       setValidationStatus(true);
     } else {
       setValidationStatus(false);
     }
-  }, [criteriaData]);
+  }, [polygonMap, polygonSelected]);
 
   useEffect(() => {
     if (Array.isArray(sitePolygonData)) {
@@ -263,7 +259,6 @@ const PolygonDrawer = ({
       openNotification("error", t("Error"), t("Cannot fix polygons: Polygon UUID is missing."));
     }
   };
-
   return (
     <div className="flex flex-1 flex-col gap-6 overflow-visible">
       <div>

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/AttributeInformation.tsx

@@ -124,7 +124,6 @@ const AttributeInformation = ({
     setIsLoadingDropdown(true);
     const refreshEntity = async () => {
       if (selectedPolygon?.uuid) {
-        await sitePolygonRefresh?.();
         setIsLoadingDropdown(false);
       }
     };

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx

@@ -300,8 +300,6 @@ const VersionHistory = ({
     if (polygonFromMap?.uuid) {
       setIsLoadingDropdown(true);
       const reloadVersionList = async () => {
-        await refreshPolygonList?.();
-        await refreshSiteData?.();
         await refetch();
         setIsLoadingDropdown(false);
       };

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonItem.tsx

@@ -11,7 +11,6 @@ import Status from "@/components/elements/Status/Status";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { useMapAreaContext } from "@/context/mapArea.provider";
-import { useGetV2TerrafundValidationCriteriaData } from "@/generated/apiComponents";
 import {
   hasCompletedDataWhitinStimatedAreaCriteriaInvalid,
   isValidCriteriaData,
@@ -48,38 +47,24 @@ const PolygonItem = ({
   const [openCollapse, setOpenCollapse] = useState(false);
   const [validationStatus, setValidationStatus] = useState<boolean | undefined>(undefined);
   const [showWarning, setShowWarning] = useState(false);
-  const { shouldRefetchValidation, setShouldRefetchValidation } = useMapAreaContext();
+  const { polygonCriteriaMap: polygonMap } = useMapAreaContext();
   const t = useT();
   const [polygonValidationData, setPolygonValidationData] = useState<ICriteriaCheckItem[]>([]);
-  const { data: criteriaData, refetch } = useGetV2TerrafundValidationCriteriaData(
-    {
-      queryParams: {
-        uuid: uuid
-      }
-    },
-    {
-      enabled: !!uuid
-    }
-  );
-
-  useEffect(() => {
-    refetch();
-    setShouldRefetchValidation(false);
-  }, [shouldRefetchValidation]);
 
   useEffect(() => {
     setOpenCollapse(isCollapsed);
   }, [isCollapsed]);
 
   useEffect(() => {
+    const criteriaData = polygonMap[uuid];
     if (criteriaData?.criteria_list && criteriaData.criteria_list.length > 0) {
       setPolygonValidationData(parseValidationData(criteriaData));
       setValidationStatus(isValidCriteriaData(criteriaData));
       setShowWarning(hasCompletedDataWhitinStimatedAreaCriteriaInvalid(criteriaData));
     } else {
       setValidationStatus(undefined);
     }
-  }, [criteriaData, setValidationStatus]);
+  }, [polygonMap]);
 
   const handleCheckboxClick = () => {
     onCheckboxChange(uuid, !isChecked);

src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx

@@ -203,17 +203,19 @@ const Polygons = (props: IPolygonProps) => {
   return (
     <div>
       <Drawer isOpen={isOpenPolygonDrawer} setIsOpen={setIsOpenPolygonDrawer} setPolygonFromMap={setPolygonFromMap}>
-        <PolygonDrawer
-          polygonSelected={selectedPolygon?.uuid ?? ""}
-          isPolygonStatusOpen={isPolygonStatusOpen}
-          refresh={props?.refresh}
-          isOpenPolygonDrawer={isOpenPolygonDrawer}
-          setSelectedPolygonToDrawer={setSelectedPolygon as any}
-          selectedPolygonIndex={selectedPolygon?.id}
-          setPolygonFromMap={setPolygonFromMap}
-          polygonFromMap={polygonFromMap}
-          setIsOpenPolygonDrawer={setIsOpenPolygonDrawer}
-        />
+        {isOpenPolygonDrawer && (
+          <PolygonDrawer
+            polygonSelected={selectedPolygon?.uuid ?? ""}
+            isPolygonStatusOpen={isPolygonStatusOpen}
+            refresh={props?.refresh}
+            isOpenPolygonDrawer={isOpenPolygonDrawer}
+            setSelectedPolygonToDrawer={setSelectedPolygon as any}
+            selectedPolygonIndex={selectedPolygon?.id}
+            setPolygonFromMap={setPolygonFromMap}
+            polygonFromMap={polygonFromMap}
+            setIsOpenPolygonDrawer={setIsOpenPolygonDrawer}
+          />
+        )}
       </Drawer>
       <div className="mb-4 flex flex-col gap-1">
         <Text variant="text-16-bold" className="text-darkCustom">

src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx

@@ -40,15 +40,15 @@ import {
   fetchPutV2SitePolygonStatusBulk,
   GetV2MODELUUIDFilesResponse,
   useGetV2MODELUUIDFiles,
-  useGetV2SitesSiteBbox,
-  useGetV2SitesSitePolygon
+  useGetV2SitesSiteBbox
 } from "@/generated/apiComponents";
 import {
   PolygonBboxResponse,
   SitePolygon,
   SitePolygonsDataResponse,
   SitePolygonsLoadedDataResponse
 } from "@/generated/apiSchemas";
+import useLoadCriteriaSite from "@/hooks/paginated/useLoadCriteriaSite";
 import { EntityName, FileType, UploadedFile } from "@/types/common";
 import Log from "@/utils/log";
 
@@ -142,7 +142,15 @@ const PolygonReviewTab: FC<IProps> = props => {
   const [polygonFromMap, setPolygonFromMap] = useState<IpolygonFromMap>({ isOpen: false, uuid: "" });
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const { showLoader, hideLoader } = useLoading();
-  const { setSelectedPolygonsInCheckbox } = useMapAreaContext();
+  const {
+    setSelectedPolygonsInCheckbox,
+    setPolygonCriteriaMap,
+    setPolygonData,
+    polygonCriteriaMap: polygonsCriteriaData,
+    polygonData: polygonList,
+    shouldRefetchValidation,
+    setShouldRefetchValidation
+  } = useMapAreaContext();
   const [polygonLoaded, setPolygonLoaded] = useState<boolean>(false);
   const [submitPolygonLoaded, setSubmitPolygonLoaded] = useState<boolean>(false);
   const t = useT();
@@ -153,11 +161,7 @@ const PolygonReviewTab: FC<IProps> = props => {
     storePolygon(geojson, record, refetch, setPolygonFromMap, refreshEntity);
   };
   const mapFunctions = useMap(onSave);
-  const { data: sitePolygonData, refetch } = useGetV2SitesSitePolygon<SitePolygonsDataResponse>({
-    pathParams: {
-      site: record.uuid
-    }
-  });
+  const { data: sitePolygonData, refetch, polygonCriteriaMap, loading } = useLoadCriteriaSite(record.uuid, "sites");
 
   const { data: modelFilesData } = useGetV2MODELUUIDFiles<GetV2MODELUUIDFilesResponse>({
     pathParams: { model: "sites", uuid: record.uuid }
@@ -269,6 +273,16 @@ const PolygonReviewTab: FC<IProps> = props => {
     }
   }, [errorMessage]);
 
+  useEffect(() => {
+    setPolygonCriteriaMap(polygonCriteriaMap);
+    setPolygonData(sitePolygonData);
+  }, [loading]);
+  useEffect(() => {
+    if (shouldRefetchValidation) {
+      refetch();
+      setShouldRefetchValidation(false);
+    }
+  }, [shouldRefetchValidation]);
   const uploadFiles = async () => {
     const uploadPromises = [];
     showLoader();
@@ -483,6 +497,8 @@ const PolygonReviewTab: FC<IProps> = props => {
           variant: "white-page-admin",
           onClick: () => closeModal(ModalId.APPROVE_POLYGONS)
         }}
+        polygonsCriteriaData={polygonsCriteriaData}
+        polygonList={polygonList}
       />
     );
   };

src/admin/components/extensive/Modal/ModalApprove.tsx

@@ -11,11 +11,7 @@ import Checkbox from "@/components/elements/Inputs/Checkbox/Checkbox";
 import { StatusEnum } from "@/components/elements/Status/constants/statusMap";
 import Text from "@/components/elements/Text/Text";
 import CollapsibleRow from "@/components/extensive/Modal/components/CollapsibleRow";
-import {
-  GetV2TerrafundValidationSiteResponse,
-  useGetV2SitesSitePolygon,
-  useGetV2TerrafundValidationSite
-} from "@/generated/apiComponents";
+import { GetV2TerrafundValidationSiteResponse } from "@/generated/apiComponents";
 
 import Icon, { IconNames } from "../../../../components/extensive/Icon/Icon";
 import { ModalProps } from "../../../../components/extensive/Modal/Modal";
@@ -27,6 +23,8 @@ export interface ModalApproveProps extends ModalProps {
   status?: StatusEnum;
   onClose?: () => void;
   site: any;
+  polygonsCriteriaData: any;
+  polygonList: any;
 }
 
 export interface DisplayedPolygonType {
@@ -65,27 +63,63 @@ const ModalApprove: FC<ModalApproveProps> = ({
   status,
   site,
   onClose,
+  polygonsCriteriaData,
+  polygonList,
   ...rest
 }) => {
-  const { data: polygonList } = useGetV2SitesSitePolygon({ pathParams: { site: site.uuid } });
-
-  const { data: polygonsCriteriaData } = useGetV2TerrafundValidationSite({
-    queryParams: { uuid: site.uuid }
-  });
   const [displayedPolygons, setDisplayedPolygons] = useState<DisplayedPolygonType[]>([]);
   const [polygonsSelected, setPolygonsSelected] = useState<boolean[]>([]);
-
+  const [criteriaDataParsed, setCriteriaDataParsed] = useState<any>(null);
   useEffect(() => {
     if (!polygonList || !polygonsCriteriaData) {
       return;
     }
-    setPolygonsSelected(polygonList.map(_ => false));
+
+    const parsedData = polygonList.reduce((acc: Record<string, any>, polygon: any) => {
+      const criteria = polygonsCriteriaData[polygon.poly_id];
+      const polygonId = polygon.poly_id;
+      let isValid = true;
+      const nonValidCriteria: any[] = [];
+      const { criteria_list } = criteria;
+
+      if (!criteria_list || criteria_list.length === 0) {
+        isValid = false;
+      } else {
+        criteria_list.forEach((criteria: any) => {
+          if (criteria.valid === 0) {
+            isValid = false;
+            nonValidCriteria.push(criteria);
+          }
+        });
+      }
+
+      const checked = Array.isArray(criteria_list) && criteria_list.length > 0;
+
+      acc[polygonId] = {
+        polygonId,
+        isValid,
+        nonValidCriteria,
+        checked
+      };
+
+      return acc;
+    }, {});
+
+    setCriteriaDataParsed(parsedData);
+    setPolygonsSelected(polygonList.map((_: any) => false));
+  }, [polygonsCriteriaData, polygonList]);
+
+  useEffect(() => {
+    if (!polygonList || !criteriaDataParsed) {
+      return;
+    }
+    setPolygonsSelected(polygonList.map((_: any) => false));
     setDisplayedPolygons(
-      polygonList.map(polygon => {
-        const criteria = polygonsCriteriaData.find(criteria => criteria.uuid === polygon.poly_id);
+      polygonList.map((polygon: any) => {
+        const criteria = criteriaDataParsed[polygon.poly_id];
         const excludedFromValidationCriterias = [COMPLETED_DATA_CRITERIA_ID, ESTIMATED_AREA_CRITERIA_ID];
-        const nonValidCriteriasIds = criteria?.nonValidCriteria?.map(r => r.criteria_id);
-        const failingCriterias = nonValidCriteriasIds?.filter(r => !excludedFromValidationCriterias.includes(r));
+        const nonValidCriteriasIds = criteria?.nonValidCriteria?.map((r: any) => r.criteria_id);
+        const failingCriterias = nonValidCriteriasIds?.filter((r: any) => !excludedFromValidationCriterias.includes(r));
         const approved = checkCriteriaCanBeApproved(criteria as ValidationCriteria);
         const status = polygon.status;
 
@@ -99,7 +133,8 @@ const ModalApprove: FC<ModalApproveProps> = ({
         };
       })
     );
-  }, [polygonList, polygonsCriteriaData]);
+  }, [polygonList, criteriaDataParsed]);
+
   const handleSelectAll = (isChecked: boolean) => {
     if (displayedPolygons) {
       const newSelected = displayedPolygons.map((polygon, index) => {
@@ -163,6 +198,7 @@ const ModalApprove: FC<ModalApproveProps> = ({
               index={index}
               polygonsSelected={polygonsSelected}
               setPolygonsSelected={setPolygonsSelected}
+              criteriaData={item.id ? polygonsCriteriaData[item.id] : []}
             />
           ))}
         </div>

src/components/elements/Map-mapbox/Map.tsx

@@ -232,7 +232,7 @@ export const MapContainer = ({
 
       const setupMap = () => {
         const zoomFilter = isDashboard ? 7 : undefined;
-        addSourcesToLayers(currentMap, polygonsData, centroids, zoomFilter);
+        addSourcesToLayers(currentMap, polygonsData, centroids, zoomFilter, isDashboard);
         setChangeStyle(true);
         setSourcesAdded(true);