PM-973 - invite by email - fix awaiting for project updates to propagate

src/containers/ProjectInvitations/index.js

@@ -11,6 +11,7 @@ import ConfirmationModal from '../../components/Modal/ConfirmationModal'
 import styles from './ProjectInvitations.module.scss'
 import { updateProjectMemberInvite } from '../../services/projectMemberInvites'
 import { PROJECT_MEMBER_INVITE_STATUS_ACCEPTED, PROJECT_MEMBER_INVITE_STATUS_REFUSED } from '../../config/constants'
+import { delay } from '../../util/delay'
 
 const theme = {
   container: styles.modalContainer
@@ -44,9 +45,16 @@ const ProjectInvitations = ({ match, auth, isProjectLoading, history, projectDet
   const updateInvite = useCallback(async (status) => {
     setIsUpdating(status)
     await updateProjectMemberInvite(projectId, invitation.id, status)
+
+    // await for the project details to propagate
+    await delay(1000)
+    await loadProject(projectId)
     toastr.success('Success', `Successfully ${status} the invitation.`)
+
+    // await for the project details to fetch
+    await delay(1000)
     history.push(status === PROJECT_MEMBER_INVITE_STATUS_ACCEPTED ? `/projects/${projectId}/challenges` : '/projects')
-  }, [invitation])
+  }, [projectId, invitation, loadProject, history])
 
   const acceptInvite = useCallback(() => updateInvite(PROJECT_MEMBER_INVITE_STATUS_ACCEPTED), [updateInvite])
   const declineInvite = useCallback(() => updateInvite(PROJECT_MEMBER_INVITE_STATUS_REFUSED), [updateInvite])
@@ -56,13 +64,11 @@ const ProjectInvitations = ({ match, auth, isProjectLoading, history, projectDet
       return
     }
 
-    setTimeout(() => {
-      if (automaticAction === PROJECT_MEMBER_INVITE_STATUS_ACCEPTED) {
-        acceptInvite()
-      } else if (automaticAction === PROJECT_MEMBER_INVITE_STATUS_REFUSED) {
-        declineInvite()
-      }
-    }, [1500])
+    if (automaticAction === PROJECT_MEMBER_INVITE_STATUS_ACCEPTED) {
+      acceptInvite()
+    } else if (automaticAction === PROJECT_MEMBER_INVITE_STATUS_REFUSED) {
+      declineInvite()
+    }
   }, [invitation, automaticAction])
 
   return (

src/util/delay.js

@@ -0,0 +1,25 @@
+/**
+ * Creates a delay that can be awaited, and optionally aborted via an AbortSignal.
+ *
+ * @param {number} ms - The number of milliseconds to delay.
+ * @param {AbortSignal} signal - Optional AbortSignal to cancel the delay early.
+ * @returns A Promise that resolves after the delay, or rejects if aborted.
+ */
+export function delay (ms, signal) {
+  return new Promise((resolve, reject) => {
+    // Start a timer that will resolve the promise after `ms` milliseconds
+    const timeout = setTimeout(resolve, ms)
+
+    // If an AbortSignal is provided, handle abort events
+    if (signal) {
+      // Listen for the 'abort' event
+      signal.addEventListener('abort', () => {
+        // Cancel the timeout so it doesn't resolve the promise later
+        clearTimeout(timeout)
+        // Reject the promise with a DOMException for consistency with other abortable APIs
+        // eslint-disable-next-line no-undef
+        reject(new DOMException('Delay aborted', 'AbortError'))
+      }, { once: true }) // 'once' ensures the handler is removed automatically after it runs
+    }
+  })
+}