modal accept with notifications

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -9,6 +9,7 @@ import { Link } from "react-router-dom";
 
 import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
+import { useNotification } from "@hooks/useNotification";
 
 import {
   backendImg,
@@ -22,6 +23,7 @@ import { apiRequest } from "@api/request";
 
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
+import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";
@@ -82,6 +84,8 @@ export const ModalTiсket = ({
   const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
   const [executorId, setExecutorId] = useState(task.executor_id);
   const profileInfo = useSelector(getProfileInfo);
+  const [acceptModalOpen, setAcceptModalOpen] = useState(false)
+  const { showNotification } = useNotification()
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -93,9 +97,14 @@ export const ModalTiсket = ({
     }).then(() => {
       setActive(false);
       dispatch(setProjectBoardFetch(projectId));
+      showNotification({show: true, text: 'Задача успешно была перемещена в архив', type: 'archive'})
     });
   }
 
+  function archiveTask () {
+    setAcceptModalOpen(true)
+  }
+
   function editTask() {
     apiRequest("/task/update-task", {
       method: "PUT",
@@ -416,6 +425,7 @@ export const ModalTiсket = ({
     navigator.clipboard.writeText(
       `https://itguild.info/tracker/task/${task.id}`
     );
+    showNotification({show: true, text: 'Ссылка скопирована в буфер обмена', type: 'copy'})
   }
 
   function selectDeadLine(date) {
@@ -430,6 +440,10 @@ export const ModalTiсket = ({
     });
   }
 
+  function closeAcceptModal () {
+    setAcceptModalOpen(false)
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -809,7 +823,7 @@ export const ModalTiсket = ({
               <img src={link}></img>
               <p onClick={copyTicketLink}>ссылка на задачу</p>
             </div>
-            <div onClick={deleteTask}>
+            <div onClick={archiveTask}>
               <img src={archive}></img>
               <p>в архив</p>
             </div>
@@ -819,8 +833,13 @@ export const ModalTiсket = ({
             </div>
           </div>
         </div>
+        {acceptModalOpen &&
+            <AcceptModal
+                closeModal={closeAcceptModal}
+                agreeHandler={deleteTask}
+            />
+        }
       </div>
-
       <TrackerModal
         active={addSubtask}
         setActive={setAddSubtask}

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -689,6 +689,7 @@
       .react-datepicker-popper {
         top: 10px !important;
         left: -110px !important;
+        z-index: 10;
       }
 
       .react-datepicker__current-month {