From 1b2d009dcf1e610e50990607fe6f55d437fc1139 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Mon, 9 Dec 2024 17:37:35 +0900
Subject: [PATCH 1/2] export scrollRef in GroupChannelList context

---
 .../GroupChannelListUI/GroupChannelListUIView.tsx     | 11 +++++++++--
 .../components/GroupChannelListUI/index.tsx           |  2 ++
 .../context/GroupChannelListProvider.tsx              |  6 +++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx b/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
index 4777ae7ce..34feb3648 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
+++ b/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: We only support scrollRef in GroupChannelList
+  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}
diff --git a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx b/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
index 9c5efdac4..65bdb9895 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx b/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx
index dbd7024a6..064f0fcf8 100644
--- a/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx
+++ b/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}>

From 5125e831b1bf5b3199b07b42029b0b82a86f6f17 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 10 Dec 2024 11:54:16 +0900
Subject: [PATCH 2/2] make comment clearly

---
 .../components/GroupChannelListUI/GroupChannelListUIView.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx b/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
index 34feb3648..11ed52154 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
+++ b/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
@@ -28,7 +28,7 @@ export interface Props {
 
   renderAddChannel(): React.ReactElement;
 
-  // NOTE: We only support scrollRef in GroupChannelList
+  // NOTE: scrollRef is used only for external access (export) and not for internal logic.
   scrollRef?: React.RefObject<HTMLDivElement>;
 }