fix queue processing

Author: bunsenstraat

libs/remix-ui/app/src/lib/remix-app/actions/modals.ts

@@ -14,6 +14,7 @@ type ActionMap<M extends { [index: string]: any }> = {
 export const enum modalActionTypes {
   setModal = 'SET_MODAL',
   setToast = 'SET_TOAST',
+  processQueue = 'PROCESS_QUEUEU',
   handleHideModal = 'HANDLE_HIDE_MODAL',
   handleToaster = 'HANDLE_HIDE_TOAST'
 }
@@ -22,7 +23,8 @@ type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
   [modalActionTypes.handleHideModal]: any
   [modalActionTypes.setToast]: string | JSX.Element
-  [modalActionTypes.handleToaster]: any
+  [modalActionTypes.handleToaster]: any,
+  [modalActionTypes.processQueue]: any
 }
 
 export type ModalAction = ActionMap<ModalPayload>[keyof ActionMap<

libs/remix-ui/app/src/lib/remix-app/context/provider.tsx

@@ -9,12 +9,18 @@ import { AppContext, dispatchModalContext, modalContext } from './context'
 export const ModalProvider = ({ children = [], reducer = modalReducer, initialState = ModalInitialState } = {}) => {
   const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, initialState)
 
+  const onNextFn = async () => {
+    dispatch({
+      type: modalActionTypes.processQueue
+    })
+  }
+
   const modal = (data: AppModal) => {
     const { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType, defaultValue, hideFn } = data
     return new Promise((resolve, reject) => {
       dispatch({
         type: modalActionTypes.setModal,
-        payload: { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType: modalType || ModalTypes.default, defaultValue: defaultValue, hideFn, resolve }
+        payload: { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType: modalType || ModalTypes.default, defaultValue: defaultValue, hideFn, resolve, next: onNextFn }
       })
     })
   }

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -14,7 +14,8 @@ export interface AppModal {
     modalType?: ModalTypes,
     defaultValue?: string
     hideFn?: () => void,
-    resolve?: (value?:any) => void
+    resolve?: (value?:any) => void,
+    next?: () => void
 }
 
 export interface AlertModal {

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -19,7 +19,8 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
         modalType: action.payload.modalType,
         defaultValue: action.payload.defaultValue,
         hideFn: action.payload.hideFn,
-        resolve: action.payload.resolve
+        resolve: action.payload.resolve,
+        next: action.payload.next
       }
 
       const modalList: AppModal[] = state.modals.slice()
@@ -39,15 +40,22 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
         if (state.focusModal.resolve) {
           state.focusModal.resolve(undefined)
         }
+        if (state.focusModal.next) {
+          state.focusModal.next()
+        }
       }, 250)
       const modalList: AppModal[] = state.modals.slice()
       modalList.shift() // remove the current modal from the list
+      state.focusModal = { ...state.focusModal, hide: true, message: null }
+      return { ...state, modals: modalList }
+    }
+    case modalActionTypes.processQueue: {
+      const modalList: AppModal[] = state.modals.slice()
       if (modalList.length) {
         const focusModal = modalList[0] // extract the next modal from the list
         return { ...state, modals: modalList, focusModal }
       } else {
-        state.focusModal = { ...state.focusModal, hide: true, message: null }
-        return { ...state, modals: [] }
+        return { ...state, modals: modalList }
       }
     }
     case modalActionTypes.setToast: {

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -20,9 +20,9 @@ export const ModalDialog = (props: ModalDialogProps) => {
   }
 
   useEffect(() => {
-    calledHideFunctionOnce.current = false
+    calledHideFunctionOnce.current = props.hide
     modal.current.focus()
-  }, [props.timestamp])
+  }, [props.hide])
 
   useEffect(() => {
     function handleBlur (e) {

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -14,4 +14,5 @@ export interface ModalDialogProps {
   handleHide: (hideState?: boolean) => void,
   children?: React.ReactNode,
   resolve?: (value?:any) => void,
+  next?: () => void
 }