From 4911e0d0010dbe7484d19139fdb40c48cdec0afa Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Fri, 15 Nov 2024 12:24:21 +0100 Subject: [PATCH 1/3] fix: crash in some instances of useIsChannelMuted hook invocation --- .../components/ChannelPreview/hooks/useIsChannelMuted.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts b/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts index 9b8e87fc3..766b1eecd 100644 --- a/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts +++ b/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts @@ -12,18 +12,18 @@ export const useIsChannelMuted = < channel: Channel, ) => { const { client } = useChatContext(); + const initialized = channel?.initialized; - const [muted, setMuted] = useState(channel.muteStatus()); + const [muted, setMuted] = useState(() => initialized && channel.muteStatus()?.muted); useEffect(() => { const handleEvent = () => { - setMuted(channel.muteStatus()); + setMuted(initialized && channel.muteStatus()?.muted); }; client.on('notification.channel_mutes_updated', handleEvent); return () => client.off('notification.channel_mutes_updated', handleEvent); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [muted]); + }, [channel, client, initialized, muted]); return muted; }; From 3e7f077740f09b1f480b65950a6f949f5229757d Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Fri, 15 Nov 2024 12:33:24 +0100 Subject: [PATCH 2/3] fix: properly use hook in channel preview --- .../components/ChannelPreview/hooks/useChannelPreviewData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts b/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts index 5fe2dae30..943ac5888 100644 --- a/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts +++ b/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts @@ -19,7 +19,7 @@ export const useChannelPreviewData = < | MessageResponse >(channel.state.messages[channel.state.messages.length - 1]); const [unread, setUnread] = useState(channel.countUnread()); - const { muted } = useIsChannelMuted(channel); + const muted = useIsChannelMuted(channel); /** * This effect listens for the `notification.mark_read` event and sets the unread count to 0 From b23b320148625a99615e4b894b52ccedb7780237 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Fri, 15 Nov 2024 13:14:52 +0100 Subject: [PATCH 3/3] fix: edge cases and test --- .../hooks/__tests__/useChannelPreviewMuted.test.tsx | 9 +++++++-- .../ChannelPreview/hooks/useChannelPreviewData.ts | 2 +- .../components/ChannelPreview/hooks/useIsChannelMuted.ts | 6 +++--- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewMuted.test.tsx b/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewMuted.test.tsx index f39d28316..1d52486f2 100644 --- a/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewMuted.test.tsx +++ b/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewMuted.test.tsx @@ -29,12 +29,17 @@ describe('useChannelPreviewMuted', () => { }); const mockChannel = { - muteStatus: jest.fn().mockReturnValue(false), + initialized: true, + muteStatus: jest.fn().mockReturnValue({ + createdAt: Date.now(), + expiresAt: Date.now() + 5000, + muted: false, + }), } as unknown as Channel; it('should return the correct mute status', () => { const { result } = renderHook(() => useIsChannelMuted(mockChannel)); - expect(result.current).toBe(false); + expect(result.current.muted).toBe(false); }); it("should update the mute status when the notification.channel_mutes_updated event is emitted'", () => { diff --git a/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts b/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts index 943ac5888..5fe2dae30 100644 --- a/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts +++ b/package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts @@ -19,7 +19,7 @@ export const useChannelPreviewData = < | MessageResponse >(channel.state.messages[channel.state.messages.length - 1]); const [unread, setUnread] = useState(channel.countUnread()); - const muted = useIsChannelMuted(channel); + const { muted } = useIsChannelMuted(channel); /** * This effect listens for the `notification.mark_read` event and sets the unread count to 0 diff --git a/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts b/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts index 766b1eecd..580bd0c41 100644 --- a/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts +++ b/package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts @@ -14,16 +14,16 @@ export const useIsChannelMuted = < const { client } = useChatContext(); const initialized = channel?.initialized; - const [muted, setMuted] = useState(() => initialized && channel.muteStatus()?.muted); + const [muted, setMuted] = useState(() => initialized && channel.muteStatus()); useEffect(() => { const handleEvent = () => { - setMuted(initialized && channel.muteStatus()?.muted); + setMuted(initialized && channel.muteStatus()); }; client.on('notification.channel_mutes_updated', handleEvent); return () => client.off('notification.channel_mutes_updated', handleEvent); }, [channel, client, initialized, muted]); - return muted; + return muted || { createdAt: null, expiresAt: null, muted: false }; };