chore: test custom ChannelListUI comp

sendbird · Jul 27, 2023 · 9c91acd · 9c91acd
1 parent 1e79a41
commit 9c91acd
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 16 deletions.
diff --git a/samples/typescript_sample/src/App.tsx b/samples/typescript_sample/src/App.tsx
@@ -8,28 +8,41 @@ import ChannelList from '@sendbird/uikit-react/ChannelList';
 import Channel from '@sendbird/uikit-react/Channel';
 
 import { APP_ID, USER_ID, NICKNAME } from './const';
+import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';
+import { CustomChannelListUI } from './CustomChannelListUI';
 
 function App() {
   const [currentChannelUrl, setCurrentChannelUrl] = React.useState('');
   return (
     <div className="App">
       <SendbirdProvider appId={APP_ID} userId={USER_ID} nickname={NICKNAME}>
-        <div className="sendbird-app__channellist-wrap">
-          {/* ChannelList has wrong props will fix in 2.0.1
-          // @ts-ignore */}
-          <ChannelList
-            onChannelSelect={(channel) => {
-              if (channel?.url) {
-                setCurrentChannelUrl(channel.url);
-              }
-            }}
-          />
-        </div>
-        <div className="sendbird-app__conversation-wrap">
-          <Channel
-            channelUrl={currentChannelUrl}
-          />
-        </div>
+        <>
+          <div className="sendbird-app__channellist-wrap">
+            {/* ChannelList has wrong props will fix in 2.0.1
+            // @ts-ignore */}
+            {/* <ChannelList
+              onChannelSelect={(channel) => {
+                if (channel?.url) {
+                  setCurrentChannelUrl(channel.url);
+                }
+              }}
+            /> */}
+            <ChannelListProvider
+              onChannelSelect={(channel) => {
+                if (channel?.url) {
+                  setCurrentChannelUrl(channel.url);
+                }
+              }}
+            >
+              <CustomChannelListUI />
+            </ChannelListProvider>
+          </div>
+          <div className="sendbird-app__conversation-wrap">
+            <Channel
+              channelUrl={currentChannelUrl}
+            />
+          </div>
+        </>
       </SendbirdProvider>
     </div>
   );

diff --git a/samples/typescript_sample/src/CustomChannelListUI.tsx b/samples/typescript_sample/src/CustomChannelListUI.tsx
@@ -0,0 +1,34 @@
+import { sendbirdSelectors, useSendbirdStateContext } from "@sendbird/uikit-react";
+import ChannelListUI from "@sendbird/uikit-react/ChannelList/components/ChannelListUI";
+import { useChannelListContext } from "@sendbird/uikit-react/ChannelList/context"
+import { useCallback } from "react";
+
+export function CustomChannelListUI() {
+  const {
+    allChannels
+  } = useChannelListContext();
+  const store = useSendbirdStateContext();
+  const fetchChannelList = sendbirdSelectors.getFetchChannelList(store);
+
+  const handleScroll = useCallback(() => {
+    if (/* if scroll is reached to bottom */true) {
+      fetchChannelList();
+    }
+  }, []);
+
+  return (
+    <div
+      onScroll={handleScroll}
+    >
+      {
+        allChannels.map(() => {
+          return (
+            <div>
+
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}