Replaces ConfirmationModal with ConfirmationDialog

ts/components/SafetyNumberChangeDialog.tsx

@@ -2,10 +2,12 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
+import { noop } from 'lodash';
 
 import { Avatar } from './Avatar';
-import { ConfirmationModal } from './ConfirmationModal';
+import { ConfirmationDialog } from './ConfirmationDialog';
 import { InContactsIcon } from './InContactsIcon';
+import { Modal } from './Modal';
 
 import { ConversationType } from '../state/ducks/conversations';
 import { LocalizerType } from '../types/Util';
@@ -24,18 +26,17 @@ export type Props = {
   readonly renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
 };
 
-type SafetyDialogContentProps = Props & {
-  readonly onView: (contact: ConversationType) => void;
-};
-
-const SafetyDialogContents = ({
+export const SafetyNumberChangeDialog = ({
   confirmText,
   contacts,
   i18n,
   onCancel,
   onConfirm,
-  onView,
-}: SafetyDialogContentProps): JSX.Element => {
+  renderSafetyNumber,
+}: Props): JSX.Element => {
+  const [selectedContact, setSelectedContact] = React.useState<
+    ConversationType | undefined
+  >(undefined);
   const cancelButtonRef = React.createRef<HTMLButtonElement>();
 
   React.useEffect(() => {
@@ -44,20 +45,46 @@ const SafetyDialogContents = ({
     }
   }, [cancelButtonRef, contacts]);
 
+  const onClose = selectedContact
+    ? () => {
+        setSelectedContact(undefined);
+      }
+    : onCancel;
+
+  if (selectedContact) {
+    return (
+      <Modal i18n={i18n}>
+        {renderSafetyNumber({ contactID: selectedContact.id, onClose })}
+      </Modal>
+    );
+  }
+
   return (
-    <>
-      <h1 className="module-sfn-dialog__title">
-        {i18n('safetyNumberChanges')}
-      </h1>
-      <div className="module-sfn-dialog__message">
+    <ConfirmationDialog
+      actions={[
+        {
+          action: onConfirm,
+          text: confirmText || i18n('sendMessageToContact'),
+          style: 'affirmative',
+        },
+      ]}
+      i18n={i18n}
+      onCancel={onClose}
+      onClose={noop}
+      title={i18n('safetyNumberChanges')}
+    >
+      <div className="module-SafetyNumberChangeDialog__message">
         {i18n('changedVerificationWarning')}
       </div>
-      <ul className="module-sfn-dialog__contacts">
+      <ul className="module-SafetyNumberChangeDialog__contacts">
         {contacts.map((contact: ConversationType) => {
           const shouldShowNumber = Boolean(contact.name || contact.profileName);
 
           return (
-            <li className="module-sfn-dialog__contact" key={contact.id}>
+            <li
+              className="module-SafetyNumberChangeDialog__contact"
+              key={contact.id}
+            >
               <Avatar
                 avatarPath={contact.avatarPath}
                 color={contact.color}
@@ -69,8 +96,8 @@ const SafetyDialogContents = ({
                 title={contact.title}
                 size={52}
               />
-              <div className="module-sfn-dialog__contact--wrapper">
-                <div className="module-sfn-dialog__contact--name">
+              <div className="module-SafetyNumberChangeDialog__contact--wrapper">
+                <div className="module-SafetyNumberChangeDialog__contact--name">
                   {contact.title}
                   {contact.name ? (
                     <span>
@@ -80,15 +107,15 @@ const SafetyDialogContents = ({
                   ) : null}
                 </div>
                 {shouldShowNumber ? (
-                  <div className="module-sfn-dialog__contact--number">
+                  <div className="module-SafetyNumberChangeDialog__contact--number">
                     {contact.phoneNumber}
                   </div>
                 ) : null}
               </div>
               <button
-                className="module-sfn-dialog__contact--view"
+                className="module-SafetyNumberChangeDialog__contact--view"
                 onClick={() => {
-                  onView(contact);
+                  setSelectedContact(contact);
                 }}
                 tabIndex={0}
                 type="button"
@@ -99,52 +126,6 @@ const SafetyDialogContents = ({
           );
         })}
       </ul>
-      <div className="module-sfn-dialog__actions">
-        <button
-          className="module-sfn-dialog__actions--cancel"
-          onClick={onCancel}
-          ref={cancelButtonRef}
-          tabIndex={0}
-          type="button"
-        >
-          {i18n('cancel')}
-        </button>
-        <button
-          className="module-sfn-dialog__actions--confirm"
-          onClick={onConfirm}
-          tabIndex={0}
-          type="button"
-        >
-          {confirmText || i18n('sendMessageToContact')}
-        </button>
-      </div>
-    </>
-  );
-};
-
-export const SafetyNumberChangeDialog = (props: Props): JSX.Element => {
-  const { i18n, onCancel, renderSafetyNumber } = props;
-  const [contact, setViewSafetyNumber] = React.useState<
-    ConversationType | undefined
-  >(undefined);
-
-  const onClose = contact
-    ? () => {
-        setViewSafetyNumber(undefined);
-      }
-    : onCancel;
-
-  return (
-    <ConfirmationModal actions={[]} i18n={i18n} onClose={onClose}>
-      {contact && renderSafetyNumber({ contactID: contact.id, onClose })}
-      {!contact && (
-        <SafetyDialogContents
-          {...props}
-          onView={selectedContact => {
-            setViewSafetyNumber(selectedContact);
-          }}
-        />
-      )}
-    </ConfirmationModal>
+    </ConfirmationDialog>
   );
 };