refactor: alert close button

2023-01-17 00:33:20 +05:30
parent 029c74cc1f
commit 11dde8d03d
5 changed files with 81 additions and 49 deletions
--- a/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
+++ b/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
@@ -1,10 +1,11 @@
 import { observer } from 'mobx-react-lite'
 import { ViewControllerManager } from '@Controllers/ViewControllerManager'
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { STRING_DELETE_ACCOUNT_CONFIRMATION } from '@/Constants/Strings'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
+import Icon from '../Icon/Icon'

 type Props = {
  viewControllerManager: ViewControllerManager
@@ -12,12 +13,17 @@ type Props = {
 }

 const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props) => {
-  function closeDialog() {
+  const closeDialog = useCallback(() => {
    viewControllerManager.accountMenuController.setDeletingAccount(false)
-  }
+  }, [viewControllerManager.accountMenuController])

  const cancelRef = useRef<HTMLButtonElement>(null)

+  const confirm = useCallback(() => {
+    application.user.deleteAccount().catch(console.error)
+    closeDialog()
+  }, [application.user, closeDialog])
+
  return (
    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
      <div className="sk-modal-content">
@@ -25,7 +31,12 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
          <div className="sk-panel">
            <div className="sk-panel-content">
              <div className="sk-panel-section">
-                <AlertDialogLabel className="text-lg font-bold">Delete account?</AlertDialogLabel>
+                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+                  Delete account?
+                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+                    <Icon type="close" />
+                  </button>
+                </AlertDialogLabel>
                <AlertDialogDescription className="sk-panel-row">
                  <div>
                    <p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
@@ -36,14 +47,7 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
                  <Button ref={cancelRef} onClick={closeDialog}>
                    Cancel
                  </Button>
-                  <Button
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      application.user.deleteAccount().catch(console.error)
-                      closeDialog()
-                    }}
-                  >
+                  <Button primary colorStyle="danger" onClick={confirm}>
                    Delete my account for good
                  </Button>
                </div>
--- a/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
+++ b/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { STRING_SIGN_OUT_CONFIRMATION } from '@/Constants/Strings'
 import { WebApplication } from '@/Application/Application'
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { isDesktopApplication } from '@/Utils'
 import Button from '@/Components/Button/Button'
+import Icon from '../Icon/Icon'

 type Props = {
  application: WebApplication
@@ -18,9 +19,9 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
  const [deleteLocalBackups, setDeleteLocalBackups] = useState(false)

  const cancelRef = useRef<HTMLButtonElement>(null)
-  function closeDialog() {
+  const closeDialog = useCallback(() => {
    viewControllerManager.accountMenuController.setSigningOut(false)
-  }
+  }, [viewControllerManager.accountMenuController])

  const [localBackupsCount, setLocalBackupsCount] = useState(0)

@@ -31,6 +32,15 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
  const workspaces = applicationGroup.getDescriptors()
  const showWorkspaceWarning = workspaces.length > 1 && isDesktopApplication()

+  const confirm = useCallback(() => {
+    if (deleteLocalBackups) {
+      application.signOutAndDeleteLocalBackups().catch(console.error)
+    } else {
+      application.user.signOut().catch(console.error)
+    }
+    closeDialog()
+  }, [application, closeDialog, deleteLocalBackups])
+
  return (
    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
      <div className="sk-modal-content">
@@ -38,7 +48,12 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
          <div className="sk-panel">
            <div className="sk-panel-content">
              <div className="sk-panel-section">
-                <AlertDialogLabel className="text-lg font-bold">Sign out workspace?</AlertDialogLabel>
+                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+                  Sign out workspace?
+                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+                    <Icon type="close" />
+                  </button>
+                </AlertDialogLabel>
                <AlertDialogDescription className="sk-panel-row">
                  <div>
                    <p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
@@ -87,18 +102,7 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
                  <Button ref={cancelRef} onClick={closeDialog}>
                    Cancel
                  </Button>
-                  <Button
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      if (deleteLocalBackups) {
-                        application.signOutAndDeleteLocalBackups().catch(console.error)
-                      } else {
-                        application.user.signOut().catch(console.error)
-                      }
-                      closeDialog()
-                    }}
-                  >
+                  <Button primary colorStyle="danger" onClick={confirm}>
                    {application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
                  </Button>
                </div>
--- a/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
+++ b/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
@@ -4,6 +4,7 @@ import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import Button from '@/Components/Button/Button'
+import Icon from '../Icon/Icon'

 type Props = {
  application: WebApplication
@@ -17,6 +18,14 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
    viewControllerManager.accountMenuController.setOtherSessionsSignOut(false)
  }, [viewControllerManager])

