Skip to content

Commit

Permalink
Add badges to all conversation lists
Browse files Browse the repository at this point in the history 
Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
  • Loading branch information
@automated-signal @EvanHahn-Signal
automated-signal and EvanHahn-Signal committed Nov 17, 2021
1 parent 8387f08 commit 93f72f2
Show file tree
Hide file tree
Showing 22 changed files with 131 additions and 83 deletions.
4 changes: 4 additions & 0 deletions ts/components/ConversationList.stories.tsx
View file
Expand Up @@ -17,6 +17,7 @@ import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbo
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
import { ThemeType } from '../types/Util';
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
import { UUID } from '../types/UUID';

Expand Down Expand Up @@ -60,6 +61,7 @@ const Wrapper = ({
height: 350,
}}
rowCount={rows.length}
getPreferredBadge={() => undefined}
getRow={(index: number) => rows[index]}
shouldRecomputeRowHeights={false}
i18n={i18n}
Expand All @@ -72,11 +74,13 @@ const Wrapper = ({
bodyRanges={[]}
conversationId="marc-convo"
from={defaultConversations[0]}
getPreferredBadge={() => undefined}
i18n={i18n}
id={id}
openConversationInternal={action('openConversationInternal')}
sentAt={1587358800000}
snippet="Lorem <<left>>ipsum<<right>> wow"
theme={ThemeType.light}
to={defaultConversations[1]}
/>
)}
Expand Down
23 changes: 10 additions & 13 deletions ts/components/ConversationList.tsx
View file
Expand Up @@ -8,17 +8,16 @@ import { List } from 'react-virtualized';
import classNames from 'classnames';
import { get, pick } from 'lodash';

import { getOwn } from '../util/getOwn';
import { missingCaseError } from '../util/missingCaseError';
import { assert } from '../util/assert';
import type { LocalizerType, ThemeType } from '../types/Util';
import { ScrollBehavior } from '../types/Util';
import { getConversationListWidthBreakpoint } from './_util';
import type { BadgeType } from '../badges/types';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';

