Merge pull request #662 from GetStream/thread-typing-indicator

Thread typing indicator

Author: DanC5

src/components/MessageList/MessageListInner.js

@@ -176,11 +176,11 @@ const getGroupStyles = (
 
 const MessageListInner = (props) => {
   const {
-    TypingIndicator,
     EmptyStateIndicator,
     MessageSystem,
     DateSeparator,
     HeaderComponent,
+    TypingIndicator,
     headerPosition,
     bottomRef,
     onMessageLoadCaptured,
@@ -306,7 +306,7 @@ const MessageListInner = (props) => {
       {...internalInfiniteScrollProps}
     >
       <ul className="str-chat__ul">{elements}</ul>
-      {!threadList && <TypingIndicator />}
+      <TypingIndicator threadList={threadList} />
       <div key="bottom" ref={bottomRef} />
     </InfiniteScroll>
   );

src/components/TypingIndicator/TypingIndicator.js

@@ -9,29 +9,41 @@ import { Avatar as DefaultAvatar } from '../Avatar';
  * @typedef {import('types').TypingIndicatorProps} Props
  * @type {React.FC<Props>}
  */
-const TypingIndicator = ({ Avatar = DefaultAvatar, avatarSize = 32 }) => {
-  const { typing, client, channel } = useContext(ChannelContext);
+const TypingIndicator = ({
+  Avatar = DefaultAvatar,
+  avatarSize = 32,
+  threadList,
+}) => {
+  const { channel, client, thread, typing } = useContext(ChannelContext);
 
-  if (!typing || !client || channel?.getConfig()?.typing_events === false)
+  if (!typing || !client || channel?.getConfig()?.typing_events === false) {
     return null;
+  }
 
-  const users = Object.values(typing).filter(
-    ({ user }) => user?.id !== client.user?.id,
+  const typingInChannel = Object.values(typing).filter(
+    ({ user, parent_id }) => user?.id !== client.user?.id && parent_id == null,
+  );
+
+  const typingInThread = Object.values(typing).some(
+    (event) => event?.parent_id === thread?.id,
   );
 
   return (
     <div
       className={`str-chat__typing-indicator ${
-        users.length ? 'str-chat__typing-indicator--typing' : ''
+        (threadList && typingInThread) ||
+        (!threadList && typingInChannel.length)
+          ? 'str-chat__typing-indicator--typing'
+          : ''
       }`}
     >
       <div className="str-chat__typing-indicator__avatars">
-        {users.map(({ user }) => (
+        {typingInChannel.map(({ user }, i) => (
           <Avatar
             image={user?.image}
             size={avatarSize}
             name={user?.name || user?.id}
-            key={user?.id}
+            key={`${user?.id}-${i}`}
           />
         ))}
       </div>

src/components/TypingIndicator/__tests__/TypingIndicator.test.js

@@ -19,12 +19,12 @@ afterEach(cleanup); // eslint-disable-line
 
 const alice = generateUser();
 
-async function renderComponent(typing = {}) {
+async function renderComponent(typing = {}, threadList, value = {}) {
   const client = await getTestClientWithUser(alice);
 
   return render(
-    <ChannelContext.Provider value={{ client, typing }}>
-      <TypingIndicator />
+    <ChannelContext.Provider value={{ client, typing, ...value }}>
+      <TypingIndicator threadList={threadList} />
     </ChannelContext.Provider>,
   );
 }
@@ -139,4 +139,92 @@ describe('TypingIndicator', () => {
 
     expect(tree).toMatchInlineSnapshot(`null`);
   });
+
+  describe('TypingIndicator in thread', () => {
+    let client;
+    let ch;
+    let channel;
+
+    beforeEach(async () => {
+      client = await getTestClientWithUser();
+      ch = generateChannel({ config: { typing_events: true } });
+      useMockedApis(client, [getOrCreateChannelApi(ch)]);
+      channel = client.channel('messaging', ch.id);
+      await channel.watch();
+    });
+
+    afterEach(cleanup);
+
+    it('should render TypingIndicator if user is typing in thread', async () => {
+      const { container } = await renderComponent(
+        { example: { parent_id: 'sample-thread', user: 'test-user' } },
+        true,
+        {
+          client,
+          channel,
+          thread: { id: 'sample-thread' },
+        },
+      );
+
+      expect(
+        container.firstChild.classList.contains(
+          'str-chat__typing-indicator--typing',
+        ),
+      ).toBe(true);
+    });
+
+    it('should not render TypingIndicator in main channel if user is typing in thread', async () => {
+      const { container } = await renderComponent(
+        { example: { parent_id: 'sample-thread', user: 'test-user' } },
+        false,
+        {
+          client,
+          channel,
+          thread: { id: 'sample-thread' },
+        },
+      );
+
+      expect(
+        container.firstChild.classList.contains(
+          'str-chat__typing-indicator--typing',
+        ),
+      ).toBe(false);
+    });
+
+    it('should not render TypingIndicator in thread if user is typing in main channel', async () => {
+      const { container } = await renderComponent(
+        { example: { user: 'test-user' } },
+        true,
+        {
+          client,
+          channel,
+          thread: { id: 'sample-thread' },
+        },
+      );
+
+      expect(
+        container.firstChild.classList.contains(
+          'str-chat__typing-indicator--typing',
+        ),
+      ).toBe(false);
+    });
+
+    it('should not render TypingIndicator in thread if user is typing in another thread', async () => {
+      const { container } = await renderComponent(
+        { example: { parent_id: 'sample-thread-2', user: 'test-user' } },
+        true,
+        {
+          client,
+          channel,
+          thread: { id: 'sample-thread' },
+        },
+      );
+
+      expect(
+        container.firstChild.classList.contains(
+          'str-chat__typing-indicator--typing',
+        ),
+      ).toBe(false);
+    });
+  });
 });

types/index.d.ts

@@ -973,6 +973,7 @@ export interface ThreadHeaderProps {
 export interface TypingIndicatorProps {
   Avatar?: React.ElementType<AvatarProps>;
   avatarSize?: number;
+  threadList?: boolean;
 }
 
 export interface ReactionSelectorProps {