feat(conversations): Add Lazy Loading conversations list

src/modules/conversations/components/ConversationsSidebar.tsx

@@ -3,18 +3,22 @@ import { Drawer, Layout, List, Menu } from 'antd';
 import { useSelector } from 'react-redux';
 import { CheckCircle, Heart, RefreshCcw, Star } from 'react-feather';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import { LeadAvatar } from '@onr/conversations';
+import { LeadAvatar, ConversationsService } from '@onr/conversations';
 
 const { Sider } = Layout;
 
 interface ConversationsSidebarProps {
   conversationsData: any;
   onConversationSelected: any;
+  setConversationsResponse: any;
+  currentPage: number;
 }
 
 export const ConversationsSidebar: React.FC<ConversationsSidebarProps> = ({
   conversationsData,
   onConversationSelected,
+  setConversationsResponse,
+  currentPage,
 }: ConversationsSidebarProps) => {
   const isMobile = useSelector((store: any) => store.wrapper.mobile);
   const [messages, setMessages] = useState(false);
@@ -23,6 +27,21 @@ export const ConversationsSidebar: React.FC<ConversationsSidebarProps> = ({
     setSelectedIndex(index);
     onConversationSelected(index);
   };
+  const onListScroll = async (e) => {
+    const element = e.target
+    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
+      const conversationsResponse = await ConversationsService.getConversations({
+        campaignId: '1',
+        params: {
+          page: currentPage + 1,
+        },
+      });
+      // console.log(conversationsData);
+      conversationsResponse.data = conversationsData.concat(conversationsResponse.data);
+
+      setConversationsResponse(conversationsResponse);
+    }
+  };
   const conversations = (
     <div
       css={`
@@ -60,6 +79,7 @@ export const ConversationsSidebar: React.FC<ConversationsSidebarProps> = ({
         className="scroll-y flex-1 bg-transparent px-3 py-1"
         dataSource={conversationsData}
         itemLayout="horizontal"
+        onScroll={onListScroll}
         renderItem={(item, index) => (
           <List.Item
             onClick={changeIndex.bind(null, index)}

src/modules/conversations/pages/ConversationsMainPage.tsx

@@ -10,7 +10,7 @@ import {
 
 const ConversationsComponent: React.FC = () => {
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [conversationsData, setConversationsData] = useState([]);
+  const [conversationsResponse, setConversationsResponse] = useState({ data: [], meta: {} });
   const fetchConversations = async (campaignId: string) => {
     const response = await ConversationsService.getConversations({ campaignId });
     return response;
@@ -22,7 +22,7 @@ const ConversationsComponent: React.FC = () => {
   useEffect(() => {
     (async function() {
       const conversationsResponse = await fetchConversations('1');
-      setConversationsData(conversationsResponse.data);
+      setConversationsResponse(conversationsResponse);
     })();
   }, []);
 
@@ -31,11 +31,13 @@ const ConversationsComponent: React.FC = () => {
       <Layout className="fill-workspace rounded shadow-sm overflow-hidden">
         <FilterSidebar />
         <ConversationsSidebar
-          conversationsData={conversationsData}
+          conversationsData={conversationsResponse.data}
+          setConversationsResponse={setConversationsResponse}
           onConversationSelected={onConversationSelected}
+          currentPage={conversationsResponse.meta.current_page}
         />
-        {conversationsData[selectedIndex] && (
-          <ChatRoom conversation={conversationsData[selectedIndex]} />
+        {conversationsResponse.data[selectedIndex] && (
+          <ChatRoom conversation={conversationsResponse.data[selectedIndex]} />
         )}
       </Layout>
     </>