unmount invisible modal

reapit · May 21, 2020 · 8419d7f · 8419d7f
1 parent e509fc1
commit 8419d7f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 92 deletions.
diff --git a/...lace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap b/...lace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap
@@ -117,64 +117,6 @@ exports[`Aside ManageApp - should match snapshot 1`] = `
 <Component
   header="Manage App"
 >
-  <AppDeleteModalWithRedux
-    afterClose={[Function]}
-    appId="test"
-    appName=""
-    onDeleteSuccess={[Function]}
-    visible={false}
-  />
-  <Connect(Component)
-    afterClose={[Function]}
-    appDetailState={
-      Object {
-        "data": Object {
-          "description": "enim facilisis gravida neque convallis a cras semper auctor neque vitae tempus quam 
-    pellentesque nec nam aliquam sem et tortor consequat id porta nibh venenatis cras 
-    sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar 
-    elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla 
-    at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet 
-    proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum co",
-          "developer": "Pete's Proptech World Ltd",
-          "homePage": "http://myawesomeproptechproduct.io",
-          "id": "9b6fd5f7-2c15-483d-b925-01b650538e52",
-          "media": Array [
-            Object {
-              "description": "Application Icon",
-              "type": "icon",
-              "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg",
-            },
-            Object {
-              "description": "Application Image",
-              "type": "image",
-              "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png",
-            },
-            Object {
-              "description": "Application Image",
-              "type": "image",
-              "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png",
-            },
-          ],
-          "name": "Peter's Properties",
-          "scopes": Array [
-            Object {
-              "description": "Read data about developers",
-              "name": "Marketplace/developers.read",
-            },
-            Object {
-              "description": "Write data about developers",
-              "name": "Marketplace/developers.write",
-            },
-          ],
-          "summary": "vitae elementum curabitur vitae nunc sed velit eget gravida cum sociis natoque!!",
-          "supportEmail": "[email protected]",
-          "telephone": "0113 288 2900",
-        },
-      }
-    }
-    appId="test"
-    visible={false}
-  />
   <div>
     <Component
       className="mb-3"

diff --git a/...ts/pages/developer-app-detail/app-detail/__test__/__snapshots__/app-content.test.tsx.snap b/...ts/pages/developer-app-detail/app-detail/__test__/__snapshots__/app-content.test.tsx.snap
@@ -62,9 +62,6 @@ exports[`AppContent AppContent - should match snapshoot 1`] = `
     }
   >
     <div>
-      <Component
-        visible={false}
-      />
       <div />
       <div>
         <Component

diff --git a/...ketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx b/...ketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx
@@ -94,22 +94,23 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
 
   return (
     <div className={clientAppDetailStyles.appContentContainer}>
-      <Modal visible={isVisibleUninstallModal}>
-        <ConfirmUninstall
-          isSetAppDetailStaleAfterUninstallSuccess={false}
-          appName={name}
-          installationDetail={uninstallApp}
-          afterClose={handleAfterClose({ setUninstallApp })}
-          onUninstallSuccess={handleUninstallSuccess({
-            handleAfterClose,
-            setUninstallApp,
-            developerId,
-            appId: id,
-            dispatch,
-          })}
-        />
-      </Modal>
-
+      {isVisibleUninstallModal && (
+        <Modal visible={isVisibleUninstallModal}>
+          <ConfirmUninstall
+            isSetAppDetailStaleAfterUninstallSuccess={false}
+            appName={name}
+            installationDetail={uninstallApp}
+            afterClose={handleAfterClose({ setUninstallApp })}
+            onUninstallSuccess={handleUninstallSuccess({
+              handleAfterClose,
+              setUninstallApp,
+              developerId,
+              appId: id,
+              dispatch,
+            })}
+          />
+        </Modal>
+      )}
       <div className={clientAppDetailStyles.gutter}>{summary}</div>
       <div className={appDetailStyles.gutter}>
         <H5 className="flex items-center">

diff --git a/packages/marketplace/src/components/pages/developer-app-detail/aside.tsx b/packages/marketplace/src/components/pages/developer-app-detail/aside.tsx
@@ -34,22 +34,26 @@ export const ManageApp: React.FC<ManageAppProps> = ({ pendingRevisions, id, appD
 
   return (
     <RenderWithHeader header="Manage App">
-      <AppDelete
-        appId={id || ''}
-        appName={name || ''}
-        afterClose={() => setIsDeleteModalOpen(false)}
-        visible={isDeleteModalOpen}
-        onDeleteSuccess={() => {
-          history.push(routes.DEVELOPER_MY_APPS)
-        }}
-      />
+      {isDeleteModalOpen && (
+        <AppDelete
+          appId={id || ''}
+          appName={name || ''}
+          afterClose={() => setIsDeleteModalOpen(false)}
+          visible={isDeleteModalOpen}
+          onDeleteSuccess={() => {
+            history.push(routes.DEVELOPER_MY_APPS)
+          }}
+        />
+      )}
 
-      <DeveloperAppRevisionModal
-        appDetailState={appDetailState}
-        visible={isAppRevisionComparisionModalOpen}
-        appId={id || ''}
-        afterClose={() => setIsAppRevisionComparisionModalOpen(false)}
-      />
+      {isAppRevisionComparisionModalOpen && (
+        <DeveloperAppRevisionModal
+          appDetailState={appDetailState}
+          visible={isAppRevisionComparisionModalOpen}
+          appId={id || ''}
+          afterClose={() => setIsAppRevisionComparisionModalOpen(false)}
+        />
+      )}
 
       <div className={developerAppDetailStyles.asideManageAppContainer}>
         {pendingRevisions ? (
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       >
         <div>
-          <Component
-            visible={false}
-          />
           <div />
           <div>
             <Component
@@ Expand Down @@