diff --git a/src/modules/App/DesktopLayout.tsx b/src/modules/App/DesktopLayout.tsx index 411055d1d..d68116ce0 100644 --- a/src/modules/App/DesktopLayout.tsx +++ b/src/modules/App/DesktopLayout.tsx @@ -167,9 +167,11 @@ export const DesktopLayout: React.FC = (props: DesktopLayout if (channel?.url !== currentChannel?.url) { setCurrentChannel(channel); } - if (message?.messageId !== highlightedMessage) { - setStartingPoint?.(message?.createdAt); - } + setTimeout(() => { + if (message?.messageId !== highlightedMessage) { + setStartingPoint?.(message?.createdAt); + } + }, 200); setTimeout(() => { setStartingPoint?.(null); setHighlightedMessage?.(message?.messageId); diff --git a/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx b/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx index b2cec6685..a5dc1d772 100644 --- a/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx +++ b/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx @@ -17,6 +17,7 @@ import { useStore } from '../../../hooks/useStore'; import { noop } from '../../../utils/utils'; import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird'; import useGroupChannelList from './useGroupChannelList'; +import useDeepCompareEffect from '../../../hooks/useDeepCompareEffect'; type OnCreateChannelClickParams = { users: Array; onClose: () => void; channelType: CHANNEL_TYPE }; type ChannelListDataSource = ReturnType; @@ -203,7 +204,7 @@ export const GroupChannelListManager: React.FC = loadMore, ]); const memoizedGroupChannel = useMemo(() => groupChannels, [groupChannels]); - useEffect(() => { + useDeepCompareEffect(() => { updateState({ groupChannels: memoizedGroupChannel, ...eventHandlers, diff --git a/src/modules/GroupChannelList/context/__tests__/GroupChannelListProvider.spec.tsx b/src/modules/GroupChannelList/context/__tests__/GroupChannelListProvider.spec.tsx index f8464df52..f4d2ebd17 100644 --- a/src/modules/GroupChannelList/context/__tests__/GroupChannelListProvider.spec.tsx +++ b/src/modules/GroupChannelList/context/__tests__/GroupChannelListProvider.spec.tsx @@ -42,9 +42,9 @@ describe('GroupChannelListProvider', () => { className: '', selectedChannelUrl: '', disableAutoSelect: false, - allowProfileEdit: undefined, - isTypingIndicatorEnabled: undefined, - isMessageReceiptStatusEnabled: undefined, + allowProfileEdit: true, + isTypingIndicatorEnabled: false, + isMessageReceiptStatusEnabled: false, onChannelSelect: expect.any(Function), onChannelCreated: expect.any(Function), onThemeChange: undefined, @@ -87,11 +87,12 @@ describe('GroupChannelListProvider', () => { await act(async () => { result.current.updateState({ className: 'new-classname' }); result.current.updateState({ disableAutoSelect: true }); - await waitFor(() => { - const newState = result.current.state; - expect(newState.className).toEqual('new-classname'); - expect(newState.disableAutoSelect).toEqual(true); - }); + }); + + await waitFor(() => { + const newState = result.current.state; + expect(newState.className).toEqual('new-classname'); + expect(newState.disableAutoSelect).toEqual(true); }); }); diff --git a/src/modules/GroupChannelList/context/__tests__/useGroupChannelList.spec.tsx b/src/modules/GroupChannelList/context/__tests__/useGroupChannelList.spec.tsx index fa9416435..7710c8430 100644 --- a/src/modules/GroupChannelList/context/__tests__/useGroupChannelList.spec.tsx +++ b/src/modules/GroupChannelList/context/__tests__/useGroupChannelList.spec.tsx @@ -1,4 +1,4 @@ -import { GroupChannelListProvider, useGroupChannelListContext } from '../GroupChannelListProvider'; +import { GroupChannelListProvider } from '../GroupChannelListProvider'; import { renderHook } from '@testing-library/react'; import React from 'react'; import { useGroupChannelList } from '../useGroupChannelList'; @@ -14,7 +14,12 @@ const mockState = { initialized: true, }, }, - config: { logger: console }, + config: { + logger: console, + groupChannelList: { + enableTypingIndicator: true, + }, + }, }; jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({ __esModule: true, @@ -33,17 +38,12 @@ jest.mock('@sendbird/uikit-tools', () => ({ useGroupChannelHandler: jest.fn(() => {}), })); -jest.mock('../GroupChannelListProvider', () => ({ - ...jest.requireActual('../GroupChannelListProvider'), - useGroupChannelListContext: jest.fn(), -})); - const initialState = { className: '', selectedChannelUrl: '', disableAutoSelect: false, - allowProfileEdit: false, - isTypingIndicatorEnabled: false, + allowProfileEdit: true, + isTypingIndicatorEnabled: true, isMessageReceiptStatusEnabled: false, onChannelSelect: undefined, onChannelCreated: undefined, @@ -59,14 +59,8 @@ const initialState = { loadMore: null, }; -const mockStore = { - getState: jest.fn(() => initialState), - setState: jest.fn(), - subscribe: jest.fn(() => jest.fn()), -}; - const wrapper = ({ children }) => ( - + {children} ); @@ -78,15 +72,12 @@ describe('GroupChannelListProvider', () => { }); it('throws an error if used outside of GroupChannelListProvider', () => { - (useGroupChannelListContext as jest.Mock).mockReturnValue(null); - expect(() => { - renderHook(() => useGroupChannelList(), { wrapper }); + renderHook(() => useGroupChannelList()); }).toThrow(new Error('useGroupChannelList must be used within a GroupChannelListProvider')); }); it('provide the correct initial state', () => { - (useGroupChannelListContext as jest.Mock).mockReturnValue(mockStore); const { result } = renderHook(() => useGroupChannelList(), { wrapper }); expect(result.current.state).toEqual(expect.objectContaining(initialState)); diff --git a/src/modules/Thread/context/ThreadProvider.tsx b/src/modules/Thread/context/ThreadProvider.tsx index 16f543fd0..bef0ad80b 100644 --- a/src/modules/Thread/context/ThreadProvider.tsx +++ b/src/modules/Thread/context/ThreadProvider.tsx @@ -23,6 +23,7 @@ import { useStore } from '../../../hooks/useStore'; import useSetCurrentUserId from './hooks/useSetCurrentUserId'; import useThread from './useThread'; import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird'; +import useDeepCompareEffect from '../../../hooks/useDeepCompareEffect'; export interface ThreadProviderProps extends Pick { @@ -184,7 +185,7 @@ export const ThreadManager: React.FC { + useDeepCompareEffect(() => { updateState({ channelUrl, message,