Merge pull request #351 from GetStream/vishal/context-cleanup

Removing MessagesContext and ThreadContext

Author: vishalnarkhede

CHANGELOG.md

@@ -23,57 +23,6 @@
 
 - On upgrading to this release, ensure events and any custom handling functions (ex: `onAddedToChannel` or `onMessageNew`) are properly processed and update the list UI as expected.
 
-*ChannelContext*
-
-- We have split the `ChannelContext` into three separate contexts to further modularize the code and reduce renders as items in context change. The following contexts now contain the following values, previously all held within the `ChannelContext`:
-
-  - `ChannelContext`:
-
-    - `channel`
-    - `disabled`
-    - `EmptyStateIndicator`
-    - `error`
-    - `eventHistory`
-    - `lastRead`
-    - `loading`
-    - `markRead`
-    - `members`
-    - `read`
-    - `setLastRead`
-    - `typing`
-    - `watcherCount`
-    - `watchers`
-
-  - `MessagesContext`
-
-    - `Attachment`
-    - `clearEditingState`
-    - `editing`
-    - `editMessage`
-    - `emojiData`
-    - `hasMore`
-    - `loadingMore`
-    - `loadMore`
-    - `Message`
-    - `messages`
-    - `removeMessage`
-    - `retrySendMessage`
-    - `sendMessage`
-    - `setEditingState`
-    - `updateMessage`
-
-  - `ThreadContext`
-
-    - `closeThread`
-    - `loadMoreThread`
-    - `openThread`
-    - `thread`
-    - `threadHasMore`
-    - `threadLoadingMore`
-    - `threadMessages`
-
-- All contexts are exported and any values can be accessed through a higher order component (ex: `withMessagesContext`) or the `useContext` hook (ex: `const { messages } = useContext(MessagesContext);`)
-
 *FileUploadPreview*
 
 - We fixed a bug for being unable to remove a file from the `MessageInput` and made it consistent to `ImageUploadPreview`

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/Channel/__tests__/Channel.test.js

@@ -13,14 +13,9 @@ import { getTestClientWithUser } from 'mock-builders/mock';
 
 import Channel from '../Channel';
 
-import Attachment from '../../Attachment/Attachment';
 import Chat from '../../Chat/Chat';
 
-import {
-  ChannelContext,
-  MessagesContext,
-  ThreadContext,
-} from '../../../context';
+import { ChannelContext } from '../../../context';
 
 // 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.
@@ -173,17 +168,13 @@ describe('Channel', () => {
     const hasThread = jest.fn();
     // this renders Channel, calls openThread from a child context consumer with a message,
     // and then calls hasThread with the thread id if it was set.
-    renderComponent(
-      { channel },
-      ({ openThread, thread }) => {
-        if (!thread) {
-          openThread(threadMessage);
-        } else {
-          hasThread(thread.id);
-        }
-      },
-      ThreadContext,
-    );
+    renderComponent({ channel }, ({ openThread, thread }) => {
+      if (!thread) {
+        openThread(threadMessage);
+      } else {
+        hasThread(thread.id);
+      }
+    });
     await waitFor(() =>
       expect(hasThread).toHaveBeenCalledWith(threadMessage.id),
     );
@@ -220,7 +211,6 @@ describe('Channel', () => {
           channelHasMore = hasMore;
         }
       },
-      MessagesContext,
     );
     await waitFor(() => expect(channelHasMore).toBe(false));
   });
@@ -230,14 +220,10 @@ describe('Channel', () => {
 
     const newMessages = [generateMessage()];
 
-    renderComponent(
-      { channel },
-      ({ loadMore }) => {
-        useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages)]);
-        loadMore(limit);
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel }, ({ loadMore }) => {
+      useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages)]);
+      loadMore(limit);
+    });
 
     await waitFor(() => expect(channelQuerySpy).toHaveBeenCalled());
   });
