Fix - App crashes when importing CSV of employees

src/components/ImportSpreadsheetConfirmModal.tsx

@@ -34,6 +34,7 @@ function ImportSpreadsheetConfirmModal({isVisible, closeImportPageAndModal, onMo
             return;
         }
         showConfirmModal({
+            id: 'import-spreadsheet-confirm-modal',
             title: titleText,
             prompt: promptText,
             confirmText: translate('common.buttonConfirm'),
@@ -43,7 +44,11 @@ function ImportSpreadsheetConfirmModal({isVisible, closeImportPageAndModal, onMo
         }).then(() => {
             closeImportPageAndModal();
         });
-    }, [isVisible, titleText, promptText, closeImportPageAndModal, onModalHide, shouldHandleNavigationBack, showConfirmModal, translate, spreadsheet?.importFinalModal]);
+
+        // We don't need the callbacks as dependencies as they are unstable
+        // references that cause an infinite re-render loop.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isVisible, titleText, promptText, spreadsheet?.importFinalModal, shouldHandleNavigationBack]);
 
     return null;
 }

src/components/Modal/Global/ModalContext.tsx

@@ -46,7 +46,7 @@ function ModalProvider({children}: {children: React.ReactNode}) {
         // This is a promise that will resolve when the modal is closed
         let closeModalPromise: CloseModalPromiseWithResolvers | null = id ? modalPromisesStack.current?.[id] : null;
 
-        const newModalId = id ?? String(modalIDRef.current++);
+        const modalID = id ?? String(modalIDRef.current++);
 
         if (!closeModalPromise) {
             // Create a new promise with resolvers to be resolved when the modal is closed
@@ -56,12 +56,22 @@ function ModalProvider({children}: {children: React.ReactNode}) {
             // New modal => update modals stack
             setModalStack((prevState) => ({
                 ...prevState,
-                modals: [...prevState.modals, {component: component as React.FunctionComponent<ModalProps>, props, isCloseable, id: newModalId}],
+                modals: [...prevState.modals, {component: component as React.FunctionComponent<ModalProps>, props, isCloseable, id: modalID}],
             }));
+            modalPromisesStack.current[modalID] = closeModalPromise;
+        } else {
+            // If it is an existing modal, update props in place instead of stacking a new modal
+            setModalStack((prevState) => {
+                const modals = prevState.modals.map((modal) => {
+                    if (modal.id === id) {
+                        return {component: component as React.FunctionComponent<ModalProps>, props, isCloseable, id: modalID};
+                    }
+                    return modal;
+                });
+                return {...prevState, modals};
+            });
         }
 
-        modalPromisesStack.current[newModalId] = closeModalPromise;
-
         return closeModalPromise.promise;
     };
 

src/hooks/useConfirmModal.ts

@@ -2,14 +2,17 @@ import ConfirmModalWrapper from '@components/Modal/Global/ConfirmModalWrapper';
 import type {ModalProps} from '@components/Modal/Global/ModalContext';
 import {useModal} from '@components/Modal/Global/ModalContext';
 
-type ConfirmModalOptions = Omit<React.ComponentProps<typeof ConfirmModalWrapper>, keyof ModalProps>;
+type ConfirmModalOptions = Omit<React.ComponentProps<typeof ConfirmModalWrapper>, keyof ModalProps> & {
+    id?: string;
+};
 
 const useConfirmModal = () => {
     const context = useModal();
 
-    const showConfirmModal = (options: ConfirmModalOptions) => {
+    const showConfirmModal = ({id, ...options}: ConfirmModalOptions) => {
         return context.showModal({
             component: ConfirmModalWrapper,
+            id,
             props: {
                 shouldHandleNavigationBack: true,
                 ...options,