fix: Provide scrollRef in GroupChannelList (#1281)

[SBISSUE-17925](https://sendbird.atlassian.net/browse/SBISSUE-17925)

* Added `scrollRef` in GroupChannelList context


[SBISSUE-17925]:
https://sendbird.atlassian.net/browse/SBISSUE-17925?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx

@@ -27,6 +27,9 @@ export interface Props {
   renderChannel: (props: { item: GroupChannel; index: number }) => React.ReactElement;
 
   renderAddChannel(): React.ReactElement;
+
+  // NOTE: scrollRef is used only for external access (export) and not for internal logic.
+  scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const GroupChannelListUIView = ({
@@ -45,6 +48,8 @@ export const GroupChannelListUIView = ({
   renderChannel,
 
   renderAddChannel,
+
+  scrollRef,
 }: Props) => {
   const [showProfileEdit, setShowProfileEdit] = useState(false);
   const { stores } = useSendbirdStateContext();
@@ -102,6 +107,7 @@ export const GroupChannelListUIView = ({
         placeholderLoading={renderer.placeholder.loading()}
         placeholderEmpty={renderer.placeholder.empty()}
         placeholderError={renderer.placeholder.error()}
+        scrollRef={scrollRef}
       />
     </React.Fragment>
   );
@@ -118,19 +124,20 @@ const ChannelListComponent = <T, >(props: {
   data: T[];
   renderItem: (props: { item: T; index: number }) => React.ReactNode;
   onLoadMore?: () => void;
+  scrollRef: React.RefObject<HTMLDivElement>;
 
   placeholderLoading?: React.ReactNode;
   placeholderEmpty?: React.ReactNode;
   placeholderError?: React.ReactNode;
 }) => {
-  const { data, renderItem, onLoadMore, placeholderLoading, placeholderError, placeholderEmpty } = props;
+  const { data, renderItem, onLoadMore, placeholderLoading, placeholderError, placeholderEmpty, scrollRef } = props;
 
   const onScroll = useOnScrollPositionChangeDetector({
     onReachedBottom: () => onLoadMore?.(),
   });
 
   return (
-    <div className='sendbird-channel-list__body' onScroll={onScroll}>
+    <div className='sendbird-channel-list__body' onScroll={onScroll} ref={scrollRef}>
       {placeholderError}
       <div>{data.map((item, index) => renderItem({ item, index }))}</div>
       {placeholderLoading}

src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx

@@ -34,6 +34,7 @@ export const GroupChannelListUI = (props: GroupChannelListUIProps) => {
     selectedChannelUrl,
     loadMore,
     onUserProfileUpdated,
+    scrollRef,
   } = useGroupChannelListContext();
 
   const { stores, config } = useSendbirdStateContext();
@@ -89,6 +90,7 @@ export const GroupChannelListUI = (props: GroupChannelListUIProps) => {
       onLoadMore={loadMore}
       initialized={initialized}
       renderAddChannel={() => <AddGroupChannel />}
+      scrollRef={scrollRef}
     />
   );
 };

src/modules/GroupChannelList/context/GroupChannelListProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import type { User } from '@sendbird/chat';
 import type { GroupChannel, GroupChannelCreateParams, GroupChannelFilterParams } from '@sendbird/chat/groupChannel';
@@ -45,6 +45,7 @@ interface ContextBaseType {
 
 export interface GroupChannelListContextType extends ContextBaseType, ChannelListDataSource {
   typingChannelUrls: string[];
+  scrollRef: React.RefObject<HTMLDivElement>;
 }
 export interface GroupChannelListProviderProps extends
   PartialRequired<ContextBaseType, 'onChannelSelect' | 'onChannelCreated'>,
@@ -80,6 +81,8 @@ export const GroupChannelListProvider = (props: GroupChannelListProviderProps) =
   const isConnected = useOnlineStatus(sdk, config.logger);
   const scheduler = useMarkAsDeliveredScheduler({ isConnected }, config);
 
+  const scrollRef = useRef(null);
+
   const channelListDataSource = useGroupChannelList(sdk, {
     collectionCreator: getCollectionCreator(sdk, channelListQueryParams),
     markAsDelivered: (channels) => channels.forEach(scheduler.push),
@@ -141,6 +144,7 @@ export const GroupChannelListProvider = (props: GroupChannelListProviderProps) =
         groupChannels,
         refresh,
         loadMore,
+        scrollRef,
       }}
     >
       <UserProfileProvider {...props}>