fix: chat rooms refetch issue

Author: pt-tsl

packages/components/modules/messages/ChatRoomsList/index.tsx

@@ -1,6 +1,15 @@
 'use client'
 
-import { ChangeEventHandler, FC, useCallback, useMemo, useState, useTransition } from 'react'
+import {
+  ChangeEventHandler,
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useTransition,
+} from 'react'
 
 import { Searchbar as DefaultSearchbar, LoadingState } from '@baseapp-frontend/design-system'
 
@@ -37,21 +46,22 @@ const ChatRoomsList: FC<ChatRoomsListProps> = ({
 
   const [isPending, startTransition] = useTransition()
   const { control, reset, watch } = useForm({ defaultValues: { search: '' } })
+  const cursor = useRef<string | null | undefined>(null)
 
   const isInUnreadTab = tab === CHAT_TAB_VALUES.unread
   const isInArchivedTab = tab === CHAT_TAB_VALUES.archived
 
   const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     const value = e.target.value || ''
     startTransition(() => {
-      refetch({ q: value })
+      refetch({ q: value, cursor: cursor.current })
     })
   }
 
   const handleSearchClear = () => {
     startTransition(() => {
       reset()
-      refetch({ q: '' })
+      refetch({ q: '', cursor: cursor.current })
     })
   }
 
@@ -62,12 +72,19 @@ const ChatRoomsList: FC<ChatRoomsListProps> = ({
         {
           unreadMessages: newTab === CHAT_TAB_VALUES.unread,
           archived: newTab === CHAT_TAB_VALUES.archived,
+          cursor: cursor.current,
         },
         { fetchPolicy: 'store-and-network' },
       )
     })
   }
 
+  useEffect(() => {
+    if (data?.chatRooms?.pageInfo?.endCursor) {
+      cursor.current = data.chatRooms.pageInfo.endCursor
+    }
+  }, [data?.chatRooms?.pageInfo?.endCursor])
+
   const { id: selectedRoom, setChatRoom } = useChatRoom()
   const chatRooms = useMemo(
     () => data?.chatRooms?.edges?.filter((edge) => edge?.node).map((edge) => edge?.node) || [],