Merge pull request #1420 from sendbird/fix/clnp-6505-6889

[CLNP-6505][CLNP-6889][fix]: prevent Thread state reset when another user leaves or is banned

Author: sf-tyler-jeong

src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx

@@ -121,6 +121,8 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
   }, [
     currentChannel?.url,
     // We have to be specific like this or React would not recognize the changes in instances.
+    currentChannel?.members?.length,
+    currentChannel?.members.map((member: Member) => member.userId).join(),
     currentChannel?.members.map((member: Member) => member.nickname).join(),
     currentChannel?.members.map((member: Member) => member.isActive).join(),
     searchString,

src/modules/Thread/context/__test__/useHandleChannelEvents.spec.ts

@@ -154,6 +154,34 @@ describe('useHandleChannelEvents', () => {
     );
   });
 
+  it('should pass channel and user to onUserBanned handler', () => {
+    const mockAddHandler = jest.fn();
+    const sdk = createMockSdk(mockAddHandler);
+    const channel = createMockChannel();
+    const bannedUser = { userId: 'banned-user' } as User;
+
+    renderChannelEventsHook({ sdk, currentChannel: channel });
+
+    const handler = mockAddHandler.mock.calls[0][1];
+    handler.onUserBanned(channel, bannedUser);
+
+    expect(mockThreadActions.onUserBanned).toHaveBeenCalledWith(channel, bannedUser);
+  });
+
+  it('should pass channel and user to onUserLeft handler', () => {
+    const mockAddHandler = jest.fn();
+    const sdk = createMockSdk(mockAddHandler);
+    const channel = createMockChannel();
+    const leavingUser = { userId: 'leaving-user' } as User;
+
+    renderChannelEventsHook({ sdk, currentChannel: channel });
+
+    const handler = mockAddHandler.mock.calls[0][1];
+    handler.onUserLeft(channel, leavingUser);
+
+    expect(mockThreadActions.onUserLeft).toHaveBeenCalledWith(channel, leavingUser);
+  });
+
   it('should not add handler when sdk or currentChannel is missing', async () => {
     const mockAddHandler = jest.fn();
     const sdk = createMockSdk(mockAddHandler);

src/modules/Thread/context/__test__/useThread.spec.tsx

@@ -546,7 +546,7 @@ describe('useThread', () => {
     });
   });
 
