{displayTitle}
- {latestMessage}
+ {latestMessagePreview}
{latestMessage}
+ {latestMessagePreview}
);
@@ -217,7 +217,7 @@ const CustomChannelPreview = (props) => {
activeChannel,
displayImage,
displayTitle,
- latestMessage,
+ latestMessagePreview,
setActiveChannel,
} = props;
const latestMessageAt = channel.state.last_message_at;
@@ -252,7 +252,7 @@ const CustomChannelPreview = (props) => {
{timestamp}
- {latestMessage}
+ {latestMessagePreview}
);
diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx
index 7b8c3066d6..0ce8c6075f 100644
--- a/src/components/ChannelList/ChannelList.tsx
+++ b/src/components/ChannelList/ChannelList.tsx
@@ -35,7 +35,7 @@ import { ChannelListContextProvider } from '../../context';
import { useChatContext } from '../../context/ChatContext';
import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
-
+import type { TranslationContextValue } from '../../context/TranslationContext';
import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
const DEFAULT_FILTERS = {};
@@ -70,6 +70,12 @@ export type ChannelListProps<
EmptyStateIndicator?: React.ComponentType{channelUpdateCount}
{channel.data.name}
- {latestMessage}
+ {latestMessagePreview}
{latestMessage}
+
+ {latestMessagePreview}
+
);
diff --git a/src/components/ChannelPreview/__tests__/ChannelPreview.test.js b/src/components/ChannelPreview/__tests__/ChannelPreview.test.js
index b95e59416b..d78712bca4 100644
--- a/src/components/ChannelPreview/__tests__/ChannelPreview.test.js
+++ b/src/components/ChannelPreview/__tests__/ChannelPreview.test.js
@@ -8,6 +8,7 @@ import { Chat } from '../../Chat';
import { ChatContext } from '../../../context/ChatContext';
import {
+ dispatchChannelTruncatedEvent,
dispatchMessageDeletedEvent,
dispatchMessageNewEvent,
dispatchMessageUpdatedEvent,
@@ -24,11 +25,24 @@ import {
useMockedApis,
} from 'mock-builders';
+const EMPTY_CHANNEL_PREVIEW_TEXT = 'Empty channel';
+
const PreviewUIComponent = (props) => (
<>
{props.channel.id}
{props.unread}
- {props.lastMessage && props.lastMessage.text}
+
+ {props.lastMessage ? props.lastMessage.text : EMPTY_CHANNEL_PREVIEW_TEXT}
+
+
+);
+const PreviewUIComponentWithLatestMessagePreview = (props) => (
+ <>
+ {props.channel.id}
+ {props.unread}
+
+ {props.lastMessage ? props.latestMessagePreview : EMPTY_CHANNEL_PREVIEW_TEXT}
+
);
@@ -65,7 +79,18 @@ describe('ChannelPreview', () => {
beforeEach(async () => {
client = await getTestClientWithUser(user);
- useMockedApis(client, [queryChannelsApi([generateChannel(), generateChannel()])]);
+ useMockedApis(client, [
+ queryChannelsApi([
+ generateChannel({
+ channel: { name: 'c0' },
+ messages: Array.from({ length: 5 }, generateMessage),
+ }),
+ generateChannel({
+ channel: { name: 'c1' },
+ messages: Array.from({ length: 5 }, generateMessage),
+ }),
+ ]),
+ ]);
[c0, c1] = await client.queryChannels({}, {});
});
@@ -128,14 +153,31 @@ describe('ChannelPreview', () => {
await expectUnreadCountToBe(getByTestId, newUnreadCount);
});
+ it('allows to customize latest message preview generation', async () => {
+ const getLatestMessagePreview = (channel) => channel.data.name;
+
+ const { getByTestId } = renderComponent(
+ {
+ activeChannel: c0,
+ channel: c0,
+ getLatestMessagePreview,
+ Preview: PreviewUIComponentWithLatestMessagePreview,
+ },
+ render,
+ );
+
+ await expectLastEventMessageToBe(getByTestId, c0.data.name);
+ });
+
const eventCases = [
['message.new', dispatchMessageNewEvent],
['message.updated', dispatchMessageUpdatedEvent],
['message.deleted', dispatchMessageDeletedEvent],
+ ['message.undeleted', dispatchMessageDeletedEvent],
];
describe.each(eventCases)('On %s event', (eventType, dispatcher) => {
- it('should update lastMessage', async () => {
+ it('should update latest message preview', async () => {
const newUnreadCount = getRandomInt(1, 10);
c0.countUnread = () => newUnreadCount;
@@ -151,9 +193,10 @@ describe('ChannelPreview', () => {
expect(getByTestId('channel-id')).toBeInTheDocument();
});
- const message = generateMessage();
- act(() => {
- dispatcher(client, message, c0);
+ const message =
+ eventType === 'message.new' ? generateMessage() : c0.state.messages.slice(-1)[0];
+ await act(async () => {
+ await dispatcher(client, message, c0);
});
await expectLastEventMessageToBe(getByTestId, message.text);
@@ -233,6 +276,61 @@ describe('ChannelPreview', () => {
});
});
+ it('on channel.truncated event should update latest message preview', async () => {
+ const newUnreadCount = getRandomInt(1, 10);
+ c0.countUnread = () => newUnreadCount;
+
+ const { getByTestId } = renderComponent(
+ {
+ activeChannel: c1,
+ channel: c0,
+ },
+ render,
+ );
+
+ await waitFor(() => {
+ expect(getByTestId('channel-id')).toBeInTheDocument();
+ });
+
+ await act(async () => {
+ await dispatchChannelTruncatedEvent(client, c0);
+ });
+
+ await expectLastEventMessageToBe(getByTestId, EMPTY_CHANNEL_PREVIEW_TEXT);
+ });
+
+ it.each([
+ ['message.updated', dispatchMessageUpdatedEvent],
+ ['message.deleted', dispatchMessageDeletedEvent],
+ ['message.undeleted', dispatchMessageDeletedEvent],
+ ])(
+ 'on %s event should not update latest message preview for the non-last message',
+ async (_, dispatcher) => {
+ const newUnreadCount = getRandomInt(1, 10);
+ c0.countUnread = () => newUnreadCount;
+
+ const { getByTestId } = renderComponent(
+ {
+ activeChannel: c1,
+ channel: c0,
+ },
+ render,
+ );
+
+ await waitFor(() => {
+ expect(getByTestId('channel-id')).toBeInTheDocument();
+ });
+
+ const lastMessage = c0.state.messages.slice(-1)[0];
+ const penultimateMessage = c0.state.messages.slice(-2)[0];
+ await act(async () => {
+ await dispatcher(client, penultimateMessage, c0);
+ });
+
+ await expectLastEventMessageToBe(getByTestId, lastMessage.text);
+ },
+ );
+
describe('notification.mark_read', () => {
it('should set unread count to 0 for event missing CID', () => {
const unreadCount = getRandomInt(1, 10);
@@ -282,6 +380,7 @@ describe('ChannelPreview', () => {
expectUnreadCountToBe(screen.getByTestId, unreadCount);
});
});
+
describe('notification.mark_unread', () => {
it('should be ignored if not originated from the current user', () => {
const unreadCount = 0;
diff --git a/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js b/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
index 36447f8b2c..56b26c7d4f 100644
--- a/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
+++ b/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
@@ -30,7 +30,7 @@ describe('ChannelPreviewMessenger', () => {
channel={channel}
displayImage='https://randomimage.com/src.jpg'
displayTitle='Channel name'
- latestMessage='Latest message!'
+ latestMessagePreview='Latest message!'
setActiveChannel={jest.fn()}
unread={10}
{...props}
diff --git a/src/components/ChannelPreview/utils.tsx b/src/components/ChannelPreview/utils.tsx
index 3efaa3a6f6..1aaa77672b 100644
--- a/src/components/ChannelPreview/utils.tsx
+++ b/src/components/ChannelPreview/utils.tsx
@@ -17,7 +17,7 @@ export const getLatestMessagePreview = <
t: TranslationContextValue['t'],
userLanguage: TranslationContextValue['userLanguage'] = 'en',
): string | JSX.Element => {
- const latestMessage = channel.state.messages[channel.state.messages.length - 1];
+ const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
const previewTextToRender =
latestMessage?.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||
@@ -32,8 +32,7 @@ export const getLatestMessagePreview = <
}
if (previewTextToRender) {
- const renderedText = renderPreviewText(previewTextToRender);
- return renderedText;
+ return renderPreviewText(previewTextToRender);
}
if (latestMessage.command) {
diff --git a/src/mock-builders/event/messageUndeleted.js b/src/mock-builders/event/messageUndeleted.js
new file mode 100644
index 0000000000..5407563fde
--- /dev/null
+++ b/src/mock-builders/event/messageUndeleted.js
@@ -0,0 +1,10 @@
+export default (client, message, channel = {}) => {
+ const [channel_id, channel_type] = channel.cid.split(':');
+ client.dispatchEvent({
+ channel_id,
+ channel_type,
+ cid: channel.cid,
+ message,
+ type: 'message.undeleted',
+ });
+};