The invite modal was closing prematurely, causing the success modal to flash and disappear when a user accepted an invite while already on a project, so users couldn't see the confirmation of their accepted invite.
The cause of the issue was the way the modal's visibility was being controlled. The isOpen prop of the BottomSheetModal was directly tied to state variables that changed during the invite acceptance process, specifically invite, acceptedInvite, and accept.status. Here's what was happening:
When the invite was accepted, the invite became undefined, and accept.status changed from 'pending' to 'success'.
Due to these state changes, the isOpen prop evaluated to false, causing the modal to close before the success modal could be displayed.
Things I tried that didn't work
Including accept.status === 'success' and then eventually accept.status==='pending' also in isOpen: I modified the conditions controlling the modal's visibility to include the accepts statueses. This approach was intended to keep the modal open during the transition. However, it didn't fully resolve the issue because the state changes still caused the modal to close unexpectedly.
I tried so many different dependencies in the useEffect hook/ useEffect hooks to settle on the ones that finally worked.
Controlling Modal Visibility with shouldShowInviteModal: I introduced a new state variable shouldShowInviteModal to manage the modal's visibility. While this improved control, the modal didn't open as expected because the BottomSheetModal component didn't automatically open or close when the isOpen prop changed. It relies on imperative methods like openSheet() and closeSheet().
Attempting to Remove the isOpen Prop: I tried removing the isOpen prop from the BottomSheetModal to prevent conflicts. However, this broke functionalities like the back handler, which relies on isOpen.
Solution
I introduced inviteModalVisible as a state variable to be the single source of truth for whether the invite modal should be visible.
I then added the useEffect hook to ensure that the modal becomes visible when there's an invite or acceptedInvite, and the user is on the appropriate screen.
The second hook synchronizes the modal's actual open state (inviteIsOpen) with our inviteModalVisible state.
We only set inviteModalVisible to false only when the modal is dismissed by the user and when someone rejects an invite, preventing unexpected closures.
Now there is no flashing or disappearing!
Bonus!
Something with the changes we made to the npm packages with the modal or the animations made it so the fullSheet for the modal wasn't always working for my devices. This change I made fixed the problem.
closes #832
Description
Things I tried that didn't work
Solution
Now there is no flashing or disappearing!
Bonus!
Something with the changes we made to the npm packages with the modal or the animations made it so the fullSheet for the modal wasn't always working for my devices. This change I made fixed the problem.