fix: properly cover rerendering issues

Author: isekovanic

package/src/components/ChannelList/ChannelList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { FlatList } from 'react-native-gesture-handler';
 
@@ -16,16 +16,16 @@ import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicat
 import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetworkDownIndicator';
 import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
 import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
-import { useAddedToChannelNotification } from './hooks/listeners/useAddedToChannelNotification';
-import { useChannelDeleted } from './hooks/listeners/useChannelDeleted';
-import { useChannelHidden } from './hooks/listeners/useChannelHidden';
-import { useChannelTruncated } from './hooks/listeners/useChannelTruncated';
-import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
-import { useChannelVisible } from './hooks/listeners/useChannelVisible';
-import { useNewMessage } from './hooks/listeners/useNewMessage';
-import { useNewMessageNotification } from './hooks/listeners/useNewMessageNotification';
-import { useRemovedFromChannelNotification } from './hooks/listeners/useRemovedFromChannelNotification';
-import { useUserPresence } from './hooks/listeners/useUserPresence';
+// import { useAddedToChannelNotification } from './hooks/listeners/useAddedToChannelNotification';
+// import { useChannelDeleted } from './hooks/listeners/useChannelDeleted';
+// import { useChannelHidden } from './hooks/listeners/useChannelHidden';
+// import { useChannelTruncated } from './hooks/listeners/useChannelTruncated';
+// import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
+// import { useChannelVisible } from './hooks/listeners/useChannelVisible';
+// import { useNewMessage } from './hooks/listeners/useNewMessage';
+// import { useNewMessageNotification } from './hooks/listeners/useNewMessageNotification';
+// import { useRemovedFromChannelNotification } from './hooks/listeners/useRemovedFromChannelNotification';
+// import { useUserPresence } from './hooks/listeners/useUserPresence';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
 import { Skeleton as SkeletonDefault } from './Skeleton';
@@ -248,15 +248,15 @@ export const ChannelList = <
     lockChannelOrder = false,
     maxUnreadCount = 255,
     numberOfSkeletons = 6,
-    onAddedToChannel,
-    onChannelDeleted,
-    onChannelHidden,
-    onChannelTruncated,
-    onChannelUpdated,
-    onChannelVisible,
-    onNewMessage,
-    onNewMessageNotification,
-    onRemovedFromChannel,
+    // onAddedToChannel,
+    // onChannelDeleted,
+    // onChannelHidden,
+    // onChannelTruncated,
+    // onChannelUpdated,
+    // onChannelVisible,
+    // onNewMessage,
+    // onNewMessageNotification,
+    // onRemovedFromChannel,
     onSelect,
     options = DEFAULT_OPTIONS,
     Preview = ChannelPreviewMessenger,
@@ -272,20 +272,27 @@ export const ChannelList = <
   } = props;
 
   const [forceUpdate, setForceUpdate] = useState(0);
-  const [channelManager, setChannelManager] = useState<ChannelManager<StreamChatGenerics> | null>(
-    null,
-  );
   const { client, enableOfflineSupport } = useChatContext<StreamChatGenerics>();
+  const [channelManager, setChannelManager] = useState<ChannelManager<StreamChatGenerics>>(
+    client.createChannelManager({ options: { lockChannelOrder } }),
+  );
+  const clientRef = useRef(client);
 
   useEffect(() => {
-    const manager = new ChannelManager<StreamChatGenerics>({ client });
-    manager.registerSubscriptions();
-    setChannelManager(manager);
+    if (clientRef.current !== client) {
+      const manager = client.createChannelManager({ options: { lockChannelOrder } });
+      setChannelManager(manager);
+      clientRef.current = client;
+    }
+  }, [client, lockChannelOrder]);
+
+  useEffect(() => {
+    channelManager.registerSubscriptions();
 
     return () => {
-      manager?.unregisterSubscriptions();
+      channelManager.unregisterSubscriptions();
     };
-  }, [client]);
+  }, [channelManager]);
 
   const {
     channels,
@@ -299,12 +306,12 @@ export const ChannelList = <
     reloadList,
     staticChannelsActive,
   } = usePaginatedChannels<StreamChatGenerics>({
+    channelManager,
     enableOfflineSupport,
     filters,
     options,
     setForceUpdate,
     sort,
-    channelManager,
   });
 
   // Setup event listeners

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -26,12 +26,12 @@ const waitSeconds = (seconds: number) =>
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
+    channelManager: ChannelManager<StreamChatGenerics>;
     enableOfflineSupport: boolean;
     filters: ChannelFilters<StreamChatGenerics>;
     options: ChannelOptions;
     setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
     sort: ChannelSort<StreamChatGenerics>;
-    channelManager?: ChannelManager<StreamChatGenerics>;
   };
 
 const DEFAULT_OPTIONS = {
@@ -45,7 +45,9 @@ type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
 
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
-const selector = (nextValue: ChannelManagerState) =>
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  nextValue: ChannelManagerState<StreamChatGenerics>,
+) =>
   ({
     channels: nextValue.channels,
     pagination: nextValue.pagination,
@@ -215,6 +217,7 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
+    console.log('TRIGGERING', !channelManager);
     const loadOfflineChannels = async () => {
       if (!client?.user?.id) return;
 
@@ -294,7 +297,9 @@ export const usePaginatedChannels = <
     //     : (activeQueryType.current === 'reload' || activeQueryType.current === null) &&
     //       channels === null,
     loadingChannels:
-      activeQueryType.current === 'queryLocalDB' || !channelManager ? true : pagination?.isLoading,
+      activeQueryType.current === 'queryLocalDB' || !channelManager
+        ? true
+        : pagination?.isLoading || channels == null,
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager?.loadNext,
     refreshing: activeQueryType.current === 'refresh',