fix: event handlers when channels is null on channel list component (#1812)

vishalnarkhede · web-flow · commit be7c6c03654e · 2022-11-17T12:40:37.000+01:00
* fix: event handlers when channels is null on channel list component * fix: don't allow empty cids for sync api call * Revert "fix: don't allow empty cids for sync api call" This reverts commit 071d846. * refactor: improve the typescript for setChannels within event handlers
diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx
@@ -88,7 +88,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onAddedToChannel?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -100,7 +100,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelDeleted?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -112,7 +112,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelHidden?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -124,7 +124,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelTruncated?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -136,7 +136,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelUpdated?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -148,7 +148,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelVisible?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -161,7 +161,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onMessageNew?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -173,7 +173,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onRemovedFromChannel?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
diff --git a/package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx b/package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx
@@ -35,11 +35,12 @@ describe('useChannelUpdated', () => {
     } as unknown as StreamChat;
 
     const TestComponent = () => {
-      const [channels, setChannels] = useState<Channel[]>([mockChannel]);
+      const [channels, setChannels] = useState<Channel[] | null>([mockChannel]);
 
       useChannelUpdated({ setChannels });
 
       if (
+        channels &&
         channels[0].data?.own_capabilities &&
         Object.keys(channels[0].data?.own_capabilities as { [key: string]: boolean }).includes(
           'send_messages',
diff --git a/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts b/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts
@@ -11,9 +11,9 @@ import { getChannel } from '../../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onAddedToChannel?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
@@ -37,7 +37,7 @@ export const useAddedToChannelNotification = <
             id: event.channel.id,
             type: event.channel.type,
           });
-          setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+          setChannels((channels) => (channels ? uniqBy([channel, ...channels], 'cid') : channels));
         }
       }
     };
diff --git a/package/src/components/ChannelList/hooks/listeners/useChannelDeleted.ts b/package/src/components/ChannelList/hooks/listeners/useChannelDeleted.ts
@@ -8,9 +8,9 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onChannelDeleted?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
@@ -29,6 +29,7 @@ export const useChannelDeleted = <
         onChannelDeleted(setChannels, event);
       } else {
         setChannels((channels) => {
+          if (!channels) return channels;
           const index = channels.findIndex(
             (channel) => channel.cid === (event.cid || event.channel?.cid),
           );
diff --git a/package/src/components/ChannelList/hooks/listeners/useChannelHidden.ts b/package/src/components/ChannelList/hooks/listeners/useChannelHidden.ts
@@ -8,9 +8,9 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onChannelHidden?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
@@ -29,6 +29,8 @@ export const useChannelHidden = <
         onChannelHidden(setChannels, event);
       } else {
         setChannels((channels) => {
+          if (!channels) return channels;
+
           const index = channels.findIndex(
             (channel) => channel.cid === (event.cid || event.channel?.cid),
           );
diff --git a/package/src/components/ChannelList/hooks/listeners/useChannelTruncated.ts b/package/src/components/ChannelList/hooks/listeners/useChannelTruncated.ts
@@ -9,10 +9,10 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     refreshList: () => void;
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
     onChannelTruncated?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
diff --git a/package/src/components/ChannelList/hooks/listeners/useChannelUpdated.ts b/package/src/components/ChannelList/hooks/listeners/useChannelUpdated.ts
@@ -8,9 +8,9 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onChannelUpdated?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
@@ -29,6 +29,8 @@ export const useChannelUpdated = <
         onChannelUpdated(setChannels, event);
       } else {
         setChannels((channels) => {
+          if (!channels) return channels;
+
           const index = channels.findIndex(
             (channel) => channel.cid === (event.cid || event.channel?.cid),
           );
diff --git a/package/src/components/ChannelList/hooks/listeners/useChannelVisible.ts b/package/src/components/ChannelList/hooks/listeners/useChannelVisible.ts
@@ -11,9 +11,9 @@ import { getChannel } from '../../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onChannelVisible?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
@@ -37,7 +37,7 @@ export const useChannelVisible = <
             id: event.channel_id,
             type: event.channel_type,
           });
-          setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+          setChannels((channels) => (channels ? uniqBy([channel, ...channels], 'cid') : channels));
         }
       }
     };
diff --git a/package/src/components/ChannelList/hooks/listeners/useNewMessage.ts b/package/src/components/ChannelList/hooks/listeners/useNewMessage.ts
@@ -10,7 +10,7 @@ import { moveChannelUp } from '../../utils';
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     lockChannelOrder: boolean;
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
   };
 
 export const useNewMessage = <
@@ -24,6 +24,8 @@ export const useNewMessage = <
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setChannels((channels) => {
+        if (!channels) return channels;
+
         if (!lockChannelOrder && event.cid && event.channel_type && event.channel_id) {
           const targetChannelIndex = channels.findIndex((c) => c.cid === event.cid);
 
diff --git a/package/src/components/ChannelList/hooks/listeners/useNewMessageNotification.ts b/package/src/components/ChannelList/hooks/listeners/useNewMessageNotification.ts
@@ -11,9 +11,9 @@ import { getChannel } from '../../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onMessageNew?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
@@ -37,7 +37,7 @@ export const useNewMessageNotification = <
             id: event.channel.id,
             type: event.channel.type,
           });
-          setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+          setChannels((channels) => (channels ? uniqBy([channel, ...channels], 'cid') : channels));
         }
       }
     };
