jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Take an author object in <Message>

This commit is contained in:
Evan Hahn 2021-04-27 14:55:21 -05:00 committed by Scott Nonnenberg
parent bca664b5d9
commit 5f17d01f49
7 changed files with 67 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ts/components/conversation/Message.stories.tsx
View File

@ -66,12 +66,18 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
<MessageAudioContainer {...props} />
);
const createAuthorProp = (
overrides: Partial<Props['author']> = {}
): Props['author'] => ({
id: 'some-id',
color: select('authorColor', Colors, Colors[0]),
...overrides,
title: text('authorTitle', overrides.title || ''),
});
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachments: overrideProps.attachments,
authorId: overrideProps.authorId || 'some-id',
authorColor: select('authorColor', Colors, Colors[0]),
authorAvatarPath: overrideProps.authorAvatarPath,
authorTitle: text('authorTitle', overrideProps.authorTitle || ''),
author: overrideProps.author || createAuthorProp(),
bodyRanges: overrideProps.bodyRanges,
canReply: true,
canDownload: true,
@ -212,7 +218,7 @@ story.add('Pending', () => {
story.add('Collapsed Metadata', () => {
const props = createProps({
authorTitle: 'Fred Willard',
author: createAuthorProp({ title: 'Fred Willard' }),
collapseMetadata: true,
conversationType: 'group',
text: 'Hello there from a pal!',
@ -425,7 +431,7 @@ story.add('Reactions (short message)', () => {
story.add('Avatar in Group', () => {
const props = createProps({
authorAvatarPath: pngUrl,
author: createAuthorProp({ avatarPath: pngUrl }),
conversationType: 'group',
status: 'sent',
text: 'Hello it is me, the saxophone.',
@ -921,15 +927,16 @@ story.add('Dangerous File Type', () => {
});
story.add('Colors', () => {
const defaultProps = createProps({
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
});
return (
<>
{Colors.map(color => (
<Message {...defaultProps} authorColor={color} />
<Message
{...createProps({
author: createAuthorProp({ color }),
text:
'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
})}
/>
))}
</>
);

69
ts/components/conversation/Message.tsx
View File

@ -8,6 +8,7 @@ import { drop, groupBy, orderBy, take } from 'lodash';
import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
import { Manager, Popper, Reference } from 'react-popper';
import { ConversationType } from '../../state/ducks/conversations';
import { Avatar } from '../Avatar';
import { Spinner } from '../Spinner';
import { MessageBody } from './MessageBody';
@ -105,12 +106,16 @@ export type PropsData = {
timestamp: number;
status?: MessageStatusType;
contact?: ContactType;
authorId: string;
authorTitle: string;
authorName?: string;
authorProfileName?: string;
authorPhoneNumber?: string;
authorColor?: ColorType;
author: Pick<
ConversationType,
| 'avatarPath'
| 'color'
| 'id'
| 'name'
| 'phoneNumber'
| 'profileName'
| 'title'
>;
conversationType: ConversationTypesType;
attachments?: Array<AttachmentType>;
quote?: {
@ -128,7 +133,6 @@ export type PropsData = {
referencedMessageNotFound: boolean;
};
previews: Array<LinkPreviewType>;
authorAvatarPath?: string;
isExpired?: boolean;
isTapToView?: boolean;
@ -633,10 +637,7 @@ export class Message extends React.Component<Props, State> {
public renderAuthor(): JSX.Element | null {
const {
authorTitle,
authorName,
authorPhoneNumber,
authorProfileName,
author,
collapseMetadata,
conversationType,
direction,
@ -653,7 +654,7 @@ export class Message extends React.Component<Props, State> {
if (
direction !== 'incoming' ||
conversationType !== 'group' ||
!authorTitle
!author.title
) {
return null;
}
@ -669,10 +670,10 @@ export class Message extends React.Component<Props, State> {
return (
<div className={moduleName}>
<ContactName
title={authorTitle}
phoneNumber={authorPhoneNumber}
name={authorName}
profileName={authorProfileName}
title={author.title}
phoneNumber={author.phoneNumber}
name={author.name}
profileName={author.profileName}
module={moduleName}
i18n={i18n}
/>
@ -996,8 +997,8 @@ export class Message extends React.Component<Props, State> {
public renderQuote(): JSX.Element | null {
const {
author,
conversationType,
authorColor,
direction,
disableScroll,
i18n,
@ -1012,7 +1013,7 @@ export class Message extends React.Component<Props, State> {
const withContentAbove =
conversationType === 'group' && direction === 'incoming';
const quoteColor =
direction === 'incoming' ? authorColor : quote.authorColor;
direction === 'incoming' ? author.color : quote.authorColor;
const { referencedMessageNotFound } = quote;
const clickHandler = disableScroll
@ -1104,14 +1105,8 @@ export class Message extends React.Component<Props, State> {
public renderAvatar(): JSX.Element | undefined {
const {
authorAvatarPath,
authorId,
authorName,
authorPhoneNumber,
authorProfileName,
authorTitle,
author,
collapseMetadata,
authorColor,
conversationType,
direction,
i18n,
@ -1135,18 +1130,18 @@ export class Message extends React.Component<Props, State> {
<button
type="button"
className="module-message__author-avatar"
onClick={() => showContactModal(authorId)}
onClick={() => showContactModal(author.id)}
tabIndex={0}
>
<Avatar
avatarPath={authorAvatarPath}
color={authorColor}
avatarPath={author.avatarPath}
color={author.color}
conversationType="direct"
i18n={i18n}
name={authorName}
phoneNumber={authorPhoneNumber}
profileName={authorProfileName}
title={authorTitle}
name={author.name}
phoneNumber={author.phoneNumber}
profileName={author.profileName}
title={author.title}
size={28}
/>
</button>
@ -2191,7 +2186,7 @@ export class Message extends React.Component<Props, State> {
public renderContainer(): JSX.Element {
const {
authorColor,
author,
deletedForEveryone,
direction,
isSticker,
@ -2216,13 +2211,13 @@ export class Message extends React.Component<Props, State> {
? 'module-message__container--with-tap-to-view-expired'
: null,
!isSticker && direction === 'incoming'
? `module-message__container--incoming-${authorColor}`
? `module-message__container--incoming-${author.color}`
: null,
isTapToView && isAttachmentPending && !isTapToViewExpired
? 'module-message__container--with-tap-to-view-pending'
: null,
isTapToView && isAttachmentPending && !isTapToViewExpired
? `module-message__container--${direction}-${authorColor}-tap-to-view-pending`
? `module-message__container--${direction}-${author.color}-tap-to-view-pending`
: null,
isTapToViewError
? 'module-message__container--with-tap-to-view-error'
@ -2249,7 +2244,7 @@ export class Message extends React.Component<Props, State> {
public render(): JSX.Element | null {
const {
authorId,
author,
attachments,
direction,
id,
@ -2260,7 +2255,7 @@ export class Message extends React.Component<Props, State> {
// This id is what connects our triple-dot click with our associated pop-up menu.
// It needs to be unique.
const triggerId = String(id || `${authorId}-${timestamp}`);
const triggerId = String(id || `${author.id}-${timestamp}`);
if (expired) {
return null;

6
ts/components/conversation/MessageDetail.stories.tsx
View File

@ -17,8 +17,10 @@ const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/MessageDetail', module);
const defaultMessage: MessageDataPropsType = {
authorId: 'some-id',
authorTitle: 'Max',
author: {
id: 'some-id',
title: 'Max',
},
canReply: true,
canDeleteForEveryone: true,
canDownload: true,

6
ts/components/conversation/Quote.stories.tsx
View File

@ -27,8 +27,10 @@ const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/Quote', module);
const defaultMessageProps: MessagesProps = {
authorId: 'some-id',
authorTitle: 'Person X',
author: {
id: 'some-id',
title: 'Person X',
},
canReply: true,
canDeleteForEveryone: true,
canDownload: true,

6
ts/components/conversation/TimelineItem.stories.tsx
View File

@ -84,8 +84,10 @@ storiesOf('Components/Conversation/TimelineItem', module)
id: 'id-1',
direction: 'incoming',
timestamp: Date.now(),
authorPhoneNumber: '(202) 555-2001',
authorColor: 'green',
author: {
phoneNumber: '(202) 555-2001',
color: 'green',
},
text: '🔥',
},
} as TimelineItemProps['item'];

14
ts/models/messages.ts
View File

@ -884,12 +884,6 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
getPropsForMessage(): PropsForMessage {
const sourceId = this.getContactId();
const contact = this.findAndFormatContact(sourceId);
const contactModel = this.findContact(sourceId);
const authorColor = contactModel ? contactModel.getColor() : undefined;
const authorAvatarPath = contactModel
? contactModel.getAbsoluteAvatarPath()
: undefined;
const expirationLength = this.get('expireTimer') * 1000;
const expireTimerStart = this.get('expirationStartTimestamp');
@ -921,6 +915,7 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
).emoji;
return {
author: contact,
text: this.createNonBreakingLastSeparator(this.get('body')),
textPending: this.get('bodyPending'),
id: this.id,
@ -933,17 +928,10 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
canReply: this.canReply(),
canDeleteForEveryone: this.canDeleteForEveryone(),
canDownload: this.canDownload(),
authorId: contact.id,
authorTitle: contact.title,
authorColor,
authorName: contact.name,
authorProfileName: contact.profileName,
authorPhoneNumber: contact.phoneNumber,
conversationType: isGroup ? 'group' : 'direct',
attachments: this.getAttachmentsForMessage(),
previews: this.getPropsForPreview(),
quote: this.getPropsForQuote(),
authorAvatarPath,
isExpired: this.hasExpired,
expirationLength,
expirationTimestamp,

6
ts/util/lint/exceptions.json
View File

@ -16573,7 +16573,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " public focusRef: React.RefObject<HTMLDivElement> = React.createRef();",
"lineNumber": 242,
"lineNumber": 246,
"reasonCategory": "usageTrusted",
"updated": "2021-03-05T19:57:01.431Z",
"reasonDetail": "Used for managing focus only"
@ -16582,7 +16582,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " public audioButtonRef: React.RefObject<HTMLButtonElement> = React.createRef();",
"lineNumber": 244,
"lineNumber": 248,
"reasonCategory": "usageTrusted",
"updated": "2021-03-05T19:57:01.431Z",
"reasonDetail": "Used for propagating click from the Message to MessageAudio's button"
@ -16591,7 +16591,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " public reactionsContainerRef: React.RefObject<HTMLDivElement> = React.createRef();",
"lineNumber": 246,
"lineNumber": 250,
"reasonCategory": "usageTrusted",
"updated": "2021-03-05T19:57:01.431Z",
"reasonDetail": "Used for detecting clicks outside reaction viewer"