-  it('handles onUserBanned action correctly', async () => {
+  it('handles onUserBanned action correctly when current user is banned', async () => {
     const wrapper = ({ children }) => (
       <ThreadProvider channelUrl="test-channel" message={mockParentMessage}>{children}</ThreadProvider>
     );
@@ -562,7 +562,7 @@ describe('useThread', () => {
     const { onUserBanned } = result.current.actions;
 
     await act(() => {
-      onUserBanned();
+      onUserBanned(mockChannel, { userId: 'test-user-id' });
     });
 
     await waitFor(() => {
@@ -572,6 +572,46 @@ describe('useThread', () => {
     });
   });
 
+  it('handles onUserBanned action correctly when another user is banned', async () => {
+    const wrapper = ({ children }) => (
+      <ThreadProvider channelUrl="test-channel" message={mockParentMessage}>{children}</ThreadProvider>
+    );
+
+    let result;
+    await act(async () => {
+      result = renderHook(() => useThread(), { wrapper }).result;
+
+      waitFor(() => {
+        expect(result.current.state.currentChannel).not.toBe(undefined);
+      });
+    });
+    const { onUserBanned } = result.current.actions;
+
+    // Channel object reflecting the ban: 'other-user-id' is no longer a member.
+    const channelAfterBan = {
+      url: 'test-channel',
+      members: [{ userId: 'test-user-id', nickname: 'me' }],
+    };
+
+    await act(() => {
+      onUserBanned(channelAfterBan, { userId: 'other-user-id' });
+    });
+
+    await waitFor(() => {
+      // Thread state must not be reset when another user is banned.
+      expect(result.current.state.channelState).not.toBe(ChannelStateTypes.NIL);
+      expect(result.current.state.currentChannel).not.toBeNull();
+      // currentChannel must be updated so the membership change is reflected.
+      expect(result.current.state.currentChannel).toBe(channelAfterBan);
+      expect(
+        result.current.state.currentChannel.members.find((m: { userId: string }) => m.userId === 'other-user-id'),
+      ).toBeUndefined();
+      // nicknamesMap must be regenerated so downstream consumers (e.g. mention list) see the change.
+      expect(result.current.state.nicknamesMap.get('other-user-id')).toBeUndefined();
+      expect(result.current.state.nicknamesMap.get('test-user-id')).toBe('me');
+    });
+  });
+
   it('handles onUserUnbanned action correctly', async () => {
     const wrapper = ({ children }) => (
       <ThreadProvider channelUrl="test-channel" message={mockParentMessage}>{children}</ThreadProvider>
@@ -592,7 +632,7 @@ describe('useThread', () => {
     });
   });
 
-  it('handles onUserLeft action correctly', async () => {
+  it('handles onUserLeft action correctly when current user has left', async () => {
     const wrapper = ({ children }) => (
       <ThreadProvider channelUrl="test-channel" message={mockParentMessage}>{children}</ThreadProvider>
     );
@@ -608,7 +648,7 @@ describe('useThread', () => {
     const { onUserLeft } = result.current.actions;
 
     await act(() => {
-      onUserLeft();
+      onUserLeft(mockChannel, { userId: 'test-user-id' });
     });
 
     await waitFor(() => {
@@ -618,6 +658,46 @@ describe('useThread', () => {
     });
   });
 
+  it('handles onUserLeft action correctly when another user has left', async () => {
+    const wrapper = ({ children }) => (
+      <ThreadProvider channelUrl="test-channel" message={mockParentMessage}>{children}</ThreadProvider>
+    );
+
+    let result;
+    await act(async () => {
+      result = renderHook(() => useThread(), { wrapper }).result;
+
+      waitFor(() => {
+        expect(result.current.state.currentChannel).not.toBe(undefined);
+      });
+    });
+    const { onUserLeft } = result.current.actions;
+
+    // Channel object reflecting the leave: 'other-user-id' is no longer a member.
+    const channelAfterLeave = {
+      url: 'test-channel',
+      members: [{ userId: 'test-user-id', nickname: 'me' }],
+    };
+
+    await act(() => {
+      onUserLeft(channelAfterLeave, { userId: 'other-user-id' });
+    });
+
+    await waitFor(() => {
+      // Thread state must not be reset when another user leaves.
+      expect(result.current.state.channelState).not.toBe(ChannelStateTypes.NIL);
+      expect(result.current.state.currentChannel).not.toBeNull();
+      // currentChannel must be updated so the membership change is reflected.
+      expect(result.current.state.currentChannel).toBe(channelAfterLeave);
+      expect(
+        result.current.state.currentChannel.members.find((m: { userId: string }) => m.userId === 'other-user-id'),
+      ).toBeUndefined();
+      // nicknamesMap must be regenerated so downstream consumers (e.g. mention list) see the change.
+      expect(result.current.state.nicknamesMap.get('other-user-id')).toBeUndefined();
+      expect(result.current.state.nicknamesMap.get('test-user-id')).toBe('me');
+    });
+  });
+
   it('handles onChannelFrozen action correctly', async () => {
     const wrapper = ({ children }) => (
       <ThreadProvider channelUrl="test-channel" message={mockParentMessage}>{children}</ThreadProvider>

src/modules/Thread/context/hooks/useHandleChannelEvents.ts

@@ -73,15 +73,15 @@ export default function useHandleChannelEvents({
         },
         onUserBanned(channel, user) {
           logger.info('Thread | useHandleChannelEvents: onUserBanned', { channel, user });
-          onUserBanned();
+          onUserBanned(channel as GroupChannel, user);
         },
         onUserUnbanned(channel, user) {
           logger.info('Thread | useHandleChannelEvents: onUserUnbanned', { channel, user });
           onUserUnbanned();
         },
         onUserLeft(channel, user) {
           logger.info('Thread | useHandleChannelEvents: onUserLeft', { channel, user });
-          onUserLeft();
+          onUserLeft(channel as GroupChannel, user);
         },
         // channel status change
         onChannelFrozen(channel) {

src/modules/Thread/context/useThread.ts

@@ -5,7 +5,7 @@ import { ChannelStateTypes, FileUploadInfoParams, ParentMessageStateTypes, Threa
 import { GroupChannel, Member } from '@sendbird/chat/groupChannel';
 import { CoreMessageType, SendableMessageType } from '../../../utils';
 import { EmojiContainer, User } from '@sendbird/chat';
-import { compareIds } from './utils';
+import { compareIds, getNicknamesMapFromMembers } from './utils';
 import {
   BaseMessage,
   MultipleFilesMessage,
@@ -458,39 +458,67 @@ const useThread = () => {
       };
     }), [store]),
 
-    onUserBanned: useCallback(() => store.setState(state => {
-      return {
-        ...state,
-        channelState: ChannelStateTypes.NIL,
-        threadListState: ThreadListStateTypes.NIL,
-        parentMessageState: ParentMessageStateTypes.NIL,
-        currentChannel: null,
-        parentMessage: null,
-        allThreadMessages: [],
-        hasMorePrev: false,
-        hasMoreNext: false,
-      };
-    }), [store]),
+    onUserBanned: useCallback((channel: GroupChannel, user: User) => {
+      store.setState(state => {
+        if (state.currentChannel?.url !== channel?.url) {
+          return state;
+        }
+        // Only reset state when the current user is banned
+        if (state.currentUserId === user?.userId) {
+          return {
+            ...state,
+            channelState: ChannelStateTypes.NIL,
+            threadListState: ThreadListStateTypes.NIL,
+            parentMessageState: ParentMessageStateTypes.NIL,
+            currentChannel: null,
+            parentMessage: null,
+            allThreadMessages: [],
+            hasMorePrev: false,
+            hasMoreNext: false,
+          };
+        }
+        // Another user banned: update channel info and nicknames map
+        return {
+          ...state,
+          currentChannel: channel,
+          nicknamesMap: getNicknamesMapFromMembers(channel?.members),
+        };
+      });
+    }, [store]),
 
     onUserUnbanned: useCallback(() => store.setState(state => {
       return {
         ...state,
       };
     }), [store]),
 
-    onUserLeft: useCallback(() => store.setState(state => {
-      return {
-        ...state,
-        channelState: ChannelStateTypes.NIL,
-        threadListState: ThreadListStateTypes.NIL,
-        parentMessageState: ParentMessageStateTypes.NIL,
-        currentChannel: null,
-        parentMessage: null,
-        allThreadMessages: [],
-        hasMorePrev: false,
-        hasMoreNext: false,
-      };
-    }), [store]),
+    onUserLeft: useCallback((channel: GroupChannel, user: User) => {
+      store.setState(state => {
+        if (state.currentChannel?.url !== channel?.url) {
+          return state;
+        }
+        // Only reset state when the current user has left
+        if (state.currentUserId === user?.userId) {
+          return {
+            ...state,
+            channelState: ChannelStateTypes.NIL,
+            threadListState: ThreadListStateTypes.NIL,
+            parentMessageState: ParentMessageStateTypes.NIL,
+            currentChannel: null,
+            parentMessage: null,
+            allThreadMessages: [],
+            hasMorePrev: false,
+            hasMoreNext: false,
+          };
+        }
+        // Another user left: update channel info and nicknames map
+        return {
+          ...state,
+          currentChannel: channel,
+          nicknamesMap: getNicknamesMapFromMembers(channel?.members),
+        };
+      });
+    }, [store]),
 
     onChannelFrozen: useCallback(() => store.setState(state => {
       return {