diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index 64d0e9dcf5..ca1abe476c 100644 --- a/package/src/components/MessageInput/MessageInput.tsx +++ b/package/src/components/MessageInput/MessageInput.tsx @@ -222,13 +222,13 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => { isOnline, members, Reply, + threadList, SendButton, sendMessage, showPollCreationDialog, ShowThreadMessageInChannelButton, StartAudioRecordingButton, StopMessageStreamingButton, - threadList, watchers, } = props; diff --git a/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx b/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx index 8479e5db83..94df984e79 100644 --- a/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx +++ b/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx @@ -1,60 +1,35 @@ -import React from 'react'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import React, { useCallback } from 'react'; +import { Pressable, StyleSheet, Text, View } from 'react-native'; -import { - MessageInputContextValue, - useMessageInputContext, -} from '../../contexts/messageInputContext/MessageInputContext'; +import { MessageComposerState } from 'stream-chat'; + +import { ChannelContextValue } from '../../contexts/channelContext/ChannelContext'; +import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext'; import { TranslationContextValue, useTranslationContext, } from '../../contexts/translationContext/TranslationContext'; +import { useStateStore } from '../../hooks/useStateStore'; import { Check } from '../../icons'; -const styles = StyleSheet.create({ - checkBox: { - alignItems: 'center', - borderRadius: 3, - borderWidth: 2, - height: 16, - justifyContent: 'center', - width: 16, - }, - container: { - flexDirection: 'row', - marginHorizontal: 2, - marginTop: 8, - }, - innerContainer: { - flexDirection: 'row', - }, - text: { - fontSize: 13, - marginLeft: 12, - }, +const stateSelector = (state: MessageComposerState) => ({ + showReplyInChannel: state.showReplyInChannel, }); export type ShowThreadMessageInChannelButtonWithContextProps = Pick< - MessageInputContextValue, - 'sendThreadMessageInChannel' | 'setSendThreadMessageInChannel' + ThreadContextValue, + 'allowThreadMessagesInChannel' > & - Pick & - Pick & { - threadList?: boolean; - }; + Pick & { threadList?: ChannelContextValue['threadList'] }; export const ShowThreadMessageInChannelButtonWithContext = ( props: ShowThreadMessageInChannelButtonWithContextProps, ) => { - const { - allowThreadMessagesInChannel, - sendThreadMessageInChannel, - setSendThreadMessageInChannel, - t, - threadList, - } = props; + const { allowThreadMessagesInChannel, t, threadList } = props; + const messageComposer = useMessageComposer(); + const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector); const { theme: { @@ -72,20 +47,22 @@ export const ShowThreadMessageInChannelButtonWithContext = ( }, } = useTheme(); + const onPressHandler = useCallback(() => { + messageComposer.toggleShowReplyInChannel(); + }, [messageComposer]); + if (!threadList || !allowThreadMessagesInChannel) { return null; } return ( - setSendThreadMessageInChannel((prevSendInChannel) => !prevSendInChannel)} - > + ({ opacity: pressed ? 0.8 : 1 })}> - {sendThreadMessageInChannel && ( - - )} + {showReplyInChannel && } {t('Also send to channel')} - + ); }; @@ -113,13 +88,11 @@ const areEqual = ( ) => { const { allowThreadMessagesInChannel: prevAllowThreadMessagesInChannel, - sendThreadMessageInChannel: prevSendThreadMessageInChannel, t: prevT, threadList: prevThreadList, } = prevProps; const { allowThreadMessagesInChannel: nextAllowThreadMessagesInChannel, - sendThreadMessageInChannel: nexSendThreadMessageInChannel, t: nextT, threadList: nextThreadList, } = nextProps; @@ -129,12 +102,6 @@ const areEqual = ( return false; } - const sendThreadMessageInChannelEqual = - prevSendThreadMessageInChannel === nexSendThreadMessageInChannel; - if (!sendThreadMessageInChannelEqual) { - return false; - } - const threadListEqual = prevThreadList === nextThreadList; if (!threadListEqual) { return false; @@ -160,14 +127,11 @@ export type ShowThreadMessageInChannelButtonProps = export const ShowThreadMessageInChannelButton = (props: ShowThreadMessageInChannelButtonProps) => { const { t } = useTranslationContext(); const { allowThreadMessagesInChannel } = useThreadContext(); - const { sendThreadMessageInChannel, setSendThreadMessageInChannel } = useMessageInputContext(); return ( ; + inputBoxRef: React.RefObject; openAttachmentPicker: () => void; openFilePicker: () => void; /** @@ -98,13 +97,11 @@ export type LocalMessageInputContext = { pickAndUploadImageFromNativePicker: () => Promise; pickFile: () => Promise; selectedPicker?: 'images'; - sendMessage: (params?: { customMessageData?: Partial }) => Promise; - sendThreadMessageInChannel: boolean; + sendMessage: () => Promise; /** * Ref callback to set reference on input box */ - setInputBoxRef: LegacyRef | undefined; - setSendThreadMessageInChannel: React.Dispatch>; + setInputBoxRef: Ref | undefined; /** * Function for taking a photo and uploading it */ @@ -439,7 +436,6 @@ export const MessageInputProvider = ({ const { t } = useTranslationContext(); const inputBoxRef = useRef(null); - const [sendThreadMessageInChannel, setSendThreadMessageInChannel] = useState(false); const [showPollCreationDialog, setShowPollCreationDialog] = useState(false); const defaultOpenPollCreationDialog = useCallback(() => setShowPollCreationDialog(true), []); @@ -453,11 +449,6 @@ export const MessageInputProvider = ({ const { attachmentManager, editedMessage } = messageComposer; const { availableUploadSlots } = useAttachmentManagerState(); - const threadId = thread?.id; - useEffect(() => { - setSendThreadMessageInChannel(false); - }, [threadId]); - /** * These are the RN SDK specific middlewares that are added to the message composer to provide the default behaviour. * TODO: Discuss and decide if we provide them by default in the SDK or leave it to the user to add them if they want the feature. @@ -638,14 +629,8 @@ export const MessageInputProvider = ({ messageComposer.clear(); } await value.sendMessage({ - localMessage: { - ...localMessage, - show_in_channel: sendThreadMessageInChannel || undefined, - }, - message: { - ...message, - show_in_channel: sendThreadMessageInChannel || undefined, - }, + localMessage, + message, options: sendOptions, }); } catch (error) { @@ -697,9 +682,7 @@ export const MessageInputProvider = ({ openFilePicker: pickFile, pickAndUploadImageFromNativePicker, pickFile, - sendThreadMessageInChannel, setInputBoxRef, - setSendThreadMessageInChannel, takeAndUploadImage, thread, toggleAttachmentPicker, diff --git a/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts b/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts index 443176c064..033c99170d 100644 --- a/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts +++ b/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts @@ -64,10 +64,8 @@ export const useCreateMessageInputContext = ({ SendButton, sendMessage, SendMessageDisallowedIndicator, - sendThreadMessageInChannel, setInputBoxRef, setInputRef, - setSendThreadMessageInChannel, showPollCreationDialog, ShowThreadMessageInChannelButton, StartAudioRecordingButton, @@ -143,10 +141,8 @@ export const useCreateMessageInputContext = ({ SendButton, sendMessage, SendMessageDisallowedIndicator, - sendThreadMessageInChannel, setInputBoxRef, setInputRef, - setSendThreadMessageInChannel, showPollCreationDialog, ShowThreadMessageInChannelButton, StartAudioRecordingButton, @@ -158,14 +154,7 @@ export const useCreateMessageInputContext = ({ VideoRecorderSelectorIcon, }), // eslint-disable-next-line react-hooks/exhaustive-deps - [ - cooldownEndsAt, - isCommandUIEnabled, - sendThreadMessageInChannel, - threadId, - showPollCreationDialog, - selectedPicker, - ], + [cooldownEndsAt, isCommandUIEnabled, threadId, showPollCreationDialog, selectedPicker], ); return messageInputContext;