@@ -246,16 +232,12 @@ describe('Channel', () => {
     const queryPromise = new Promise(() => {});
     let isLoadingMore = false;
 
-    renderComponent(
-      { channel },
-      ({ loadingMore, loadMore }) => {
-        // return a promise that hasn't resolved yet, so loadMore will be stuck in the 'await' part of the function
-        jest.spyOn(channel, 'query').mockImplementationOnce(() => queryPromise);
-        loadMore();
-        isLoadingMore = loadingMore;
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel }, ({ loadingMore, loadMore }) => {
+      // return a promise that hasn't resolved yet, so loadMore will be stuck in the 'await' part of the function
+      jest.spyOn(channel, 'query').mockImplementationOnce(() => queryPromise);
+      loadMore();
+      isLoadingMore = loadingMore;
+    });
 
     await waitFor(() => expect(isLoadingMore).toBe(true));
   });
@@ -265,13 +247,9 @@ describe('Channel', () => {
     const updatedMessage = { ...messages[0], text: newText };
     const clientUpdateMessageSpy = jest.spyOn(chatClient, 'updateMessage');
 
-    renderComponent(
-      { channel },
-      ({ editMessage }) => {
-        editMessage(updatedMessage);
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel }, ({ editMessage }) => {
+      editMessage(updatedMessage);
+    });
 
     await waitFor(() =>
       expect(clientUpdateMessageSpy).toHaveBeenCalledWith(updatedMessage),
@@ -280,13 +258,9 @@ describe('Channel', () => {
 
   it('should use doUpdateMessageRequest for the editMessage callback if provided', async () => {
     const doUpdateMessageRequest = jest.fn((channelId, message) => message);
-    renderComponent(
-      { channel, doUpdateMessageRequest },
-      ({ editMessage }) => {
-        editMessage(messages[0]);
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel, doUpdateMessageRequest }, ({ editMessage }) => {
+      editMessage(messages[0]);
+    });
 
     await waitFor(() =>
       expect(doUpdateMessageRequest).toHaveBeenCalledWith(
@@ -311,7 +285,6 @@ describe('Channel', () => {
           allMessagesRemoved = true;
         }
       },
-      MessagesContext,
     );
 
     await waitFor(() => {
@@ -361,88 +334,4 @@ describe('Channel', () => {
       });
     });
   });
-
-  describe('MessagesContext', () => {
-    it('renders children without crashing', async () => {
-      const { getByTestId } = render(
-        <MessagesContext.Provider>
-          <View testID='children' />
-        </MessagesContext.Provider>,
-      );
-
-      await waitFor(() => expect(getByTestId('children')).toBeTruthy());
-    });
-
-    it('exposes the messages context', async () => {
-      let context;
-
-      const mockContext = {
-        Attachment,
-        editing: false,
-        messages,
-        sendMessage: () => {},
-      };
-
-      render(
-        <MessagesContext.Provider value={mockContext}>
-          <ContextConsumer
-            context={MessagesContext}
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ContextConsumer>
-        </MessagesContext.Provider>,
-      );
-
-      await waitFor(() => {
-        expect(context).toBeInstanceOf(Object);
-        expect(context.Attachment).toBeInstanceOf(Function);
-        expect(context.editing).toBe(false);
-        expect(context.messages).toBeInstanceOf(Array);
-        expect(context.sendMessage).toBeInstanceOf(Function);
-      });
-    });
-  });
-
-  describe('ThreadContext', () => {
-    it('renders children without crashing', async () => {
-      const { getByTestId } = render(
-        <ThreadContext.Provider>
-          <View testID='children' />
-        </ThreadContext.Provider>,
-      );
-
-      await waitFor(() => expect(getByTestId('children')).toBeTruthy());
-    });
-
-    it('exposes the thread context', async () => {
-      let context;
-
-      const mockContext = {
-        openThread: () => {},
-        thread: {},
-        threadHasMore: true,
-        threadLoadingMore: false,
-      };
-
-      render(
-        <ThreadContext.Provider value={mockContext}>
-          <ContextConsumer
-            context={ThreadContext}
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ContextConsumer>
-        </ThreadContext.Provider>,
-      );
-
-      await waitFor(() => {
-        expect(context).toBeInstanceOf(Object);
-        expect(context.openThread).toBeInstanceOf(Function);
-        expect(context.thread).toBeInstanceOf(Object);
-        expect(context.threadHasMore).toBe(true);
-        expect(context.threadLoadingMore).toBe(false);
-      });
-    });
-  });
 });