fix: Apply the channelListQuery.order to the ChannelList (#942)

[CLNP-2044](https://sendbird.atlassian.net/browse/CLNP-2044)

### Fix
* Remove the action, `replace the channel to the top` in the ChannelList
* Apply the channelListQuery.order to the ChannelList

### ChangeLog
* Apply the channelListQuery.order to the ChannelList

Author: HoonBaek

src/modules/ChannelList/dux/__tests__/channelReplacedToTop.spec.ts

@@ -31,7 +31,6 @@ export const ON_CHANNEL_UNFROZEN = 'ON_CHANNEL_UNFROZEN';
 export const ON_READ_RECEIPT_UPDATED = 'ON_READ_RECEIPT_UPDATED';
 export const ON_DELIVERY_RECEIPT_UPDATED = 'ON_DELIVERY_RECEIPT_UPDATED';
 
-export const CHANNEL_REPLACED_TO_TOP = 'CHANNEL_REPLACED_TO_TOP';
 export const CHANNEL_LIST_PARAMS_UPDATED = 'CHANNEL_LIST_PARAMS_UPDATED';
 
 type CHANNEL_LIST_PAYLOAD_TYPES = {
@@ -67,7 +66,6 @@ type CHANNEL_LIST_PAYLOAD_TYPES = {
   [ON_CHANNEL_UNFROZEN]: GroupChannel;
   [ON_READ_RECEIPT_UPDATED]: GroupChannel;
   [ON_DELIVERY_RECEIPT_UPDATED]: GroupChannel;
-  [CHANNEL_REPLACED_TO_TOP]: GroupChannel;
   [CHANNEL_LIST_PARAMS_UPDATED]: {
     channelListQuery: GroupChannelListQuery;
     currentUserId?: string,

src/modules/ChannelList/dux/actionTypes.ts

@@ -412,4 +412,5 @@ export const creatingChannel = {
   members: users,
   lastMessage: { createdAt: 1004 },
   customType: '',
+  createdAt: 0,
 };

src/modules/ChannelList/dux/data.mock.js

@@ -46,7 +46,7 @@ export default function channelListReducer(
             return {
               ...state,
               currentChannel: channel,
-              allChannels: getChannelsWithUpsertedChannel(allChannels, channel),
+              allChannels: getChannelsWithUpsertedChannel(allChannels, channel, state.channelListQuery?.order),
             };
           }
           // Do not add to the ChannelList
@@ -72,7 +72,7 @@ export default function channelListReducer(
             // Good to [add to/keep in] the ChannelList
             return {
               ...state,
-              allChannels: getChannelsWithUpsertedChannel(allChannels, channel),
+              allChannels: getChannelsWithUpsertedChannel(allChannels, channel, state.channelListQuery?.order),
             };
           }
           // * Remove the channel from the ChannelList: because the channel is filtered
@@ -113,7 +113,7 @@ export default function channelListReducer(
         if (channelListQuery) {
           if (filterChannelListParams(channelListQuery, channel, currentUserId)) {
             // Good to [add to/keep in] the ChannelList
-            nextChannels = getChannelsWithUpsertedChannel(allChannels, channel);
+            nextChannels = getChannelsWithUpsertedChannel(allChannels, channel, state.channelListQuery?.order);
           }
         }
         // Replace the currentChannel if I left the currentChannel
@@ -150,7 +150,7 @@ export default function channelListReducer(
               // Good to [add to/keep in] the ChannelList
               return {
                 ...state,
-                allChannels: getChannelsWithUpsertedChannel(allChannels, channel),
+                allChannels: getChannelsWithUpsertedChannel(allChannels, channel, state.channelListQuery?.order),
               };
             }
             // Filter the channel from the ChannelList
@@ -208,7 +208,7 @@ export default function channelListReducer(
             // Good to [add to/keep in] the ChannelList
             return {
               ...state,
-              allChannels: getChannelsWithUpsertedChannel(allChannels, channel),
+              allChannels: getChannelsWithUpsertedChannel(allChannels, channel, state.channelListQuery?.order),
             };
           }
           // Filter the channel from the ChannelList
@@ -245,7 +245,7 @@ export default function channelListReducer(
             // Good to [add to/keep in] the ChannelList
             return {
               ...state,
-              allChannels: getChannelsWithUpsertedChannel(allChannels, channel),
+              allChannels: getChannelsWithUpsertedChannel(allChannels, channel, state.channelListQuery?.order),
             };
           }
           // Filter the channel from the ChannelList
@@ -276,24 +276,6 @@ export default function channelListReducer(
           }),
         };
       })
-      .with({ type: channelListActions.CHANNEL_REPLACED_TO_TOP }, (action) => {
-        if (state.channelListQuery) {
-          if (filterChannelListParams(state.channelListQuery, action.payload, state.currentUserId)) {
-            return {
-              ...state,
-              allChannels: [
-                action.payload,
-                ...state.allChannels.filter((channel) => channel?.url !== action.payload.url),
-              ],
-            };
-          }
-          return state;
-        }
-        return {
-          ...state,
-          allChannels: [action.payload, ...state.allChannels.filter((channel) => channel?.url !== action.payload.url)],
-        };
-      })
       .with({ type: channelListActions.CHANNEL_LIST_PARAMS_UPDATED }, (action) => ({
         ...state,
         channelListQuery: action.payload.channelListQuery,

src/modules/ChannelList/dux/reducers.ts

@@ -302,18 +302,6 @@ export const pubSubHandler = (pubSub: SBUGlobalPubSub, channelListDispatcher: Re
     }),
   );
 
-  subscriber.set(
-    topics.SEND_MESSAGE_START,
-    pubSub.subscribe(topics.SEND_MESSAGE_START, ({ channel }) => {
-      if (channel.isGroupChannel()) {
-        channelListDispatcher({
-          type: channelActions.CHANNEL_REPLACED_TO_TOP,
-          payload: channel,
-        });
-      }
-    }),
-  );
-
   return subscriber;
 };
 

src/modules/ChannelList/utils.ts

@@ -1,5 +1,4 @@
 import {
-  binarySearch,
   isAdminMessage,
   isFileMessage,
   isUrl,
@@ -9,24 +8,6 @@ import {
 import { AdminMessage, FileMessage, MultipleFilesMessage, UserMessage } from '@sendbird/chat/message';
 import { isMobileIOS } from '../utils';
 
-describe('Global-utils', () => {
-  it('should find right index with binarySearch', () => {
-    const criterionArray = [99, 88, 77, 66, 55, 44, 33, 22, 11, 0];
-
-    const targetIndex1 = binarySearch(criterionArray, 100);
-    expect(targetIndex1).toEqual(0);
-    const targetIndex2 = binarySearch(criterionArray, 1);
-    expect(targetIndex2).toEqual(criterionArray.length - 1);
-
-    criterionArray.forEach((value, index) => {
-      const targetIndex = binarySearch(criterionArray, value);
-      expect(targetIndex).toEqual(index);
-      const targetIndexPlusOne = binarySearch(criterionArray, value + 1);
-      expect(targetIndexPlusOne).toEqual(index);
-    });
-  });
-});
-
 describe('Global-utils: verify message type util functions', () => {
   it('should return true for each message', () => {
     const mockUserMessage = {

src/utils/__tests__/utils.spec.ts

@@ -1,5 +1,5 @@
 import SendbirdChat, { Emoji, EmojiCategory, EmojiContainer, User } from '@sendbird/chat';
-import { GroupChannel, Member, SendbirdGroupChat, GroupChannelListQuery } from '@sendbird/chat/groupChannel';
+import { GroupChannel, Member, SendbirdGroupChat, GroupChannelListQuery, GroupChannelListOrder } from '@sendbird/chat/groupChannel';
 import {
   AdminMessage,
   BaseMessage,
@@ -757,29 +757,31 @@ export const filterChannelListParams = (params: GroupChannelListQuery, channel:
   return true;
 };
 
-export const binarySearch = (list: Array<number>, number: number): number => { // [100, 99, 98, 97, ...]
-  const pivot = Math.floor(list.length / 2);
-  if (list[pivot] === number) {
-    return pivot;
-  }
-  const leftList = list.slice(0, pivot);
-  const rightList = list.slice(pivot + 1, list.length);
-  if (list[pivot] > number) {
-    return pivot + 1 + (rightList.length === 0 ? 0 : binarySearch(rightList, number));
-  } else {
-    return (leftList.length === 0) ? pivot : binarySearch(leftList, number);
-  }
-};
 // This is required when channel is displayed on channel list by filter
-export const getChannelsWithUpsertedChannel = (channels: Array<GroupChannel>, channel: GroupChannel): Array<GroupChannel> => {
-  if (channels.some((ch: GroupChannel) => ch.url === channel?.url)) {
-    return channels.map((ch: GroupChannel) => (ch.url === channel?.url ? channel : ch));
+export const getChannelsWithUpsertedChannel = (
+  _channels: Array<GroupChannel>,
+  channel: GroupChannel,
+  order?: GroupChannelListOrder,
+): Array<GroupChannel> => {
+  const compareFunc = match(order)
+    .with(GroupChannelListOrder.CHANNEL_NAME_ALPHABETICAL, () => (
+      (a: GroupChannel, b: GroupChannel) => a.name.localeCompare(b.name)
+    ))
+    .with(GroupChannelListOrder.CHRONOLOGICAL, () => (
+      (a: GroupChannel, b: GroupChannel) => b.createdAt - a.createdAt
+    ))
+    .otherwise(() => (
+      (a: GroupChannel, b: GroupChannel) => (b.lastMessage?.createdAt ?? Number.MIN_SAFE_INTEGER) - (a.lastMessage?.createdAt ?? Number.MIN_SAFE_INTEGER)
+    ));
+
+  const channels = [..._channels];
+  const findingIndex = channels.findIndex((ch) => ch.url === channel.url);
+  if (findingIndex !== -1) {
+    channels[findingIndex] = channel;
+  } else {
+    channels.push(channel);
   }
-  const targetIndex = binarySearch(
-    channels.map((channel: GroupChannel) => channel?.lastMessage?.createdAt || channel?.createdAt),
-    channel?.lastMessage?.createdAt || channel?.createdAt,
-  );
-  return [...channels.slice(0, targetIndex), channel, ...channels.slice(targetIndex, channels.length)];
+  return channels.sort(compareFunc);
 };
 
 export const getMatchedUserIds = (word: string, users: Array<User>, _template?: string): boolean => {