Use refs for modals (#1200)

This fixes concurrent showModal calls with stale values which lead to modals getting replaced instead of stacked.

components/modal.js

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react'
 import Modal from 'react-bootstrap/Modal'
 import BackArrow from '@/svgs/arrow-left-line.svg'
 import { useRouter } from 'next/router'
@@ -23,26 +23,27 @@ export function useShowModal () {
 }
 
 export default function useModal () {
-  const [modalContent, setModalContent] = useState(null)
+  const modalStack = useRef([])
-  const [modalOptions, setModalOptions] = useState(null)
+  const [render, forceUpdate] = useReducer(x => x + 1, 0)
-  const [modalStack, setModalStack] = useState([])
+
+  const getCurrentContent = useCallback(() => {
+    return modalStack.current[modalStack.current.length - 1]
+  }, [])
 
   const onBack = useCallback(() => {
-    if (modalStack.length === 0) {
+    getCurrentContent()?.options?.onClose?.()
-      return setModalContent(null)
+    modalStack.current.pop()
-    }
+    forceUpdate()
-    const previousModalContent = modalStack[modalStack.length - 1]
+  }, [])
-    setModalStack(modalStack.slice(0, -1))
-    modalOptions?.onClose?.()
-    return setModalContent(previousModalContent)
-  }, [modalStack, setModalStack, modalOptions?.onClose])
 
   // this is called on every navigation due to below useEffect
   const onClose = useCallback(() => {
-    setModalContent(null)
+    while (modalStack.current.length) {
-    setModalStack(ms => ms.length > 0 ? [] : ms)
+      getCurrentContent()?.options?.onClose?.()
-    modalOptions?.onClose?.()
+      modalStack.current.pop()
-  }, [setModalStack, setModalContent, modalOptions?.onClose])
+    }
+    forceUpdate()
+  }, [])
 
   const router = useRouter()
   useEffect(() => {
@@ -51,45 +52,49 @@ export default function useModal () {
   }, [router.events, onClose])
 
   const modal = useMemo(() => {
-    if (modalContent === null) {
+    if (modalStack.current.length === 0) {
       return null
     }
-    const className = modalOptions?.fullScreen ? 'fullscreen' : ''
+
+    const content = getCurrentContent()
+    const { overflow, keepOpen, fullScreen } = content.options || {}
+    const className = fullScreen ? 'fullscreen' : ''
+
     return (
       <Modal
-        onHide={modalOptions?.keepOpen ? null : onClose} show={!!modalContent}
+        onHide={keepOpen ? null : onClose} show={!!content}
         className={className}
         dialogClassName={className}
         contentClassName={className}
       >
         <div className='d-flex flex-row'>
-          {modalOptions?.overflow &&
+          {overflow &&
             <div className={'modal-btn modal-overflow ' + className}>
               <ActionDropdown>
-                {modalOptions.overflow}
+                {overflow}
               </ActionDropdown>
             </div>}
-          {modalStack.length > 0 ? <div className='modal-btn modal-back' onClick={onBack}><BackArrow width={18} height={18} className='fill-white' /></div> : null}
+          {modalStack.current.length > 1 ? <div className='modal-btn modal-back' onClick={onBack}><BackArrow width={18} height={18} className='fill-white' /></div> : null}
           <div className={'modal-btn modal-close ' + className} onClick={onClose}>X</div>
         </div>
         <Modal.Body className={className}>
-          {modalContent}
+          {content.node}
         </Modal.Body>
       </Modal>
     )
-  }, [modalContent, onClose, modalOptions, onBack, modalStack])
+  }, [render])
 
   const showModal = useCallback(
     (getContent, options) => {
-      if (modalContent) {
+      const ref = { node: getContent(onClose), options }
-        if (options?.replaceModal) {
+      if (options?.replaceModal) {
-          setModalStack(stack => ([]))
+        modalStack.current = [ref]
-        } else setModalStack(stack => ([...stack, modalContent]))
+      } else {
+        modalStack.current.push(ref)
       }
-      setModalOptions(options)
+      forceUpdate()
-      setModalContent(getContent(onClose))
     },
-    [modalContent, onClose]
+    [onClose]
   )
 
   return [modal, showModal]