mark all as read + spam empty

src/pages/spam/List.tsx

@@ -2,13 +2,17 @@ import Filters, { FilterValues } from '../../components/Filters';
 import { FC, useState } from 'react'
 import Table from '../../components/Table';
 import { ColumnType } from '../../components/types/TableTypes';
-import { InfoCircle, More, Refresh2, Trash, RecoveryConvert } from 'iconsax-react';
+import { InfoCircle, Refresh2, Trash, RecoveryConvert } from 'iconsax-react';
 import { RowActionItem } from '../../components/RowActionsDropdown';
 import { useNavigate } from 'react-router-dom';
-import { useGetSpamMessages } from './hooks/useSpamData';
+import { useEmptySpam, useGetSpamMessages } from './hooks/useSpamData';
 import { SpamMessage } from './types/SpamTypes';
 import { formatDate } from '@/config/func';
 import { useEmailActions } from '@/hooks/useEmailActions';
+import Button from '@/components/Button';
+import ModalConfrim from '@/components/ModalConfrim';
+import { ErrorType } from '@/helpers/types';
+import { toast } from '@/components/Toast';
 
 const List: FC = () => {
     const navigate = useNavigate();
@@ -16,6 +20,8 @@ const List: FC = () => {
     const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
+    const [showModal, setShowModal] = useState(false);
+    const { mutate: emptySpam, isPending } = useEmptySpam();
 
     const { data: spamData, isLoading, refetch, isFetching } = useGetSpamMessages({
         next: nextCursor,
@@ -58,10 +64,15 @@ const List: FC = () => {
             <Refresh2
                 size={18}
                 color='black'
-                className={`cursor-pointer ${isFetching ? 'animate-spin-reverse' : ''}`}
+                className={`cursor-pointer min-w-[18px] ${isFetching ? 'animate-spin-reverse' : ''}`}
                 onClick={() => refetch()}
             />
-            <More size={18} color='black' className='rotate-90 cursor-pointer' />
+            <Button
+                label='خالی کردن هرزنامه'
+                className='h-8'
+                onClick={() => setShowModal(true)}
+                loading={isPending}
+            />
         </div>
     );
 
@@ -94,6 +105,18 @@ const List: FC = () => {
         setSelectedMessages([]);
     };
 
+    const handleSpam = () => {
+        emptySpam(undefined, {
+            onSuccess: () => {
+                refetch();
+                setShowModal(false);
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error.message[0], 'error')
+            }
+        });
+    };
+
     const getRowActions = (message: SpamMessage): RowActionItem[] => [
         {
             label: 'غیر اسپم',
@@ -160,6 +183,13 @@ const List: FC = () => {
                     onPrevious: handlePrevious
                 } : undefined}
             />
+
+            <ModalConfrim
+                isOpen={showModal}
+                close={() => setShowModal(false)}
+                onConfrim={handleSpam}
+                isLoading={isPending}
+            />
         </div>
     )
 }