Add badges to all conversation lists

ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx

@@ -31,6 +31,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   candidateContacts: allCandidateContacts,
   clearRequestError: action('clearRequestError'),
   conversationIdsAlreadyInGroup: new Set(),
+  getPreferredBadge: () => undefined,
   groupTitle: 'Tahoe Trip',
   i18n,
   onClose: action('onClose'),

ts/components/conversation/conversation-details/AddGroupMembersModal.tsx

@@ -11,6 +11,7 @@ import {
   AddGroupMemberErrorDialogMode,
 } from '../../AddGroupMemberErrorDialog';
 import type { ConversationType } from '../../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
 import {
   getGroupSizeRecommendedLimit,
   getGroupSizeHardLimit,
@@ -30,6 +31,7 @@ type PropsType = {
   candidateContacts: ReadonlyArray<ConversationType>;
   clearRequestError: () => void;
   conversationIdsAlreadyInGroup: Set<string>;
+  getPreferredBadge: PreferredBadgeSelectorType;
   groupTitle: string;
   i18n: LocalizerType;
   makeRequest: (conversationIds: ReadonlyArray<string>) => Promise<void>;
@@ -147,6 +149,7 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
   candidateContacts,
   clearRequestError,
   conversationIdsAlreadyInGroup,
+  getPreferredBadge,
   groupTitle,
   i18n,
   onClose,
@@ -279,6 +282,7 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
           confirmAdds={confirmAdds}
           contactLookup={contactLookup}
           conversationIdsAlreadyInGroup={conversationIdsAlreadyInGroup}
+          getPreferredBadge={getPreferredBadge}
           i18n={i18n}
           maxGroupSize={maxGroupSize}
           onClose={onClose}

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -14,6 +14,7 @@ import { useRestoreFocus } from '../../../../hooks/useRestoreFocus';
 import { missingCaseError } from '../../../../util/missingCaseError';
 import { filterAndSortConversationsByTitle } from '../../../../util/filterAndSortConversations';
 import type { ConversationType } from '../../../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../../../state/selectors/badges';
 import { ModalHost } from '../../../ModalHost';
 import { ContactPills } from '../../../ContactPills';
 import { ContactPill } from '../../../ContactPill';
@@ -28,6 +29,7 @@ type PropsType = {
   confirmAdds: () => void;
   contactLookup: Record<string, ConversationType>;
   conversationIdsAlreadyInGroup: Set<string>;
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   maxGroupSize: number;
   onClose: () => void;
@@ -48,6 +50,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
   confirmAdds,
   contactLookup,
   conversationIdsAlreadyInGroup,
+  getPreferredBadge,
   i18n,
   maxGroupSize,
   onClose,
@@ -192,6 +195,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
                 >
                   <ConversationList
                     dimensions={contentRect.bounds}
+                    getPreferredBadge={getPreferredBadge}
                     getRow={getRow}
                     i18n={i18n}
                     onClickArchiveButton={shouldNeverBeCalled}

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -46,6 +46,7 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
       }
     : conversation,
   hasGroupLink,
+  getPreferredBadge: () => undefined,
   i18n,
   isAdmin: false,
   isGroup: true,
@@ -56,7 +57,6 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
       isMe: i === 2,
     }),
   })),
-  preferredBadgeByConversation: {},
   pendingApprovalMemberships: times(8, () => ({
     member: getDefaultConversation(),
   })),

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 
 import { Button, ButtonIconType, ButtonVariant } from '../../Button';
 import type { ConversationType } from '../../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
 import { assert } from '../../../util/assert';
 import { getMutedUntilText } from '../../../util/getMutedUntilText';
 
