Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove disable if frozen channel #2841

Merged
merged 4 commits into from
Dec 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 2 additions & 12 deletions package/src/components/Channel/Channel.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -371,10 +371,6 @@ export type ChannelPropsWithContext<
* Additional props passed to keyboard avoiding view
*/
additionalKeyboardAvoidingViewProps?: Partial<KeyboardAvoidingViewProps>;
/**
* Disables the channel UI if the channel is frozen
*/
disableIfFrozenChannel?: boolean;
/**
* When true, disables the KeyboardCompatibleView wrapper
*
Expand Down Expand Up @@ -503,7 +499,6 @@ const ChannelWithContext = <
CreatePollContent,
DateHeader = DateHeaderDefault,
deletedMessagesVisibilityType = 'always',
disableIfFrozenChannel = true,
disableKeyboardCompatibleView = false,
disableTypingIndicator,
dismissKeyboardOnMessageTouch = true,
Expand Down Expand Up @@ -1596,19 +1591,14 @@ const ChannelWithContext = <
}
};

const disabledValue = useMemo(
() => !!channel?.data?.frozen && disableIfFrozenChannel,
[channel.data?.frozen, disableIfFrozenChannel],
);

const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
channel,
overrideCapabilities: overrideOwnCapabilities,
});

const channelContext = useCreateChannelContext({
channel,
disabled: disabledValue,
disabled: !!channel?.data?.frozen,
EmptyStateIndicator,
enableMessageGroupingByUser,
enforceUniqueReaction,
Expand Down
4 changes: 2 additions & 2 deletions package/src/components/MessageInput/MessageInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1102,7 +1102,7 @@ export const MessageInput = <
const { isOnline } = useChatContext();
const ownCapabilities = useOwnCapabilitiesContext();

const { disabled, members, threadList, watchers } = useChannelContext<StreamChatGenerics>();
const { members, threadList, watchers } = useChannelContext<StreamChatGenerics>();

const {
additionalTextInputProps,
Expand Down Expand Up @@ -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 <SendMessageDisallowedIndicator />;
}

Expand Down
118 changes: 116 additions & 2 deletions package/src/components/MessageInput/__tests__/MessageInput.test.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(
<Chat client={chatClient}>
<Channel audioRecordingEnabled channel={channel}>
<MessageInput />
</Channel>
</Chat>,
);

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(
<Chat client={chatClient}>
<Channel audioRecordingEnabled channel={channel}>
<MessageInput />
</Channel>
</Chat>,
);

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(
<Chat client={chatClient}>
<Channel audioRecordingEnabled channel={channel}>
<MessageInput />
</Channel>
</Chat>,
);

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 <MessageInput />;
};

it('should not render the SendMessageDisallowedIndicator if we are editing a message, regardless of capabilities', async () => {
await initializeChannel(generateChannelResponse());

const { queryByTestId } = render(
<Chat client={chatClient}>
<Channel audioRecordingEnabled channel={channel}>
<EditingStateMessageInput />
</Channel>
</Chat>,
);

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();
});
});
});
Loading