stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

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

@@ -1,28 +1,29 @@
 import React, { useContext, useEffect } from 'react';
 import { View } from 'react-native';
+
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import { StreamChat } from 'stream-chat';
 
-import { Channel } from '../Channel';
-
-import { Attachment } from '../../Attachment/Attachment';
-import { Chat } from '../../Chat/Chat';
-
 import { ChannelContext, ChannelProvider } from '../../../contexts/channelContext/ChannelContext';
+import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
 import {
   MessagesContext,
   MessagesProvider,
 } from '../../../contexts/messagesContext/MessagesContext';
+
 import { ThreadContext, ThreadProvider } from '../../../contexts/threadContext/ThreadContext';
 
-import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDeleted';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Attachment } from '../../Attachment/Attachment';
+import { Chat } from '../../Chat/Chat';
+import { Channel } from '../Channel';
 
 // This component is used for performing effects in a component that consumes ChannelContext,
 // i.e. making use of the callbacks & values provided by the Channel component.
@@ -49,18 +50,20 @@ const messages = [generateMessage({ user })];
 
 const renderComponent = (props = {}, callback = () => {}, context = ChannelContext) =>
   render(
-    <Chat client={chatClient}>
-      <Channel {...props}>
-        {props.children}
-        <CallbackEffectWithContext {...{ callback, context }} />
-      </Channel>
-    </Chat>,
+    <ChannelsStateProvider>
+      <Chat client={chatClient}>
+        <Channel {...props}>
+          {props.children}
+          <CallbackEffectWithContext {...{ callback, context }} />
+        </Channel>
+      </Chat>
+    </ChannelsStateProvider>,
   );
 
 describe('Channel', () => {
   beforeEach(async () => {
     const members = [generateMember({ user })];
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members,
       messages,
     });
@@ -151,20 +154,22 @@ describe('Channel', () => {
     );
 
     rerender(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <CallbackEffectWithContext
-            callback={({ openThread, thread }) => {
-              if (!thread) {
-                openThread(threadMessage);
-              } else {
-                hasThread(thread.id);
-              }
-            }}
-            context={ThreadContext}
-          />
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <CallbackEffectWithContext
+              callback={({ openThread, thread }) => {
+                if (!thread) {
+                  openThread(threadMessage);
+                } else {
+                  hasThread(thread.id);
+                }
+              }}
+              context={ThreadContext}
+            />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
     await waitFor(() => expect(hasThread).toHaveBeenCalledWith(threadMessage.id));
   });
@@ -172,7 +177,7 @@ describe('Channel', () => {
   const queryChannelWithNewMessages = (newMessages) =>
     // generate new channel mock from existing channel with new messages added
     getOrCreateChannelApi(
-      generateChannel({
+      generateChannelResponse({
         channel: {
           config: channel.getConfig(),
           id: channel.id,

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

@@ -0,0 +1,376 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { allOwnCapabilities } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { sendMessageApi } from '../../../mock-builders/api/sendMessage';
+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 { registerNativeHandlers } from '../../../native';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageInput } from '../../MessageInput/MessageInput';
+import { MessageList } from '../../MessageList/MessageList';
+
+describe('Own capabilities', () => {
+  const clientUser = generateUser();
+  const otherUser = generateUser();
+
+  const sentMessage = generateMessage({
+    user: clientUser,
+  });
+  const receivedMessage = generateMessage({
+    user: otherUser,
+  });
+
+  let chatClient;
+  let channel;
+
+  const initializeChannel = async (c) => {
+    useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
+    channel = chatClient.channel('messaging');
+
+    await channel.watch();
+  };
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(clientUser);
+    registerNativeHandlers({
+      FlatList,
+    });
+  });
+
+  const getComponent = (props = {}) => (
+    <OverlayProvider>
+      <Chat client={chatClient}>
+        <Channel channel={channel} {...props}>
+          <MessageList FlatList={FlatList} />
+          <MessageInput />
+        </Channel>
+      </Chat>
+    </OverlayProvider>
+  );
+
+  const generateChannelWithCapabilities = async (capabilities = []) => {
+    const c = generateChannelResponse({
+      channel: {
+        own_capabilities: capabilities,
+      },
+      messages: [sentMessage, receivedMessage],
+    });
+    await initializeChannel(c);
+  };
+
+  const renderChannelAndOpenMessageActionsList = async (targetMessage, props = {}) => {
+    const { findByTestId, queryByTestId, queryByText, unmount } = render(getComponent(props));
+    await waitFor(() => queryByText(targetMessage.text));
+
+    act(() => {
+      fireEvent(queryByText(targetMessage.text), 'onLongPress');
+    });
+
+    await waitFor(() => expect(!!queryByTestId('message-action-list')).toBeTruthy());
+
+    return { findByTestId, queryByTestId, queryByText, unmount };
+  };
+
+  describe(`${allOwnCapabilities.sendReply} capability`, () => {
+    it(`should render "Thread Reply" message action when ${allOwnCapabilities.sendReply} capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.sendReply]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByTestId('threadReply-list-item')).toBeTruthy();
+    });
+
+    it('should not render "Thread Reply" message action when "send-reply" capability is disabled', async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByTestId('threadReply-list-item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.sendReply" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.sendReply]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage, {
+        overrideOwnCapabilities: {
+          sendReply: false,
+        },
+      });
+      expect(!!queryByTestId('threadReply-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.banChannelMembers} capability`, () => {
+    it(`should render "Block User" message action when ${allOwnCapabilities.banChannelMembers} capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.banChannelMembers]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('blockUser-list-item')).toBeTruthy();
+    });
+
+    it(`should not render "Block User" message action when ${allOwnCapabilities.banChannelMembers} capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('blockUser-list-item')).toBeFalsy();
+    });
+
+    it(`should override capability from "overrideOwnCapability.banChannelMembers" prop`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.banChannelMembers]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          banChannelMembers: false,
+        },
+      });
+      expect(!!queryByTestId('blockUser-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.deleteAnyMessage} capability`, () => {
+    it(`should render "Delete Message" action for received message when "${allOwnCapabilities.deleteAnyMessage}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities(['delete-any-message']);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('deleteMessage-list-item')).toBeTruthy();
+    });
+
+    it(`should not render "Delete Message" action for received message when "${allOwnCapabilities.deleteAnyMessage}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.deleteAnyMessage" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.deleteAnyMessage]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          deleteAnyMessage: false,
+        },
+      });
+      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.deleteOwnMessage} capability`, () => {
+    it(`should render "Delete Message" action for sent message when "${allOwnCapabilities.deleteOwnMessage}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.deleteOwnMessage]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByTestId('deleteMessage-list-item')).toBeTruthy();
+    });
+
+    it(`should not render "Delete Message" action for sent message when "${allOwnCapabilities.deleteOwnMessage}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.deleteOwnMessage" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.deleteOwnMessage]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage, {
+        overrideOwnCapabilities: {
+          deleteOwnMessage: false,
+        },
+      });
+      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.updateAnyMessage} capability`, () => {
+    it(`should render "Edit Message" action for received message when "${allOwnCapabilities.updateAnyMessage}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.updateAnyMessage]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('editMessage-list-item')).toBeTruthy();
+    });
+
+    it(`should not render "Edit Message" action for received message when "${allOwnCapabilities.updateAnyMessage}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('editMessage-list-item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.updateAnyMessage" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.updateAnyMessage]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          updateAnyMessage: false,
+        },
+      });
+      expect(!!queryByTestId('editMessage-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.flagMessage} capability`, () => {
+    it(`should render "Flag Message" action for sent message when "${allOwnCapabilities.flagMessage}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.flagMessage]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('flagMessage-list-item')).toBeTruthy();
+    });
+
+    it(`should not render "Flag Message" action for sent message when "${allOwnCapabilities.flagMessage}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('flagMessage-list-item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.deleteOwnMessage" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.flagMessage]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          flagMessage: false,
+        },
+      });
+      expect(!!queryByTestId('flagMessage-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.pinMessage} capability`, () => {
+    it(`should render "Pin Message" action for sent message when "${allOwnCapabilities.pinMessage}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.pinMessage]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('pinMessage-list-item')).toBeTruthy();
+    });
+
+    it(`should not render "Pin Message" action for sent message when "${allOwnCapabilities.pinMessage}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('pinMessage-list-item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.pinMessage" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.pinMessage]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          pinMessage: false,
+        },
+      });
+      expect(!!queryByTestId('pinMessage-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.quoteMessage} capability`, () => {
+    it(`should render "Reply" action for sent message when "${allOwnCapabilities.quoteMessage}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.quoteMessage]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('quotedReply-list-item')).toBeTruthy();
+    });
+
+    it(`should not render "Reply" action for sent message when "${allOwnCapabilities.quoteMessage}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('quotedReply-list-item')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.quoteMessage" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.quoteMessage]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          quoteMessage: false,
+        },
+      });
+      expect(!!queryByTestId('quotedReply-list-item')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.sendReaction} capability`, () => {
+    it(`should render reaction selector when "${allOwnCapabilities.sendReaction}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.sendReaction]);
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('overlay-reaction-list')).toBeTruthy();
+    });
+
+    it(`should not render reaction selector when "${allOwnCapabilities.sendReaction}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByTestId('overlay-reaction-list')).toBeFalsy();
+    });
+
+    it('should override capability from "overrideOwnCapability.sendReaction" prop', async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.sendReaction]);
+
+      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+        overrideOwnCapabilities: {
+          sendReaction: false,
+        },
+      });
+      expect(!!queryByTestId('overlay-reaction-list')).toBeFalsy();
+    });
+  });
+
+  describe(`${allOwnCapabilities.sendMessage} capability`, () => {
+    it(`should not render SendMessageDisallowedIndicator when "${allOwnCapabilities.sendMessage}" capability is enabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.sendMessage]);
+      const { queryByTestId } = render(getComponent());
+
+      await waitFor(() => expect(!!queryByTestId('send-message-disallowed-indicator')).toBeFalsy());
+    });
+
+    it(`should render SendMessageDisallowedIndicator when "${allOwnCapabilities.sendMessage}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities();
+      const { queryByTestId } = render(getComponent());
+
+      await waitFor(() =>
+        expect(!!queryByTestId('send-message-disallowed-indicator')).toBeTruthy(),
+      );
+    });
+  });
+
+  describe(`${allOwnCapabilities.sendLinks} capability`, () => {
+    it(`should not allow sending links when "${allOwnCapabilities.sendLinks}" capability is disabled`, async () => {
+      await generateChannelWithCapabilities([allOwnCapabilities.sendMessage]);
+      const { queryByTestId } = render(
+        getComponent({
+          initialValue: 'Awesome repository https://github.com/GetStream/stream-chat-react-native',
+        }),
+      );
+
+      const sendMessage = jest.fn();
+      channel.sendMessage = sendMessage;
+      act(() => {
+        fireEvent(queryByTestId('send-button'), 'onPress');
+      });
+
+      await waitFor(() => expect(sendMessage).toHaveBeenCalledTimes(0));
+    });
+  });
+
+  it(`should allow sending links when "${allOwnCapabilities.sendLinks}" capability is enabled`, async () => {
+    await generateChannelWithCapabilities([
+      allOwnCapabilities.sendMessage,
+      allOwnCapabilities.sendLinks,
+    ]);
+    const mockFn = jest.fn();
+    const { queryByTestId } = render(
+      getComponent({
+        doSendMessageRequest: () => {
+          mockFn();
+          return sendMessageApi();
+        },
+        initialValue: 'Awesome repository https://github.com/GetStream/stream-chat-react-native',
+      }),
+    );
+
+    act(() => {
+      fireEvent(queryByTestId('send-button'), 'onPress');
+    });
+
+    await waitFor(() => expect(mockFn).toHaveBeenCalledTimes(1));
+  });
+});

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

@@ -31,6 +31,7 @@ export const useCreateChannelContext = <
   hideDateSeparators,
   hideStickyDateHeader,
   isAdmin,
+  isChannelActive,
   isModerator,
   isOwner,
   lastRead,
@@ -42,14 +43,13 @@ export const useCreateChannelContext = <
   members,
   NetworkDownIndicator,
   read,
-  readEventsEnabled,
   reloadChannel,
   scrollToFirstUnreadThreshold,
   setLastRead,
   setTargetedMessage,
   StickyHeader,
   targetedMessage,
-  typingEventsEnabled,
+  threadList,
   watcherCount,
   watchers,
 }: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>) => {
@@ -73,6 +73,7 @@ export const useCreateChannelContext = <
       hideDateSeparators,
       hideStickyDateHeader,
       isAdmin,
+      isChannelActive,
       isModerator,
       isOwner,
       lastRead,
@@ -84,14 +85,13 @@ export const useCreateChannelContext = <
       members,
       NetworkDownIndicator,
       read,
-      readEventsEnabled,
       reloadChannel,
       scrollToFirstUnreadThreshold,
       setLastRead,
       setTargetedMessage,
       StickyHeader,
       targetedMessage,
-      typingEventsEnabled,
+      threadList,
       watcherCount,
       watchers,
     }),
@@ -99,14 +99,14 @@ export const useCreateChannelContext = <
       channelId,
       disabled,
       error,
+      isChannelActive,
       lastReadTime,
       loading,
       membersLength,
-      readEventsEnabled,
       readUsersLength,
       readUsersLastReads,
       targetedMessage,
-      typingEventsEnabled,
+      threadList,
       watcherCount,
     ],
   );

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

@@ -30,6 +30,7 @@ export const useCreateInputMessageInputContext = <
   clearQuotedMessageState,
   CommandsButton,
   compressImageQuality,
+  CooldownTimer,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -53,11 +54,11 @@ export const useCreateInputMessageInputContext = <
   SendButton,
   sendImageAsync,
   sendMessage,
+  SendMessageDisallowedIndicator,
   setInputRef,
   setQuotedMessageState,
   ShowThreadMessageInChannelButton,
   UploadProgressIndicator,
-  uploadsEnabled,
 }: InputMessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us> & {
   /**
    * To ensure we allow re-render, when channel is changed
@@ -82,6 +83,7 @@ export const useCreateInputMessageInputContext = <
         clearQuotedMessageState,
         CommandsButton,
         compressImageQuality,
+        CooldownTimer,
         doDocUploadRequest,
         doImageUploadRequest,
         editing,
@@ -105,11 +107,11 @@ export const useCreateInputMessageInputContext = <
         SendButton,
         sendImageAsync,
         sendMessage,
+        SendMessageDisallowedIndicator,
         setInputRef,
         setQuotedMessageState,
         ShowThreadMessageInChannelButton,
         UploadProgressIndicator,
-        uploadsEnabled,
       }),
       [
         compressImageQuality,
@@ -118,7 +120,6 @@ export const useCreateInputMessageInputContext = <
         initialValue,
         maxMessageLength,
         quotedMessageId,
-        uploadsEnabled,
       ],
     );