chore: apply lint and fix type errors

Author: bang9

packages/uikit-chat-hooks/src/__tests__/common/useUserList.test.ts

@@ -85,7 +85,7 @@ describe('useUserList', () => {
       { userId: 'user2', nickname: 'Bob' },
     ];
     const query = { hasNext: true, next: jest.fn().mockResolvedValue(users) };
-    const queryCreator: () => CustomQueryInterface<typeof users[0]> = jest.fn().mockReturnValue(query);
+    const queryCreator: () => CustomQueryInterface<(typeof users)[0]> = jest.fn().mockReturnValue(query);
 
     const { result } = renderHook(() => {
       return useUserList(sdk, {

packages/uikit-chat-hooks/src/__tests__/handler/useChannelHandler.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-native';
+import { act, renderHook } from '@testing-library/react-native';
 
 import { createMockSendbirdChat } from '@sendbird/uikit-testing-tools';
 
@@ -75,4 +75,34 @@ describe('useChannelHandler', () => {
     sdk.__emit('channel', 'open_onMessageReceived');
     expect(handler.onMessageReceived).toHaveBeenCalledTimes(2);
   });
+
+  it('should channel handler functions updated when re-rendered', () => {
+    const sdk = createMockSendbirdChat();
+    const handlerId = 'test-handler-id';
+    const handlerBefore = { onMessageReceived: jest.fn() };
+    const handlerAfter = { onMessageReceived: jest.fn() };
+
+    const { rerender } = renderHook(({ handler }) => useChannelHandler(sdk, handlerId, handler, 'group'), {
+      initialProps: {
+        handler: handlerBefore,
+      },
+    });
+    expect(handlerBefore.onMessageReceived).toHaveBeenCalledTimes(0);
+    sdk.__emit('channel', 'group_onMessageReceived');
+    expect(handlerBefore.onMessageReceived).toHaveBeenCalledTimes(1);
+    sdk.__emit('channel', 'group_onMessageReceived');
+    expect(handlerBefore.onMessageReceived).toHaveBeenCalledTimes(2);
+
+    act(() => {
+      rerender({ handler: handlerAfter });
+    });
+
+    expect(handlerAfter.onMessageReceived).toHaveBeenCalledTimes(0);
+    sdk.__emit('channel', 'group_onMessageReceived');
+    expect(handlerAfter.onMessageReceived).toHaveBeenCalledTimes(1);
+    sdk.__emit('channel', 'group_onMessageReceived');
+    expect(handlerAfter.onMessageReceived).toHaveBeenCalledTimes(2);
+
+    expect(handlerBefore.onMessageReceived).toHaveBeenCalledTimes(2);
+  });
 });

packages/uikit-chat-hooks/src/handler/useChannelHandler.ts

@@ -2,48 +2,35 @@ import { useEffect, useLayoutEffect, useRef } from 'react';
 
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
 import { OpenChannelHandler } from '@sendbird/chat/openChannel';
-import { Logger, SendbirdChatSDK } from '@sendbird/uikit-utils';
+import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
 
 type ChannelType = 'open' | 'group';
 
-function getChannelHandler(type: ChannelType) {
-  switch (type) {
-    case 'open': {
-      return new OpenChannelHandler();
-    }
-    case 'group':
-    default: {
-      return new GroupChannelHandler();
-    }
-  }
-}
 export const useChannelHandler = <T extends ChannelType = 'group'>(
   sdk: SendbirdChatSDK,
   handlerId: string,
   hookHandler: Partial<T extends 'group' ? GroupChannelHandler : OpenChannelHandler>,
-  type = 'group' as T,
+  type: T = 'group' as T,
 ) => {
   const handlerRef = useRef(hookHandler);
   useLayoutEffect(() => {
     handlerRef.current = hookHandler;
   });
 
   useEffect(() => {
-    Logger.debug('[useChannelHandler] hook called by', handlerId);
-
-    const handler = getChannelHandler(type);
-    const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
-    handlerKeys.forEach((key) => {
-      handler[key] = (...args: unknown[]) => {
+    const handlerMapper = <T extends GroupChannelHandler | OpenChannelHandler>(handler: T): T => {
+      const handlerKeys = Object.keys(handler) as (keyof T)[];
+      handlerKeys.forEach((key) => {
         // @ts-ignore
-        handlerRef.current[key]?.(...args);
-      };
-    });
+        handler[key] = (...args: unknown[]) => handlerRef.current?.[key]?.(...args);
+      });
+      return handler;
+    };
 
     if (type === 'group') {
-      sdk.groupChannel.addGroupChannelHandler(handlerId, handler);
+      sdk.groupChannel.addGroupChannelHandler(handlerId, handlerMapper(new GroupChannelHandler()));
     } else if (type === 'open') {
-      sdk.openChannel.addOpenChannelHandler(handlerId, handler);
+      sdk.openChannel.addOpenChannelHandler(handlerId, handlerMapper(new OpenChannelHandler()));
     }
 
     return () => {

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -110,7 +110,6 @@ const GroupChannelMessageList = ({
         onLeaveScrollBottom={onLeaveScrollBottom}
         currentUserId={currentUserId}
         {...flatListProps}
-        listKey={`group-channel-messages-${channel.url}`}
         ref={scrollRef}
         data={messages}
         renderItem={renderItem}

packages/uikit-react-native/src/domain/openChannel/component/OpenChannelMessageList.tsx

@@ -106,7 +106,6 @@ const OpenChannelMessageList = ({
         onLeaveScrollBottom={onLeaveScrollBottom}
         currentUserId={currentUserId}
         {...flatListProps}
-        listKey={`open-channel-messages-${channel.url}`}
         ref={scrollRef}
         data={messages}
         renderItem={renderItem}