spam list + socket events

src/pages/received/List.tsx

@@ -1,19 +1,22 @@
 import Filters, { FilterValues } from '../../components/Filters';
-import { FC, useState } from 'react'
+import { FC, useState, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Table from '../../components/Table';
 import { ColumnType } from '../../components/types/TableTypes';
 import { InfoCircle, More, Refresh2, Trash, Edit, Archive, ArchiveTick, Star1 } from 'iconsax-react';
 import { RowActionItem } from '../../components/RowActionsDropdown';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useGetInbox } from './hooks/useEmailData';
 import { InboxMessage } from './types/Types';
 import { formatDate } from '@/config/func';
 import MarkAsRead from '@/assets/images/mark_as_read.svg'
 import { useEmailActions } from '@/hooks/useEmailActions';
+import { useEmailWebSocketContext } from '@/contexts/EmailWebSocketContext';
+import { useEmailEvents } from '@/hooks/useEmailEvents';
 
 const List: FC = () => {
     const navigate = useNavigate();
+    const location = useLocation();
     const { t } = useTranslation();
     const [currentPage, setCurrentPage] = useState(1);
     const [filters, setFilters] = useState<FilterValues>({});
@@ -21,10 +24,38 @@ const List: FC = () => {
 
     const { data: inboxData, isLoading, refetch, isFetching } = useGetInbox({
         page: currentPage,
-        limit: 10,
+        limit: 25,
         ...filters
     });
 
+    // WebSocket integration
+    const { socket } = useEmailWebSocketContext();
+
+    const handleNewEmailEvent = useCallback(() => {
+        // Refresh inbox when new email arrives
+        refetch();
+    }, [refetch]);
+
+    const handleEmailActionEvent = useCallback(() => {
+        // Refresh inbox when email actions occur
+        refetch();
+    }, [refetch]);
+
+    useEmailEvents(socket, {
+        onNewEmail: handleNewEmailEvent,
+        onEmailRead: handleEmailActionEvent,
+        onEmailDeleted: handleEmailActionEvent,
+        // onMailboxUpdated: handleEmailActionEvent,
+    });
+
+    // Force refresh when component mounts or location changes
+    useEffect(() => {
+        // Refetch when coming back to inbox from other pages
+        if (location.pathname === '/') {
+            refetch();
+        }
+    }, [location.pathname, refetch]);
+
     const [selectedMessages, setSelectedMessages] = useState<InboxMessage[]>([]);
 
     const columns: ColumnType<InboxMessage>[] = [
@@ -32,7 +63,14 @@ const List: FC = () => {
             key: 'subject',
             title: 'عنوان پیام',
             render: (item) => (
-                <span className="truncate">{item.subject || 'بدون موضوع'}</span>
+                <div className="truncate max-w-[250px]">{item.subject || 'بدون موضوع'}</div>
+            )
+        },
+        {
+            key: 'intro',
+            title: 'پیش نمایش',
+            render: (item) => (
+                <div className="truncate max-w-[250px]">{item.intro || 'بدون موضوع'}</div>
             )
         },
         {