modal accept with notifications

src/components/Modal/AcceptModal/AcceptModal.jsx

@@ -2,23 +2,32 @@ import React from "react";
 
 import close from "assets/icons/closeProjectPersons.svg";
 
-import './acceptModal.scss'
+import "./acceptModal.scss";
 
-export const AcceptModal = ({closeModal, agreeHandler}) => {
+export const AcceptModal = ({ closeModal, agreeHandler }) => {
-    return (
+  return (
-        <div className='backDrop'>
+    <div className="backDrop">
-            <div className='acceptModal'>
+      <div className="acceptModal">
-                <h3 className='acceptModal__title'>
+        <h3 className="acceptModal__title">
-                    Вы точно хотите переместить задачу в архив?
+          Вы точно хотите переместить задачу в архив?
-                </h3>
+        </h3>
-                <div className='acceptModal__buttons'>
+        <div className="acceptModal__buttons">
-                    <button className='agree' onClick={agreeHandler}>Да</button>
+          <button className="agree" onClick={agreeHandler}>
-                    <button className='cancel' onClick={closeModal}>Нет</button>
+            Да
-                </div>
+          </button>
-                <img className='acceptModal__close' src={close} alt='close' onClick={closeModal} />
+          <button className="cancel" onClick={closeModal}>
-            </div>
+            Нет
+          </button>
         </div>
-    )
+        <img
-}
+          className="acceptModal__close"
+          src={close}
+          alt="close"
+          onClick={closeModal}
+        />
+      </div>
+    </div>
+  );
+};
 
-export default AcceptModal
+export default AcceptModal;

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

@@ -9,7 +9,6 @@ import { Link } from "react-router-dom";
 
 import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