diff --git a/package/src/components/ChannelList/hooks/listeners/useRemovedFromChannelNotification.ts b/package/src/components/ChannelList/hooks/listeners/useRemovedFromChannelNotification.ts
@@ -8,9 +8,9 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onRemovedFromChannel?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };
@@ -29,6 +29,8 @@ export const useRemovedFromChannelNotification = <
         onRemovedFromChannel(setChannels, event);
       } else {
         setChannels((channels) => {
+          if (!channels) return channels;
+
           const newChannels = channels.filter((channel) => channel.cid !== event.channel?.cid);
           return [...newChannels];
         });
diff --git a/package/src/components/ChannelList/hooks/listeners/useUserPresence.ts b/package/src/components/ChannelList/hooks/listeners/useUserPresence.ts
@@ -8,7 +8,7 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
   };
 
 export const useUserPresence = <
@@ -21,6 +21,8 @@ export const useUserPresence = <
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setChannels((channels) => {
+        if (!channels) return channels;
+
         const newChannels = channels.map((channel) => {
           if (!event.user?.id || !channel.state.members[event.user.id]) {
             return channel;
diff --git a/package/src/components/ChannelList/hooks/usePaginatedChannels.ts b/package/src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -221,7 +221,7 @@ export const usePaginatedChannels = <
     // when setChannels is used. setChannels is only recommended to be used for overriding
     // event handler. Thus instead of adding if check for channels === null, its better to
     // simply reassign types here.
-    setChannels: setChannels as React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+    setChannels,
     staticChannelsActive,
   };
 };

Original file line number	Diff line number	Diff line change
`@@ -11,9 +11,9 @@ import { getChannel } from '../../utils';`
`11`	`11`
`12`	`12`	`type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =`
`13`	`13`	`{`
`14`		`- setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;`
	`14`	`+ setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] \| null>>;`
`15`	`15`	`onAddedToChannel?: (`
`16`		`- setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,`
	`16`	`+ setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] \| null>>,`
`17`	`17`	`event: Event<StreamChatGenerics>,`
`18`	`18`	`) => void;`
`19`	`19`	`};`
`@@ -37,7 +37,7 @@ export const useAddedToChannelNotification = <`
`37`	`37`	`id: event.channel.id,`
`38`	`38`	`type: event.channel.type,`
`39`	`39`	`});`
`40`		`- setChannels((channels) => uniqBy([channel, ...channels], 'cid'));`
	`40`	`+ setChannels((channels) => (channels ? uniqBy([channel, ...channels], 'cid') : channels));`
`41`	`41`	`}`
`42`	`42`	`}`
`43`	`43`	`};`