stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/components/Channel/__tests__/useMessageListPagination.test.js

@@ -0,0 +1,419 @@
+import { act, cleanup, renderHook, waitFor } from '@testing-library/react-native';
+
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { channelInitialState } from '../hooks/useChannelDataState';
+import * as ChannelStateHooks from '../hooks/useChannelDataState';
+import { useMessageListPagination } from '../hooks/useMessageListPagination';
+
+describe('useMessageListPagination', () => {
+  let chatClient;
+  let channel;
+
+  const mockedHook = (state, values) =>
+    jest.spyOn(ChannelStateHooks, 'useChannelMessageDataState').mockImplementation(() => ({
+      copyMessagesStateFromChannel: jest.fn(),
+      jumpToLatestMessage: jest.fn(),
+      jumpToMessageFinished: jest.fn(),
+      loadInitialMessagesStateFromChannel: jest.fn(),
+      loadMoreFinished: jest.fn(),
+      loadMoreRecentFinished: jest.fn(),
+      setLoading: jest.fn(),
+      setLoadingMore: jest.fn(),
+      setLoadingMoreRecent: jest.fn(),
+      state: { ...channelInitialState, ...state },
+      ...values,
+    }));
+
+  beforeEach(async () => {
+    // Reset all modules before each test
+    jest.resetModules();
+    const user = generateUser({ id: 'id', name: 'name' });
+    chatClient = await getTestClientWithUser(user);
+
+    const mockedChannel = generateChannelResponse({
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+  });
+
+  afterEach(() => {
+    // Clear all mocks after each test
+    jest.clearAllMocks();
+    // Restore all mocks to their original implementation
+    jest.restoreAllMocks();
+    cleanup();
+  });
+
+  it('should set the state when the loadLatestMessages is called', async () => {
+    const loadMessageIntoState = jest.fn(() => {
+      channel.state.messages = Array.from({ length: 20 }, (_, i) =>
+        generateMessage({ text: `message-${i}` }),
+      );
+      channel.state.messagePagination.hasPrev = true;
+    });
+    channel.state = {
+      ...channelInitialState,
+      loadMessageIntoState,
+      messagePagination: {
+        hasNext: true,
+        hasPrev: true,
+      },
+    };
+    const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+    await act(async () => {
+      await result.current.loadLatestMessages();
+    });
+
+    await waitFor(() => {
+      expect(loadMessageIntoState).toHaveBeenCalledTimes(1);
+      expect(result.current.state.hasMore).toBe(true);
+      expect(result.current.state.messages.length).toBe(20);
+    });
+  });
+
+  describe('loadMore', () => {
+    afterEach(() => {
+      // Clear all mocks after each test
+      jest.clearAllMocks();
+      // Restore all mocks to their original implementation
+      jest.restoreAllMocks();
+      cleanup();
+    });
+    it('should not set the state when the loadMore function is called and hasPrev is false', async () => {
+      const queryFn = jest.fn();
+      channel.state = {
+        ...channelInitialState,
+        messagePagination: {
+          hasNext: true,
+          hasPrev: false,
+        },
+      };
+      channel.query = queryFn;
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadMore();
+      });
+
+      await waitFor(() => {
+        expect(queryFn).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    it('should not set the state when the loading more and loading more recent boolean are true', async () => {
+      const queryFn = jest.fn();
+      channel.state = {
+        ...channelInitialState,
+        messagePagination: {
+          hasNext: true,
+          hasPrev: true,
+        },
+      };
+      channel.query = queryFn;
+
+      mockedHook({ loadingMore: true, loadingMoreRecent: true });
+
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadMore();
+      });
+
+      await waitFor(() => {
+        expect(queryFn).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    it('should set the state when the loadMore function is called and hasPrev is true and loadingMore is false and loadingMoreRecent is false', async () => {
+      const messages = Array.from({ length: 20 }, (_, i) =>
+        generateMessage({ text: `message-${i}` }),
+      );
+      const queryFn = jest.fn(() => {
+        channel.state.messages = Array.from({ length: 40 }, (_, i) =>
+          generateMessage({ text: `message-${i}` }),
+        );
+        channel.state.messagePagination.hasPrev = true;
+      });
+      channel.state = {
+        ...channelInitialState,
+        messagePagination: {
+          hasNext: true,
+          hasPrev: true,
+        },
+        messages,
+      };
+      channel.query = queryFn;
+
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadMore();
+      });
+
+      await waitFor(() => {
+        expect(queryFn).toHaveBeenCalledWith({
+          messages: { id_lt: messages[0].id, limit: 20 },
+          watchers: { limit: 20 },
+        });
+        expect(result.current.state.hasMore).toBe(true);
+        expect(result.current.state.messages.length).toBe(40);
+      });
+    });
+  });
+
+  describe('loadMoreRecent', () => {
+    afterEach(() => {
+      // Clear all mocks after each test
+      jest.clearAllMocks();
+      // Restore all mocks to their original implementation
+      jest.restoreAllMocks();
+      cleanup();
+    });
+
+    it('should not set the state when the loadMoreRecent function is called and hasNext is false', async () => {
+      const queryFn = jest.fn();
+      channel.state = {
+        ...channelInitialState,
+        messagePagination: {
+          hasNext: false,
+          hasPrev: true,
+        },
+      };
+      channel.query = queryFn;
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadMoreRecent();
+      });
+
+      await waitFor(() => {
+        expect(queryFn).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    it('should not set the state when the loading more and loading more recent boolean are true', async () => {
+      const queryFn = jest.fn();
+      channel.state = {
+        ...channelInitialState,
+        messagePagination: {
+          hasNext: true,
+          hasPrev: true,
+        },
+      };
+      channel.query = queryFn;
+
+      mockedHook({ loadingMore: true, loadingMoreRecent: true });
+
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadMoreRecent();
+      });
+
+      await waitFor(() => {
+        expect(queryFn).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    it('should set the state when the loadMoreRecent function is called and hasNext is true and loadingMore is false and loadingMoreRecent is false', async () => {
+      const messages = Array.from({ length: 20 }, (_, i) =>
+        generateMessage({ text: `message-${i}` }),
+      );
+      const queryFn = jest.fn(() => {
+        channel.state.messages = Array.from({ length: 40 }, (_, i) =>
+          generateMessage({ text: `message-${i}` }),
+        );
+        channel.state.messagePagination.hasPrev = true;
+      });
+      channel.state = {
+        ...channelInitialState,
+        messagePagination: {
+          hasNext: true,
+          hasPrev: true,
+        },
+        messages,
+      };
+      channel.query = queryFn;
+
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadMoreRecent();
+      });
+
+      await waitFor(() => {
+        expect(queryFn).toHaveBeenCalledWith({
+          messages: { id_gt: messages[messages.length - 1].id, limit: 10 },
+          watchers: { limit: 10 },
+        });
+        expect(result.current.state.hasMore).toBe(true);
+        expect(result.current.state.messages.length).toBe(40);
+      });
+    });
+  });
+
+  describe('loadChannelAroundMessage', () => {
+    afterEach(() => {
+      // Clear all mocks after each test
+      jest.clearAllMocks();
+      // Restore all mocks to their original implementation
+      jest.restoreAllMocks();
+      cleanup();
+    });
+
+    it('should not do anything when the messageId to search for is not passed', async () => {
+      const loadMessageIntoState = jest.fn(() => {
+        channel.state.messages = Array.from({ length: 20 }, (_, i) =>
+          generateMessage({ text: `message-${i}` }),
+        );
+        channel.state.messagePagination.hasPrev = true;
+      });
+      channel.state = {
+        ...channelInitialState,
+        loadMessageIntoState,
+        messagePagination: {
+          hasNext: true,
+          hasPrev: true,
+        },
+      };
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadChannelAroundMessage({ messageId: undefined });
+      });
+
+      await waitFor(() => {
+        expect(loadMessageIntoState).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    it('should call the loadMessageIntoState function when the messageId to search for is passed and set the state', async () => {
+      const loadMessageIntoState = jest.fn(() => {
+        channel.state.messages = Array.from({ length: 20 }, (_, i) =>
+          generateMessage({ text: `message-${i}` }),
+        );
+        channel.state.messagePagination.hasPrev = true;
+      });
+      channel.state = {
+        ...channelInitialState,
+        loadMessageIntoState,
+        messagePagination: {
+          hasNext: false,
+          hasPrev: true,
+        },
+      };
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadChannelAroundMessage({ messageId: 'message-5' });
+      });
+
+      await waitFor(() => {
+        expect(loadMessageIntoState).toHaveBeenCalledTimes(1);
+        expect(result.current.state.hasMore).toBe(true);
+        expect(result.current.state.hasMoreNewer).toBe(false);
+        expect(result.current.state.messages.length).toBe(20);
+        expect(result.current.state.targetedMessageId).toBe('message-5');
+      });
+    });
+  });
+
+  describe('loadChannelAtFirstUnreadMessage', () => {
+    afterEach(() => {
+      // Clear all mocks after each test
+      jest.clearAllMocks();
+      // Restore all mocks to their original implementation
+      jest.restoreAllMocks();
+      cleanup();
+    });
+
+    it('should not do anything when the unread count is 0', async () => {
+      const loadMessageIntoState = jest.fn(() => {
+        channel.state.messages = Array.from({ length: 20 }, (_, i) =>
+          generateMessage({ text: `message-${i}` }),
+        );
+        channel.state.messagePagination.hasPrev = true;
+      });
+      channel.state = {
+        ...channelInitialState,
+        loadMessageIntoState,
+        messagePagination: {
+          hasNext: true,
+          hasPrev: true,
+        },
+      };
+
+      channel.countUnread = jest.fn(() => 0);
+
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadChannelAtFirstUnreadMessage({});
+      });
+
+      await waitFor(() => {
+        expect(loadMessageIntoState).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    function getElementsAround(array, key, id, limit) {
+      const index = array.findIndex((obj) => obj[key] === id);
+
+      if (index === -1) {
+        return [];
+      }
+
+      const start = Math.max(0, index - limit); // 12 before the index
+      const end = Math.min(array.length, index + limit); // 12 after the index
+      return array.slice(start, end);
+    }
+
+    it('should call the loadMessageIntoState function when the unread count is greater than 0 and set the state', async () => {
+      const messages = Array.from({ length: 30 }, (_, i) =>
+        generateMessage({ text: `message-${i}` }),
+      );
+      const loadMessageIntoState = jest.fn((messageId) => {
+        channel.state.messages = getElementsAround(messages, 'id', messageId, 5);
+        channel.state.messagePagination.hasPrev = true;
+      });
+      channel.state = {
+        ...channelInitialState,
+        loadMessageIntoState,
+        messagePagination: {
+          hasNext: false,
+          hasPrev: true,
+        },
+        messages,
+        messageSets: [{ isCurrent: true, isLatest: true }],
+      };
+
+      const unreadCount = 5;
+      channel.countUnread = jest.fn(() => unreadCount);
+
+      const { result } = renderHook(() => useMessageListPagination({ channel }));
+
+      await act(async () => {
+        await result.current.loadChannelAtFirstUnreadMessage({});
+      });
+
+      await waitFor(() => {
+        expect(loadMessageIntoState).toHaveBeenCalledTimes(1);
+        expect(result.current.state.hasMore).toBe(true);
+        expect(result.current.state.hasMoreNewer).toBe(false);
+        expect(result.current.state.messages.length).toBe(10);
+        expect(result.current.state.targetedMessageId).toBe(
+          messages[messages.length - unreadCount].id,
+        );
+      });
+    });
+  });
+});

package/src/components/Channel/hooks/useChannelDataState.ts

@@ -0,0 +1,235 @@
+import { useCallback, useState } from 'react';
+
+import { Channel, ChannelState as StreamChannelState } from 'stream-chat';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+import { MessageType } from '../../MessageList/hooks/useMessageList';
+
+export const channelInitialState = {
+  hasMore: true,
+  hasMoreNewer: false,
+  loading: false,
+  loadingMore: false,
+  loadingMoreRecent: false,
+  members: {},
+  messages: [],
+  pinnedMessages: [],
+  read: {},
+  targetedMessageId: undefined,
+  typing: {},
+  watcherCount: 0,
+  watchers: {},
+};
+
+/**
+ * The ChannelMessagesState object
+ */
+export type ChannelMessagesState<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  hasMore?: boolean;
+  hasMoreNewer?: boolean;
+  loading?: boolean;
+  loadingMore?: boolean;
+  loadingMoreRecent?: boolean;
+  messages?: StreamChannelState<StreamChatGenerics>['messages'];
+  pinnedMessages?: StreamChannelState<StreamChatGenerics>['pinnedMessages'];
+  targetedMessageId?: string;
+};
+
+/**
+ * The ChannelThreadState object
+ */
+export type ChannelThreadState<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  thread: MessageType<StreamChatGenerics> | null;
+  threadHasMore?: boolean;
+  threadLoadingMore?: boolean;
+  threadMessages?: StreamChannelState<StreamChatGenerics>['messages'];
+};
+
+/**
+ * The ChannelState object
+ */
+export type ChannelState<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ChannelMessagesState<StreamChatGenerics> & {
+  members?: StreamChannelState<StreamChatGenerics>['members'];
+  read?: StreamChannelState<StreamChatGenerics>['read'];
+  typing?: StreamChannelState<StreamChatGenerics>['typing'];
+  watcherCount?: number;
+  watchers?: StreamChannelState<StreamChatGenerics>['watchers'];
+};
+
+/**
+ * The useChannelMessageDataState hook that handles the state for the channel messages.
+ */
+export const useChannelMessageDataState = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+) => {
+  const [state, setState] = useState<ChannelMessagesState<StreamChatGenerics>>({
+    hasMore: true,
+    hasMoreNewer: false,
+    loading: false,
+    loadingMore: false,
+    loadingMoreRecent: false,
+    messages: channel?.state?.messages || [],
+    pinnedMessages: channel?.state?.pinnedMessages || [],
+    targetedMessageId: undefined,
+  });
+
+  const copyMessagesStateFromChannel = useCallback((channel: Channel<StreamChatGenerics>) => {
+    setState((prev) => ({
+      ...prev,
+      messages: [...channel.state.messages],
+      pinnedMessages: [...channel.state.pinnedMessages],
+    }));
+  }, []);
+
+  const loadInitialMessagesStateFromChannel = useCallback(
+    (channel: Channel<StreamChatGenerics>, hasMore: boolean) => {
+      setState((prev) => ({
+        ...prev,
+        hasMore,
+        loading: false,
+        messages: [...channel.state.messages],
+        pinnedMessages: [...channel.state.pinnedMessages],
+      }));
+    },
+    [],
+  );
+
+  const jumpToLatestMessage = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      hasMoreNewer: false,
+      loading: false,
+      targetedMessageId: undefined,
+    }));
+  }, []);
+
+  const jumpToMessageFinished = useCallback((hasMoreNewer: boolean, targetedMessageId: string) => {
+    setState((prev) => ({
+      ...prev,
+      hasMoreNewer,
+      loading: false,
+      targetedMessageId,
+    }));
+  }, []);
+
+  const loadMoreFinished = useCallback(
+    (hasMore: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
+      setState((prev) => ({
+        ...prev,
+        hasMore,
+        loadingMore: false,
+        messages,
+      }));
+    },
+    [],
+  );
+
+  const setLoadingMore = useCallback((loadingMore: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      loadingMore,
+    }));
+  }, []);
+
+  const setLoadingMoreRecent = useCallback((loadingMoreRecent: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      loadingMoreRecent,
+    }));
+  }, []);
+
+  const setLoading = useCallback((loading: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      loading,
+    }));
+  }, []);
+
+  const loadMoreRecentFinished = useCallback(
+    (hasMoreNewer: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
+      setState((prev) => ({
+        ...prev,
+        hasMoreNewer,
+        loadingMoreRecent: false,
+        messages,
+      }));
+    },
+    [],
+  );
+
+  return {
+    copyMessagesStateFromChannel,
+    jumpToLatestMessage,
+    jumpToMessageFinished,
+    loadInitialMessagesStateFromChannel,
+    loadMoreFinished,
+    loadMoreRecentFinished,
+    setLoading,
+    setLoadingMore,
+    setLoadingMoreRecent,
+    state,
+  };
+};
+
+/**
+ * The useChannelThreadState hook that handles the state for the channel member, read, typing, watchers, etc.
+ */
+export const useChannelDataState = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+) => {
+  const [state, setState] = useState<ChannelState<StreamChatGenerics>>({
+    members: channel.state.members,
+    read: channel.state.read,
+    typing: {},
+    watcherCount: 0,
+    watchers: {},
+  });
+
+  const initStateFromChannel = useCallback(
+    (channel: Channel<StreamChatGenerics>) => {
+      setState({
+        ...state,
+        members: { ...channel.state.members },
+        read: { ...channel.state.read },
+        typing: { ...channel.state.typing },
+        watcherCount: channel.state.watcher_count,
+        watchers: { ...channel.state.watchers },
+      });
+    },
+    [state],
+  );
+
+  const copyStateFromChannel = useCallback((channel: Channel<StreamChatGenerics>) => {
+    setState((prev) => ({
+      ...prev,
+      members: { ...channel.state.members },
+      read: { ...channel.state.read },
+      watcherCount: channel.state.watcher_count,
+      watchers: { ...channel.state.watchers },
+    }));
+  }, []);
+
+  const setTyping = useCallback((channel: Channel<StreamChatGenerics>) => {
+    setState((prev) => ({
+      ...prev,
+      typing: { ...channel.state.typing }, // Synchronize the typing state from the channel
+    }));
+  }, []);
+
+  return {
+    copyStateFromChannel,
+    initStateFromChannel,
+    setTyping,
+    state,
+  };
+};

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -15,13 +15,9 @@ export const useCreateChannelContext = <
   giphyEnabled,
   hideDateSeparators,
   hideStickyDateHeader,
-  isAdmin,
   isChannelActive,
-  isModerator,
-  isOwner,
   lastRead,
   loadChannelAroundMessage,
-  loadChannelAtMessage,
   loading,
   LoadingIndicator,
   markRead,
@@ -59,13 +55,9 @@ export const useCreateChannelContext = <
       giphyEnabled,
       hideDateSeparators,
       hideStickyDateHeader,
-      isAdmin,
       isChannelActive,
-      isModerator,
-      isOwner,
       lastRead,
       loadChannelAroundMessage,
-      loadChannelAtMessage,
       loading,
       LoadingIndicator,
       markRead,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -72,12 +72,8 @@ export const useCreateInputMessageInputContext = <
    */
   channelId?: string;
 }) => {
-  const editingDep = typeof editing === 'boolean' ? editing : editing?.id;
-  const quotedMessageId = quotedMessage
-    ? typeof quotedMessage === 'boolean'
-      ? ''
-      : quotedMessage.id
-    : '';
+  const editingDep = editing ? editing.id : '';
+  const quotedMessageId = quotedMessage ? quotedMessage.id : '';
 
   const inputMessageInputContext: InputMessageInputContextValue<StreamChatGenerics> = useMemo(
     () => ({