import type { PropsData as ConversationListItemPropsType } from './conversationList/ConversationListItem';
import { ConversationListItem } from './conversationList/ConversationListItem';
import type { PropsDataType as ContactListItemPropsType } from './conversationList/ContactListItem';
import type { ContactListItemConversationType as ContactListItemPropsType } from './conversationList/ContactListItem';
import { ContactListItem } from './conversationList/ContactListItem';
import type { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
import { ContactCheckbox as ContactCheckboxComponent } from './conversationList/ContactCheckbox';
Expand Down Expand Up @@ -116,7 +115,6 @@ export type Row =
| UsernameRowType;

export type PropsType = {
badgesById?: Record<string, BadgeType>;
dimensions?: {
width: number;
height: number;
Expand All @@ -131,6 +129,7 @@ export type PropsType = {
shouldRecomputeRowHeights: boolean;
scrollable?: boolean;

getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
theme: ThemeType;

Expand All @@ -150,8 +149,8 @@ const NORMAL_ROW_HEIGHT = 76;
const HEADER_ROW_HEIGHT = 40;

export const ConversationList: React.FC<PropsType> = ({
badgesById,
dimensions,
getPreferredBadge,
getRow,
i18n,
onClickArchiveButton,
Expand Down Expand Up @@ -231,8 +230,10 @@ export const ConversationList: React.FC<PropsType> = ({
result = (
<ContactListItem
{...row.contact}
badge={getPreferredBadge(row.contact.badges)}
onClick={isClickable ? onSelectConversation : undefined}
i18n={i18n}
theme={theme}
/>
);
break;
Expand All @@ -241,10 +242,12 @@ export const ConversationList: React.FC<PropsType> = ({
result = (
<ContactCheckboxComponent
{...row.contact}
badge={getPreferredBadge(row.contact.badges)}
isChecked={row.isChecked}
disabledReason={row.disabledReason}
onClick={onClickContactCheckbox}
i18n={i18n}
theme={theme}
/>
);
break;
Expand Down Expand Up @@ -274,12 +277,6 @@ export const ConversationList: React.FC<PropsType> = ({
'unreadCount',
]);
const { badges, title, unreadCount, lastMessage } = itemProps;

let badge: undefined | BadgeType;
if (badgesById && badges[0]) {
badge = getOwn(badgesById, badges[0].id);
}

result = (
<div
aria-label={i18n('ConversationList__aria-label', {
Expand All @@ -293,7 +290,7 @@ export const ConversationList: React.FC<PropsType> = ({
<ConversationListItem
{...itemProps}
key={key}
badge={badge}
badge={getPreferredBadge(badges)}
onClick={onSelectConversation}
i18n={i18n}
theme={theme}
Expand Down Expand Up @@ -361,7 +358,7 @@ export const ConversationList: React.FC<PropsType> = ({
);
},
[
badgesById,
getPreferredBadge,
getRow,
i18n,
onClickArchiveButton,
Expand Down
1 change: 1 addition & 0 deletions ts/components/ForwardMessageModal.tsx
View file
Expand Up @@ -398,6 +398,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
>
<ConversationList
dimensions={contentRect.bounds}
getPreferredBadge={getPreferredBadge}
getRow={getRow}
i18n={i18n}
onClickArchiveButton={shouldNeverBeCalled}
Expand Down
5 changes: 4 additions & 1 deletion ts/components/LeftPane.stories.tsx
View file
Expand Up @@ -14,6 +14,7 @@ import type { ConversationType } from '../state/ducks/conversations';
import { MessageSearchResult } from './conversationList/MessageSearchResult';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
import { ThemeType } from '../types/Util';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';

Expand Down Expand Up @@ -81,7 +82,6 @@ const defaultModeSpecificProps = {
const emptySearchResultsGroup = { isLoading: false, results: [] };

const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
badgesById: {},
cantAddContactToGroup: action('cantAddContactToGroup'),
canResizeLeftPane: true,
clearGroupCreationError: action('clearGroupCreationError'),
Expand All @@ -93,6 +93,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
composeReplaceAvatar: action('composeReplaceAvatar'),
composeSaveAvatarToDisk: action('composeSaveAvatarToDisk'),
createGroup: action('createGroup'),
getPreferredBadge: () => undefined,
i18n,
modeSpecificProps: defaultModeSpecificProps,
preferredWidthFromStorage: 320,
Expand All @@ -112,11 +113,13 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
bodyRanges={[]}
conversationId="marc-convo"
from={defaultConversations[0]}
getPreferredBadge={() => undefined}
i18n={i18n}
id={id}
openConversationInternal={action('openConversationInternal')}
sentAt={1587358800000}
snippet="Lorem <<left>>ipsum<<right>> wow"
theme={ThemeType.light}
to={defaultConversations[1]}
/>
),
Expand Down
8 changes: 4 additions & 4 deletions ts/components/LeftPane.tsx
View file
Expand Up @@ -25,7 +25,7 @@ import { LeftPaneSetGroupMetadataHelper } from './leftPane/LeftPaneSetGroupMetad
import * as OS from '../OS';
import type { LocalizerType, ThemeType } from '../types/Util';
import { ScrollBehavior } from '../types/Util';
import type { BadgeType } from '../badges/types';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import { usePrevious } from '../hooks/usePrevious';
import { missingCaseError } from '../util/missingCaseError';
import { strictAssert } from '../util/assert';
Expand Down Expand Up @@ -83,8 +83,8 @@ export type PropsType = {
| ({
mode: LeftPaneMode.SetGroupMetadata;
} & LeftPaneSetGroupMetadataPropsType);
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
badgesById: Record<string, BadgeType>;
preferredWidthFromStorage: number;
selectedConversationId: undefined | string;
selectedMessageId: undefined | string;
Expand Down Expand Up @@ -147,7 +147,6 @@ export type PropsType = {
};

export const LeftPane: React.FC<PropsType> = ({
badgesById,
cantAddContactToGroup,
canResizeLeftPane,
challengeStatus,
Expand All @@ -160,6 +159,7 @@ export const LeftPane: React.FC<PropsType> = ({
composeReplaceAvatar,
composeSaveAvatarToDisk,
createGroup,
getPreferredBadge,
i18n,
modeSpecificProps,
openConversationInternal,
Expand Down Expand Up @@ -571,11 +571,11 @@ export const LeftPane: React.FC<PropsType> = ({
tabIndex={-1}
>
<ConversationList
badgesById={badgesById}
dimensions={{
width,
height: contentRect.bounds?.height || 0,
}}
getPreferredBadge={getPreferredBadge}
getRow={getRow}
i18n={i18n}
onClickArchiveButton={showArchivedConversations}
Expand Down
1 change: 1 addition & 0 deletions ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx
View file
Expand Up @@ -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'),
Expand Down
4 changes: 4 additions & 0 deletions ts/components/conversation/conversation-details/AddGroupMembersModal.tsx
View file
Expand Up @@ -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,
Expand All @@ -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>;
Expand Down Expand Up @@ -147,6 +149,7 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
candidateContacts,
clearRequestError,
conversationIdsAlreadyInGroup,
getPreferredBadge,
groupTitle,
i18n,
onClose,
Expand Down Expand Up @@ -279,6 +282,7 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
confirmAdds={confirmAdds}
contactLookup={contactLookup}
conversationIdsAlreadyInGroup={conversationIdsAlreadyInGroup}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
maxGroupSize={maxGroupSize}
onClose={onClose}
Expand Down
4 changes: 4 additions & 0 deletions ...onents/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
View file
Expand Up @@ -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';
Expand All @@ -28,6 +29,7 @@ type PropsType = {
confirmAdds: () => void;
contactLookup: Record<string, ConversationType>;
conversationIdsAlreadyInGroup: Set<string>;
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
maxGroupSize: number;
onClose: () => void;
Expand All @@ -48,6 +50,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
confirmAdds,
contactLookup,
conversationIdsAlreadyInGroup,
getPreferredBadge,
i18n,
maxGroupSize,
onClose,
Expand Down Expand Up @@ -192,6 +195,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
>
<ConversationList
dimensions={contentRect.bounds}
getPreferredBadge={getPreferredBadge}
getRow={getRow}
i18n={i18n}
onClickArchiveButton={shouldNeverBeCalled}
Expand Down
2 changes: 1 addition & 1 deletion ts/components/conversation/conversation-details/ConversationDetails.stories.tsx
View file
Expand Up @@ -46,6 +46,7 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
}
: conversation,
hasGroupLink,
getPreferredBadge: () => undefined,
i18n,
isAdmin: false,
isGroup: true,
Expand All @@ -56,7 +57,6 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
isMe: i === 2,
}),
})),
preferredBadgeByConversation: {},
pendingApprovalMemberships: times(8, () => ({
member: getDefaultConversation(),
})),
Expand Down
8 changes: 5 additions & 3 deletions ts/components/conversation/conversation-details/ConversationDetails.tsx
View file
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -114,6 +115,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
conversation,
deleteAvatarFromDisk,
hasGroupLink,
getPreferredBadge,
i18n,
isAdmin,
isGroup,
Expand All @@ -126,7 +128,6 @@ export const ConversationDetails: React.ComponentType<Props> = ({
onUnblock,
pendingApprovalMemberships,
pendingMemberships,
preferredBadgeByConversation,
replaceAvatar,
saveAvatarToDisk,
searchInConversation,
Expand Down Expand Up @@ -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 => {
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 93f72f2

Please sign in to comment.