fix: add improvements

Author: khushal87

package/package.json

@@ -118,6 +118,7 @@
     "@types/mime-types": "2.1.0",
     "@types/react": "18.2.6",
     "@types/react-test-renderer": "18.0.7",
+    "@types/use-sync-external-store": "^0.0.6",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -149,6 +150,7 @@
     "react-native-svg": "15.1.0",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4",
+    "use-sync-external-store": "^1.4.0",
     "uuid": "^8.3.2"
   },
   "resolutions": {

package/src/components/ChannelList/hooks/listeners/useChannelMemberUpdated.ts

@@ -78,10 +78,10 @@ export const useChannelMemberUpdated = <
 
           // handle archiving (remove channel)
           if (
-            // When archived filter true, and channel is not archived
-            (!considerArchivedChannels && !isTargetChannelArchived) ||
+            // When archived filter true, and channel is unarchived
+            (considerArchivedChannels && !isTargetChannelArchived && filters?.archived) ||
             // When archived filter false, and channel is archived
-            (considerArchivedChannels && isTargetChannelArchived)
+            (considerArchivedChannels && isTargetChannelArchived && !filters?.archived)
           ) {
             return newChannels;
           }

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -46,45 +46,35 @@ export const useNewMessage = <
       } else {
         const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
         const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+
+        const channelType = event.channel_type;
+        const channelId = event.channel_id;
+
+        if (!channelType || !channelId) return;
+
         setChannels((channels) => {
           if (!channels) return channels;
-          const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
-          const targetChannel = channels[targetChannelIndex];
+          const targetChannel = client.channel(channelType, channelId);
+          const targetChannelIndex = channels.indexOf(targetChannel);
 
           const isTargetChannelArchived = isChannelArchived(targetChannel);
           const isTargetChannelPinned = isChannelPinned(targetChannel);
 
           if (
-            // If the channel is archived and we are not considering archived channels
-            (isTargetChannelArchived && considerArchivedChannels) ||
+            // When archived filter false, and channel is archived
+            (considerArchivedChannels && isTargetChannelArchived && !filters?.archived) ||
+            // When archived filter true, and channel is unarchived
+            (considerArchivedChannels && !isTargetChannelArchived && filters?.archived) ||
             // If the channel is pinned and we are not considering pinned channels
             (isTargetChannelPinned && considerPinnedChannels) ||
             lockChannelOrder
           ) {
             return [...channels];
           }
 
-          // If channel doesn't exist in existing list, check in activeChannels as well.
-          // It may happen that channel was hidden using channel.hide(). In that case
-          // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
-          const channelToMove =
-            targetChannel ??
-            (event.channel_type &&
-              event.channel_id &&
-              client.channel(event.channel_type, event.channel_id));
-
-          // While adding new channels, we need to consider whether they are archived or not.
-          if (
-            // When archived filter false, and channel is archived
-            (considerArchivedChannels && isChannelArchived(channelToMove)) ||
-            // When archived filter true, and channel is not archived
-            (!considerArchivedChannels && !isChannelArchived(channelToMove))
-          ) {
-            return [...channels];
-          }
           return moveChannelUp<StreamChatGenerics>({
             channels,
-            channelToMove,
+            channelToMove: targetChannel,
             channelToMoveIndexWithinChannels: targetChannelIndex,
             sort,
           });

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

@@ -1,40 +1,22 @@
-import { useEffect, useState } from 'react';
+import { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';
 
-import { Channel, ChannelState } from 'stream-chat';
+import { useSelectedChannelState } from './useSelectedChannelState';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { DefaultStreamChatGenerics } from '../../../types/types';
 
-export const useChannelMembershipState = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel?: Channel<StreamChatGenerics>,
-) => {
-  const [membership, setMembership] = useState<ChannelState<StreamChatGenerics>['membership']>(
-    () => channel?.state.membership || {},
-  );
-
-  const { client } = useChatContext<StreamChatGenerics>();
-
-  useEffect(
-    () => {
-      if (!channel) return;
-
-      setMembership(channel.state.membership);
-
-      const handleMembershipUpdate = () => {
-        setMembership(channel.state.membership);
-      };
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel: Channel<StreamChatGenerics>,
+) => channel.state.membership;
+const keys: EventTypes[] = ['member.updated'];
 
-      const subscriptions = ['member.updated'].map((event) =>
-        client.on(event, handleMembershipUpdate),
-      );
-
-      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channel?.state.membership, client],
-  );
-
-  return membership;
-};
+export function useChannelMembershipState<StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel: Channel<StreamChatGenerics>,
+): ChannelMemberResponse<StreamChatGenerics>;
+export function useChannelMembershipState<StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel?: Channel<StreamChatGenerics>,
+): ChannelMemberResponse<StreamChatGenerics> | undefined;
+export function useChannelMembershipState<StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel?: Channel<StreamChatGenerics>,
+) {
+  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+}

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

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+
+import type { Channel, EventTypes } from 'stream-chat';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+const noop = () => {};
+
+export function useSelectedChannelState<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+  O,
+>(_: {
+  channel: Channel<StreamChatGenerics>;
+  selector: (channel: Channel<StreamChatGenerics>) => O;
+  stateChangeEventKeys?: EventTypes[];
+}): O;
+export function useSelectedChannelState<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+  O,
+>(_: {
+  selector: (channel: Channel<StreamChatGenerics>) => O;
+  channel?: Channel<StreamChatGenerics> | undefined;
+  stateChangeEventKeys?: EventTypes[];
+}): O | undefined;
+export function useSelectedChannelState<StreamChatGenerics extends DefaultStreamChatGenerics, O>({
+  channel,
+  selector,
+  stateChangeEventKeys = ['all'],
+}: {
+  selector: (channel: Channel<StreamChatGenerics>) => O;
+  channel?: Channel<StreamChatGenerics>;
+  stateChangeEventKeys?: EventTypes[];
+}): O | undefined {
+  const subscribe = useCallback(
+    (onStoreChange: (value: O) => void) => {
+      if (!channel) return noop;
+
+      const subscriptions = stateChangeEventKeys.map((et) =>
+        channel.on(et, () => {
+          onStoreChange(selector(channel));
+        }),
+      );
+
+      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    },
+    [channel, selector, stateChangeEventKeys],
+  );
+
+  const getSnapshot = useCallback(() => {
+    if (!channel) return undefined;
+
+    return selector(channel);
+  }, [channel, selector]);
+
+  return useSyncExternalStore(subscribe, getSnapshot);
+}

package/src/components/ChannelList/hooks/utils/index.ts

@@ -34,7 +34,7 @@ export const shouldConsiderArchivedChannels = <
 ) => {
   if (!filters) return false;
 
-  return !filters.archived;
+  return typeof filters.archived === 'boolean';
 };
 
 export const extractSortValue = <

package/yarn.lock

@@ -3089,6 +3089,11 @@
   resolved "https://registry.yarnpkg.com/@types/symlink-or-copy/-/symlink-or-copy-1.2.2.tgz#51b1c00b516a5774ada5d611e65eb123f988ef8d"
   integrity sha512-MQ1AnmTLOncwEf9IVU+B2e4Hchrku5N67NkgcAHW0p3sdzPe0FNMANxEm6OJUzPniEQGkeT3OROLlCwZJLWFZA==
 
+"@types/use-sync-external-store@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz#60be8d21baab8c305132eb9cb912ed497852aadc"
+  integrity sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==
+
 "@types/uuid@^8.3.4":
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
@@ -9943,6 +9948,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
+  integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"