feat(ScheduledMessages): scheduled messages for v14 (REACT-1386 to REACT-1390)

src/components/Channel/hooks/__tests__/useCreateChannelStateContext.test.ts

@@ -0,0 +1,53 @@
+import { renderHook } from '@testing-library/react';
+import type { Channel } from 'stream-chat';
+
+import { useCreateChannelStateContext } from '../useCreateChannelStateContext';
+
+const channel = {
+  cid: 'messaging:general',
+  data: { name: 'General' },
+  initialized: false,
+} as unknown as Channel;
+
+const renderStateContext = (channelCapabilitiesArray: string[]) =>
+  renderHook(
+    ({ capabilities }) =>
+      useCreateChannelStateContext({
+        channel,
+        channelCapabilitiesArray: capabilities,
+        notifications: [],
+      } as unknown as Parameters<typeof useCreateChannelStateContext>[0]),
+    { initialProps: { capabilities: channelCapabilitiesArray } },
+  );
+
+describe('useCreateChannelStateContext', () => {
+  it('maps the capabilities array to channelCapabilities', () => {
+    const { result } = renderStateContext(['send-message', 'schedule-message']);
+
+    expect(result.current.channelCapabilities).toEqual({
+      'schedule-message': true,
+      'send-message': true,
+    });
+  });
+
+  it('updates channelCapabilities when only the capabilities change', () => {
+    const { rerender, result } = renderStateContext(['send-message']);
+
+    rerender({ capabilities: ['send-message', 'schedule-message'] });
+
+    expect(result.current.channelCapabilities['schedule-message']).toBe(true);
+
+    rerender({ capabilities: ['send-message'] });
+
+    expect(result.current.channelCapabilities['schedule-message']).toBeUndefined();
+  });
+
+  it('keeps the same context when the capabilities only change order', () => {
+    const { rerender, result } = renderStateContext(['send-message', 'schedule-message']);
+    const firstContext = result.current;
+
+    rerender({ capabilities: ['schedule-message', 'send-message'] });
+
+    expect(result.current).toBe(firstContext);
+  });
+});

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -67,6 +67,8 @@ export const useCreateChannelStateContext = (
     channelCapabilities[capability] = true;
   });
 
+  const channelCapabilitiesKey = [...channelCapabilitiesArray].sort().join();
+
   // FIXME: this is crazy - I could not find out why the messages were not getting updated when only message properties that are not part
   // of this serialization has been changed. A great example of memoization gone wrong.
   const memoizedMessageData = skipMessageDataMemoization
@@ -141,6 +143,7 @@ export const useCreateChannelStateContext = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       channel.data?.name, // otherwise ChannelHeader will not be updated
+      channelCapabilitiesKey,
       channelId,
       channelUnreadUiState,
       error,

src/components/Chat/__tests__/ChatScheduledMessages.test.tsx