-import { useNotification } from "@hooks/useNotification";
 
 import {
   backendImg,
@@ -21,9 +20,11 @@ import {
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
+import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 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";
@@ -84,8 +85,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 [acceptModalOpen, setAcceptModalOpen] = useState(false);
-  const { showNotification } = useNotification()
+  const { showNotification } = useNotification();
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -97,12 +98,16 @@ export const ModalTiсket = ({
     }).then(() => {
       setActive(false);
       dispatch(setProjectBoardFetch(projectId));
-      showNotification({show: true, text: 'Задача успешно была перемещена в архив', type: 'archive'})
+      showNotification({
+        show: true,
+        text: "Задача успешно была перемещена в архив",
+        type: "archive",
+      });
     });
   }
 
-  function archiveTask () {
+  function archiveTask() {
-    setAcceptModalOpen(true)
+    setAcceptModalOpen(true);
   }
 
   function editTask() {
@@ -425,7 +430,11 @@ export const ModalTiсket = ({
     navigator.clipboard.writeText(
       `https://itguild.info/tracker/task/${task.id}`
     );
-    showNotification({show: true, text: 'Ссылка скопирована в буфер обмена', type: 'copy'})
+    showNotification({
+      show: true,
+      text: "Ссылка скопирована в буфер обмена",
+      type: "copy",
+    });
   }
 
   function selectDeadLine(date) {
@@ -440,8 +449,8 @@ export const ModalTiсket = ({
     });
   }
 
-  function closeAcceptModal () {
+  function closeAcceptModal() {
-    setAcceptModalOpen(false)
+    setAcceptModalOpen(false);
   }
 
   return (
@@ -833,12 +842,12 @@ export const ModalTiсket = ({
             </div>
           </div>
         </div>
-        {acceptModalOpen &&
+        {acceptModalOpen && (
-            <AcceptModal
+          <AcceptModal
-                closeModal={closeAcceptModal}
+            closeModal={closeAcceptModal}
-                agreeHandler={deleteTask}
+            agreeHandler={deleteTask}
-            />
+          />
-        }
+        )}
       </div>
       <TrackerModal
         active={addSubtask}

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -26,12 +26,12 @@ import { apiRequest } from "@api/request";
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
+import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
-import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
@@ -83,7 +83,7 @@ export const TicketFullScreen = () => {
   const [startDate, setStartDate] = useState(null);
   const [uploadedFile, setUploadedFile] = useState(null);
   const [taskFiles, setTaskFiles] = useState([]);
-  const [acceptModalOpen, setAcceptModalOpen] = useState(false)
+  const [acceptModalOpen, setAcceptModalOpen] = useState(false);
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
@@ -163,8 +163,8 @@ export const TicketFullScreen = () => {
     });
   }
 
-  function archiveTask () {
+  function archiveTask() {
-    setAcceptModalOpen(true)
+    setAcceptModalOpen(true);
   }
 
   function editTask() {
@@ -456,8 +456,8 @@ export const TicketFullScreen = () => {
     });
   }
 
-  function closeAcceptModal () {
+  function closeAcceptModal() {
-    setAcceptModalOpen(false)
+    setAcceptModalOpen(false);
   }
 
   return (
@@ -1000,12 +1000,9 @@ export const TicketFullScreen = () => {
           </>
         )}
       </div>
-      {acceptModalOpen &&
+      {acceptModalOpen && (
-        <AcceptModal
+        <AcceptModal closeModal={closeAcceptModal} agreeHandler={deleteTask} />
-            closeModal={closeAcceptModal}
+      )}
-            agreeHandler={deleteTask}
-        />
-      }
       <Footer />
     </section>
   );

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -23,6 +23,8 @@ import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
@@ -30,7 +32,6 @@ import arrowDown from "assets/icons/arrows/selectArrow.png";
 import avatarMok from "assets/images/avatarMok.png";
 
 import "./trackerModal.scss";
-import {useNotification} from "@hooks/useNotification";
 
 export const TrackerModal = ({
   active,
@@ -68,11 +69,11 @@ export const TrackerModal = ({
   const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
   const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
     useState(false);
-  const { showNotification } = useNotification()
+  const { showNotification } = useNotification();
 
   function createTab() {
     if (!valueColumn) {
-      showNotification({show: true, text: 'Введите название', type: 'error'})
+      showNotification({ show: true, text: "Введите название", type: "error" });
       return;
     }
 
@@ -94,7 +95,11 @@ export const TrackerModal = ({
 
   function createTiket() {
     if (!valueTiket || !descriptionTicket) {
-      showNotification({show: true, text: 'Введите название и описание', type: 'error'})
+      showNotification({
+        show: true,
+        text: "Введите название и описание",
+        type: "error",
+      });
       return;
     }
 
@@ -111,7 +116,11 @@ export const TrackerModal = ({
       },
     }).then((res) => {
       if (res.status === 500) {
-        showNotification({show: true, text: 'Задача с таким именем уже существует', type: 'error'})
+        showNotification({
+          show: true,
+          text: "Задача с таким именем уже существует",
+          type: "error",
+        });
       } else {
         if (selectedExecutorTask.user_id) {
           apiRequest("/task/update-task", {
@@ -133,7 +142,11 @@ export const TrackerModal = ({
           setDescriptionTicket("Описание задачи");
           dispatch(setProjectBoardFetch(projectBoard.id));
         }
-        showNotification({show: true, text: 'Задача создана', type: 'success'})
+        showNotification({
+          show: true,
+          text: "Задача создана",
+          type: "success",
+        });
       }
     });
   }
@@ -219,7 +232,11 @@ export const TrackerModal = ({
           setActive(false);
           setNameProject("");
         } else {
-          showNotification({show: true, text: 'Проект с таким именем уже существует', type: 'error'})
+          showNotification({
+            show: true,
+            text: "Проект с таким именем уже существует",
+            type: "error",
+          });
         }
       });
     }

src/components/Notification/Notification.jsx

@@ -1,36 +1,40 @@
 import React from "react";
-import {useDispatch, useSelector} from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { closeNotification, getNotification } from "@redux/outstaffingSlice";
 
+import archive from "assets/icons/archiveNotification.svg";
 import close from "assets/icons/closeProjectPersons.svg";
 import copy from "assets/icons/copyNotification.svg";
 import error from "assets/icons/errorNotification.svg";
-import archive from "assets/icons/archiveNotification.svg";
+import success from "assets/icons/successNotification.svg";
-import success from "assets/icons/successNotification.svg"
+
+import "./notification.scss";
 
 const images = {
-    archive: archive,
+  archive: archive,
-    error: error,
+  error: error,
-    copy: copy,
+  copy: copy,
-    success: success
+  success: success,
-}
+};
-
-import './notification.scss'
 
 export const Notification = () => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
-    const notificationInfo = useSelector(getNotification)
+  const notificationInfo = useSelector(getNotification);
-    return (
+  return (
-        <div className='notification'>
+    <div className="notification">
-            <div className='notification__info'>
+      <div className="notification__info">
-                <img src={images[notificationInfo.type]} alt='img' />
+        <img src={images[notificationInfo.type]} alt="img" />
-                <h2>{notificationInfo.text}</h2>
+        <h2>{notificationInfo.text}</h2>
-            </div>
+      </div>
-            <img onClick={() => dispatch(closeNotification())}
+      <img
-                 className='notification__close' src={close} alt='close' />
+        onClick={() => dispatch(closeNotification())}
-        </div>
+        className="notification__close"
-    )
+        src={close}
-}
+        alt="close"
+      />
+    </div>
+  );
+};
 
-export default Notification
+export default Notification;

src/components/ProjectTiket/ProjectTiket.jsx

@@ -3,13 +3,14 @@ import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 
 import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
-import {useNotification} from "@hooks/useNotification";
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
+import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
-import AcceptModal from "@components/Modal/AcceptModal/AcceptModal"
 
 import archiveSet from "assets/icons/archive.svg";
 import del from "assets/icons/delete.svg";
@@ -23,7 +24,7 @@ export const ProjectTiket = ({ project, index }) => {
   const [modalAdd, setModalAdd] = useState(false);
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
   const dispatch = useDispatch();
-  const { showNotification } = useNotification()
+  const { showNotification } = useNotification();
 
   useEffect(() => {
     initListeners();
@@ -53,7 +54,11 @@ export const ProjectTiket = ({ project, index }) => {
       },
     }).then(() => {
       dispatch(deleteProject(project));
-      showNotification({show: true, text: 'Проект успешно была перемещена в архив', type: 'archive'});
+      showNotification({
+        show: true,
+        text: "Проект успешно была перемещена в архив",
+        type: "archive",
+      });
     });
   }
 
@@ -63,8 +68,8 @@ export const ProjectTiket = ({ project, index }) => {
     );
   }
 
-  function closeAcceptModal () {
+  function closeAcceptModal() {
-    setAcceptModalOpen(false)
+    setAcceptModalOpen(false);
   }
 
   return (
@@ -107,10 +112,12 @@ export const ProjectTiket = ({ project, index }) => {
             <img src={link}></img>
             <p onClick={copyProjectLink}>ссылка на проект</p>
           </div>
-          <div onClick={() => {
+          <div
-            setModalSelect(false)
+            onClick={() => {
-            setAcceptModalOpen(true)
+              setModalSelect(false);
-          }}>
+              setAcceptModalOpen(true);
+            }}
+          >
             <img src={archiveSet}></img>
             <p>в архив</p>
           </div>
@@ -120,12 +127,12 @@ export const ProjectTiket = ({ project, index }) => {
           </div>
         </div>
       </ModalSelect>
-      {acceptModalOpen &&
+      {acceptModalOpen && (
         <AcceptModal
-            closeModal={closeAcceptModal}
+          closeModal={closeAcceptModal}
-            agreeHandler={removeProject}
+          agreeHandler={removeProject}
         />
-      }
+      )}
     </div>
   );
 };

src/hooks/useNotification.js

@@ -1,15 +1,15 @@
 import { useDispatch } from "react-redux";
 
-import { setNotification, closeNotification } from "../redux/outstaffingSlice";
+import { closeNotification, setNotification } from "../redux/outstaffingSlice";
 
 export const useNotification = () => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
-    const showNotification = (notification) => {
+  const showNotification = (notification) => {
-        dispatch(setNotification(notification))
+    dispatch(setNotification(notification));
-        setTimeout(() => {
+    setTimeout(() => {
-            dispatch(closeNotification())
+      dispatch(closeNotification());
-        }, 2500)
+    }, 2500);
-    }
+  };
-    return { showNotification }
+  return { showNotification };
 };

src/pages/ProjectTracker/ProjectTracker.js

@@ -25,6 +25,8 @@ import { caseOfNum } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import { useNotification } from "@hooks/useNotification";
+
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
@@ -49,7 +51,6 @@ import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 
 import { getCorrectDate } from "../../components/Calendar/calendarHelper";
-import {useNotification} from "@hooks/useNotification";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -73,7 +74,7 @@ export const ProjectTracker = () => {
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
-  const { showNotification } = useNotification()
+  const { showNotification } = useNotification();
 
   useEffect(() => {
     dispatch(activeLoader());
@@ -226,7 +227,7 @@ export const ProjectTracker = () => {
       } else {
         dispatch(setProjectBoardFetch(projectBoard.id));
       }
-      showNotification({show: true, text: 'Колонка удалена', type: 'error'})
+      showNotification({ show: true, text: "Колонка удалена", type: "error" });
     });
   }
 

src/redux/outstaffingSlice.js

@@ -1,4 +1,4 @@
-import {createAsyncThunk, createSlice} from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
   tags: [],
@@ -16,9 +16,9 @@ const initialState = {
   partnerRequestInfo: {},
   notification: {
     show: false,
-    text: '',
+    text: "",
-    type: ''
+    type: "",
-  }
+  },
 };
 
 export const outstaffingSlice = createSlice({
@@ -68,11 +68,11 @@ export const outstaffingSlice = createSlice({
       state.partnerRequestInfo = action.payload;
     },
     setNotification: (state, action) => {
-      state.notification = action.payload
+      state.notification = action.payload;
     },
     closeNotification: (state) => {
-      state.notification.show = false
+      state.notification.show = false;
-    }
+    },
   },
 });
 
@@ -92,15 +92,14 @@ export const {
   setPartnerRequests,
   setPartnerRequestInfo,
   setNotification,
-  closeNotification
+  closeNotification,
 } = outstaffingSlice.actions;
 
 export const selectProfiles = (state) => state.outstaffing.profiles;
 export const selectTags = (state) => state.outstaffing.tags;
 export const selectFilteredCandidates = (state) =>
   state.outstaffing.filteredCandidates;
-export const getNotification = (state) =>
+export const getNotification = (state) => state.outstaffing.notification;
-    state.outstaffing.notification
 export const selectItems = (state) => state.outstaffing.selectedItems;
 export const selectCurrentCandidate = (state) =>
   state.outstaffing.currentCandidate;