@@ -59,12 +60,12 @@ export type StateProps = {
   candidateContactsToAdd: Array<ConversationType>;
   conversation?: ConversationType;
   hasGroupLink: boolean;
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   isAdmin: boolean;
   isGroup: boolean;
   loadRecentMediaItems: (limit: number) => void;
   memberships: Array<GroupV2Membership>;
-  preferredBadgeByConversation: Record<string, BadgeType>;
   pendingApprovalMemberships: ReadonlyArray<GroupV2RequestingMembership>;
   pendingMemberships: ReadonlyArray<GroupV2PendingMembership>;
   setDisappearingMessages: (seconds: number) => void;
@@ -114,6 +115,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
   conversation,
   deleteAvatarFromDisk,
   hasGroupLink,
+  getPreferredBadge,
   i18n,
   isAdmin,
   isGroup,
@@ -126,7 +128,6 @@ export const ConversationDetails: React.ComponentType<Props> = ({
   onUnblock,
   pendingApprovalMemberships,
   pendingMemberships,
-  preferredBadgeByConversation,
   replaceAvatar,
   saveAvatarToDisk,
   searchInConversation,
@@ -235,6 +236,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
           conversationIdsAlreadyInGroup={
             new Set(memberships.map(membership => membership.member.id))
           }
+          getPreferredBadge={getPreferredBadge}
           groupTitle={conversation.title}
           i18n={i18n}
           makeRequest={async conversationIds => {
@@ -459,9 +461,9 @@ export const ConversationDetails: React.ComponentType<Props> = ({
         <ConversationDetailsMembershipList
           canAddNewMembers={canEditGroupInfo}
           conversationId={conversation.id}
+          getPreferredBadge={getPreferredBadge}
           i18n={i18n}
           memberships={memberships}
-          preferredBadgeByConversation={preferredBadgeByConversation}
           showContactModal={showContactModal}
           startAddingNewMembers={() => {
             setModalState(ModalState.AddingGroupMembers);

ts/components/conversation/conversation-details/ConversationDetailsMembershipList.stories.tsx

@@ -11,9 +11,7 @@ import { number } from '@storybook/addon-knobs';
 import { setupI18n } from '../../../util/setupI18n';
 import enMessages from '../../../../_locales/en/messages.json';
 import { getDefaultConversation } from '../../../test-both/helpers/getDefaultConversation';
-import { getFakeBadge } from '../../../test-both/helpers/getFakeBadge';
 import { ThemeType } from '../../../types/Util';
-import type { BadgeType } from '../../../badges/types';
 
 import type {
   Props,
@@ -48,20 +46,9 @@ const createProps = (overrideProps: Partial<Props>): Props => ({
     ? overrideProps.canAddNewMembers
     : false,
   conversationId: '123',
+  getPreferredBadge: () => undefined,
   i18n,
   memberships: overrideProps.memberships || [],
-  preferredBadgeByConversation:
-    overrideProps.preferredBadgeByConversation ||
-    (overrideProps.memberships || []).reduce(
-      (result: Record<string, BadgeType>, { member }, index) =>
-        (index + 1) % 3 === 0
-          ? {
-              ...result,
-              [member.id]: getFakeBadge({ alternate: index % 2 !== 0 }),
-            }
-          : result,
-      {}
-    ),
   showContactModal: action('showContactModal'),
   startAddingNewMembers: action('startAddingNewMembers'),
   theme: ThemeType.light,

ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx

@@ -4,14 +4,13 @@
 import React from 'react';
 
 import type { LocalizerType, ThemeType } from '../../../types/Util';
-import { getOwn } from '../../../util/getOwn';
 
-import type { BadgeType } from '../../../badges/types';
 import { Avatar } from '../../Avatar';
 import { Emojify } from '../Emojify';
 
 import { ConversationDetailsIcon, IconType } from './ConversationDetailsIcon';
 import type { ConversationType } from '../../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
 import { PanelRow } from './PanelRow';
 import { PanelSection } from './PanelSection';
 
@@ -23,10 +22,10 @@ export type GroupV2Membership = {
 export type Props = {
   canAddNewMembers: boolean;
   conversationId: string;
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   maxShownMemberCount?: number;
   memberships: Array<GroupV2Membership>;
-  preferredBadgeByConversation: Record<string, BadgeType>;
   showContactModal: (contactId: string, conversationId: string) => void;
   startAddingNewMembers?: () => void;
   theme: ThemeType;
@@ -74,10 +73,10 @@ function sortMemberships(
 export const ConversationDetailsMembershipList: React.ComponentType<Props> = ({
   canAddNewMembers,
   conversationId,
+  getPreferredBadge,
   i18n,
   maxShownMemberCount = 5,
   memberships,
-  preferredBadgeByConversation,
   showContactModal,
   startAddingNewMembers,
   theme,
@@ -114,7 +113,7 @@ export const ConversationDetailsMembershipList: React.ComponentType<Props> = ({
           icon={
             <Avatar
               conversationType="direct"
-              badge={getOwn(preferredBadgeByConversation, member.id)}
+              badge={getPreferredBadge(member.badges)}
               i18n={i18n}
               size={32}
               theme={theme}