messageActionSheet: Refactor to not rely on BackgroundData

This will allow us to use the shared messageActionSheet code in the
React Native parts of the codebase, rather than only the webview parts
of the codebase. It's also generally a cleaner and more type-safe
approach.

The test coverage for this seems not great, but I manually tested
clicking on most of the buttons on both styles of action sheet in the
app.

Author: WesleyAC

src/message/__tests__/messageActionSheet-test.js

@@ -5,116 +5,80 @@ import { HOME_NARROW } from '../../utils/narrow';
 import * as eg from '../../__tests__/lib/exampleData';
 import { constructMessageActionButtons, constructHeaderActionButtons } from '../messageActionSheet';
 
-const baseBackgroundData = deepFreeze({
-  alertWords: [],
-  allImageEmojiById: eg.action.realm_init.data.realm_emoji,
-  auth: eg.selfAuth,
-  debug: eg.baseReduxState.session.debug,
-  flags: eg.baseReduxState.flags,
-  mute: [],
-  ownUser: eg.selfUser,
-  subscriptions: [],
-  theme: 'default',
-  twentyFourHourTime: false,
-});
-
 describe('constructActionButtons', () => {
   const narrow = deepFreeze(HOME_NARROW);
 
   test('show star message option if message is not starred', () => {
     const message = eg.streamMessage();
-    const flags = { ...baseBackgroundData.flags, starred: {} };
-    const buttons = constructMessageActionButtons({
-      backgroundData: { ...baseBackgroundData, flags },
-      message,
-      narrow,
-    });
+    const flags = { ...eg.baseReduxState.flags, starred: {} };
+    const buttons = constructMessageActionButtons(eg.selfUser, flags, message, narrow);
     expect(buttons).toContain('starMessage');
   });
 
   test('show unstar message option if message is starred', () => {
     const message = eg.streamMessage();
-    const flags = { ...baseBackgroundData.flags, starred: { [message.id]: true } };
-    const buttons = constructMessageActionButtons({
-      backgroundData: { ...baseBackgroundData, flags },
-      message,
-      narrow,
-    });
+    const flags = { ...eg.baseReduxState.flags, starred: { [message.id]: true } };
+    const buttons = constructMessageActionButtons(eg.selfUser, flags, message, narrow);
     expect(buttons).toContain('unstarMessage');
   });
 
   test('show reactions option if message is has at least one reaction', () => {
-    const buttons = constructMessageActionButtons({
-      backgroundData: baseBackgroundData,
-      message: eg.streamMessage({ reactions: [eg.unicodeEmojiReaction] }),
+    const buttons = constructMessageActionButtons(
+      eg.selfUser,
+      eg.baseReduxState.flags,
+      eg.streamMessage({ reactions: [eg.unicodeEmojiReaction] }),
       narrow,
-    });
+    );
     expect(buttons).toContain('showReactions');
   });
 });
 
 describe('constructHeaderActionButtons', () => {
-  const narrow = deepFreeze(HOME_NARROW);
-
   test('show Unmute topic option if topic is muted', () => {
     const mute = deepFreeze([['electron issues', 'issue #556']]);
     const message = eg.streamMessage({
       display_recipient: 'electron issues',
       subject: 'issue #556',
     });
-    const buttons = constructHeaderActionButtons({
-      backgroundData: { ...baseBackgroundData, mute },
-      message,
-      narrow,
-    });
+    const buttons = constructHeaderActionButtons(mute, [], eg.selfUser, message);
     expect(buttons).toContain('unmuteTopic');
   });
 
   test('show mute topic option if topic is not muted', () => {
-    const buttons = constructHeaderActionButtons({
-      backgroundData: { ...baseBackgroundData, mute: [] },
-      message: eg.streamMessage(),
-      narrow,
-    });
+    const buttons = constructHeaderActionButtons([], [], eg.selfUser, eg.streamMessage());
     expect(buttons).toContain('muteTopic');
   });
 
   test('show Unmute stream option if stream is not in home view', () => {
     const subscriptions = [{ ...eg.subscription, in_home_view: false }];
-    const buttons = constructHeaderActionButtons({
-      backgroundData: { ...baseBackgroundData, subscriptions },
-      message: eg.streamMessage(),
-      narrow,
-    });
+    const buttons = constructHeaderActionButtons(
+      [],
+      subscriptions,
+      eg.selfUser,
+      eg.streamMessage(),
+    );
     expect(buttons).toContain('unmuteStream');
   });
 
   test('show mute stream option if stream is in home view', () => {
     const subscriptions = [{ ...eg.subscription, in_home_view: true }];
-    const buttons = constructHeaderActionButtons({
-      backgroundData: { ...baseBackgroundData, subscriptions },
-      message: eg.streamMessage(),
-      narrow,
-    });
+    const buttons = constructHeaderActionButtons(
+      [],
+      subscriptions,
+      eg.selfUser,
+      eg.streamMessage(),
+    );
     expect(buttons).toContain('muteStream');
   });
 
   test('show delete topic option if current user is an admin', () => {
     const ownUser = { ...eg.selfUser, is_admin: true };
-    const buttons = constructHeaderActionButtons({
-      backgroundData: { ...baseBackgroundData, ownUser },
-      message: eg.streamMessage(),
-      narrow,
-    });
+    const buttons = constructHeaderActionButtons([], [], ownUser, eg.streamMessage());
     expect(buttons).toContain('deleteTopic');
   });
 
   test('do not show delete topic option if current user is not an admin', () => {
-    const buttons = constructHeaderActionButtons({
-      backgroundData: baseBackgroundData,
-      message: eg.streamMessage(),
-      narrow,
-    });
+    const buttons = constructHeaderActionButtons([], [], eg.selfUser, eg.streamMessage());
     expect(buttons).not.toContain('deleteTopic');
   });
 });

