socket and check actions

src/pages/Trash/List.tsx

@@ -147,7 +147,7 @@ const List: FC = () => {
                 selectedActions={selectedActions}
                 onSelectionChange={handleSelectionChange}
                 selectedRows={selectedMessages}
-                onRowClick={(id) => navigate(`/mail/${id}`)}
+                onRowClick={(id, item) => navigate(`/mail/${id}/${item.mailbox}`)}
                 noDataMessage={
                     <div className="flex flex-col items-center">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />

src/pages/received/Components/Header.tsx

@@ -1,5 +1,5 @@
 import Button from '@/components/Button'
-import { ArrowRight, VolumeMute, More, DocumentDownload, Printer, Trash } from 'iconsax-react'
+import { ArrowRight, DocumentDownload, Printer } from 'iconsax-react'
 import { useNavigate } from 'react-router-dom'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,6 +8,7 @@ import MessageArchive from './MessageArchive'
 import MessageSpam from './MessageSpam'
 import { MailboxEnum } from '../enum/Enum'
 import MessageFavorite from './MessageFavorite'
+import MessageTrash from './MessageTrash'
 
 const Header: FC<{ mailBoxName: MailboxEnum }> = ({ mailBoxName }) => {
 
@@ -22,9 +23,9 @@ const Header: FC<{ mailBoxName: MailboxEnum }> = ({ mailBoxName }) => {
                 <MessageSpam isActiveSpam={mailBoxName === MailboxEnum.Junk} />
                 <MessageArchive isActiveArchive={mailBoxName === MailboxEnum.ARCHIVE} />
                 <MessageFavorite isActiveFavorite={mailBoxName === MailboxEnum.FAVORITE} />
-                <VolumeMute size={18} color='black' className='xl:block hidden' />
-                <Trash size={18} color='#CD0000' className='xl:block hidden' />
-                <More size={18} color='black' className='rotate-90' />
+                {/* <VolumeMute size={18} color='black' className='xl:block hidden' /> */}
+                <MessageTrash isActiveTrash={mailBoxName === MailboxEnum.TRASH} />
+                {/* <More size={18} color='black' className='rotate-90' /> */}
             </div>
 
             <div className='flex gap-2'>

src/pages/received/Components/MessageArchive.tsx

@@ -26,7 +26,7 @@ const MessageArchive: FC<{ isActiveArchive: boolean }> = ({ isActiveArchive }) =
                 })
             }
             setIsArchive(!isArchive)
-        }} size={18} variant={isArchive ? 'Bold' : 'Outline'} color='black' className='xl:block hidden' />
+        }} size={18} variant={isArchive ? 'Bold' : 'Outline'} color='black' />
     )
 }
 

src/pages/received/Components/MessageFavorite.tsx

@@ -25,7 +25,7 @@ const MessageFavorite: FC<{ isActiveFavorite: boolean }> = ({ isActiveFavorite }
                 })
             }
             setIsFavorite(!isFavorite)
-        }} size={18} variant={isFavorite ? 'Bold' : 'Outline'} color={isFavorite ? '#FFC107' : 'black'} className='xl:block hidden' />
+        }} size={18} variant={isFavorite ? 'Bold' : 'Outline'} color={isFavorite ? '#FFC107' : 'black'} />
     )
 }
 

src/pages/received/Components/MessageSpam.tsx

@@ -27,7 +27,7 @@ const MessageSpam: FC<{ isActiveSpam: boolean }> = ({ isActiveSpam }) => {
                 })
             }
             setIsSpam(!isSpam)
-        }} size={18} variant={isSpam ? 'Bold' : 'Outline'} color='black' className='xl:block hidden' />
+        }} size={18} variant={isSpam ? 'Bold' : 'Outline'} color='black' />
     )
 }
 

src/pages/received/Components/MessageTrash.tsx

@@ -0,0 +1,32 @@
+import { Trash } from 'iconsax-react'
+import { FC, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useMoveToTrash, useRestoreMessage } from '../hooks/useEmailData'
+
+const MessageTrash: FC<{ isActiveTrash: boolean }> = ({ isActiveTrash }) => {
+    const [isTrash, setIsTrash] = useState<boolean>(isActiveTrash)
+    const { id, mailbox } = useParams<{ id: string, mailbox: string }>()
+    const { mutate: moveToTrash } = useMoveToTrash()
+    const { mutate: restoreMessage } = useRestoreMessage()
+    const navigate = useNavigate()
+    return (
+        <Trash variant={isTrash ? 'Bold' : 'Outline'} size={18} color='#CD0000' onClick={() => {
+            setIsTrash(!isTrash)
+            if (isTrash) {
+                restoreMessage({ messageId: id || '', mailbox: mailbox || '' }, {
+                    onSuccess: () => {
+                        navigate(-1)
+                    }
+                })
+            } else {
+                moveToTrash({ messageId: id || '', mailbox: mailbox || '' }, {
+                    onSuccess: () => {
+                        navigate(-1)
+                    }
+                })
+            }
+        }} />
+    )
+};
+
+export default MessageTrash;

src/pages/received/Components/MessageUnread.tsx

@@ -18,7 +18,7 @@ const MessageUnread: FC = () => {
                 markAsRead({ messageId: id || '', mailbox: mailbox || '' })
             }
             setIsRead(!isRead)
-        }} size={18} variant={isRead ? 'Outline' : 'Bold'} color='black' className='xl:block hidden' />
+        }} size={18} variant={isRead ? 'Outline' : 'Bold'} color='black' />
     )
 }
 

src/pages/received/hooks/useEmailData.tsx

@@ -105,4 +105,10 @@ export const useUnFavoriteMessage = () => {
     return useMutation({
         mutationFn: ({ messageId, mailbox }: SingleActionRequest) => api.unFavoriteMessage(messageId, mailbox),
     });
+};
+
+export const useRestoreMessage = () => {
+    return useMutation({
+        mutationFn: ({ messageId, mailbox }: SingleActionRequest) => api.restoreMessage(messageId, mailbox),
+    });
 };