delete mission

src/views/home/account/missions/MyMissionItem.tsx

@@ -1,6 +1,8 @@
 import { cn } from '../../../../lib/cn';
 import { useNavigate } from 'react-router-dom';
 import { Edit } from '../../../../assets/icons/input';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import { deleteMission } from '../../../../redux/slices/missions';
 
 export interface MissionItemProps {
     id: number;
@@ -14,6 +16,8 @@ export interface MissionItemProps {
     updatedAt?: string;
     type?: 'first' | 'second';
     status?: 'empty' | 'success' | 'error';
+    setTastDeleteId: (v: number) => void;
+    setDeleteModalActive: (v: boolean) => void;
 }
 
 export function formatMilliseconds(ms: number): string {
@@ -35,11 +39,17 @@ const MissionItem: React.FC<MissionItemProps> = ({
     memoryLimit = 256 * 1024 * 1024,
     type,
     status,
+    setTastDeleteId,
+    setDeleteModalActive,
 }) => {
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
     const difficultyItems = ['Easy', 'Medium', 'Hard'];
     const difficultyString =
         difficultyItems[Math.min(Math.max(0, difficulty - 1), 2)];
+    const deleteStatus = useAppSelector(
+        (state) => state.missions.statuses.delete,
+    );
 
     return (
         <div
@@ -76,9 +86,17 @@ const MissionItem: React.FC<MissionItemProps> = ({
             <div className="h-[24px] w-[24px]">
                 <img
                     src={Edit}
-                    className="hover:bg-liquid-light rounded-[8px] transition-all duration-300"
+                    className={cn(
+                        'hover:bg-liquid-light rounded-[8px] transition-all duration-300',
+                        deleteStatus == 'loading' &&
+                            'cursor-default pointer-events-none hover:bg-transparent opacity-35',
+                    )}
                     onClick={(e) => {
                         e.stopPropagation();
+                        if (deleteStatus != 'loading') {
+                            setTastDeleteId(id);
+                            setDeleteModalActive(true);
+                        }
                     }}
                 />
             </div>