From 84ac7dd2dfbb9c0ffe65c106b66142149410d382 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Fri, 10 Sep 2021 13:00:31 -0500
Subject: [PATCH] To fix Storybook, make `<Message>` take
 `renderReactionPicker`

---
 .../conversation/Message.stories.tsx          |  3 ++
 ts/components/conversation/Message.tsx        | 28 +++++++++++--------
 .../conversation/MessageDetail.stories.tsx    |  1 +
 ts/components/conversation/MessageDetail.tsx  |  3 ++
 ts/components/conversation/Quote.stories.tsx  |  1 +
 .../conversation/Timeline.stories.tsx         |  1 +
 .../conversation/TimelineItem.stories.tsx     |  5 ++++
 ts/components/conversation/TimelineItem.tsx   |  5 +++-
 ts/state/smart/MessageDetail.tsx              |  8 +++++-
 ts/state/smart/Timeline.tsx                   |  2 ++
 ts/state/smart/renderReactionPicker.tsx       | 10 +++++++
 11 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 ts/state/smart/renderReactionPicker.tsx

diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx
index a1f01fe1eab..bf62479fd5c 100644
--- a/ts/components/conversation/Message.stories.tsx
+++ b/ts/components/conversation/Message.stories.tsx
@@ -47,6 +47,8 @@ const renderEmojiPicker: Props['renderEmojiPicker'] = ({
   />
 );
 
+const renderReactionPicker: Props['renderReactionPicker'] = () => <div />;
+
 const MessageAudioContainer: React.FC<AudioAttachmentProps> = props => {
   const [active, setActive] = React.useState<{
     id?: string;
@@ -135,6 +137,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
       ? ReadStatus.Read
       : overrideProps.readStatus,
   renderEmojiPicker,
+  renderReactionPicker,
   renderAudioAttachment,
   replyToMessage: action('replyToMessage'),
   retrySend: action('retrySend'),
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 9a425662b64..d14a8092b78 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -63,7 +63,7 @@ import {
 } from '../../types/Colors';
 import { createRefMerger } from '../_util';
 import { emojiToData } from '../emoji/lib';
-import { SmartReactionPicker } from '../../state/smart/ReactionPicker';
+import type { SmartReactionPicker } from '../../state/smart/ReactionPicker';
 import { getCustomColorStyle } from '../../util/getCustomColorStyle';
 import { offsetDistanceModifier } from '../../util/popperUtil';
 
@@ -197,6 +197,9 @@ export type PropsHousekeeping = {
   disableScroll?: boolean;
   collapseMetadata?: boolean;
   renderAudioAttachment: (props: AudioAttachmentProps) => JSX.Element;
+  renderReactionPicker: (
+    props: React.ComponentProps<typeof SmartReactionPicker>
+  ) => JSX.Element;
 };
 
 export type PropsActions = {
@@ -1319,6 +1322,7 @@ export class Message extends React.PureComponent<Props, State> {
       isTapToView,
       reactToMessage,
       renderEmojiPicker,
+      renderReactionPicker,
       replyToMessage,
       selectedReaction,
     } = this.props;
@@ -1459,22 +1463,22 @@ export class Message extends React.PureComponent<Props, State> {
                 this.popperPreventOverflowModifier(),
               ]}
             >
-              {({ ref, style }) => (
-                <SmartReactionPicker
-                  ref={ref}
-                  style={style}
-                  selected={selectedReaction}
-                  onClose={this.toggleReactionPicker}
-                  onPick={emoji => {
+              {({ ref, style }) =>
+                renderReactionPicker({
+                  ref,
+                  style,
+                  selected: selectedReaction,
+                  onClose: this.toggleReactionPicker,
+                  onPick: emoji => {
                     this.toggleReactionPicker(true);
                     reactToMessage(id, {
                       emoji,
                       remove: emoji === selectedReaction,
                     });
-                  }}
-                  renderEmojiPicker={renderEmojiPicker}
-                />
-              )}
+                  },
+                  renderEmojiPicker,
+                })
+              }
             </Popper>,
             reactionPickerRoot
           )}
diff --git a/ts/components/conversation/MessageDetail.stories.tsx b/ts/components/conversation/MessageDetail.stories.tsx
index 89c1328995b..1bcc4ee772e 100644
--- a/ts/components/conversation/MessageDetail.stories.tsx
+++ b/ts/components/conversation/MessageDetail.stories.tsx
@@ -75,6 +75,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   reactToMessage: action('reactToMessage'),
   renderAudioAttachment: () => <div>*AudioAttachment*</div>,
   renderEmojiPicker: () => <div />,
+  renderReactionPicker: () => <div />,
   replyToMessage: action('replyToMessage'),
   retrySend: action('retrySend'),
   showContactDetail: action('showContactDetail'),
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
index 6dd2b35056a..4b75a352246 100644
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -68,6 +68,7 @@ export type PropsBackboneActions = Pick<
   | 'reactToMessage'
   | 'renderAudioAttachment'
   | 'renderEmojiPicker'
+  | 'renderReactionPicker'
   | 'replyToMessage'
   | 'retrySend'
   | 'showContactDetail'
@@ -271,6 +272,7 @@ export class MessageDetail extends React.Component<Props> {
       reactToMessage,
       renderAudioAttachment,
       renderEmojiPicker,
+      renderReactionPicker,
       replyToMessage,
       retrySend,
       showContactDetail,
@@ -319,6 +321,7 @@ export class MessageDetail extends React.Component<Props> {
             reactToMessage={reactToMessage}
             renderAudioAttachment={renderAudioAttachment}
             renderEmojiPicker={renderEmojiPicker}
+            renderReactionPicker={renderReactionPicker}
             replyToMessage={replyToMessage}
             retrySend={retrySend}
             showForwardMessageModal={showForwardMessageModal}
diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx
index a2ec439f0fe..4828434e1b8 100644
--- a/ts/components/conversation/Quote.stories.tsx
+++ b/ts/components/conversation/Quote.stories.tsx
@@ -66,6 +66,7 @@ const defaultMessageProps: MessagesProps = {
   reactToMessage: action('default--reactToMessage'),
   readStatus: ReadStatus.Read,
   renderEmojiPicker: () => <div />,
+  renderReactionPicker: () => <div />,
   renderAudioAttachment: () => <div>*AudioAttachment*</div>,
   replyToMessage: action('default--replyToMessage'),
   retrySend: action('default--retrySend'),
diff --git a/ts/components/conversation/Timeline.stories.tsx b/ts/components/conversation/Timeline.stories.tsx
index cce7d2eb046..e2e3514c040 100644
--- a/ts/components/conversation/Timeline.stories.tsx
+++ b/ts/components/conversation/Timeline.stories.tsx
@@ -387,6 +387,7 @@ const renderItem = (
     id=""
     isSelected={false}
     renderEmojiPicker={() => <div />}
+    renderReactionPicker={() => <div />}
     item={items[id]}
     i18n={i18n}
     interactionMode="keyboard"
diff --git a/ts/components/conversation/TimelineItem.stories.tsx b/ts/components/conversation/TimelineItem.stories.tsx
index d282530f5fc..8f50c42d4f9 100644
--- a/ts/components/conversation/TimelineItem.stories.tsx
+++ b/ts/components/conversation/TimelineItem.stories.tsx
@@ -32,6 +32,10 @@ const renderEmojiPicker: TimelineItemProps['renderEmojiPicker'] = ({
   />
 );
 
+const renderReactionPicker: TimelineItemProps['renderReactionPicker'] = () => (
+  <div />
+);
+
 const renderContact = (conversationId: string) => (
   <React.Fragment key={conversationId}>{conversationId}</React.Fragment>
 );
@@ -86,6 +90,7 @@ const getDefaultProps = () => ({
   renderContact,
   renderUniversalTimerNotification,
   renderEmojiPicker,
+  renderReactionPicker,
   renderAudioAttachment: () => <div>*AudioAttachment*</div>,
 });
 
diff --git a/ts/components/conversation/TimelineItem.tsx b/ts/components/conversation/TimelineItem.tsx
index cbb29267e81..cb8aed05859 100644
--- a/ts/components/conversation/TimelineItem.tsx
+++ b/ts/components/conversation/TimelineItem.tsx
@@ -176,7 +176,10 @@ type PropsActionsType = MessageActionsType &
 
 export type PropsType = PropsLocalType &
   PropsActionsType &
-  Pick<AllMessageProps, 'renderEmojiPicker' | 'renderAudioAttachment'>;
+  Pick<
+    AllMessageProps,
+    'renderEmojiPicker' | 'renderAudioAttachment' | 'renderReactionPicker'
+  >;
 
 export class TimelineItem extends React.PureComponent<PropsType> {
   public render(): JSX.Element | null {
diff --git a/ts/state/smart/MessageDetail.tsx b/ts/state/smart/MessageDetail.tsx
index 2e352e190af..eeb49e6803d 100644
--- a/ts/state/smart/MessageDetail.tsx
+++ b/ts/state/smart/MessageDetail.tsx
@@ -13,12 +13,17 @@ import { StateType } from '../reducer';
 import { getIntl, getInteractionMode } from '../selectors/user';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
+import { renderReactionPicker } from './renderReactionPicker';
 import { getContactNameColorSelector } from '../selectors/conversations';
 
 export { Contact } from '../../components/conversation/MessageDetail';
 export type OwnProps = Omit<
   MessageDetailProps,
-  'i18n' | 'interactionMode' | 'renderAudioAttachment' | 'renderEmojiPicker'
+  | 'i18n'
+  | 'interactionMode'
+  | 'renderAudioAttachment'
+  | 'renderEmojiPicker'
+  | 'renderReactionPicker'
 >;
 
 const mapStateToProps = (
@@ -81,6 +86,7 @@ const mapStateToProps = (
     reactToMessage,
     renderAudioAttachment,
     renderEmojiPicker,
+    renderReactionPicker,
     replyToMessage,
     retrySend,
     showContactDetail,
diff --git a/ts/state/smart/Timeline.tsx b/ts/state/smart/Timeline.tsx
index cedf0e0a2bf..a6bfeed3248 100644
--- a/ts/state/smart/Timeline.tsx
+++ b/ts/state/smart/Timeline.tsx
@@ -33,6 +33,7 @@ import { SmartHeroRow } from './HeroRow';
 import { SmartTimelineLoadingRow } from './TimelineLoadingRow';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
+import { renderReactionPicker } from './renderReactionPicker';
 
 import { getOwn } from '../../util/getOwn';
 import { assert } from '../../util/assert';
@@ -77,6 +78,7 @@ function renderItem(
       id={messageId}
       onHeightChange={createBoundOnHeightChange(onHeightChange, messageId)}
       renderEmojiPicker={renderEmojiPicker}
+      renderReactionPicker={renderReactionPicker}
       renderAudioAttachment={renderAudioAttachment}
     />
   );
diff --git a/ts/state/smart/renderReactionPicker.tsx b/ts/state/smart/renderReactionPicker.tsx
new file mode 100644
index 00000000000..8a9af8e2a4e
--- /dev/null
+++ b/ts/state/smart/renderReactionPicker.tsx
@@ -0,0 +1,10 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ComponentProps } from 'react';
+
+import { SmartReactionPicker } from './ReactionPicker';
+
+export const renderReactionPicker = (
+  props: ComponentProps<typeof SmartReactionPicker>
+): JSX.Element => <SmartReactionPicker {...props} />;