Update ChatTable.tsx

components/dashboard/ChatTable.tsx

@@ -67,6 +67,7 @@ export default function ChatTable() {
   const [totalPages, setTotalPages] = useState(1);
   const [totalChats, setTotalChats] = useState(0);
   const [itemsPerPage, setItemsPerPage] = useState<number>(10);
+  const isManualRefresh = useRef(false);
   
   // Initialize audio element for notifications
   useEffect(() => {
@@ -112,7 +113,13 @@ export default function ChatTable() {
   
   // Fetch chats when component mounts or page/limit changes
   useEffect(() => {
+    // Skip fetch if this effect was triggered by a manual refresh
+    // since we'll call fetchChats directly in that case
+    if (!isManualRefresh.current) {
       fetchChats();
+    }
+    
+    isManualRefresh.current = false;
     
     // Set up polling for unread messages
     const interval = setInterval(() => {
@@ -122,6 +129,13 @@ export default function ChatTable() {
     return () => clearInterval(interval);
   }, [currentPage, itemsPerPage]);
   
+  // Handle refresh button click
+  const handleRefresh = () => {
+    isManualRefresh.current = true;
+    setCurrentPage(1);
+    fetchChats();
+  };
+  
   // Fetch unread counts
   const fetchUnreadCounts = async () => {
     try {
@@ -192,21 +206,27 @@ export default function ChatTable() {
   // Handle pagination
   const goToNextPage = () => {
     if (currentPage < totalPages) {
+      isManualRefresh.current = true;
       setCurrentPage(prev => prev + 1);
+      fetchChats();
     }
   };
 
   const goToPrevPage = () => {
     if (currentPage > 1) {
+      isManualRefresh.current = true;
       setCurrentPage(prev => prev - 1);
+      fetchChats();
     }
   };
 
   // Handle items per page change
   const handleItemsPerPageChange = (value: string) => {
     const newLimit = parseInt(value);
+    isManualRefresh.current = true;
     setItemsPerPage(newLimit);
     setCurrentPage(1); // Reset to first page when changing limit
+    fetchChats();
   };
 
   return (
@@ -215,10 +235,7 @@ export default function ChatTable() {
         <Button
           variant="outline"
           size="sm"
-          onClick={() => {
+          onClick={handleRefresh}
-            setCurrentPage(1);
-            fetchChats();
-          }}
           disabled={loading}
         >
           {loading ? (