modal accept with notifications

2023-07-14 03:03:49 +03:00 · 2023-07-14 03:03:49 +03:00 · 7c7ea86c8c
commit 7c7ea86c8c
parent 001920a840
9 changed files with 155 additions and 112 deletions
--- a/src/components/Modal/AcceptModal/AcceptModal.jsx
+++ b/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}) => {
-    return (
-        <div className='backDrop'>
-            <div className='acceptModal'>
-                <h3 className='acceptModal__title'>
-                    Вы точно хотите переместить задачу в архив?
-                </h3>
-                <div className='acceptModal__buttons'>
-                    <button className='agree' onClick={agreeHandler}>Да</button>
-                    <button className='cancel' onClick={closeModal}>Нет</button>
-                </div>
-                <img className='acceptModal__close' src={close} alt='close' onClick={closeModal} />
-            </div>
+export const AcceptModal = ({ closeModal, agreeHandler }) => {
+  return (
+    <div className="backDrop">
+      <div className="acceptModal">
+        <h3 className="acceptModal__title">
+          Вы точно хотите переместить задачу в архив?
+        </h3>
+        <div className="acceptModal__buttons">
+          <button className="agree" onClick={agreeHandler}>
+            Да
+          </button>
+          <button className="cancel" onClick={closeModal}>
+            Нет
+          </button>
        </div>
-    )
-}
+        <img
+          className="acceptModal__close"
+          src={close}
+          alt="close"
+          onClick={closeModal}
+        />
+      </div>
+    </div>
+  );
+};

-export default AcceptModal
+export default AcceptModal;
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/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 { showNotification } = useNotification()
+  const [acceptModalOpen, setAcceptModalOpen] = useState(false);
+  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 () {
-    setAcceptModalOpen(true)
+  function archiveTask() {
+    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 () {
-    setAcceptModalOpen(false)
+  function closeAcceptModal() {
+    setAcceptModalOpen(false);
  }

  return (
@ -833,12 +842,12 @@ export const ModalTiсket = ({
            </div>
          </div>
        </div>
-        {acceptModalOpen &&
-            <AcceptModal
-                closeModal={closeAcceptModal}
-                agreeHandler={deleteTask}
-            />
-        }
+        {acceptModalOpen && (
+          <AcceptModal
+            closeModal={closeAcceptModal}
+            agreeHandler={deleteTask}
+          />
+        )}
      </div>
      <TrackerModal
        active={addSubtask}
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/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 () {
-    setAcceptModalOpen(true)
+  function archiveTask() {
+    setAcceptModalOpen(true);
  }

  function editTask() {
@ -456,8 +456,8 @@ export const TicketFullScreen = () => {
    });
  }

-  function closeAcceptModal () {
-    setAcceptModalOpen(false)
+  function closeAcceptModal() {
+    setAcceptModalOpen(false);
  }

  return (
@ -1000,12 +1000,9 @@ export const TicketFullScreen = () => {
          </>
        )}
      </div>
-      {acceptModalOpen &&
-        <AcceptModal
-            closeModal={closeAcceptModal}
-            agreeHandler={deleteTask}
-        />
-      }
+      {acceptModalOpen && (
+        <AcceptModal closeModal={closeAcceptModal} agreeHandler={deleteTask} />
+      )}
      <Footer />
    </section>
  );
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/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",
+          });
        }
      });
    }
--- a/src/components/Notification/Notification.jsx
+++ b/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,
-    error: error,
-    copy: copy,
-    success: success
-}
-
-import './notification.scss'
+  archive: archive,
+  error: error,
+  copy: copy,
+  success: success,
+};

 export const Notification = () => {
-    const dispatch = useDispatch();
-    const notificationInfo = useSelector(getNotification)
-    return (
-        <div className='notification'>
-            <div className='notification__info'>
-                <img src={images[notificationInfo.type]} alt='img' />
-                <h2>{notificationInfo.text}</h2>
-            </div>
-            <img onClick={() => dispatch(closeNotification())}
-                 className='notification__close' src={close} alt='close' />
-        </div>
-    )
-}
+  const dispatch = useDispatch();
+  const notificationInfo = useSelector(getNotification);
+  return (
+    <div className="notification">
+      <div className="notification__info">
+        <img src={images[notificationInfo.type]} alt="img" />
+        <h2>{notificationInfo.text}</h2>
+      </div>
+      <img
+        onClick={() => dispatch(closeNotification())}
+        className="notification__close"
+        src={close}
+        alt="close"
+      />
+    </div>
+  );
+};

-export default Notification
+export default Notification;
--- a/src/components/ProjectTiket/ProjectTiket.jsx
+++ b/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 () {
-    setAcceptModalOpen(false)
+  function closeAcceptModal() {
+    setAcceptModalOpen(false);
  }

  return (
@ -107,10 +112,12 @@ export const ProjectTiket = ({ project, index }) => {
            <img src={link}></img>
            <p onClick={copyProjectLink}>ссылка на проект</p>
          </div>
-          <div onClick={() => {
-            setModalSelect(false)
-            setAcceptModalOpen(true)
-          }}>
+          <div
+            onClick={() => {
+              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}
-            agreeHandler={removeProject}
+          closeModal={closeAcceptModal}
+          agreeHandler={removeProject}
        />
-      }
+      )}
    </div>
  );
 };
--- a/src/hooks/useNotification.js
+++ b/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) => {
-        dispatch(setNotification(notification))
-        setTimeout(() => {
-            dispatch(closeNotification())
-        }, 2500)
-    }
-    return { showNotification }
+  const showNotification = (notification) => {
+    dispatch(setNotification(notification));
+    setTimeout(() => {
+      dispatch(closeNotification());
+    }, 2500);
+  };
+  return { showNotification };
 };
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/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" });
    });
  }

--- a/src/redux/outstaffingSlice.js
+++ b/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: '',
-    type: ''
-  }
+    text: "",
+    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) =>
-    state.outstaffing.notification
+export const getNotification = (state) => state.outstaffing.notification;
 export const selectItems = (state) => state.outstaffing.selectedItems;
 export const selectCurrentCandidate = (state) =>
  state.outstaffing.currentCandidate;