src/message/messageActionSheet.js

@@ -6,15 +6,16 @@ import * as NavigationService from '../nav/NavigationService';
 import type {
   Auth,
   Dispatch,
+  FlagsState,
   GetText,
   Message,
+  MuteState,
   Narrow,
   Outbox,
   Subscription,
   User,
   EditMessage,
 } from '../types';
-import type { BackgroundData } from '../webview/MessageList';
 import {
   getNarrowForReply,
   isPmNarrow,
@@ -241,16 +242,12 @@ type ButtonCode = $Keys<typeof allButtonsRaw>;
 
 const allButtons: {| [ButtonCode]: ButtonDescription |} = allButtonsRaw;
 
-type ConstructSheetParams<MsgType: Message | Outbox = Message | Outbox> = {|
-  backgroundData: BackgroundData,
-  message: MsgType,
-  narrow: Narrow,
-|};
-
-export const constructHeaderActionButtons = ({
-  backgroundData: { mute, subscriptions, ownUser },
-  message,
-}: ConstructSheetParams<>): ButtonCode[] => {
+export const constructHeaderActionButtons = (
+  mute: MuteState,
+  subscriptions: Subscription[],
+  ownUser: User,
+  message: Message | Outbox,
+): ButtonCode[] => {
   const buttons: ButtonCode[] = [];
   if (message.type === 'stream') {
     if (ownUser.is_admin) {
@@ -273,11 +270,7 @@ export const constructHeaderActionButtons = ({
   return buttons;
 };
 
-export const constructOutboxActionButtons = ({
-  backgroundData,
-  message,
-  narrow,
-}: ConstructSheetParams<Outbox>): ButtonCode[] => {
+export const constructOutboxActionButtons = (message: Outbox, narrow: Narrow): ButtonCode[] => {
   const buttons = [];
   buttons.push('copyToClipboard');
   buttons.push('shareMessage');
@@ -289,11 +282,12 @@ export const constructOutboxActionButtons = ({
 const messageNotDeleted = (message: Message | Outbox): boolean =>
   message.content !== '<p>(deleted)</p>';
 
-export const constructMessageActionButtons = ({
-  backgroundData: { ownUser, flags },
-  message,
-  narrow,
-}: ConstructSheetParams<Message>): ButtonCode[] => {
+export const constructMessageActionButtons = (
+  ownUser: User,
+  flags: FlagsState,
+  message: Message,
+  narrow: Narrow,
+): ButtonCode[] => {
   const buttons = [];
   if (messageNotDeleted(message)) {
     buttons.push('addReaction');
@@ -327,15 +321,16 @@ export const constructMessageActionButtons = ({
   return buttons;
 };
 
-export const constructNonHeaderActionButtons = ({
-  backgroundData,
-  message,
-  narrow,
-}: ConstructSheetParams<>): ButtonCode[] => {
+export const constructNonHeaderActionButtons = (
+  ownUser: User,
+  flags: FlagsState,
+  message: Message | Outbox,
+  narrow: Narrow,
+): ButtonCode[] => {
   if (message.isOutbox) {
-    return constructOutboxActionButtons({ backgroundData, message, narrow });
+    return constructOutboxActionButtons(message, narrow);
   } else {
-    return constructMessageActionButtons({ backgroundData, message, narrow });
+    return constructMessageActionButtons(ownUser, flags, message, narrow);
   }
 };
 
@@ -352,46 +347,83 @@ const getActionSheetTitle = (message: Message | Outbox, ownUser: User): string =
   }
 };
 
-/** Invoke the given callback to show an appropriate action sheet. */
-export const showActionSheet = (
-  isHeader: boolean,
+const makeButtonCallback = (
+  optionCodes: ButtonCode[],
+  auth: Auth,
+  subscriptions: Subscription[],
+  ownUser: User,
+  flags: FlagsState,
+  message: Message | Outbox,
+  callbacks: {|
+    dispatch: Dispatch,
+    startEditMessage: (editMessage: EditMessage) => void,
+    _: GetText,
+  |},
+) => buttonIndex => {
+  (async () => {
+    const pressedButton: ButtonDescription = allButtons[optionCodes[buttonIndex]];
+    try {
+      await pressedButton({
+        auth,
+        subscriptions,
+        ownUser,
+        flags,
+        message,
+        ...callbacks,
+      });
+    } catch (err) {
+      Alert.alert(callbacks._(pressedButton.errorMessage), err.message);
+    }
+  })();
+};
+
+export const showMessageActionSheet = (
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
     startEditMessage: (editMessage: EditMessage) => void,
     _: GetText,
   |},
-  params: ConstructSheetParams<>,
+  auth: Auth,
+  subscriptions: Subscription[],
+  ownUser: User,
+  flags: FlagsState,
+  message: Message | Outbox,
+  narrow: Narrow,
+): void => {
+  const optionCodes = constructNonHeaderActionButtons(ownUser, flags, message, narrow);
+  showActionSheetWithOptions(
+    {
+      options: optionCodes.map(code => callbacks._(allButtons[code].title)),
+      cancelButtonIndex: optionCodes.length - 1,
+    },
+    makeButtonCallback(optionCodes, auth, subscriptions, ownUser, flags, message, callbacks),
+  );
+};
+
+export const showHeaderActionSheet = (
+  showActionSheetWithOptions: ShowActionSheetWithOptions,
+  callbacks: {|
+    dispatch: Dispatch,
+    _: GetText,
+  |},
+  auth: Auth,
+  mute: MuteState,
+  subscriptions: Subscription[],
+  ownUser: User,
+  flags: FlagsState,
+  message: Message | Outbox,
 ): void => {
-  const optionCodes = isHeader
-    ? constructHeaderActionButtons(params)
-    : constructNonHeaderActionButtons(params);
-  const callback = buttonIndex => {
-    (async () => {
-      const pressedButton: ButtonDescription = allButtons[optionCodes[buttonIndex]];
-      try {
-        await pressedButton({
-          subscriptions: params.backgroundData.subscriptions,
-          auth: params.backgroundData.auth,
-          ownUser: params.backgroundData.ownUser,
-          ...params,
-          ...callbacks,
-        });
-      } catch (err) {
-        Alert.alert(callbacks._(pressedButton.errorMessage), err.message);
-      }
-    })();
-  };
+  const optionCodes = constructHeaderActionButtons(mute, subscriptions, ownUser, message);
   showActionSheetWithOptions(
     {
-      ...(isHeader
-        ? {
-            title: getActionSheetTitle(params.message, params.backgroundData.ownUser),
-          }
-        : {}),
+      title: getActionSheetTitle(message, ownUser),
       options: optionCodes.map(code => callbacks._(allButtons[code].title)),
       cancelButtonIndex: optionCodes.length - 1,
     },
-    callback,
+    makeButtonCallback(optionCodes, auth, subscriptions, ownUser, flags, message, {
+      startEditMessage: _ => {},
+      ...callbacks,
+    }),
   );
 };

src/webview/handleOutboundEvents.js

@@ -22,7 +22,7 @@ import {
   navigateToLightbox,
   messageLinkPress,
 } from '../actions';
-import { showActionSheet } from '../message/messageActionSheet';
+import { showMessageActionSheet, showHeaderActionSheet } from '../message/messageActionSheet';
 import { ensureUnreachable } from '../types';
 import { base64Utf8Decode } from '../utils/encoding';
 
@@ -211,12 +211,29 @@ const handleLongPress = (
     return;
   }
   const { dispatch, showActionSheetWithOptions, backgroundData, narrow, startEditMessage } = props;
-  showActionSheet(
-    target === 'header',
-    showActionSheetWithOptions,
-    { dispatch, startEditMessage, _ },
-    { backgroundData, message, narrow },
-  );
+  if (target === 'header') {
+    showHeaderActionSheet(
+      showActionSheetWithOptions,
+      { dispatch, _ },
+      backgroundData.auth,
+      backgroundData.mute,
+      backgroundData.subscriptions,
+      backgroundData.ownUser,
+      backgroundData.flags,
+      message,
+    );
+  } else if (target === 'message') {
+    showMessageActionSheet(
+      showActionSheetWithOptions,
+      { dispatch, startEditMessage, _ },
+      backgroundData.auth,
+      backgroundData.subscriptions,
+      backgroundData.ownUser,
+      backgroundData.flags,
+      message,
+      narrow,
+    );
+  }
 };
 
 export const handleWebViewOutboundEvent = (