Keep track of modal stack

components/modal.js

@@ -1,5 +1,6 @@
 import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 import Modal from 'react-bootstrap/Modal'
+import BackArrow from '../svgs/arrow-left-line.svg'
 
 export const ShowModalContext = createContext(() => null)
 
@@ -22,9 +23,20 @@ export function useShowModal () {
 export default function useModal () {
   const [modalContent, setModalContent] = useState(null)
   const [modalOptions, setModalOptions] = useState(null)
+  const [modalStack, setModalStack] = useState([])
+
+  const onBack = useCallback(() => {
+    if (modalStack.length === 0) {
+      return setModalContent(null)
+    }
+    const previousModalContent = modalStack[modalStack.length - 1]
+    setModalStack(modalStack.slice(0, -1))
+    return setModalContent(previousModalContent)
+  }, [modalStack, setModalStack])
 
   const onClose = useCallback(() => {
     setModalContent(null)
+    setModalStack([])
   }, [])
 
   const modal = useMemo(() => {
@@ -33,7 +45,10 @@ export default function useModal () {
     }
     return (
       <Modal onHide={modalOptions?.keepOpen ? null : onClose} show={!!modalContent}>
-        <div className='modal-close' onClick={onClose}>X</div>
+        <div className='d-flex flex-row'>
+          {modalStack.length > 0 ? <div className='modal-btn modal-back' onClick={onBack}><BackArrow width={18} height={18} className='fill-white' /></div> : null}
+          <div className='modal-btn modal-close' onClick={onClose}>X</div>
+        </div>
         <Modal.Body>
           {modalContent}
         </Modal.Body>
@@ -43,10 +58,13 @@ export default function useModal () {
 
   const showModal = useCallback(
     (getContent, options) => {
+      if (modalContent) {
+        setModalStack(stack => ([...stack, modalContent]))
+      }
       setModalOptions(options)
       setModalContent(getContent(onClose))
     },
-    [onClose]
+    [modalContent, onClose]
   )
 
   return [modal, showModal]

styles/globals.scss

@@ -175,11 +175,20 @@ $grid-gutter-width: 2rem;
   margin-bottom: 0 !important;
 }
 
-.modal-close {
+.modal-btn {
   cursor: pointer;
   display: flex;
-  margin-left: auto;
   padding-top: 1rem;
+  align-items: center;
+}
+
+.modal-back {
+  margin-right: auto;
+  padding-left: 1.5rem;
+}
+
+.modal-close {
+  margin-left: auto;
   padding-right: 1.5rem;
   font-family: "lightning";
   font-size: 150%;