Improve types for ConversationType
's lastMessage
This commit is contained in:
parent
c19a801b89
commit
4e43459d34
4 changed files with 93 additions and 68 deletions
|
@ -230,6 +230,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
MessageStatuses.reduce((m, s) => ({ ...m, [s]: s }), {}),
|
||||
'read'
|
||||
),
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
lastUpdated: date(
|
||||
'lastUpdated',
|
||||
|
@ -264,6 +265,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
lastMessage: {
|
||||
text: 'Just a second',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
name: 'Myself',
|
||||
title: 'Myself',
|
||||
|
@ -277,7 +279,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
MessageStatuses.map(status => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: { text: status, status },
|
||||
lastMessage: { text: status, status, deletedForEveryone: false },
|
||||
}),
|
||||
}))
|
||||
)}
|
||||
|
@ -302,11 +304,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
|
||||
story.add('Conversation: Deleted for everyone', () =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
status: 'sent',
|
||||
text: 'You should not see this!',
|
||||
deletedForEveryone: true,
|
||||
},
|
||||
lastMessage: { deletedForEveryone: true },
|
||||
})
|
||||
);
|
||||
|
||||
|
@ -316,6 +314,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
lastMessage: {
|
||||
text: 'A Message',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
@ -326,7 +325,11 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
[4, 10, 250].map(unreadCount => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: { text: 'Hey there!', status: 'delivered' },
|
||||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
unreadCount,
|
||||
}),
|
||||
}))
|
||||
|
@ -343,6 +346,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
isSelected: true,
|
||||
})
|
||||
|
@ -353,6 +357,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
lastMessage: {
|
||||
text: '🔥',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
@ -362,6 +367,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
lastMessage: {
|
||||
text: 'Download at http://signal.org',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
@ -394,6 +400,7 @@ Line 4, well.`,
|
|||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
@ -420,6 +427,7 @@ Line 4, well.`,
|
|||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
@ -449,9 +457,9 @@ Line 4, well.`,
|
|||
story.add('Conversation: Missing Text', () =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
text: undefined as any,
|
||||
text: '',
|
||||
status: 'sent',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
@ -469,6 +477,7 @@ Line 4, well.`,
|
|||
lastMessage: {
|
||||
text: '@Leia Organa I know',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
|
|
@ -97,60 +97,44 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
|
|||
let messageText: ReactNode = null;
|
||||
let messageStatusIcon: ReactNode = null;
|
||||
|
||||
if (lastMessage || typingContact) {
|
||||
const messageBody = lastMessage ? lastMessage.text : '';
|
||||
const showingDraft = shouldShowDraft && draftPreview;
|
||||
const deletedForEveryone = Boolean(
|
||||
lastMessage && lastMessage.deletedForEveryone
|
||||
if (!acceptedMessageRequest) {
|
||||
messageText = (
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__message-request`}>
|
||||
{i18n('ConversationListItem--message-request')}
|
||||
</span>
|
||||
);
|
||||
|
||||
/* eslint-disable no-nested-ternary */
|
||||
} else if (typingContact) {
|
||||
messageText = <TypingAnimation i18n={i18n} />;
|
||||
} else if (shouldShowDraft && draftPreview) {
|
||||
messageText = (
|
||||
<>
|
||||
{muteExpiresAt && Date.now() < muteExpiresAt ? (
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__muted`} />
|
||||
) : null}
|
||||
{!acceptedMessageRequest ? (
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__message-request`}>
|
||||
{i18n('ConversationListItem--message-request')}
|
||||
</span>
|
||||
) : typingContact ? (
|
||||
<TypingAnimation i18n={i18n} />
|
||||
) : (
|
||||
<>
|
||||
{showingDraft ? (
|
||||
<>
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__draft-prefix`}>
|
||||
{i18n('ConversationListItem--draft-prefix')}
|
||||
</span>
|
||||
<MessageBody
|
||||
text={truncateMessageText(draftPreview)}
|
||||
disableJumbomoji
|
||||
disableLinks
|
||||
i18n={i18n}
|
||||
/>
|
||||
</>
|
||||
) : deletedForEveryone ? (
|
||||
<span
|
||||
className={`${MESSAGE_TEXT_CLASS_NAME}__deleted-for-everyone`}
|
||||
>
|
||||
{i18n('message--deletedForEveryone')}
|
||||
</span>
|
||||
) : (
|
||||
<MessageBody
|
||||
text={truncateMessageText(messageBody)}
|
||||
disableJumbomoji
|
||||
disableLinks
|
||||
i18n={i18n}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__draft-prefix`}>
|
||||
{i18n('ConversationListItem--draft-prefix')}
|
||||
</span>
|
||||
<MessageBody
|
||||
text={truncateMessageText(draftPreview)}
|
||||
disableJumbomoji
|
||||
disableLinks
|
||||
i18n={i18n}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
/* eslint-enable no-nested-ternary */
|
||||
|
||||
if (!showingDraft && lastMessage && lastMessage.status) {
|
||||
} else if (lastMessage?.deletedForEveryone) {
|
||||
messageText = (
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__deleted-for-everyone`}>
|
||||
{i18n('message--deletedForEveryone')}
|
||||
</span>
|
||||
);
|
||||
} else if (lastMessage) {
|
||||
messageText = (
|
||||
<MessageBody
|
||||
text={truncateMessageText(lastMessage.text)}
|
||||
disableJumbomoji
|
||||
disableLinks
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
if (lastMessage.status) {
|
||||
messageStatusIcon = (
|
||||
<div
|
||||
className={classNames(
|
||||
|
@ -162,6 +146,16 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
|
|||
}
|
||||
}
|
||||
|
||||
const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt);
|
||||
if (isMuted) {
|
||||
messageText = (
|
||||
<>
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__muted`} />
|
||||
{messageText}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const onClickItem = useCallback(() => onClick(id), [onClick, id]);
|
||||
|
||||
return (
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue