Removing MessagesContext and ThreadContext

Author: vishalnarkhede

src/components/Channel/Channel.js

@@ -13,13 +13,7 @@ import LoadingIndicatorDefault from '../Indicators/LoadingIndicator';
 import KeyboardCompatibleViewDefault from '../KeyboardCompatibleView/KeyboardCompatibleView';
 import SuggestionsProvider from '../SuggestionsProvider/SuggestionsProvider';
 
-import {
-  ChannelContext,
-  ChatContext,
-  MessagesContext,
-  ThreadContext,
-  TranslationContext,
-} from '../../context';
+import { ChannelContext, ChatContext, TranslationContext } from '../../context';
 import { emojiData as emojiDataDefault } from '../../utils/utils';
 
 /**
@@ -458,48 +452,42 @@ const Channel = (props) => {
   };
 
   const channelContext = {
+    Attachment: props.Attachment,
     channel,
+    clearEditingState,
+    closeThread,
     disabled: channel?.data?.frozen && disableIfFrozenChannel,
+    editing,
+    editMessage,
+    emojiData,
     EmptyStateIndicator,
     error,
     eventHistory,
+    hasMore,
     lastRead,
     loading,
-    markRead: markReadThrottled,
-    members,
-    read,
-    setLastRead,
-    typing,
-    watcherCount,
-    watchers,
-  };
-
-  const messagesContext = {
-    Attachment: props.Attachment,
-    clearEditingState,
-    editing,
-    editMessage,
-    emojiData,
-    hasMore,
     loadingMore,
     loadMore: loadMoreThrottled,
+    loadMoreThread,
+    markRead: markReadThrottled,
+    members,
     Message: props.Message,
     messages,
+    openThread,
+    read,
     removeMessage,
     retrySendMessage,
     sendMessage,
     setEditingState,
-    updateMessage,
-  };
-
-  const threadContext = {
-    closeThread,
-    loadMoreThread,
-    openThread,
+    setLastRead,
     thread,
     threadHasMore,
     threadLoadingMore,
     threadMessages,
+    typing,
+    updateMessage,
+    watcherCount,
+    watchers,
   };
 
   if (!channel || error) {
@@ -521,11 +509,7 @@ const Channel = (props) => {
   return (
     <KeyboardCompatibleView enabled={!disableKeyboardCompatibleView}>
       <ChannelContext.Provider value={channelContext}>
-        <MessagesContext.Provider value={messagesContext}>
-          <ThreadContext.Provider value={threadContext}>
-            <SuggestionsProvider>{children}</SuggestionsProvider>
-          </ThreadContext.Provider>
-        </MessagesContext.Provider>
+        <SuggestionsProvider>{children}</SuggestionsProvider>
       </ChannelContext.Provider>
     </KeyboardCompatibleView>
   );

src/components/Message/Message.js

@@ -4,15 +4,10 @@ import PropTypes from 'prop-types';
 
 import MessageSimple from './MessageSimple/MessageSimple';
 
-import {
-  ChannelContext,
-  ChatContext,
-  KeyboardContext,
-  MessagesContext,
-} from '../../context';
+import { ChannelContext, ChatContext, KeyboardContext } from '../../context';
 
 /**
- * Since this component doesn't consume `messages` from `MessagesContext`,
+ * Since this component doesn't consume `messages` from `ChannelContext`,
  * we memoized and broke it up to prevent new messages from re-rendering
  * each individual Message component.
  */
