Refactor waitFor helper away (#128)

Author: pascalbaljet

react/src/ModalRoot.jsx

@@ -5,7 +5,6 @@ import { router, usePage } from '@inertiajs/react'
 import { mergeDataIntoQueryString } from '@inertiajs/core'
 import { createContext, useContext } from 'react'
 import ModalRenderer from './ModalRenderer'
-import { waitFor } from './helpers'
 import { getConfig } from './config'
 
 const ModalStackContext = createContext(null)
@@ -14,7 +13,7 @@ ModalStackContext.displayName = 'ModalStackContext'
 let pageVersion = null
 let resolveComponent = null
 let baseUrl = null
-let newModalOnBase = null
+let baseModalsToWaitFor = {}
 let localStackCopy = []
 let pendingModalUpdates = {}
 
@@ -377,7 +376,7 @@ export const ModalStackProvider = ({ children }) => {
             }
 
             if (useInertiaRouter) {
-                newModalOnBase = null
+                baseModalsToWaitFor = {}
 
                 pendingModalUpdates[modalId] = {
                     config,
@@ -393,8 +392,8 @@ export const ModalStackProvider = ({ children }) => {
                     preserveScroll: true,
                     preserveState: true,
                     onError: reject,
-                    onFinish: () => {
-                        waitFor(() => newModalOnBase).then(resolve)
+                    onBefore: () => {
+                        baseModalsToWaitFor[modalId] = resolve
                     },
                 })
             }
@@ -443,6 +442,14 @@ export const ModalStackProvider = ({ children }) => {
         visitModal,
         registerLocalModal,
         removeLocalModal,
+        onModalOnBase: (modalOnBase) => {
+            const resolve = baseModalsToWaitFor[modalOnBase.id]
+
+            if (resolve) {
+                resolve(modalOnBase)
+                delete baseModalsToWaitFor[modalOnBase.id]
+            }
+        },
     }
 
     return <ModalStackContext.Provider value={value}>{children}</ModalStackContext.Provider>
@@ -544,9 +551,7 @@ export const ModalRoot = ({ children }) => {
                             })
                         }
                     })
-                    .then((newModal) => {
-                        newModalOnBase = newModal
-                    })
+                    .then(context.onModalOnBase)
             }),
         [],
     )

react/src/helpers.js

@@ -1,2 +1,2 @@
-import { generateId, sameUrlPath, except, only, rejectNullValues, waitFor, kebabCase } from './../../vue/src/helpers.js'
-export { generateId, sameUrlPath, except, only, rejectNullValues, waitFor, kebabCase }
+import { generateId, sameUrlPath, except, only, rejectNullValues, kebabCase } from './../../vue/src/helpers.js'
+export { generateId, sameUrlPath, except, only, rejectNullValues, kebabCase }

vue/src/ModalRoot.vue

@@ -29,19 +29,21 @@ onUnmounted(
         previousModalOnBase = modalOnBase
         modalStack.setBaseUrl(modalOnBase.baseUrl)
 
-        modalStack.pushFromResponseData(modalOnBase, {}, () => {
-            if (!modalOnBase.baseUrl) {
-                console.error('No base url in modal response data so cannot navigate back')
-                return
-            }
+        modalStack
+            .pushFromResponseData(modalOnBase, {}, () => {
+                if (!modalOnBase.baseUrl) {
+                    console.error('No base url in modal response data so cannot navigate back')
+                    return
+                }
 
-            if (!isNavigating && window.location.href !== modalOnBase.baseUrl) {
-                router.visit(modalOnBase.baseUrl, {
-                    preserveScroll: true,
-                    preserveState: true,
-                })
-            }
-        })
+                if (!isNavigating && window.location.href !== modalOnBase.baseUrl) {
+                    router.visit(modalOnBase.baseUrl, {
+                        preserveScroll: true,
+                        preserveState: true,
+                    })
+                }
+            })
+            .then(modalStack.onModalOnBase)
     }),
 )
 

vue/src/helpers.js

@@ -77,32 +77,6 @@ function rejectNullValues(target) {
     }, {})
 }
 
-function waitFor(conditionFn, waitForSeconds = 3, checkIntervalMilliseconds = 10) {
-    return new Promise((resolve, reject) => {
-        const result = conditionFn()
-
-        if (result) {
-            resolve(result)
-            return
-        }
-
-        let maxAttempts = (waitForSeconds * 1000) / checkIntervalMilliseconds
-
-        const interval = setInterval(() => {
-            const result = conditionFn()
-            if (result) {
-                clearInterval(interval)
-                resolve(result)
-            }
-
-            if (--maxAttempts <= 0) {
-                clearInterval(interval)
-                reject(new Error('Condition not met in time'))
-            }
-        }, checkIntervalMilliseconds)
-    })
-}
-
 function kebabCase(string) {
     if (!string) return ''
 
@@ -130,4 +104,4 @@ function kebabCase(string) {
     return string.toLowerCase()
 }
 
-export { generateIdUsing, sameUrlPath, generateId, except, only, rejectNullValues, waitFor, kebabCase }
+export { generateIdUsing, sameUrlPath, generateId, except, only, rejectNullValues, kebabCase }

vue/src/modalStack.js

@@ -1,5 +1,5 @@
 import { computed, readonly, ref, markRaw, h, nextTick } from 'vue'
-import { generateId, except, waitFor, kebabCase } from './helpers'
+import { generateId, except, kebabCase } from './helpers'
 import { router } from '@inertiajs/vue3'
 import { usePage } from '@inertiajs/vue3'
 import { mergeDataIntoQueryString } from '@inertiajs/core'
@@ -10,6 +10,7 @@ let resolveComponent = null
 
 const pendingModalUpdates = ref({})
 const baseUrl = ref(null)
+const baseModalsToWaitFor = ref({})
 const stack = ref([])
 const localModals = ref({})
 
@@ -325,7 +326,9 @@ function visit(
                 preserveScroll: true,
                 preserveState: true,
                 onError: reject,
-                onFinish: () => waitFor(() => stack.value[0]).then(resolve),
+                onBefore: () => {
+                    baseModalsToWaitFor.value[modalId] = resolve
+                },
             })
         }
 
@@ -380,5 +383,13 @@ export function useModalStack() {
         visit,
         registerLocalModal,
         removeLocalModal: (name) => delete localModals.value[name],
+        onModalOnBase(baseModal) {
+            const resolve = baseModalsToWaitFor.value[baseModal.id]
+
+            if (resolve) {
+                resolve(baseModal)
+                delete baseModalsToWaitFor.value[baseModal.id]
+            }
+        },
     }
 }