[TM-1531] add job connection

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

@@ -31,7 +31,6 @@ import { IconNames } from "@/components/extensive/Icon/Icon";
 import ModalAdd from "@/components/extensive/Modal/ModalAdd";
 import ModalConfirm from "@/components/extensive/Modal/ModalConfirm";
 import { ModalId } from "@/components/extensive/Modal/ModalConst";
-import { useLoading } from "@/context/loaderAdmin.provider";
 import { useMapAreaContext } from "@/context/mapArea.provider";
 import { useModalContext } from "@/context/modal.provider";
 import { useMonitoredDataContext } from "@/context/monitoredData.provider";
@@ -152,7 +151,6 @@ const PolygonReviewTab: FC<IProps> = props => {
   const [saveFlags, setSaveFlags] = useState<boolean>(false);
   const [polygonFromMap, setPolygonFromMap] = useState<IpolygonFromMap>({ isOpen: false, uuid: "" });
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const { showLoader, hideLoader } = useLoading();
   const {
     setSelectedPolygonsInCheckbox,
     setPolygonCriteriaMap,
@@ -314,8 +312,7 @@ const PolygonReviewTab: FC<IProps> = props => {
   }, [shouldRefetchValidation]);
   const uploadFiles = async () => {
     const uploadPromises = [];
-    showLoader();
-
+    closeModal(ModalId.ADD_POLYGON);
     for (const file of files) {
       const fileToUpload = file.rawFile as File;
       const site_uuid = record.uuid;
@@ -350,10 +347,8 @@ const PolygonReviewTab: FC<IProps> = props => {
       }
       refetch();
       refetchSiteBbox();
-      closeModal(ModalId.ADD_POLYGON);
       setPolygonLoaded(false);
       setSubmitPolygonLoaded(false);
-      hideLoader();
     } catch (error) {
       let errorMessage;
 
@@ -379,7 +374,6 @@ const PolygonReviewTab: FC<IProps> = props => {
         errorMessage = t("An unknown error occurred");
       }
       openNotification("error", t("Error uploading file"), errorMessage || t("An unknown error occurred"));
-      hideLoader();
     }
   };
 

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

@@ -200,6 +200,7 @@ const CheckPolygonControl = (props: CheckSitePolygonProps) => {
 
   const runFixPolygonOverlaps = () => {
     if (siteUuid) {
+      closeModal(ModalId.FIX_POLYGONS);
       setIsLoadingDelayedJob?.(true);
       setAlertTitle?.("Fix Polygons");
       clipPolygons({ pathParams: { uuid: siteUuid } });

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

@@ -111,6 +111,7 @@ const ProcessBulkPolygonsControl = ({
           className: "px-8 py-3",
           variant: "primary",
           onClick: () => {
+            closeModal(ModalId.FIX_POLYGONS);
             setIsLoadingDelayedJob?.(true);
             setAlertTitle?.("Fix Polygons");
             fixPolygons(
@@ -124,7 +125,7 @@ const ProcessBulkPolygonsControl = ({
               {
                 onSuccess: response => {
                   const processedNames = response?.processed?.map(item => item.poly_name).join(", ");
-                  closeModal(ModalId.FIX_POLYGONS);
+
                   setIsLoadingDelayedJob?.(false);
                   ApiSlice.addTotalContent(0);
                   ApiSlice.addProgressContent(0);

src/components/elements/Notification/FloatNotification.tsx

@@ -36,6 +36,7 @@ const FloatNotification = () => {
         }
       };
     });
+    console.log("Should trigger bulk update");
     triggerBulkUpdate(newJobsData);
   };
   useEffect(() => {
@@ -54,7 +55,11 @@ const FloatNotification = () => {
         ?.map((p: any) => p.poly_name)
         .filter(Boolean)
         .join(", ");
-      return "Success! The following polygons have been fixed: " + updatedPolygonNames;
+      if (updatedPolygonNames) {
+        return "Success! The following polygons have been fixed: " + updatedPolygonNames;
+      } else {
+        return "No polygons were fixed";
+      }
     }
     return null;
   };
@@ -126,9 +131,12 @@ const FloatNotification = () => {
                               color="success-600"
                             />
                           )}
-
                           <Text variant="text-12-semibold" className="text-black">
-                            {item.status === "succeeded"
+                            {item.name === "Polygon Upload"
+                              ? item.status === "succeeded"
+                                ? "Done!"
+                                : ""
+                              : item.status === "succeeded"
                               ? "Done!"
                               : `${Math.round(((item.processedContent ?? 0) / (item.totalContent ?? 1)) * 100)}%`}
                           </Text>

src/connections/DelayedJob.ts

@@ -8,9 +8,10 @@ import {
   listDelayedJobsFetchFailed
 } from "@/generated/v3/jobService/jobServicePredicates";
 import { DelayedJobData, DelayedJobDto } from "@/generated/v3/jobService/jobServiceSchemas";
+import { useConnection } from "@/hooks/useConnection";
 import { ApiDataStore } from "@/store/apiSlice";
 import { Connection } from "@/types/connection";
-import { connectionHook, connectionLoader } from "@/utils/connectionShortcuts";
+import { connectionLoader } from "@/utils/connectionShortcuts";
 
 // --- Delayed Jobs Connection ---
 type DelayedJobsConnection = {
@@ -19,18 +20,13 @@ type DelayedJobsConnection = {
   hasLoadFailed: boolean;
 };
 
-const delayedJobsSelector = (store: ApiDataStore) => {
-  const delayedJobsMap = store.delayedJobs || {};
-  return Object.values(delayedJobsMap).map(resource => resource.attributes);
-};
+const delayedJobsSelector = (store: ApiDataStore) =>
+  Object.values(store.delayedJobs ?? {}).map(resource => resource.attributes);
 
-const delayedJobsLoadFailedSelector = (store: ApiDataStore) => {
-  return listDelayedJobsFetchFailed(store) != null;
-};
+const delayedJobsLoadFailedSelector = (store: ApiDataStore) => listDelayedJobsFetchFailed(store) != null;
 
-const connectionIsLoaded = ({ delayedJobs, hasLoadFailed, isLoading }: DelayedJobsConnection) => {
-  return (delayedJobs != null && delayedJobs.length > 0) || hasLoadFailed || isLoading;
-};
+const connectionIsLoaded = ({ delayedJobs, hasLoadFailed, isLoading }: DelayedJobsConnection) =>
+  (delayedJobs != null && delayedJobs.length > 0) || hasLoadFailed || isLoading;
 
 const delayedJobsConnection: Connection<DelayedJobsConnection> = {
   load: connection => {
@@ -40,18 +36,15 @@ const delayedJobsConnection: Connection<DelayedJobsConnection> = {
     }
   },
   isLoaded: connectionIsLoaded,
-  selector: createSelector(
-    [delayedJobsSelector, store => delayedJobsLoadFailedSelector(store)],
-    (delayedJobs, hasLoadFailed): DelayedJobsConnection => ({
-      delayedJobs,
-      isLoading: delayedJobs == null && !hasLoadFailed,
-      hasLoadFailed
-    })
-  )
+  selector: createSelector([delayedJobsSelector, delayedJobsLoadFailedSelector], (delayedJobs, hasLoadFailed) => ({
+    delayedJobs,
+    isLoading: delayedJobs == null && !hasLoadFailed,
+    hasLoadFailed
+  }))
 };
 
 export const useDelayedJobs = () => {
-  const connection = connectionHook(delayedJobsConnection)();
+  const connection = useConnection(delayedJobsConnection);
 
   useEffect(() => {
     const intervalId = setInterval(() => {
@@ -66,38 +59,32 @@ export const useDelayedJobs = () => {
   return connection;
 };
 
-export const triggerBulkUpdate = (jobs: DelayedJobData[]) => {
-  return bulkUpdateJobs({ body: { data: jobs } });
-};
+export const triggerBulkUpdate = (jobs: DelayedJobData[]) => bulkUpdateJobs({ body: { data: jobs } });
 
-const bulkUpdateJobsSelector = (store: ApiDataStore) => {
-  const bulkUpdateState = store.delayedJobs || {};
-  return {
-    isLoading: bulkUpdateJobsIsFetching(store),
-    hasLoadFailed: bulkUpdateJobsFetchFailed(store) != null,
-    response: bulkUpdateState.response
-  };
-};
+const bulkUpdateJobsSelector = (store: ApiDataStore) => ({
+  isLoading: bulkUpdateJobsIsFetching(store),
+  hasLoadFailed: bulkUpdateJobsFetchFailed(store) != null,
+  response: store.delayedJobs
+});
 
 const bulkUpdateJobsConnection: Connection<DelayedJobsConnection, { jobs: DelayedJobData[] }> = {
-  load: async (connection, { jobs }) => {
+  load: (connection, { jobs }) => {
     const isLoaded = connectionBulkUpdateIsLoaded(connection);
     if (!isLoaded) {
-      await bulkUpdateJobs({ body: { data: jobs } });
+      bulkUpdateJobs({ body: { data: jobs } });
     }
   },
 
   isLoaded: state => !state.isLoading,
 
-  selector: createSelector([store => bulkUpdateJobsSelector(store)], ({ isLoading, hasLoadFailed, response }) => ({
+  selector: createSelector(bulkUpdateJobsSelector, ({ isLoading, hasLoadFailed, response }) => ({
     isLoading,
     hasLoadFailed,
     response
   }))
 };
 
-const connectionBulkUpdateIsLoaded = ({ isLoading, hasLoadFailed }: { isLoading: boolean; hasLoadFailed: boolean }) => {
-  return !isLoading && !hasLoadFailed;
-};
+const connectionBulkUpdateIsLoaded = ({ isLoading, hasLoadFailed }: { isLoading: boolean; hasLoadFailed: boolean }) =>
+  !isLoading && !hasLoadFailed;
 
 export const useBulkUpdateJobs = connectionLoader(bulkUpdateJobsConnection);

src/generated/v3/jobService/jobServiceSchemas.ts

@@ -41,9 +41,13 @@ export type DelayedJobDto = {
    */
   name: string | null;
   /**
-   * The name of the related entity (e.g., site, project).
+   * The name of the related entity (e.g., Kerrawarra, New Site, etc).
    */
   entityName?: string | null;
+  /**
+   * The type of the entity (e.g., site, project).
+   */
+  entityType?: string | null;
 };
 
 export type DelayedJobAttributes = {

src/store/apiSlice.ts

@@ -45,7 +45,6 @@ export type Relationships = {
 };
 
 export type StoreResource<AttributeType> = {
-  id?: string;
   attributes: AttributeType;
   // We do a bit of munging on the shape from the API, removing the intermediate "data" member, and
   // ensuring there's always an array, to make consuming the data clientside a little smoother.