Add user badges to typing bubbles, refactor typing logic

ts/components/AnnouncementsOnlyGroupBanner.tsx

@@ -41,7 +41,6 @@ export const AnnouncementsOnlyGroupBanner = ({
               draftPreview=""
               lastMessage={undefined}
               lastUpdated={undefined}
-              typingContact={undefined}
               theme={theme}
             />
           ))}

ts/components/ConversationList.stories.tsx

@@ -18,6 +18,7 @@ import { getDefaultConversation } from '../test-both/helpers/getDefaultConversat
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
+import { UUID } from '../types/UUID';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -295,10 +296,7 @@ story.add('Contact checkboxes: disabled', () => (
 
   story.add('Conversation: Typing Status', () =>
     renderConversation({
-      typingContact: {
+      typingContactId: UUID.generate().toString(),
-        ...getDefaultConversation(),
-        name: 'Someone Here',
-      },
     })
   );
 

ts/components/ConversationList.tsx

@@ -269,7 +269,7 @@ export const ConversationList: React.FC<PropsType> = ({
             'shouldShowDraft',
             'title',
             'type',
-            'typingContact',
+            'typingContactId',
             'unblurredAvatarPath',
             'unreadCount',
           ]);

ts/components/conversation/Timeline.stories.tsx

@@ -3,7 +3,7 @@
 
 import * as React from 'react';
 import * as moment from 'moment';
-import { isBoolean, times } from 'lodash';
+import { times } from 'lodash';
 import { v4 as uuid } from 'uuid';
 import { storiesOf } from '@storybook/react';
 import { text, boolean, number } from '@storybook/addon-knobs';
@@ -25,6 +25,8 @@ import { TypingBubble } from './TypingBubble';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
 import { ReadStatus } from '../../messages/MessageReadStatus';
 import type { WidthBreakpoint } from '../_util';
+import { ThemeType } from '../../types/Util';
+import { UUID } from '../../types/UUID';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -441,12 +443,14 @@ const renderLoadingRow = () => <TimelineLoadingRow state="loading" />;
 const renderTypingBubble = () => (
   <TypingBubble
     acceptedMessageRequest
+    badge={undefined}
     color={getRandomColor()}
     conversationType="direct"
     phoneNumber="+18005552222"
     i18n={i18n}
     isMe={false}
     title="title"
+    theme={ThemeType.light}
     sharedGroupNames={[]}
   />
 );
@@ -486,10 +490,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   renderHeroRow,
   renderLoadingRow,
   renderTypingBubble,
-  typingContact: boolean(
+  typingContactId: overrideProps.typingContactId,
-    'typingContact',
-    isBoolean(overrideProps.typingContact) ? overrideProps.typingContact : false
-  ),
 
   ...actions(),
 });
