download email + search

src/pages/received/Components/Header.tsx

@@ -11,6 +11,7 @@ import MessageFavorite from './MessageFavorite'
 import MessageTrash from './MessageTrash'
 import { MessageDetail } from '../types/Types'
 import { sanitizeEmailHTML, detectTextDirection } from '@/config/func'
+import { useDownloadEmail } from '../hooks/useEmailData'
 
 const Header: FC<{
     mailBoxName: MailboxEnum,
@@ -20,7 +21,7 @@ const Header: FC<{
 
     const navigate = useNavigate()
     const { t } = useTranslation()
-
+    const { mutate: downloadEmail } = useDownloadEmail()
     const handlePrint = () => {
         if (!messageDetail) return
 
@@ -92,6 +93,34 @@ const Header: FC<{
         }
     }
 
+    const handleDownloadEmail = () => {
+        if (!messageDetail) return
+        downloadEmail({ messageId: Number(messageDetail.id), mailbox: messageDetail.mailbox }, {
+            onSuccess: (data) => {
+                try {
+                    const url = window.URL.createObjectURL(data)
+                    const link = document.createElement('a')
+                    link.href = url
+                    const fileName = (messageDetail.subject || `email-${messageDetail.id}`)
+                        .replace(/[<>:"/\\|?*]/g, '') // حذف کاراکترهای غیرمجاز
+                        .substring(0, 100) // محدود کردن طول نام فایل
+                    link.download = `${fileName}.eml`
+                    document.body.appendChild(link)
+                    link.click()
+                    document.body.removeChild(link)
+                    window.URL.revokeObjectURL(url)
+                } catch (error) {
+                    console.error('خطا در دانلود فایل:', error)
+                    alert('خطا در دانلود فایل رخ داد')
+                }
+            },
+            onError: (error) => {
+                console.error('خطا در دریافت فایل:', error)
+                alert('خطا در دریافت فایل از سرور رخ داد')
+            }
+        })
+    }
+
     return (
         <div className='flex justify-between items-center border-b border-border pb-6'>
             <div className='flex flex-1 lg:gap-4'>
@@ -111,6 +140,7 @@ const Header: FC<{
                 <Button
                     variant='secondary'
                     className='lg:block hidden'
+                    onClick={handleDownloadEmail}
                 >
                     <div className='flex gap-2 items-center xl:px-5'>
                         <DocumentDownload size={20} color='black' />

src/pages/received/hooks/useEmailData.tsx

@@ -28,6 +28,7 @@ export const useGetInbox = (query: MessageListQueryDto) => {
         queryFn: () => api.getInbox(query),
         staleTime: 0, // Always fetch fresh data
         refetchOnWindowFocus: true,
+        enabled: query.enabled ?? true
     });
 };
 
@@ -136,4 +137,10 @@ export const useMarkAllRead = () => {
     return useMutation({
         mutationFn: () => api.markAllRead(),
     });
+};
+
+export const useDownloadEmail = () => {
+    return useMutation({
+        mutationFn: ({ messageId, mailbox }: { messageId: number; mailbox: string }) => api.downloadEmail(messageId, mailbox),
+    });
 };

src/pages/received/service/EmailService.ts

@@ -168,3 +168,13 @@ export const markAllRead = async () => {
   );
   return data;
 };
+
+export const downloadEmail = async (messageId: number, mailbox: string) => {
+  const {
+    data,
+  } = await axios.get(
+    `/email/messages/${messageId}/download?mailbox=${mailbox}`,
+    { responseType: "blob" }
+  );
+  return data;
+};

src/pages/received/types/Types.ts

@@ -66,6 +66,7 @@ export interface MessageListQueryDto {
   unseen?: boolean;
   flagged?: boolean;
   order?: "asc" | "desc";
+  enabled?: boolean;
 }
 
 // Updated types based on actual API response