fix: Migrate the outdated ChannelListQuery interface (#393)

* Issue: A customer said the `userIdsFilter` of ChannelListQuery doesn't work when receiving messages
There's been an internal channel filtering logic with custom channelListQuery, but it's broken because we've used the outdated interface of Chat SDK.

* Fix: We migrated the outdated interface `_searchFilter` and `_userIdsFilter` to new things `searchFilter` and `userIdsFilter`

Author: HoonBaek

src/smart-components/App/stories/index.stories.js

@@ -260,7 +260,6 @@ export const user1 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     config={{ logLevel: 'all' }}
-    queries={{}}
     replyType="QUOTE_REPLY"
     isReactionEnabled
     isMentionEnabled

src/smart-components/ChannelList/context/ChannelListProvider.tsx

@@ -12,7 +12,8 @@ import {
   GroupChannelCreateParams,
   GroupChannelHandler,
   SendbirdGroupChat,
-  GroupChannelListQuery as GroupChannelListQuerySb
+  GroupChannelListQuery as GroupChannelListQuerySb,
+  GroupChannelUserIdsFilter,
 } from '@sendbird/chat/groupChannel';
 
 import { RenderUserProfileProps } from '../../../types';
@@ -59,6 +60,7 @@ interface GroupChannelListQuery {
   hiddenChannelFilter?: 'unhidden_only' | 'hidden_only' | 'hidden_allow_auto_unhide' | 'hidden_prevent_auto_unhide';
   unreadChannelFilter?: 'all' | 'unread_message';
   includeFrozen?: boolean;
+  userIdsFilter?: GroupChannelUserIdsFilter;
 }
 
 interface ChannelListQueries {

src/smart-components/ChannelList/dux/__tests__/reducers.spec.js

@@ -137,11 +137,11 @@ describe('Channels-Reducers', () => {
 
   it('should set channelListQuery for filter', () => {
     const channelListQuery = {
-      _searchFilter: {
+      searchFilter: {
         search_fields: ['channel_name', 'member_nicknames'],
         search_query: 'abcd',
       },
-      _userIdsFilter: {
+      userIdsFilter: {
         userIds: ['hoon001', 'hoon002'],
         includeMode: false,
         queryType: 'AND',
@@ -163,11 +163,11 @@ describe('Channels-Reducers', () => {
       payload: { currentUserId: user1.userId, channelListQuery: channelListQuery },
     });
     const appliedQuery = appliedParamsState.channelListQuery;
-    expect(appliedQuery._searchFilter.search_fields).toEqual(channelListQuery._searchFilter.search_fields);
-    expect(appliedQuery._searchFilter.search_query).toEqual(channelListQuery._searchFilter.search_query);
-    expect(appliedQuery._userIdsFilter.userIds).toEqual(channelListQuery._userIdsFilter.userIds);
-    expect(appliedQuery._userIdsFilter.includeMode).toEqual(channelListQuery._userIdsFilter.includeMode);
-    expect(appliedQuery._userIdsFilter.queryType).toEqual(channelListQuery._userIdsFilter.queryType);
+    expect(appliedQuery.searchFilter.search_fields).toEqual(channelListQuery.searchFilter.search_fields);
+    expect(appliedQuery.searchFilter.search_query).toEqual(channelListQuery.searchFilter.search_query);
+    expect(appliedQuery.userIdsFilter.userIds).toEqual(channelListQuery.userIdsFilter.userIds);
+    expect(appliedQuery.userIdsFilter.includeMode).toEqual(channelListQuery.userIdsFilter.includeMode);
+    expect(appliedQuery.userIdsFilter.queryType).toEqual(channelListQuery.userIdsFilter.queryType);
     expect(appliedQuery.nicknameContainsFilter).toEqual(channelListQuery.nicknameContainsFilter);
     expect(appliedQuery.channelNameContainsFilter).toEqual(channelListQuery.channelNameContainsFilter);
     expect(appliedQuery.memberStateFilter).toEqual(channelListQuery.memberStateFilter);
@@ -187,14 +187,14 @@ describe('Channels-Reducers', () => {
      * > target member join > change search_field to channel_name > another member join > change channel name
      */
     const channelListQuery = {
-      _searchFilter: { search_fields: ['member_nickname'], search_query: user1.nickname },
+      searchFilter: { fields: ['member_nickname'], query: user1.nickname },
     };
     const newChannel = { ...creatingChannel };
     const appliedParamsState = reducers(mockData, {
       type: actionTypes.CHANNEL_LIST_PARAMS_UPDATED,
       payload: { currentUserId: user1.userId, channelListQuery },
     });
-    expect(appliedParamsState.channelListQuery._searchFilter.search_query).toEqual(user1.nickname);
+    expect(appliedParamsState.channelListQuery.searchFilter.query).toEqual(user1.nickname);
     expect(appliedParamsState.allChannels[0].url).not.toEqual(newChannel.url);
     const createdChannelState = reducers(appliedParamsState, {
       type: actionTypes.CREATE_CHANNEL,
@@ -221,11 +221,11 @@ describe('Channels-Reducers', () => {
       type: actionTypes.CHANNEL_LIST_PARAMS_UPDATED,
       payload: {
         currentUserId: user1.userId,
-        channelListQuery: { _searchFilter: { ...channelListQuery._searchFilter, search_fields: ['channel_name'] } },
+        channelListQuery: { searchFilter: { ...channelListQuery.searchFilter, fields: ['channel_name'] } },
       },
     });
-    expect(paramsWithChannelNameState.channelListQuery._searchFilter.search_fields).toEqual(['channel_name']);
-    expect(paramsWithChannelNameState.channelListQuery._searchFilter.search_query).toEqual(user1.nickname);
+    expect(paramsWithChannelNameState.channelListQuery.searchFilter.fields).toEqual(['channel_name']);
+    expect(paramsWithChannelNameState.channelListQuery.searchFilter.query).toEqual(user1.nickname);
     const anotherUserJoinedState = reducers(paramsWithChannelNameState, {
       type: actionTypes.ON_USER_JOINED,
       payload: { ...newChannel, members: [user1, user2, user3] },
@@ -247,7 +247,7 @@ describe('Channels-Reducers', () => {
       payload: {
         currentUserId: user1.userId,
         channelListQuery: {
-          _userIdsFilter: { userIds: [user1.userId, user2.userId], includeMode: false },
+          userIdsFilter: { userIds: [user1.userId, user2.userId], includeMode: false },
         },
       }
     });
@@ -257,7 +257,7 @@ describe('Channels-Reducers', () => {
       payload: {
         currentUserId: user1.userId,
         channelListQuery: {
-          _userIdsFilter: {
+          userIdsFilter: {
             userIds: [user1.userId, user2.userId],
             includeMode: true,
             queryType: 'OR',
@@ -271,7 +271,7 @@ describe('Channels-Reducers', () => {
       payload: {
         currentUserId: user1.userId,
         channelListQuery: {
-          _userIdsFilter: {
+          userIdsFilter: {
             userIds: [user1.userId, user2.userId],
             includeMode: true,
             queryType: 'AND',

src/utils/index.ts

@@ -339,25 +339,14 @@ export const filterMessageListParams = (params: MessageListParams, message: User
   return true;
 };
 
-interface SDKChannelListParamsPrivateProps extends GroupChannelListQuery {
-  _searchFilter: {
-    search_query: string,
-    search_fields: Array<'member_nickname' | 'channel_name'>,
-  };
-  _userIdsFilter: {
-    userIds: Array<string>,
-    includeMode: boolean,
-    queryType: 'AND' | 'OR',
-  };
-}
-export const filterChannelListParams = (params: SDKChannelListParamsPrivateProps, channel: GroupChannel, currentUserId: string): boolean => {
+export const filterChannelListParams = (params: GroupChannelListQuery, channel: GroupChannel, currentUserId: string): boolean => {
   if (!params?.includeEmpty && channel?.lastMessage === null) {
     return false;
   }
-  if (params?._searchFilter?.search_query && params._searchFilter.search_fields?.length > 0) {
-    const searchFilter = params._searchFilter;
-    const searchQuery = searchFilter.search_query;
-    const searchFields = searchFilter.search_fields;
+  const searchFilter = params?.searchFilter;
+  if (searchFilter?.query && searchFilter.fields?.length > 0) {
+    const searchQuery = searchFilter.query;
+    const searchFields = searchFilter.fields;
     if (searchQuery && searchFields && searchFields.length > 0) {
       if (!searchFields.some((searchField) => {
         switch (searchField) {
@@ -376,8 +365,8 @@ export const filterChannelListParams = (params: SDKChannelListParamsPrivateProps
       }
     }
   }
-  if (params?._userIdsFilter?.userIds?.length > 0) {
-    const userIdsFilter = params._userIdsFilter;
+  const userIdsFilter = params?.userIdsFilter;
+  if (userIdsFilter?.userIds?.length > 0) {
     const { includeMode, queryType } = userIdsFilter;
     const userIds: string[] = userIdsFilter.userIds;
     const memberIds = channel?.members?.map((member: Member) => member.userId);