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>
     );
 };