Show badges in reaction viewer

ts/components/conversation/Message.stories.tsx

@@ -97,7 +97,6 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   attachments: overrideProps.attachments,
   author: overrideProps.author || getDefaultConversation(),
-  authorBadge: overrideProps.authorBadge,
   reducedMotion: boolean('reducedMotion', false),
   bodyRanges: overrideProps.bodyRanges,
   canReply: true,
@@ -128,6 +127,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   expirationTimestamp:
     number('expirationTimestamp', overrideProps.expirationTimestamp || 0) ||
     undefined,
+  getPreferredBadge: overrideProps.getPreferredBadge || (() => undefined),
   i18n,
   id: text('id', overrideProps.id || ''),
   renderingContext: 'storybook',
@@ -544,8 +544,8 @@ story.add('Avatar in Group', () => {
 
 story.add('Badge in Group', () => {
   const props = createProps({
-    authorBadge: getFakeBadge(),
     conversationType: 'group',
+    getPreferredBadge: () => getFakeBadge(),
     status: 'sent',
     text: 'Hello it is me, the saxophone.',
   });

ts/components/conversation/Message.tsx

@@ -62,7 +62,7 @@ import type {
   LocalizerType,
   ThemeType,
 } from '../../types/Util';
-import type { BadgeType } from '../../badges/types';
+import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import type {
   ContactNameColorType,
   ConversationColorType,
@@ -157,7 +157,6 @@ export type PropsData = {
     | 'title'
     | 'unblurredAvatarPath'
   >;
-  authorBadge: undefined | BadgeType;
   reducedMotion?: boolean;
   conversationType: ConversationTypeType;
   attachments?: Array<AttachmentType>;
@@ -204,6 +203,7 @@ export type PropsData = {
 export type PropsHousekeeping = {
   containerElementRef: RefObject<HTMLElement>;
   containerWidthBreakpoint: WidthBreakpoint;
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   interactionMode: InteractionModeType;
   theme: ThemeType;
@@ -1191,7 +1191,8 @@ export class Message extends React.PureComponent<Props, State> {
   }
 
   public renderAvatar(): JSX.Element | undefined {
-    const { author, authorBadge, i18n, showContactModal, theme } = this.props;
+    const { author, getPreferredBadge, i18n, showContactModal, theme } =
+      this.props;
 
     if (!this.hasAvatar()) {
       return undefined;
@@ -1207,7 +1208,7 @@ export class Message extends React.PureComponent<Props, State> {
         <Avatar
           acceptedMessageRequest={author.acceptedMessageRequest}
           avatarPath={author.avatarPath}
-          badge={authorBadge}
+          badge={getPreferredBadge(author.badges)}
           color={author.color}
           conversationType="direct"
           i18n={i18n}
@@ -1946,7 +1947,7 @@ export class Message extends React.PureComponent<Props, State> {
   };
 
   public renderReactions(outgoing: boolean): JSX.Element | null {
-    const { reactions = [], i18n } = this.props;
+    const { getPreferredBadge, reactions = [], i18n, theme } = this.props;
 
     if (!this.hasReactions()) {
       return null;
@@ -2095,9 +2096,11 @@ export class Message extends React.PureComponent<Props, State> {
                       ...style,
                       zIndex: 2,
                     }}
+                    getPreferredBadge={getPreferredBadge}
                     reactions={reactions}
                     i18n={i18n}
                     onClose={this.toggleReactionViewer}
+                    theme={theme}
                   />
                 )}
               </Popper>

ts/components/conversation/MessageDetail.stories.tsx

@@ -27,7 +27,6 @@ const defaultMessage: MessageDataPropsType = {
     id: 'some-id',
     title: 'Max',
   }),
-  authorBadge: getFakeBadge(),
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,

ts/components/conversation/MessageDetail.tsx

@@ -64,7 +64,7 @@ export type PropsData = {
   i18n: LocalizerType;
   theme: ThemeType;
   getPreferredBadge: PreferredBadgeSelectorType;
-} & Pick<MessagePropsType, 'interactionMode'>;
+} & Pick<MessagePropsType, 'getPreferredBadge' | 'interactionMode'>;
 
 export type PropsBackboneActions = Pick<
   MessagePropsType,
@@ -276,6 +276,7 @@ export class MessageDetail extends React.Component<Props> {
       contactNameColor,
       displayTapToViewMessage,
       doubleCheckMissingQuoteReference,
+      getPreferredBadge,
       i18n,
       interactionMode,
       kickOffAttachmentDownload,
@@ -327,6 +328,7 @@ export class MessageDetail extends React.Component<Props> {
               log.warn('MessageDetail: deleteMessageForEveryone called!')
             }
             doubleCheckMissingQuoteReference={doubleCheckMissingQuoteReference}
+            getPreferredBadge={getPreferredBadge}
             i18n={i18n}
             interactionMode={interactionMode}
             kickOffAttachmentDownload={kickOffAttachmentDownload}

ts/components/conversation/Quote.stories.tsx

@@ -37,7 +37,6 @@ const defaultMessageProps: MessagesProps = {
     id: 'some-id',
     title: 'Person X',
   }),
-  authorBadge: undefined,
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,
@@ -56,6 +55,7 @@ const defaultMessageProps: MessagesProps = {
   doubleCheckMissingQuoteReference: action(
     'default--doubleCheckMissingQuoteReference'
   ),
+  getPreferredBadge: () => undefined,
   i18n,
   id: 'messageId',
   renderingContext: 'storybook',

ts/components/conversation/ReactionViewer.stories.tsx

@@ -11,17 +11,20 @@ import { ReactionViewer } from './ReactionViewer';
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
 const story = storiesOf('Components/Conversation/ReactionViewer', module);
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  getPreferredBadge: () => undefined,
   i18n,
   onClose: action('onClose'),
   pickedReaction: overrideProps.pickedReaction,
   reactions: overrideProps.reactions || [],
   style: overrideProps.style,
+  theme: ThemeType.light,
 });
 
 story.add('All Reactions', () => {

ts/components/conversation/ReactionViewer.tsx

@@ -10,9 +10,11 @@ import { Avatar } from '../Avatar';
 import { Emoji } from '../emoji/Emoji';
 import { useRestoreFocus } from '../../hooks/useRestoreFocus';
 import type { ConversationType } from '../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import type { EmojiData } from '../emoji/lib';
 import { emojiToData } from '../emoji/lib';
 import { useEscapeHandling } from '../../hooks/useEscapeHandling';
+import type { ThemeType } from '../../types/Util';
 
 export type Reaction = {
   emoji: string;
@@ -21,6 +23,7 @@ export type Reaction = {
     ConversationType,
     | 'acceptedMessageRequest'
     | 'avatarPath'
+    | 'badges'
     | 'color'
     | 'id'
     | 'isMe'
@@ -33,9 +36,11 @@ export type Reaction = {
 };
 
 export type OwnProps = {
+  getPreferredBadge: PreferredBadgeSelectorType;
   reactions: Array<Reaction>;
   pickedReaction?: string;
   onClose?: () => unknown;
+  theme: ThemeType;
 };
 
 export type Props = OwnProps &
@@ -62,7 +67,18 @@ type ReactionCategory = {
 type ReactionWithEmojiData = Reaction & EmojiData;
 
 export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
-  ({ i18n, reactions, onClose, pickedReaction, ...rest }, ref) => {
+  (
+    {
+      getPreferredBadge,
+      i18n,
+      onClose,
+      pickedReaction,
+      reactions,
+      theme,
+      ...rest
+    },
+    ref
+  ) => {
     const reactionsWithEmojiData = React.useMemo(
       () =>
         reactions
@@ -205,6 +221,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                 <Avatar
                   acceptedMessageRequest={from.acceptedMessageRequest}
                   avatarPath={from.avatarPath}
+                  badge={getPreferredBadge(from.badges)}
                   conversationType="direct"
                   sharedGroupNames={from.sharedGroupNames}
                   size={32}
@@ -213,6 +230,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                   name={from.name}
                   profileName={from.profileName}
                   phoneNumber={from.phoneNumber}
+                  theme={theme}
                   title={from.title}
                   i18n={i18n}
                 />

ts/components/conversation/Timeline.stories.tsx

@@ -47,7 +47,6 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({
         phoneNumber: '(202) 555-2001',
       }),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -68,7 +67,6 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -102,7 +100,6 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -192,7 +189,6 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -214,7 +210,6 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -236,7 +231,6 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -258,7 +252,6 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -280,7 +273,6 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
-      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -389,6 +381,7 @@ const renderItem = ({
   containerWidthBreakpoint: WidthBreakpoint;
 }) => (
   <TimelineItem
+    getPreferredBadge={() => undefined}
     id=""
     isSelected={false}
     renderEmojiPicker={() => <div />}

ts/components/conversation/TimelineItem.stories.tsx

@@ -51,6 +51,7 @@ const getDefaultProps = () => ({
   containerElementRef: React.createRef<HTMLElement>(),
   containerWidthBreakpoint: WidthBreakpoint.Wide,
   conversationId: 'conversation-id',
+  getPreferredBadge: () => undefined,
   id: 'asdf',
   isSelected: false,
   interactionMode: 'keyboard' as const,

ts/components/conversation/TimelineItem.tsx

@@ -165,6 +165,7 @@ export type PropsType = PropsLocalType &
   Pick<
     AllMessageProps,
     | 'containerWidthBreakpoint'
+    | 'getPreferredBadge'
     | 'renderEmojiPicker'
     | 'renderAudioAttachment'
     | 'renderReactionPicker'
@@ -175,6 +176,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
     const {
       containerElementRef,
       conversationId,
+      getPreferredBadge,
       id,
       isSelected,
       item,
@@ -201,6 +203,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
           {...omit(this.props, ['item'])}
           {...item.data}
           containerElementRef={containerElementRef}
+          getPreferredBadge={getPreferredBadge}
           i18n={i18n}
           theme={theme}
           renderingContext="conversation/TimelineItem"