admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

7242 error when displaying message threads with a large number of participants (#7251)

Browse Source 
Closes #7242
This commit is contained in:
Raphaël Bosi
2024-09-25 16:53:18 +02:00
committed by GitHub
parent 7669b40543
commit 3d5ecc9c08
8 changed files with 77 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx
View File

@ -1,9 +1,9 @@
import { useState } from 'react';
import styled from '@emotion/styled';
import { useState } from 'react';
import { IconArrowsVertical } from 'twenty-ui';
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
import { EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
import { Button } from '@/ui/input/button/components/Button';
const StyledButtonContainer = styled.div`
@ -14,7 +14,7 @@ const StyledButtonContainer = styled.div`
export const IntermediaryMessages = ({
messages,
}: {
messages: EmailThreadMessageType[];
messages: EmailThreadMessageWithSender[];
}) => {
const [areMessagesOpen, setAreMessagesOpen] = useState(false);
@ -26,6 +26,7 @@ export const IntermediaryMessages = ({
messages.map((message) => (
<EmailThreadMessage
key={message.id}
sender={message.sender}
participants={message.messageParticipants}
body={message.text}
sentAt={message.receivedAt}

34
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
View File

@ -55,23 +55,11 @@ export const RightDrawerEmailThread = () => {
messageChannelLoading,
} = useRightDrawerEmailThread();
const visibleMessages = useMemo(() => {
return messages.filter(({ messageParticipants }) => {
const from = messageParticipants.find(
(participant) => participant.role === 'from',
);
const receivers = messageParticipants.filter(
(participant) => participant.role !== 'from',
);
return from && receivers.length > 0;
});
}, [messages]);
useEffect(() => {
if (!visibleMessages[0]?.messageThread) {
if (!messages[0]?.messageThread) {
return;
}
setMessageThread(visibleMessages[0]?.messageThread);
setMessageThread(messages[0]?.messageThread);
});
const { useRegisterClickOutsideListenerCallback } = useClickOutsideListener(
@ -93,17 +81,17 @@ export const RightDrawerEmailThread = () => {
),
});
const visibleMessagesCount = visibleMessages.length;
const is5OrMoreMessages = visibleMessagesCount >= 5;
const firstMessages = visibleMessages.slice(
const messagesCount = messages.length;
const is5OrMoreMessages = messagesCount >= 5;
const firstMessages = messages.slice(
0,
is5OrMoreMessages ? 2 : visibleMessagesCount - 1,
is5OrMoreMessages ? 2 : messagesCount - 1,
);
const intermediaryMessages = is5OrMoreMessages
? visibleMessages.slice(2, visibleMessagesCount - 1)
? messages.slice(2, messagesCount - 1)
: [];
const lastMessage = visibleMessages[visibleMessagesCount - 1];
const subject = visibleMessages[0]?.subject;
const lastMessage = messages[messagesCount - 1];
const subject = messages[0]?.subject;
const canReply = useMemo(() => {
return (
@ -119,7 +107,7 @@ export const RightDrawerEmailThread = () => {
const url = `https://mail.google.com/mail/?authuser=${connectedAccountHandle}#all/${messageThreadExternalId}`;
window.open(url, '_blank');
};
if (!thread) {
if (!thread || !messages.length) {
return null;
}
return (
@ -136,6 +124,7 @@ export const RightDrawerEmailThread = () => {
{firstMessages.map((message) => (
<EmailThreadMessage
key={message.id}
sender={message.sender}
participants={message.messageParticipants}
body={message.text}
sentAt={message.receivedAt}
@ -144,6 +133,7 @@ export const RightDrawerEmailThread = () => {
<IntermediaryMessages messages={intermediaryMessages} />
<EmailThreadMessage
key={lastMessage.id}
sender={lastMessage.sender}
participants={lastMessage.messageParticipants}
body={lastMessage.text}
sentAt={lastMessage.receivedAt}