Allow integrators to shape their ChannelLists however they want with more freedom

Author: arnautov-anton

src/components/ChannelList/ChannelList.tsx

@@ -2,20 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
-import { useChannelDeletedListener } from './hooks/useChannelDeletedListener';
-import { useChannelHiddenListener } from './hooks/useChannelHiddenListener';
-import { useChannelTruncatedListener } from './hooks/useChannelTruncatedListener';
-import { useChannelUpdatedListener } from './hooks/useChannelUpdatedListener';
-import { useChannelVisibleListener } from './hooks/useChannelVisibleListener';
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
-import { useMessageNewListener } from './hooks/useMessageNewListener';
 import { useMobileNavigation } from './hooks/useMobileNavigation';
-import { useNotificationAddedToChannelListener } from './hooks/useNotificationAddedToChannelListener';
-import { useNotificationMessageNewListener } from './hooks/useNotificationMessageNewListener';
-import { useNotificationRemovedFromChannelListener } from './hooks/useNotificationRemovedFromChannelListener';
 import { CustomQueryChannelsFn, usePaginatedChannels } from './hooks/usePaginatedChannels';
-import { useUserPresenceChangedListener } from './hooks/useUserPresenceChangedListener';
-import { useMemberUpdatedListener } from './hooks/useMemberUpdatedListener';
 import {
   MAX_QUERY_CHANNELS_LIMIT,
   moveChannelUpwards,
@@ -43,6 +32,7 @@ import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from
 import type { ChannelAvatarProps } from '../Avatar';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
+import { useChannelListShape, usePrepareShapeHandlers } from './hooks/useChannelListShape';
 
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
@@ -167,15 +157,13 @@ export type ChannelListProps<
   watchers?: { limit?: number; offset?: number };
 };
 
-const UnMemoizedChannelList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelListProps<StreamChatGenerics>,
+const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  props: ChannelListProps<SCG>,
 ) => {
   const {
     additionalChannelSearchProps,
     Avatar = DefaultAvatar,
-    allowNewMessagesFromUnfilteredChannels,
+    allowNewMessagesFromUnfilteredChannels = true,
     channelRenderFilterFn,
     ChannelSearch = DefaultChannelSearch,
     customActiveChannel,
@@ -186,7 +174,7 @@ const UnMemoizedChannelList = <
     LoadingErrorIndicator = NullComponent,
     LoadingIndicator = LoadingChannels,
     List = ChannelListMessenger,
-    lockChannelOrder,
+    lockChannelOrder = false,
     onAddedToChannel,
     onChannelDeleted,
     onChannelHidden,
@@ -218,7 +206,7 @@ const UnMemoizedChannelList = <
     setActiveChannel,
     theme,
     useImageFlagEmojisOnWindows,
-  } = useChatContext<StreamChatGenerics>('ChannelList');
+  } = useChatContext<SCG>('ChannelList');
 
   const channelListRef = useRef<HTMLDivElement>(null);
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
@@ -228,8 +216,8 @@ const UnMemoizedChannelList = <
    * If customActiveChannel prop is absent, then set the first channel in list as active channel.
    */
   const activeChannelHandler = async (
-    channels: Array<Channel<StreamChatGenerics>>,
-    setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
+    channels: Array<Channel<SCG>>,
+    setChannels: React.Dispatch<React.SetStateAction<Array<Channel<SCG>>>>,
   ) => {
     if (!channels.length || channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
       return;
@@ -269,17 +257,11 @@ const UnMemoizedChannelList = <
    * For some events, inner properties on the channel will update but the shallow comparison will not
    * force a re-render. Incrementing this dummy variable ensures the channel previews update.
    */
-  const forceUpdate = useCallback(
-    () => setChannelUpdateCount((count) => count + 1),
-    [setChannelUpdateCount],
-  );
+  const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);
 
   const onSearch = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!event.target.value) {
-      setSearchActive(false);
-    } else {
-      setSearchActive(true);
-    }
+    setSearchActive(!!event.target.value);
+
     additionalChannelSearchProps?.onSearch?.(event);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -302,43 +284,35 @@ const UnMemoizedChannelList = <
 
   const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
 
-  const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-
   useMobileNavigation(channelListRef, navOpen, closeMobileNav);
 
-  useMessageNewListener(
-    setChannels,
-    onMessageNewHandler,
-    lockChannelOrder,
+  const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+
+  const { customFn, defaultFn } = usePrepareShapeHandlers<SCG>({
     allowNewMessagesFromUnfilteredChannels,
-    // TODO: adjust accordingly (consider sort option)
     considerPinnedChannels,
-  );
-  useNotificationMessageNewListener(
-    setChannels,
-    onMessageNew,
-    allowNewMessagesFromUnfilteredChannels,
-  );
-  useNotificationAddedToChannelListener(
-    setChannels,
+    lockChannelOrder,
     onAddedToChannel,
-    allowNewMessagesFromUnfilteredChannels,
-  );
-  useMemberUpdatedListener({
-    considerPinnedChannels,
+    onChannelDeleted,
+    onChannelHidden,
+    onChannelTruncated,
+    onChannelUpdated,
+    onChannelVisible,
+    onMessageNew,
+    onMessageNewHandler,
+    onRemovedFromChannel,
     setChannels,
+    // TODO: implement
+    // customHandleChannelListShape
   });
-  useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
-  useChannelDeletedListener(setChannels, onChannelDeleted);
-  useChannelHiddenListener(setChannels, onChannelHidden);
-  useChannelVisibleListener(setChannels, onChannelVisible);
-  useChannelTruncatedListener(setChannels, onChannelTruncated, forceUpdate);
-  useChannelUpdatedListener(setChannels, onChannelUpdated, forceUpdate);
+
+  useChannelListShape<SCG>(customFn ?? defaultFn);
+
+  // TODO: maybe move this too
   useConnectionRecoveredListener(forceUpdate);
-  useUserPresenceChangedListener(setChannels);
 
   useEffect(() => {
-    const handleEvent = (event: Event<StreamChatGenerics>) => {
+    const handleEvent = (event: Event<SCG>) => {
       if (event.cid === channel?.cid) {
         setActiveChannel();
       }
@@ -354,7 +328,7 @@ const UnMemoizedChannelList = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channel?.cid]);
 
-  const renderChannel = (item: Channel<StreamChatGenerics>) => {
+  const renderChannel = (item: Channel<SCG>) => {
     const previewProps = {
       activeChannel: channel,
       Avatar,