delete mission

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

@@ -1,12 +1,14 @@
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
 import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
 import { cn } from '../../../../lib/cn';
 import MissionsBlock from './MissionsBlock';
 import {
+    deleteMission,
     fetchMyMissions,
     setMissionsStatus,
 } from '../../../../redux/slices/missions';
+import ConfirmModal from '../../../../components/modal/ConfirmModal';
 
 interface ItemProps {
     count: number;
@@ -43,6 +45,8 @@ const Missions = () => {
     const dispatch = useAppDispatch();
     const missions = useAppSelector((state) => state.missions.missions);
     const status = useAppSelector((state) => state.missions.statuses.fetchMy);
+    const [modalDeleteTask, setModalDeleteTask] = useState<boolean>(false);
+    const [taskdeleteId, setTaskDeleteId] = useState<number>(0);
 
     useEffect(() => {
         dispatch(setMenuActiveProfilePage('missions'));
@@ -99,9 +103,23 @@ const Missions = () => {
                     <MissionsBlock
                         missions={missions ?? []}
                         title="Мои миссии"
+                        setTastDeleteId={setTaskDeleteId}
+                        setDeleteModalActive={setModalDeleteTask}
                     />
                 </div>
             </div>
+
+            <ConfirmModal
+                active={modalDeleteTask}
+                setActive={setModalDeleteTask}
+                title="Подтвердите действия"
+                message={`Вы действительно хотите удалить задачу #${taskdeleteId}?`}
+                confirmColor="error"
+                confirmText="Удалить"
+                onConfirmClick={() => {
+                    dispatch(deleteMission(taskdeleteId));
+                }}
+            />
         </div>
     );
 };

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

@@ -8,12 +8,17 @@ interface MissionsBlockProps {
     missions: Mission[];
     title: string;
     className?: string;
+    setTastDeleteId: (v: number) => void;
+    setDeleteModalActive: (v: boolean) => void;
 }
 
 const MissionsBlock: FC<MissionsBlockProps> = ({
     missions,
     title,
     className,
+
+    setTastDeleteId,
+    setDeleteModalActive,
 }) => {
     const [active, setActive] = useState<boolean>(true);
 
@@ -59,6 +64,8 @@ const MissionsBlock: FC<MissionsBlockProps> = ({
                                 memoryLimit={v.memoryLimit}
                                 difficulty={v.difficulty}
                                 type={i % 2 ? 'second' : 'first'}
+                                setTastDeleteId={setTastDeleteId}
+                                setDeleteModalActive={setDeleteModalActive}
                             />
                         ))}
                     </div>

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>