@@ -561,7 +562,7 @@ story.add('Target Index to Top', () => {
 
 story.add('Typing Indicator', () => {
   const props = createProps({
-    typingContact: true,
+    typingContactId: UUID.generate().toString(),
   });
 
   return <Timeline {...props} />;

ts/components/conversation/Timeline.tsx

@@ -94,7 +94,7 @@ type PropsHousekeepingType = {
   areWeAdmin?: boolean;
   isGroupV1AndDisabled?: boolean;
   isIncomingMessageRequest: boolean;
-  typingContact?: unknown;
+  typingContactId?: string;
   unreadCount?: number;
 
   selectedMessageId?: string;
@@ -859,7 +859,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
   }
 
   public getRowCount(): number {
-    const { oldestUnreadIndex, typingContact } = this.props;
+    const { oldestUnreadIndex, typingContactId } = this.props;
     const { items } = this.props;
     const itemsCount = items && items.length ? items.length : 0;
 
@@ -870,7 +870,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       extraRows += 1;
     }
 
-    if (typingContact) {
+    if (typingContactId) {
       extraRows += 1;
     }
 
@@ -1033,7 +1033,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       resetCounter,
       scrollToBottomCounter,
       scrollToIndex,
-      typingContact,
+      typingContactId,
     } = this.props;
 
     // We recompute the hero row's height if:
@@ -1097,7 +1097,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     if (
       items !== prevProps.items ||
       oldestUnreadIndex !== prevProps.oldestUnreadIndex ||
-      Boolean(typingContact) !== Boolean(prevProps.typingContact)
+      Boolean(typingContactId) !== Boolean(prevProps.typingContactId)
     ) {
       const { atTop } = this.state;
 
@@ -1135,13 +1135,13 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       const rowsIterator = Timeline.getEphemeralRows({
         items,
         oldestUnreadIndex,
-        typingContact: Boolean(typingContact),
+        hasTypingContact: Boolean(typingContactId),
         haveOldest,
       });
       const prevRowsIterator = Timeline.getEphemeralRows({
         items: prevProps.items,
         oldestUnreadIndex: prevProps.oldestUnreadIndex,
-        typingContact: Boolean(prevProps.typingContact),
+        hasTypingContact: Boolean(prevProps.typingContactId),
         haveOldest: prevProps.haveOldest,
       });
 
@@ -1578,13 +1578,13 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
   }
 
   private static *getEphemeralRows({
-    items,
+    hasTypingContact,
-    typingContact,
-    oldestUnreadIndex,
     haveOldest,
+    items,
+    oldestUnreadIndex,
   }: {
     items: ReadonlyArray<string>;
-    typingContact: boolean;
+    hasTypingContact: boolean;
     oldestUnreadIndex?: number;
     haveOldest: boolean;
   }): Iterator<string> {
@@ -1597,7 +1597,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       yield `item:${items[i]}`;
     }
 
-    if (typingContact) {
+    if (hasTypingContact) {
       yield 'typing-contact';
     }
   }

ts/components/conversation/TypingBubble.stories.tsx

@@ -10,6 +10,8 @@ import enMessages from '../../../_locales/en/messages.json';
 import type { Props } from './TypingBubble';
 import { TypingBubble } from './TypingBubble';
 import { AvatarColors } from '../../types/Colors';
+import { getFakeBadge } from '../../test-both/helpers/getFakeBadge';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -17,6 +19,7 @@ const story = storiesOf('Components/Conversation/TypingBubble', module);
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   acceptedMessageRequest: true,
+  badge: overrideProps.badge,
   isMe: false,
   i18n,
   color: select(
@@ -33,6 +36,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     overrideProps.conversationType || 'direct'
   ),
   sharedGroupNames: [],
+  theme: ThemeType.light,
 });
 
 story.add('Direct', () => {
@@ -46,3 +50,12 @@ story.add('Group', () => {
 
   return <TypingBubble {...props} />;
 });
+
+story.add('Group (with badge)', () => {
+  const props = createProps({
+    badge: getFakeBadge(),
+    conversationType: 'group',
+  });
+
+  return <TypingBubble {...props} />;
+});

ts/components/conversation/TypingBubble.tsx

@@ -1,14 +1,16 @@
 // Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 
 import { TypingAnimation } from './TypingAnimation';
 import { Avatar } from '../Avatar';
 
-import type { LocalizerType } from '../../types/Util';
+import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
+import type { BadgeType } from '../../badges/types';
 
 export type Props = Pick<
   ConversationType,
@@ -22,76 +24,69 @@ export type Props = Pick<
   | 'sharedGroupNames'
   | 'title'
 > & {
+  badge: undefined | BadgeType;
   conversationType: 'group' | 'direct';
   i18n: LocalizerType;
+  theme: ThemeType;
 };
 
-export class TypingBubble extends React.PureComponent<Props> {
+export function TypingBubble({
-  public renderAvatar(): JSX.Element | null {
+  acceptedMessageRequest,
-    const {
+  avatarPath,
-      acceptedMessageRequest,
+  badge,
-      avatarPath,
+  color,
-      color,
+  conversationType,
-      conversationType,
+  i18n,
-      i18n,
+  isMe,
-      isMe,
+  name,
-      name,
+  phoneNumber,
-      phoneNumber,
+  profileName,
-      profileName,
+  sharedGroupNames,
-      sharedGroupNames,
+  theme,
-      title,
+  title,
-    } = this.props;
+}: Props): ReactElement {
+  const isGroup = conversationType === 'group';
 
-    if (conversationType !== 'group') {
+  return (
-      return null;
+    <div
-    }
+      className={classNames(
-
+        'module-message',
-    return (
+        'module-message--incoming',
-      <div className="module-message__author-avatar-container">
+        isGroup ? 'module-message--group' : null
-        <Avatar
+      )}
-          acceptedMessageRequest={acceptedMessageRequest}
+    >
-          avatarPath={avatarPath}
+      {isGroup && (
-          color={color}
+        <div className="module-message__author-avatar-container">
-          conversationType="direct"
+          <Avatar
-          i18n={i18n}
+            acceptedMessageRequest={acceptedMessageRequest}
-          isMe={isMe}
+            avatarPath={avatarPath}
-          name={name}
+            badge={badge}
-          phoneNumber={phoneNumber}
+            color={color}
-          profileName={profileName}
+            conversationType="direct"
-          title={title}
+            i18n={i18n}
-          sharedGroupNames={sharedGroupNames}
+            isMe={isMe}
-          size={28}
+            name={name}
-        />
+            phoneNumber={phoneNumber}
-      </div>
+            profileName={profileName}
-    );
+            theme={theme}
-  }
+            title={title}
-
+            sharedGroupNames={sharedGroupNames}
-  public override render(): JSX.Element {
+            size={28}
-    const { i18n, conversationType } = this.props;
+          />
-    const isGroup = conversationType === 'group';
+        </div>
-
+      )}
-    return (
+      <div className="module-message__container-outer">
-      <div
+        <div
-        className={classNames(
+          className={classNames(
-          'module-message',
+            'module-message__container',
-          'module-message--incoming',
+            'module-message__container--incoming'
-          isGroup ? 'module-message--group' : null
+          )}
-        )}
+        >
-      >
+          <div className="module-message__typing-container">
-        {this.renderAvatar()}
+            <TypingAnimation color="light" i18n={i18n} />
-        <div className="module-message__container-outer">
-          <div
-            className={classNames(
-              'module-message__container',
-              'module-message__container--incoming'
-            )}
-          >
-            <div className="module-message__typing-container">
-              <TypingAnimation color="light" i18n={i18n} />
-            </div>
           </div>
         </div>
       </div>
-    );
+    </div>
-  }
+  );
 }

ts/components/conversationList/ConversationListItem.tsx

@@ -55,7 +55,7 @@ export type PropsData = Pick<
   | 'shouldShowDraft'
   | 'title'
   | 'type'
-  | 'typingContact'
+  | 'typingContactId'
   | 'unblurredAvatarPath'
   | 'unreadCount'
 > & {
@@ -94,7 +94,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     theme,
     title,
     type,
-    typingContact,
+    typingContactId,
     unblurredAvatarPath,
     unreadCount,
   }) {
@@ -121,7 +121,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
           {i18n('ConversationListItem--message-request')}
         </span>
       );
-    } else if (typingContact) {
+    } else if (typingContactId) {
       messageText = <TypingAnimation i18n={i18n} />;
     } else if (shouldShowDraft && draftPreview) {
       messageText = (

ts/models/conversations.ts

@@ -1400,9 +1400,6 @@ export class ConversationModel extends window.Backbone
     const typingMostRecent = window._.first(
       window._.sortBy(typingValues, 'timestamp')
     );
-    const typingContact = typingMostRecent
-      ? window.ConversationController.get(typingMostRecent.senderId)
-      : null;
 
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const timestamp = this.get('timestamp')!;
@@ -1440,7 +1437,7 @@ export class ConversationModel extends window.Backbone
 
     // TODO: DESKTOP-720
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
-    const result: ConversationType = {
+    return {
       id: this.id,
       uuid: this.get('uuid'),
       e164: this.get('e164'),
@@ -1521,6 +1518,7 @@ export class ConversationModel extends window.Backbone
       sortedGroupMembers,
       timestamp,
       title: this.getTitle()!,
+      typingContactId: typingMostRecent?.senderId,
       searchableTitle: isMe(this.attributes)
         ? window.i18n('noteToSelf')
         : this.getTitle(),
@@ -1537,18 +1535,7 @@ export class ConversationModel extends window.Backbone
             sharedGroupNames: [],
           }),
     };
-
-    if (typingContact) {
-      // We don't want to call .format() on our own conversation
-      if (typingContact.id === this.id) {
-        result.typingContact = result;
-      } else {
-        result.typingContact = typingContact.format();
-      }
-    }
     /* eslint-enable @typescript-eslint/no-non-null-assertion */
-
-    return result;
   }
 
   updateE164(e164?: string | null): void {

ts/state/ducks/conversations.ts

@@ -181,17 +181,7 @@ export type ConversationType = {
   unreadCount?: number;
   isSelected?: boolean;
   isFetchingUUID?: boolean;
-  typingContact?: {
+  typingContactId?: string;
-    acceptedMessageRequest: boolean;
-    avatarPath?: string;
-    color?: AvatarColorType;
-    isMe: boolean;
-    name?: string;
-    phoneNumber?: string;
-    profileName?: string;
-    sharedGroupNames: Array<string>;
-    title: string;
-  } | null;
   recentMediaItems?: Array<MediaItemType>;
   profileSharing?: boolean;
 

ts/state/smart/Timeline.tsx

@@ -298,7 +298,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     ...pick(conversation, [
       'areWeAdmin',
       'unreadCount',
-      'typingContact',
+      'typingContactId',
       'isGroupV1AndDisabled',
     ]),
     isIncomingMessageRequest: Boolean(

ts/state/smart/TypingBubble.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
@@ -7,8 +7,9 @@ import { TypingBubble } from '../../components/conversation/TypingBubble';
 import { strictAssert } from '../../util/assert';
 import type { StateType } from '../reducer';
 
-import { getIntl } from '../selectors/user';
+import { getIntl, getTheme } from '../selectors/user';
 import { getConversationSelector } from '../selectors/conversations';
+import { getPreferredBadgeSelector } from '../selectors/badges';
 
 type ExternalProps = {
   id: string;
@@ -17,17 +18,21 @@ type ExternalProps = {
 const mapStateToProps = (state: StateType, props: ExternalProps) => {
   const { id } = props;
 
-  const conversation = getConversationSelector(state)(id);
+  const conversationSelector = getConversationSelector(state);
+  const conversation = conversationSelector(id);
   if (!conversation) {
     throw new Error(`Did not find conversation ${id} in state!`);
   }
 
-  strictAssert(conversation.typingContact, 'Missing typingContact');
+  strictAssert(conversation.typingContactId, 'Missing typing contact ID');
+  const typingContact = conversationSelector(conversation.typingContactId);
 
   return {
-    ...conversation.typingContact,
+    ...typingContact,
+    badge: getPreferredBadgeSelector(state)(typingContact.badges),
     conversationType: conversation.type,
     i18n: getIntl(state),
+    theme: getTheme(state),
   };
 };
 

ts/test-both/state/selectors/conversations_test.ts

@@ -1254,11 +1254,7 @@ describe('both/state/selectors/conversations', () => {
           title: 'No timestamp',
           unreadCount: 1,
           isSelected: false,
-          typingContact: {
+          typingContactId: UUID.generate().toString(),
-            ...getDefaultConversation(),
-            name: 'Someone There',
-            phoneNumber: '+18005551111',
-          },
 
           acceptedMessageRequest: true,
         }),
@@ -1279,11 +1275,7 @@ describe('both/state/selectors/conversations', () => {
           title: 'B',
           unreadCount: 1,
           isSelected: false,
-          typingContact: {
+          typingContactId: UUID.generate().toString(),
-            ...getDefaultConversation(),
-            name: 'Someone There',
-            phoneNumber: '+18005551111',
-          },
 
           acceptedMessageRequest: true,
         }),
@@ -1304,11 +1296,7 @@ describe('both/state/selectors/conversations', () => {
           title: 'C',
           unreadCount: 1,
           isSelected: false,
-          typingContact: {
+          typingContactId: UUID.generate().toString(),
-            ...getDefaultConversation(),
-            name: 'Someone There',
-            phoneNumber: '+18005551111',
-          },
 
           acceptedMessageRequest: true,
         }),
@@ -1329,11 +1317,7 @@ describe('both/state/selectors/conversations', () => {
           title: 'A',
           unreadCount: 1,
           isSelected: false,
-          typingContact: {
+          typingContactId: UUID.generate().toString(),
-            ...getDefaultConversation(),
-            name: 'Someone There',
-            phoneNumber: '+18005551111',
-          },
 
           acceptedMessageRequest: true,
         }),
@@ -1354,11 +1338,7 @@ describe('both/state/selectors/conversations', () => {
           title: 'First!',
           unreadCount: 1,
           isSelected: false,
-          typingContact: {
+          typingContactId: UUID.generate().toString(),
-            ...getDefaultConversation(),
-            name: 'Someone There',
-            phoneNumber: '+18005551111',
-          },
 
           acceptedMessageRequest: true,
         }),
@@ -1400,11 +1380,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin Two',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),
@@ -1426,11 +1402,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin Three',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),
@@ -1452,11 +1424,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin One',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),
@@ -1495,11 +1463,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin Two',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),
@@ -1520,11 +1484,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin Three',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),
@@ -1545,11 +1505,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin One',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),
@@ -1571,11 +1527,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin One',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),
@@ -1596,11 +1548,7 @@ describe('both/state/selectors/conversations', () => {
             title: 'Pin One',
             unreadCount: 1,
             isSelected: false,
-            typingContact: {
+            typingContactId: UUID.generate().toString(),
-              ...getDefaultConversation(),
-              name: 'Someone There',
-              phoneNumber: '+18005551111',
-            },
 
             acceptedMessageRequest: true,
           }),