From 0e1b94b5cdf67eb64a5841dcd4d1d83150b767a6 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 12 Feb 2022 20:53:49 +0530
Subject: [PATCH] fix: sign out dialog disappearing when account menu is
 unfocused (#863)

---
 .../components/AccountMenu/index.tsx          |  5 ---
 .../components/ApplicationView.tsx            |  6 +++
 .../preferences/panes/account/SignOutView.tsx | 45 ++++++++-----------
 3 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/components/AccountMenu/index.tsx b/app/assets/javascripts/components/AccountMenu/index.tsx
index 36bc5cae0..35ba2e918 100644
--- a/app/assets/javascripts/components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/components/AccountMenu/index.tsx
@@ -7,7 +7,6 @@ import { GeneralAccountMenu } from './GeneralAccountMenu';
 import { FunctionComponent } from 'preact';
 import { SignInPane } from './SignIn';
 import { CreateAccount } from './CreateAccount';
-import { ConfirmSignoutContainer } from '../ConfirmSignoutModal';
 import { ConfirmPassword } from './ConfirmPassword';
 import { JSXInternal } from 'preact/src/jsx';
 
@@ -130,10 +129,6 @@ export const AccountMenu: FunctionComponent<Props> = observer(
             closeMenu={closeAccountMenu}
           />
         </div>
-        <ConfirmSignoutContainer
-          appState={appState}
-          application={application}
-        />
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
index 92015b008..883f7db2f 100644
--- a/app/assets/javascripts/components/ApplicationView.tsx
+++ b/app/assets/javascripts/components/ApplicationView.tsx
@@ -24,6 +24,7 @@ import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper';
 import { render } from 'preact';
 import { PermissionsModal } from './PermissionsModal';
 import { PremiumModalProvider } from './Premium';
+import { ConfirmSignoutContainer } from './ConfirmSignoutModal';
 
 type Props = {
   application: WebApplication;
@@ -265,6 +266,11 @@ export class ApplicationView extends PureComponent<Props, State> {
                 application={this.application}
                 appState={this.appState}
               />
+
+              <ConfirmSignoutContainer
+                appState={this.appState}
+                application={this.application}
+              />
             </>
           )}
         </div>
diff --git a/app/assets/javascripts/preferences/panes/account/SignOutView.tsx b/app/assets/javascripts/preferences/panes/account/SignOutView.tsx
index a4acc85fb..30078bcb0 100644
--- a/app/assets/javascripts/preferences/panes/account/SignOutView.tsx
+++ b/app/assets/javascripts/preferences/panes/account/SignOutView.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@/components/Button';
-import { ConfirmSignoutContainer } from '@/components/ConfirmSignoutModal';
 import { OtherSessionsSignOutContainer } from '@/components/OtherSessionsSignOut';
 import {
   PreferencesGroup,
@@ -58,35 +57,28 @@ const SignOutView: FunctionComponent<{
         appState={appState}
         application={application}
       />
-
-      <ConfirmSignoutContainer appState={appState} application={application} />
     </>
   );
 });
 
 const ClearSessionDataView: FunctionComponent<{
-  application: WebApplication;
   appState: AppState;
-}> = observer(({ application, appState }) => {
+}> = observer(({ appState }) => {
   return (
-    <>
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <Title>Clear session data</Title>
-          <Text>This will delete all local items and preferences.</Text>
-          <div className="min-h-3" />
-          <Button
-            type="danger"
-            label="Clear Session Data"
-            onClick={() => {
-              appState.accountMenu.setSigningOut(true);
-            }}
-          />
-        </PreferencesSegment>
-      </PreferencesGroup>
-
-      <ConfirmSignoutContainer appState={appState} application={application} />
-    </>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Clear session data</Title>
+        <Text>This will delete all local items and preferences.</Text>
+        <div className="min-h-3" />
+        <Button
+          type="danger"
+          label="Clear Session Data"
+          onClick={() => {
+            appState.accountMenu.setSigningOut(true);
+          }}
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
   );
 });
 
@@ -94,9 +86,8 @@ export const SignOutWrapper: FunctionComponent<{
   application: WebApplication;
   appState: AppState;
 }> = observer(({ application, appState }) => {
-  if (!application.hasAccount())
-    return (
-      <ClearSessionDataView appState={appState} application={application} />
-    );
+  if (!application.hasAccount()) {
+    return <ClearSessionDataView appState={appState} />;
+  }
   return <SignOutView appState={appState} application={application} />;
 });