Trigger a reload of forms when an update occured

apps/frontend/services/api/kobo/useGetForms.ts

@@ -1,4 +1,5 @@
 import { DroughtDto, FloodDto, IncidentDto } from '@wfp-dmp/interfaces';
+import { useEffect } from 'react';
 import useSWR from 'swr';
 
 import { SearchFormData } from 'components/Filters/SearchFilters';
@@ -19,7 +20,7 @@ export const useGetForms = ({
   const inputCommune =
     inputRegion.commune.length === 0 ? undefined : inputRegion.commune;
 
-  const { data, isLoading } = useSWR(
+  const { data, isLoading, mutate } = useSWR(
     [
       ApiRoutes.forms,
       inputDisTyps,
@@ -48,5 +49,21 @@ export const useGetForms = ({
     },
   );
 
+  // Trigger a revalidation when the localStorage changes,
+  // suggesting form data has been updated.
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === 'formDataTrigger') {
+        void mutate(); // Trigger a revalidation
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [mutate]);
+
   return { data, isLoading };
 };

apps/frontend/services/api/kobo/usePatchForm.ts

@@ -36,6 +36,8 @@ export const usePatchForm = (
       // If the edit was successful, update the validation status to "onHold".
       if (status === 201) {
         await validationTrigger(ValidationStatusValue.onHold);
+        // Notify other tabs that the form data has been updated.
+        localStorage.setItem('formDataTrigger', JSON.stringify(new Date()));
       }
 
       return status;

apps/frontend/services/api/kobo/usePatchValidationStatus.ts

@@ -27,6 +27,9 @@ export const usePatchValidationStatus = (
           validationStatusValue: arg,
         });
 
+      // Notify other tabs that the form data has been updated.
+      localStorage.setItem('formDataTrigger', JSON.stringify(new Date()));
+
       return updatedValidationStatus;
     },
   );