fix: project leaving inconsistencies (#853)

* Uses a state variable and use effect in the bottom sheet modal related to project invitation so the success modal shows properly.
digidem · Nov 21, 2024 · b87c15e · b87c15e
1 parent 001a75e
commit b87c15e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/src/frontend/sharedComponents/BottomSheetModal/Content.tsx b/src/frontend/sharedComponents/BottomSheetModal/Content.tsx
@@ -60,7 +60,7 @@ export const Content = ({
     <View
       style={[
         styles.container,
-        fullScreen ? {height: '100%'} : {maxHeight: window.height * 0.8},
+        fullScreen ? {height: window.height} : {maxHeight: window.height * 0.8},
       ]}>
       <View style={[styles.infoContainer, fullScreen && {flex: 1}]}>
         {icon ? <View style={styles.iconContainer}>{icon}</View> : null}

diff --git a/src/frontend/sharedComponents/ProjectInviteBottomSheet/index.tsx b/src/frontend/sharedComponents/ProjectInviteBottomSheet/index.tsx
@@ -51,6 +51,7 @@ export const ProjectInviteBottomSheet = ({
 
   const [leaveModalState, setLeaveModalState] =
     React.useState<LeaveProjectModalState>('AlreadyOnProj');
+  const [inviteModalVisible, setInviteModalVisible] = React.useState(false);
 
   const invite = invites[0];
 
@@ -64,9 +65,23 @@ export const ProjectInviteBottomSheet = ({
   const accept = useAcceptInvite();
   const reject = useRejectInvite();
 
-  if (invite && !inviteIsOpen && enabledForCurrentScreen) {
-    openInviteSheet();
-  }
+  React.useEffect(() => {
+    if (
+      (invite || acceptedInvite) &&
+      !inviteModalVisible &&
+      enabledForCurrentScreen
+    ) {
+      setInviteModalVisible(true);
+    }
+  }, [invite, acceptedInvite, inviteModalVisible, enabledForCurrentScreen]);
+
+  React.useEffect(() => {
+    if (inviteModalVisible && !inviteIsOpen) {
+      openInviteSheet();
+    } else if (!inviteModalVisible && inviteIsOpen) {
+      closeInviteSheet();
+    }
+  }, [inviteModalVisible, inviteIsOpen, openInviteSheet, closeInviteSheet]);
 
   if (currentInviteCanceled && leaveIsOpen) {
     closeLeaveSheet();
@@ -77,20 +92,20 @@ export const ProjectInviteBottomSheet = ({
       reject.mutate(invite, {
         onSuccess: () => {
           if (invites.length <= 1) {
-            closeInviteSheet();
+            setInviteModalVisible(false);
           }
         },
       });
     }
     if (invites.length <= 1) {
-      closeInviteSheet();
+      setInviteModalVisible(false);
     }
   }
 
   function handleCanceledInvite() {
     resetCacheAndClearCanceled();
     if (invites.length <= 1) {
-      closeInviteSheet();
+      setInviteModalVisible(false);
     }
   }
 
@@ -115,6 +130,7 @@ export const ProjectInviteBottomSheet = ({
           accept.reset();
           reject.reset();
           acceptedInvite?.remove();
+          setInviteModalVisible(false);
         }}>
         {currentInviteCanceled ? (
           <InviteCanceledBottomSheetContent
@@ -123,7 +139,9 @@ export const ProjectInviteBottomSheet = ({
           />
         ) : acceptedInvite ? (
           <InviteSuccessBottomSheetContent
-            closeSheet={closeInviteSheet}
+            closeSheet={() => {
+              setInviteModalVisible(false);
+            }}
             projectName={acceptedInvite.value.projectName}
           />
         ) : (