@@ -0,0 +1,267 @@
+import React, { StrictMode } from 'react';
+import { act, cleanup, render } from '@testing-library/react';
+import { ErrorFromResponse } from 'stream-chat';
+import type { APIErrorResponse, StreamChat } from 'stream-chat';
+
+import { Chat } from '..';
+import {
+  dispatchConnectionChangedEvent,
+  dispatchConnectionRecoveredEvent,
+  dispatchScheduledMessageEvent,
+  generateScheduledMessage,
+  getTestClient,
+  getTestClientWithUser,
+} from '../../../mock-builders';
+
+const renderChat = async (client: StreamChat, { strict = false } = {}) => {
+  const chat = <Chat client={client}>{null}</Chat>;
+
+  let result!: ReturnType<typeof render>;
+  await act(() => {
+    result = render(strict ? <StrictMode>{chat}</StrictMode> : chat);
+  });
+  return result;
+};
+
+const countListeners = (client: StreamChat, type: string) =>
+  client.listeners[type]?.length ?? 0;
+
+const featureDisabledError = () =>
+  new ErrorFromResponse<APIErrorResponse>('failed', {
+    code: 114,
+    response: {
+      data: {
+        code: 114,
+        duration: '',
+        exception_fields: { reason: 'scheduled_messages_disabled' },
+        message: 'failed',
+        more_info: '',
+        StatusCode: 400,
+      },
+    } as ErrorFromResponse<APIErrorResponse>['response'],
+    status: 400,
+  });
+
+describe('Chat scheduled messages wiring', () => {
+  afterEach(cleanup);
+
+  it('loads the scheduled messages once the user is connected', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+
+    await renderChat(client);
+
+    expect(client.queryScheduledMessages).toHaveBeenCalledTimes(1);
+    expect(client.queryScheduledMessages).toHaveBeenCalledWith({ limit: 100 });
+    expect(client.scheduledMessages.state.getLatestValue().isLoaded).toBe(true);
+  });
+
+  it('does not load before a user is connected', async () => {
+    const client = getTestClient();
+
+    await renderChat(client);
+
+    expect(client.queryScheduledMessages).not.toHaveBeenCalled();
+  });
+
+  it('loads when a user connects after the first render, without a re-render', async () => {
+    const client = getTestClient();
+    await renderChat(client);
+
+    await client.connectUser({ id: 'user-1' }, 'token');
+    await act(() => {
+      dispatchConnectionChangedEvent(client, true);
+    });
+
+    expect(client.queryScheduledMessages).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not load when the connection goes offline', async () => {
+    const client = getTestClient();
+    await renderChat(client);
+
+    await client.connectUser({ id: 'user-1' }, 'token');
+    await act(() => {
+      dispatchConnectionChangedEvent(client, false);
+    });
+
+    expect(client.queryScheduledMessages).not.toHaveBeenCalled();
+  });
+
+  it('does not load for an anonymous user', async () => {
+    const client = await getTestClientWithUser({ id: '!anon' });
+    client.anonymous = true;
+
+    await renderChat(client);
+
+    expect(client.queryScheduledMessages).not.toHaveBeenCalled();
+  });
+
+  it('retries a failed load when the connection comes back', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    vi.mocked(client.queryScheduledMessages).mockRejectedValueOnce(new Error('offline'));
+    await renderChat(client);
+
+    await act(() => {
+      dispatchConnectionChangedEvent(client, true);
+    });
+
+    expect(client.queryScheduledMessages).toHaveBeenCalledTimes(2);
+    expect(client.scheduledMessages.state.getLatestValue().isLoaded).toBe(true);
+  });
+
+  it('retries a failed load on connection.recovered', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    vi.mocked(client.queryScheduledMessages).mockRejectedValueOnce(new Error('offline'));
+    await renderChat(client);
+
+    await act(() => {
+      dispatchConnectionRecoveredEvent(client);
+    });
+
+    expect(client.scheduledMessages.state.getLatestValue().isLoaded).toBe(true);
+  });
+
+  it('does not retry or warn when the feature is disabled', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    vi.mocked(client.queryScheduledMessages).mockRejectedValueOnce(
+      featureDisabledError(),
+    );
+    const loggerSpy = vi.spyOn(client, 'logger');
+    await renderChat(client);
+
+    await act(() => {
+      dispatchConnectionChangedEvent(client, true);
+    });
+
+    expect(client.queryScheduledMessages).toHaveBeenCalledTimes(1);
+    expect(client.scheduledMessages.state.getLatestValue().isDisabled).toBe(true);
+    expect(loggerSpy).not.toHaveBeenCalledWith(
+      'warn',
+      'scheduledMessages: load failed',
+      expect.anything(),
+    );
+  });
+
+  it('does not load again when the connection comes back after a successful load', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    await renderChat(client);
+
+    await act(() => {
+      dispatchConnectionChangedEvent(client, true);
+    });
+
+    expect(client.queryScheduledMessages).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not load again on re-render', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    const { rerender } = await renderChat(client);
+
+    await act(() => {
+      rerender(<Chat client={client}>{null}</Chat>);
+    });
+
+    expect(client.queryScheduledMessages).toHaveBeenCalledTimes(1);
+  });
+
+  it('queries and subscribes once under StrictMode', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+
+    await renderChat(client, { strict: true });
+
+    expect(client.queryScheduledMessages).toHaveBeenCalledTimes(1);
+    expect(countListeners(client, 'scheduled_message.created')).toBe(1);
+    expect(countListeners(client, 'scheduled_message.sent')).toBe(1);
+  });
+
+  it('keeps the store in sync from events while mounted', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    const scheduledMessage = generateScheduledMessage();
+    await renderChat(client);
+
+    act(() => {
+      dispatchScheduledMessageEvent({
+        client,
+        scheduledMessage,
+        type: 'scheduled_message.created',
+      });
+    });
+
+    expect(client.scheduledMessages.getFromState(scheduledMessage.id)).toEqual(
+      scheduledMessage,
+    );
+  });
+
+  it('reports a scheduled message that failed to send', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    const scheduledMessage = generateScheduledMessage({
+      failure_reason: 'channel_frozen',
+      status: 'failed',
+    });
+    await renderChat(client);
+
+    act(() => {
+      dispatchScheduledMessageEvent({
+        client,
+        scheduledMessage,
+        type: 'scheduled_message.failed',
+      });
+    });
+
+    expect(client.notifications.store.getLatestValue().notifications).toEqual([
+      expect.objectContaining({
+        metadata: { reason: 'channel_frozen', scheduledMessageId: scheduledMessage.id },
+        severity: 'error',
+        type: 'api:scheduled-message:send:failed',
+      }),
+    ]);
+  });
+
+  it('stops reporting failures after unmount', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    const { unmount } = await renderChat(client);
+
+    unmount();
+    act(() => {
+      dispatchScheduledMessageEvent({
+        client,
+        scheduledMessage: generateScheduledMessage({ status: 'failed' }),
+        type: 'scheduled_message.failed',
+      });
+    });
+
+    expect(client.notifications.store.getLatestValue().notifications).toEqual([]);
+  });
+
+  it('unsubscribes on unmount', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    const connectionChangedListeners = countListeners(client, 'connection.changed');
+    const connectionRecoveredListeners = countListeners(client, 'connection.recovered');
+    const { unmount } = await renderChat(client);
+
+    unmount();
+
+    expect(client.scheduledMessages.hasSubscriptions).toBe(false);
+    expect(countListeners(client, 'scheduled_message.created')).toBe(0);
+    expect(countListeners(client, 'connection.changed')).toBe(connectionChangedListeners);
+    expect(countListeners(client, 'connection.recovered')).toBe(
+      connectionRecoveredListeners,
+    );
+  });
+
+  it('logs and keeps rendering when the load fails', async () => {
+    const client = await getTestClientWithUser({ id: 'user-1' });
+    const error = new Error('boom');
+    vi.mocked(client.queryScheduledMessages).mockRejectedValueOnce(error);
+    const loggerSpy = vi.spyOn(client, 'logger');
+
+    await renderChat(client);
+
+    expect(loggerSpy).toHaveBeenCalledWith(
+      'warn',
+      'scheduledMessages: load failed',
+      expect.objectContaining({ error }),
+    );
+    expect(client.scheduledMessages.state.getLatestValue().lastQueryError).toBe(error);
+  });
+});

src/components/Chat/hooks/useChat.ts

@@ -8,6 +8,8 @@ import {
   isLanguageSupported,
   Streami18n,
 } from '../../../i18n';
+import { useLoadScheduledMessages } from './useLoadScheduledMessages';
+import { useScheduledMessageFailureNotifications } from './useScheduledMessageFailureNotifications';
 
 import type {
   AppSettingsAPIResponse,
@@ -67,15 +69,20 @@ export const useChat = ({
     client.polls.registerSubscriptions();
     client.reminders.registerSubscriptions();
     client.reminders.initTimers();
+    client.scheduledMessages.registerSubscriptions();
 
     return () => {
       client.threads.unregisterSubscriptions();
       client.polls.unregisterSubscriptions();
       client.reminders.unregisterSubscriptions();
       client.reminders.clearTimers();
+      client.scheduledMessages.unregisterSubscriptions();
     };
   }, [client]);
 
+  useLoadScheduledMessages(client);
+  useScheduledMessageFailureNotifications(client);
+
   useEffect(() => {
     setMutes(clientMutes);