@@ -211,17 +206,18 @@ DefaultMessageWithContext.displayName = 'messageWithContext';
  * @example ../docs/Message.md
  */
 const DefaultMessage = (props) => {
-  const { channel, disabled } = useContext(ChannelContext);
   const { client } = useContext(ChatContext);
   const { dismissKeyboard } = useContext(KeyboardContext);
   const {
+    channel,
+    disabled,
     editing,
     emojiData,
     removeMessage,
     retrySendMessage,
     setEditingState,
     updateMessage,
-  } = useContext(MessagesContext);
+  } = useContext(ChannelContext);
 
   return (
     <DefaultMessageWithContext

src/components/Message/MessageSimple/MessageContent.js

@@ -17,8 +17,6 @@ import ReactionPickerWrapper from '../../Reaction/ReactionPickerWrapper';
 import {
   ChannelContext,
   MessageContentContext,
-  MessagesContext,
-  ThreadContext,
   TranslationContext,
 } from '../../../context';
 import { themed } from '../../../styles/theme';
@@ -95,7 +93,7 @@ const MetaText = styled.Text`
 `;
 
 /**
- * Since this component doesn't consume `messages` from `MessagesContext`,
+ * Since this component doesn't consume `messages` from `ChannelContext`,
  * we memoized and broke it up to prevent new messages from re-rendering
  * each individual MessageContent component.
  */
@@ -157,7 +155,7 @@ const MessageContentWithContext = React.memo((props) => {
     threadList,
   } = props;
 
-  const { openThread } = useContext(ThreadContext);
+  const { openThread } = useContext(ChannelContext);
   const { t, tDateTimeParser } = useContext(TranslationContext);
 
   const actionSheetRef = useRef(null);
@@ -382,12 +380,12 @@ MessageContentWithContext.displayName = 'message.contentWithContext';
  * Child of MessageSimple that displays a message's content.
  */
 const MessageContent = (props) => {
-  const { disabled } = useContext(ChannelContext);
   const {
     Attachment = DefaultAttachment,
+    disabled,
     Message,
     retrySendMessage,
-  } = useContext(MessagesContext);
+  } = useContext(ChannelContext);
 
   return (
     <MessageContentWithContext

src/components/MessageInput/MessageInput.js

@@ -22,9 +22,7 @@ import {
   ChannelContext,
   ChatContext,
   KeyboardContext,
-  MessagesContext,
   SuggestionsContext,
-  ThreadContext,
   TranslationContext,
 } from '../../context';
 import iconClose from '../../images/icons/icon_close.png';
@@ -80,37 +78,34 @@ const InputBoxContainer = styled.View`
  * [Channel Context](https://getstream.github.io/stream-chat-react-native/#channelcontext),
  * [Chat Context](https://getstream.github.io/stream-chat-react-native/#chatcontext),
  * [Keyboard Context](https://getstream.github.io/stream-chat-react-native/#keyboardcontext),
- * [Messages Context](https://getstream.github.io/stream-chat-react-native/#messagescontext),
  * [Suggestions Context](https://getstream.github.io/stream-chat-react-native/#suggestionscontext),
- * [Thread Context](https://getstream.github.io/stream-chat-react-native/#threadcontext), and
  * [Translation Context](https://getstream.github.io/stream-chat-react-native/#translationcontext)
  *
  * @example ../docs/MessageInput.md
  */
 const MessageInput = (props) => {
   const channelContext = useContext(ChannelContext);
-  const { channel, disabled = false, members, watchers } = channelContext;
 
   const chatContext = useContext(ChatContext);
   const { client } = chatContext;
 
   const keyboardContext = useContext(KeyboardContext);
   const { dismissKeyboard } = keyboardContext;
 
-  const messagesContext = useContext(MessagesContext);
   const {
+    channel,
     clearEditingState,
+    disabled = false,
     editing,
     editMessage,
+    members,
     sendMessage: sendMessageContext,
-  } = messagesContext;
+    watchers,
+  } = channelContext;
 
   const suggestionsContext = useContext(SuggestionsContext);
   const { setInputBoxContainerRef } = suggestionsContext;
 
-  // TODO: not sure if this is actually needed but adding it in from the previously all encompassing usage of withChannelContext
-  const threadContext = useContext(ThreadContext);
-
   const translationContext = useContext(TranslationContext);
   const { t } = translationContext;
 
@@ -144,9 +139,7 @@ const MessageInput = (props) => {
     ...channelContext,
     ...chatContext,
     ...keyboardContext,
-    ...messagesContext,
     ...suggestionsContext,
-    ...threadContext,
     ...translationContext,
   };
 

src/components/MessageInput/SendButton.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from '@stream-io/styled-components';
 import PropTypes from 'prop-types';
 
-import { MessagesContext } from '../../context';
+import { ChannelContext } from '../../context';
 import iconEdit from '../../images/icons/icon_edit.png';
 import iconSendNewMessage from '../../images/icons/icon_new_message.png';
 import { themed } from '../../styles/theme';
@@ -24,7 +24,7 @@ const SendButtonIcon = styled.Image`
  * @example ../docs/SendButton.md
  */
 const SendButton = ({ disabled = false, sendMessage }) => {
-  const { editing } = useContext(MessagesContext);
+  const { editing } = useContext(ChannelContext);
   return (
     <Container disabled={disabled} onPress={sendMessage} testID='send-button'>
       <SendButtonIcon source={editing ? iconEdit : iconSendNewMessage} />

src/components/MessageList/MessageList.js

@@ -15,13 +15,7 @@ import { getLastReceivedMessage } from './utils/getLastReceivedMessage';
 
 import DefaultMessage from '../Message/Message';
 
-import {
-  ChannelContext,
-  ChatContext,
-  MessagesContext,
-  ThreadContext,
-  TranslationContext,
-} from '../../context';
+import { ChannelContext, ChatContext, TranslationContext } from '../../context';
 
 const ListContainer = styled.FlatList`
   flex: 1;
@@ -52,8 +46,6 @@ const ErrorNotification = styled.View`
  *
  * [ChannelContext](https://getstream.github.io/stream-chat-react-native/#channelcontext)
  * [ChatContext](https://getstream.github.io/stream-chat-react-native/#chatcontext)
- * [MessagesContext](https://getstream.github.io/stream-chat-react-native/#messagescontext)
- * [ThreadContext](https://getstream.github.io/stream-chat-react-native/#threadcontext)
  * [TranslationContext](https://getstream.github.io/stream-chat-react-native/#translationcontext)
  *
  * @example ../docs/MessageList.md
@@ -76,17 +68,18 @@ const MessageList = (props) => {
     TypingIndicator = DefaultTypingIndicator,
   } = props;
 
-  const { channel, disabled, EmptyStateIndicator, markRead } = useContext(
-    ChannelContext,
-  );
-  const { client, isOnline } = useContext(ChatContext);
   const {
+    channel,
     clearEditingState,
+    disabled,
     editing,
+    EmptyStateIndicator,
     loadMore: mainLoadMore,
+    loadMoreThread,
+    markRead,
     Message: MessageFromContext,
-  } = useContext(MessagesContext);
-  const { loadMoreThread } = useContext(ThreadContext);
+  } = useContext(ChannelContext);
+  const { client, isOnline } = useContext(ChatContext);
   const { t } = useContext(TranslationContext);
 
   const Message = MessageFromProps || MessageFromContext;

src/components/MessageList/hooks/useMessageList.js

@@ -4,16 +4,10 @@ import { getGroupStyles } from '../utils/getGroupStyles';
 import { getReadStates } from '../utils/getReadStates';
 import { insertDates } from '../utils/insertDates';
 
-import {
-  ChannelContext,
-  MessagesContext,
-  ThreadContext,
-} from '../../../context';
+import { ChannelContext } from '../../../context';
 
 export const useMessageList = ({ noGroupByUser, threadList }) => {
-  const { read } = useContext(ChannelContext);
-  const { messages } = useContext(MessagesContext);
-  const { threadMessages } = useContext(ThreadContext);
+  const { messages, read, threadMessages } = useContext(ChannelContext);
 
   const messageList = threadList ? threadMessages : messages;
   const readList = threadList ? {} : read;

src/components/Thread/Thread.js

@@ -6,13 +6,7 @@ import DefaultMessage from '../Message/Message';
 import DefaultMessageInput from '../MessageInput/MessageInput';
 import DefaultMessageList from '../MessageList/MessageList';
 
-import {
-  ChannelContext,
-  ChatContext,
-  MessagesContext,
-  ThreadContext,
-  TranslationContext,
-} from '../../context';
+import { ChannelContext, ChatContext, TranslationContext } from '../../context';
 import { themed } from '../../styles/theme';
 
 const NewThread = styled.View`
@@ -44,15 +38,15 @@ const Thread = (props) => {
   const translationContext = useContext(TranslationContext);
   const { t } = translationContext;
   const channelContext = useContext(ChannelContext);
-  const { channel } = channelContext;
-  const { Message: MessageFromContext } = useContext(MessagesContext);
   const {
+    channel,
     loadMoreThread,
+    Message: MessageFromContext,
     thread,
     threadHasMore = true,
     threadLoadingMore,
     threadMessages,
-  } = useContext(ThreadContext);
+  } = channelContext;
   const chatContext = useContext(ChatContext);
   const {
     autoFocus = true,

src/context.js

@@ -7,9 +7,7 @@ export const KeyboardContext = React.createContext({
   dismissKeyboard: Keyboard.dismiss,
 });
 export const MessageContentContext = React.createContext({});
-export const MessagesContext = React.createContext({});
 export const SuggestionsContext = React.createContext({});
-export const ThreadContext = React.createContext({});
 export const TranslationContext = React.createContext({
   t: () => 'Value not found',
 });
@@ -30,18 +28,10 @@ export function withMessageContentContext(OriginalComponent) {
   return getContextAwareComponent(MessageContentContext, OriginalComponent);
 }
 
-export function withMessagesContext(OriginalComponent) {
-  return getContextAwareComponent(MessagesContext, OriginalComponent);
-}
-
 export function withSuggestionsContext(OriginalComponent) {
   return getContextAwareComponent(SuggestionsContext, OriginalComponent);
 }
 
-export function withThreadContext(OriginalComponent) {
-  return getContextAwareComponent(ThreadContext, OriginalComponent);
-}
-
 export function withTranslationContext(OriginalComponent) {
   const ContextAwareComponent = getContextAwareComponent(
     TranslationContext,