diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index 272f2e657..27b4546d5 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/package/src/components/Channel/Channel.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react'; import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native'; import debounce from 'lodash/debounce'; @@ -371,10 +371,6 @@ export type ChannelPropsWithContext< * Additional props passed to keyboard avoiding view */ additionalKeyboardAvoidingViewProps?: Partial; - /** - * Disables the channel UI if the channel is frozen - */ - disableIfFrozenChannel?: boolean; /** * When true, disables the KeyboardCompatibleView wrapper * @@ -503,7 +499,6 @@ const ChannelWithContext = < CreatePollContent, DateHeader = DateHeaderDefault, deletedMessagesVisibilityType = 'always', - disableIfFrozenChannel = true, disableKeyboardCompatibleView = false, disableTypingIndicator, dismissKeyboardOnMessageTouch = true, @@ -1596,11 +1591,6 @@ const ChannelWithContext = < } }; - const disabledValue = useMemo( - () => !!channel?.data?.frozen && disableIfFrozenChannel, - [channel.data?.frozen, disableIfFrozenChannel], - ); - const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({ channel, overrideCapabilities: overrideOwnCapabilities, @@ -1608,7 +1598,7 @@ const ChannelWithContext = < const channelContext = useCreateChannelContext({ channel, - disabled: disabledValue, + disabled: !!channel?.data?.frozen, EmptyStateIndicator, enableMessageGroupingByUser, enforceUniqueReaction, diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index 353504e79..63a6ff159 100644 --- a/package/src/components/MessageInput/MessageInput.tsx +++ b/package/src/components/MessageInput/MessageInput.tsx @@ -1102,7 +1102,7 @@ export const MessageInput = < const { isOnline } = useChatContext(); const ownCapabilities = useOwnCapabilitiesContext(); - const { disabled, members, threadList, watchers } = useChannelContext(); + const { members, threadList, watchers } = useChannelContext(); const { additionalTextInputProps, @@ -1181,7 +1181,7 @@ export const MessageInput = < * Disable the message input if the channel is frozen, or the user doesn't have the capability to send a message. * Enable it in frozen mode, if it the input has editing state. */ - if ((disabled || !ownCapabilities.sendMessage) && !editing && SendMessageDisallowedIndicator) { + if (!ownCapabilities.sendMessage && !editing && SendMessageDisallowedIndicator) { return ; } diff --git a/package/src/components/MessageInput/__tests__/MessageInput.test.js b/package/src/components/MessageInput/__tests__/MessageInput.test.js index 68b8c1681..c76e38fdf 100644 --- a/package/src/components/MessageInput/__tests__/MessageInput.test.js +++ b/package/src/components/MessageInput/__tests__/MessageInput.test.js @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Alert } from 'react-native'; -import { cleanup, fireEvent, render, userEvent, waitFor } from '@testing-library/react-native'; +import { act, cleanup, fireEvent, render, userEvent, waitFor } from '@testing-library/react-native'; +import { useMessagesContext } from '../../../contexts'; import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext'; import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider'; import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel'; @@ -188,4 +189,117 @@ describe('MessageInput', () => { expect(Alert.alert).toHaveBeenCalledWith('Hold to start recording.'); }); }); + + it('should render the SendMessageDisallowedIndicator if the send-message capability is not present', async () => { + await initializeChannel(generateChannelResponse()); + + const { queryByTestId } = render( + + + + + , + ); + + await waitFor(() => { + expect(queryByTestId('send-message-disallowed-indicator')).toBeNull(); + }); + + act(() => { + chatClient.dispatchEvent({ + cid: channel.data.cid, + own_capabilities: channel.data.own_capabilities.filter( + (capability) => capability !== 'send-message', + ), + type: 'capabilities.changed', + }); + }); + + await waitFor(() => { + expect(queryByTestId('send-message-disallowed-indicator')).toBeTruthy(); + }); + }); + + it('should not render the SendMessageDisallowedIndicator if the channel is frozen and the send-message capability is present', async () => { + await initializeChannel(generateChannelResponse({ channel: { frozen: true } })); + + const { queryByTestId } = render( + + + + + , + ); + + await waitFor(() => { + expect(queryByTestId('send-message-disallowed-indicator')).toBeNull(); + }); + }); + + it('should render the SendMessageDisallowedIndicator in a frozen channel only if the send-message capability is not present', async () => { + await initializeChannel(generateChannelResponse({ channel: { frozen: true } })); + + const { queryByTestId } = render( + + + + + , + ); + + act(() => { + chatClient.dispatchEvent({ + channel: { + ...channel.data, + own_capabilities: channel.data.own_capabilities.filter( + (capability) => capability !== 'send-message', + ), + }, + cid: channel.data.cid, + type: 'channel.updated', + }); + }); + + await waitFor(() => { + expect(queryByTestId('send-message-disallowed-indicator')).toBeTruthy(); + }); + }); + + const EditingStateMessageInput = () => { + const { setEditingState } = useMessagesContext(); + useEffect(() => { + setEditingState({ id: 'some-message-id' }); + }, []); + return ; + }; + + it('should not render the SendMessageDisallowedIndicator if we are editing a message, regardless of capabilities', async () => { + await initializeChannel(generateChannelResponse()); + + const { queryByTestId } = render( + + + + + , + ); + + await waitFor(() => { + expect(queryByTestId('send-message-disallowed-indicator')).toBeNull(); + }); + + act(() => { + chatClient.dispatchEvent({ + cid: channel.data.cid, + own_capabilities: channel.data.own_capabilities.filter( + (capability) => capability !== 'send-message', + ), + type: 'capabilities.changed', + }); + }); + + await waitFor(() => { + expect(queryByTestId('send-message-disallowed-indicator')).toBeNull(); + }); + }); });