ui [nfc]: Extract reusable showConfirmationDialog function

This touches a UI area in which we hope to get better at matching
the web app -- see
  https://chat.zulip.org/#narrow/stream/48-mobile/topic/confirm.2Fcancel.20modals/near/1401229
-- and this refactor will make it easier to apply such improvements
consistently.

Author: chrisbobbe

src/account-info/ProfileScreen.js

@@ -1,7 +1,7 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
 import type { Node } from 'react';
-import { ScrollView, View, Alert } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { type UserId } from '../api/idTypes';
@@ -18,6 +18,7 @@ import AwayStatusSwitch from './AwayStatusSwitch';
 import { getOwnUser } from '../users/userSelectors';
 import { getIdentity } from '../account/accountsSelectors';
 import { useNavigation } from '../react-navigation';
+import { showConfirmationDialog } from '../utils/info';
 
 const styles = createStyleSheet({
   buttonRow: {
@@ -96,25 +97,19 @@ function LogoutButton(props: {||}) {
       secondary
       text="Log out"
       onPress={() => {
-        Alert.alert(
-          _('Log out?'),
-          _('This will log out {email} on {realmUrl} from the mobile app on this device.', {
-            email: identity.email,
-            realmUrl: identity.realm.toString(),
-          }),
-          [
-            { text: _('Cancel'), style: 'cancel' },
-            {
-              text: _('Confirm'),
-              style: 'destructive',
-              onPress: () => {
-                dispatch(tryStopNotifications());
-                dispatch(logout());
-              },
-            },
-          ],
-          { cancelable: true },
-        );
+        showConfirmationDialog({
+          destructive: true,
+          title: 'Log out?',
+          message: {
+            text: 'This will log out {email} on {realmUrl} from the mobile app on this device.',
+            values: { email: identity.email, realmUrl: identity.realm.toString() },
+          },
+          onPressConfirm: () => {
+            dispatch(tryStopNotifications());
+            dispatch(logout());
+          },
+          _,
+        });
       }}
     />
   );

src/account/AccountPickScreen.js

@@ -2,7 +2,6 @@
 
 import React, { useContext, useCallback } from 'react';
 import type { Node } from 'react';
-import { Alert } from 'react-native';
 
 import * as api from '../api';
 import { TranslationContext } from '../boot/TranslationProvider';
@@ -18,7 +17,7 @@ import ViewPlaceholder from '../common/ViewPlaceholder';
 import AccountList from './AccountList';
 import { accountSwitch, removeAccount } from '../actions';
 import type { ApiResponseServerSettings } from '../api/settings/getServerSettings';
-import { showErrorAlert } from '../utils/info';
+import { showConfirmationDialog, showErrorAlert } from '../utils/info';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'account-pick'>,
@@ -54,24 +53,18 @@ export default function AccountPickScreen(props: Props): Node {
   const handleAccountRemove = useCallback(
     (index: number) => {
       const { realm, email } = accounts[index];
-      Alert.alert(
-        _('Remove account?'),
-        _('This will make the mobile app on this device forget {email} on {realmUrl}.', {
-          realmUrl: realm.toString(),
-          email,
-        }),
-        [
-          { text: _('Cancel'), style: 'cancel' },
-          {
-            text: _('Confirm'),
-            style: 'destructive',
-            onPress: () => {
-              dispatch(removeAccount(index));
-            },
-          },
-        ],
-        { cancelable: true },
-      );
+      showConfirmationDialog({
+        destructive: true,
+        title: 'Remove account?',
+        message: {
+          text: 'This will make the mobile app on this device forget {email} on {realmUrl}.',
+          values: { realmUrl: realm.toString(), email },
+        },
+        onPressConfirm: () => {
+          dispatch(removeAccount(index));
+        },
+        _,
+      });
     },
     [accounts, _, dispatch],
   );

src/action-sheets/index.js

@@ -31,7 +31,7 @@ import { pmUiRecipientsFromKeyRecipients } from '../utils/recipient';
 import type { PmKeyRecipients } from '../utils/recipient';
 import { isTopicMuted } from '../mute/muteModel';
 import * as api from '../api';
-import { showToast } from '../utils/info';
+import { showConfirmationDialog, showToast } from '../utils/info';
 import {
   doNarrow,
   deleteOutboxMessage,
@@ -268,18 +268,17 @@ const deleteTopic = {
   errorMessage: 'Failed to delete topic',
   action: async ({ streamId, topic, dispatch, _ }) => {
     const confirmed = await new Promise((resolve, reject) => {
-      Alert.alert(
-        _('Delete topic', { topic }),
-        _(
-          'Deleting a topic will immediately remove it and its messages for everyone. Other users may find this confusing, especially if they had received an email or push notification related to the deleted messages.\n\nAre you sure you want to permanently delete “{topic}”?',
-          { topic },
-        ),
-        [
-          { text: _('Cancel'), onPress: () => resolve(false), style: 'cancel' },
-          { text: _('Confirm'), onPress: () => resolve(true), style: 'destructive' },
-        ],
-        { cancelable: true },
-      );
+      showConfirmationDialog({
+        destructive: true,
+        title: 'Delete topic',
+        message: {
+          text: 'Deleting a topic will immediately remove it and its messages for everyone. Other users may find this confusing, especially if they had received an email or push notification related to the deleted messages.\n\nAre you sure you want to permanently delete “{topic}”?',
+          values: { topic },
+        },
+        onPressConfirm: () => resolve(true),
+        onPressCancel: () => resolve(false),
+        _,
+      });
     });
     if (confirmed) {
       await dispatch(deleteMessagesForTopic(streamId, topic));

src/streams/EditStreamCard.js

@@ -1,7 +1,7 @@
 /* @flow strict-local */
 import React, { useState, useCallback, useMemo, useEffect, useContext } from 'react';
 import type { Node } from 'react';
-import { View, Alert } from 'react-native';
+import { View } from 'react-native';
 
 import type { Privacy } from './streamsActions';
 import { ensureUnreachable } from '../types';
@@ -27,6 +27,7 @@ import type {
   CreateWebPublicStreamPolicyT,
 } from '../api/permissionsTypes';
 import type { LocalizableText } from '../types';
+import { showConfirmationDialog } from '../utils/info';
 
 type PropsBase = $ReadOnly<{|
   navigation: AppNavigationMethods,
@@ -309,20 +310,13 @@ export default function EditStreamCard(props: Props): Node {
 
         e.preventDefault();
 
-        Alert.alert(
-          _('Discard changes?'),
-          _('You have unsaved changes. Leave without saving?'),
-          [
-            { text: _('Cancel'), style: 'cancel' },
-            {
-              text: _('Confirm'),
-              style: 'destructive',
-
-              onPress: () => navigation.dispatch(e.data.action),
-            },
-          ],
-          { cancelable: true },
-        );
+        showConfirmationDialog({
+          destructive: true,
+          title: 'Discard changes?',
+          message: 'You have unsaved changes. Leave without saving?',
+          onPressConfirm: () => navigation.dispatch(e.data.action),
+          _,
+        });
       }),
     [_, areInputsTouched, navigation, awaitingUserInput],
   );

src/utils/info.js

@@ -2,7 +2,7 @@
 import { Alert } from 'react-native';
 import Toast from 'react-native-simple-toast';
 
-import type { GlobalSettingsState } from '../types';
+import type { GlobalSettingsState, GetText, LocalizableText } from '../types';
 import { openLinkWithUserPreference } from './openLink';
 
 export const showToast = (message: string) => {
@@ -46,3 +46,26 @@ export const showErrorAlert = (
 
   Alert.alert(title, message, buttons, { cancelable: true });
 };
+
+export const showConfirmationDialog = (args: {|
+  +destructive?: true,
+  +title: LocalizableText,
+  +message: LocalizableText,
+  +learnMoreButton?: LearnMoreButton,
+  +onPressConfirm: () => void,
+  +onPressCancel?: () => void,
+  +_: GetText,
+|}) => {
+  const { destructive, title, message, learnMoreButton, onPressConfirm, onPressCancel, _ } = args;
+
+  const buttons = [];
+  if (learnMoreButton) {
+    buttons.push(makeLearnMoreButton(learnMoreButton));
+  }
+  buttons.push(
+    { text: _('Cancel'), style: 'cancel', onPress: onPressCancel },
+    { text: _('Confirm'), style: destructive ? 'destructive' : 'default', onPress: onPressConfirm },
+  );
+
+  Alert.alert(_(title), _(message), buttons, { cancelable: true });
+};