+  const confirm = useCallback(() => {
+    application.revokeAllOtherSessions().catch(console.error)
+    closeDialog()
+    application.alertService
+      .alert('You have successfully revoked your sessions from other devices.', undefined, 'Finish')
+      .catch(console.error)
+  }, [application, closeDialog])
+
  return (
    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
      <div className="sk-modal-content">
@@ -24,7 +33,12 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
          <div className="sk-panel">
            <div className="sk-panel-content">
              <div className="sk-panel-section">
-                <AlertDialogLabel className="text-lg font-bold capitalize">End all other sessions?</AlertDialogLabel>
+                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold capitalize">
+                  End all other sessions?
+                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+                    <Icon type="close" />
+                  </button>
+                </AlertDialogLabel>
                <AlertDialogDescription className="sk-panel-row">
                  <p className="text-base text-foreground lg:text-sm">
                    This action will sign out all other devices signed into your account, and remove your data from
@@ -36,17 +50,7 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
                  <Button ref={cancelRef} onClick={closeDialog}>
                    Cancel
                  </Button>
-                  <Button
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      application.revokeAllOtherSessions().catch(console.error)
-                      closeDialog()
-                      application.alertService
-                        .alert('You have successfully revoked your sessions from other devices.', undefined, 'Finish')
-                        .catch(console.error)
-                    }}
-                  >
+                  <Button primary colorStyle="danger" onClick={confirm}>
                    End Sessions
                  </Button>
                </div>
--- a/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
+++ b/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
@@ -10,6 +10,7 @@ import ModalDialogLabel from '../Shared/ModalDialogLabel'
 import ModalDialogDescription from '../Shared/ModalDialogDescription'
 import Spinner from '@/Components/Spinner/Spinner'
 import Button from '@/Components/Button/Button'
+import Icon from '../Icon/Icon'

 type Session = RemoteSession & {
  revoking?: true
@@ -102,6 +103,9 @@ const SessionsModalContent: FunctionComponent<{
    [],
  )

+  const closeRevokeConfirmationDialog = () => {
+    setRevokingSessionUuid('')
+  }
  return (
    <>
      <ModalDialog onDismiss={close} className="sessions-modal max-h-[90vh]">
@@ -154,19 +158,21 @@ const SessionsModalContent: FunctionComponent<{
        </ModalDialogDescription>
      </ModalDialog>
      {confirmRevokingSessionUuid && (
-        <AlertDialog
-          onDismiss={() => {
-            setRevokingSessionUuid('')
-          }}
-          leastDestructiveRef={cancelRevokeRef}
-          className="p-0"
-        >
+        <AlertDialog onDismiss={closeRevokeConfirmationDialog} leastDestructiveRef={cancelRevokeRef} className="p-0">
          <div className="sk-modal-content">
            <div className="sn-component">
              <div className="sk-panel">
                <div className="sk-panel-content">
                  <div className="sk-panel-section">
-                    <AlertDialogLabel className="text-lg font-bold">{SessionStrings.RevokeTitle}</AlertDialogLabel>
+                    <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+                      {SessionStrings.RevokeTitle}
+                      <button
+                        className="rounded p-1 font-bold hover:bg-contrast"
+                        onClick={closeRevokeConfirmationDialog}
+                      >
+                        <Icon type="close" />
+                      </button>
+                    </AlertDialogLabel>
                    <AlertDialogDescription className="sk-panel-row">
                      <p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
                    </AlertDialogDescription>