fix: prevent the newly created channel from being filtered out from ChannelList (#1124)

Fixes https://sendbird.atlassian.net/browse/CLNP-3607



https://github.com/sendbird/sendbird-uikit-react/assets/10060731/3d19dc9e-a1f1-46b6-8196-09a9ecbdeec4

Author: AhyoungRyu

src/modules/ChannelList/dux/__tests__/reducers.spec.js

@@ -2,6 +2,9 @@ import mockData, { channel1, channel0, users, creatingChannel } from '../data.mo
 import * as actionTypes from '../actionTypes';
 import reducers from '../reducers';
 import initialState from '../initialState';
+import { isChannelJustCreated } from '../../../../utils';
+import { getNextChannel } from '../getNextChannel';
+
 const [user1, user2, user3] = users;
 
 describe('Channels-Reducers', () => {
@@ -906,4 +909,66 @@ describe('Channels-Reducers', () => {
       expect(hideWithPreventAutoOnPreventAutoState.allChannels.length).toEqual(preventAutoUnhideParamsState.allChannels.length + 1);
     });
   });
+  describe('isChannelJustCreated', () => {
+    let isChannelJustCreatedSpy;
+    let getNextChannelSpy;
+
+    beforeEach(() => {
+      isChannelJustCreatedSpy = jest.spyOn(require('../../../../utils'), 'isChannelJustCreated');
+      getNextChannelSpy = jest.spyOn(require('../getNextChannel'), 'getNextChannel');
+    });
+
+    afterEach(() => {
+      isChannelJustCreatedSpy.mockRestore();
+      getNextChannelSpy.mockRestore();
+    });
+
+    it('should not add a newly created channel to the ChannelList if it is just created and the current user is the only member', () => {
+      const newChannel = {
+        ...creatingChannel,
+        members: [user1],
+        createdAt: new Date(),
+        invitedAt: new Date(),
+        lastMessage: null,
+      };
+      isChannelJustCreated.mockReturnValue(true);
+      const prevState = { ...mockData, channelListQuery: { includeEmpty: false } };
+
+      const nextState = reducers(prevState, {
+        type: actionTypes.ON_USER_JOINED,
+        payload: newChannel,
+      });
+
+      expect(isChannelJustCreated).toHaveBeenCalledWith(newChannel);
+      expect(nextState.allChannels.find(channel => channel.url === newChannel.url)).toBeUndefined();
+      expect(nextState.currentChannel).toEqual(mockData.currentChannel);
+       // Check if nextState and prevState are deeply equal
+      expect(nextState).toEqual(prevState);
+    });
+
+    it('should add a newly created channel to the ChannelList if it is not just created', () => {
+      const newChannel = {
+        ...creatingChannel,
+        members: [user1, user2],
+        createdAt: 123456789,
+        invitedAt: 129999967,
+        lastMessage: null,
+      };
+      isChannelJustCreated.mockReturnValue(false);
+      getNextChannel.mockReturnValue(newChannel);
+      const prevState = { ...mockData, channelListQuery: { includeEmpty: false } };
+
+      const nextState = reducers(prevState, {
+        type: actionTypes.ON_USER_JOINED,
+        payload: newChannel,
+      });
+
+      expect(isChannelJustCreated).toHaveBeenCalledWith(newChannel);
+      // Should be undefind since the newly created channel won't be added to the allChannels state
+      expect(nextState.allChannels.find(channel => channel.url === newChannel.url)).toBeUndefined();
+      expect(getNextChannel).toHaveBeenCalled();
+      // Ensure state has changed
+      expect(nextState).not.toEqual(prevState);
+    });
+  });
 });

src/modules/ChannelList/dux/reducers.ts

@@ -1,5 +1,5 @@
 import { match, P } from 'ts-pattern';
-import { filterChannelListParams, getChannelsWithUpsertedChannel } from '../../../utils';
+import { filterChannelListParams, getChannelsWithUpsertedChannel, isChannelJustCreated } from '../../../utils';
 import * as channelListActions from './actionTypes';
 import { ChannelListActionTypes } from './actionTypes';
 import { getNextChannel } from './getNextChannel';
@@ -184,6 +184,11 @@ export default function channelListReducer(
                 allChannels: getChannelsWithUpsertedChannel(allChannels, channel, state.channelListQuery?.order),
               };
             }
+            // If the channel is just created and the current user is the only member,
+            // don't add to the ChannelList but keep the currentChannel
+            if (isChannelJustCreated(channel)) {
+              return state;
+            }
             // Filter the channel from the ChannelList
             // Replace the currentChannel if it's filtered channel
             const nextChannel = getNextChannel({

src/utils/index.ts

@@ -17,6 +17,7 @@ import { getOutgoingMessageState, OutgoingMessageStates } from './exports/getOut
 import { MessageContentMiddleContainerType, Nullable } from '../types';
 import { isSafari } from './browser';
 import { match } from 'ts-pattern';
+import isSameSecond from 'date-fns/isSameSecond';
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 export const SUPPORTED_MIMES = {
@@ -947,3 +948,10 @@ export const arrayEqual = (array1: Array<unknown>, array2: Array<unknown>): bool
 export const isSendableMessage = (message?: BaseMessage | null): message is SendableMessageType => {
   return Boolean(message) && 'sender' in (message as SendableMessage);
 };
+
+/**
+ * If the channel is just created, the channel's createdAt and currentUser's invitedAt are the same.
+ */
+export const isChannelJustCreated = (channel: GroupChannel): boolean => {
+  return isSameSecond(channel.createdAt, channel.invitedAt) && !channel.lastMessage;
+};