Merge pull request #83 from apuc/fix-modal-state

Fix modal state and modal window redesign

src/components/ProjectTiket/ProjectTiket.jsx

@@ -1,20 +1,22 @@
 import React, { useEffect, useState } from "react";
-import {Link} from "react-router-dom";
+import { useDispatch } from "react-redux";
-import ModalSettings from "../UI/ModalSettings/ModalSettings";
+import { Link } from "react-router-dom";
+import { apiRequest } from "../../api/request";
+import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
+
+import { ModalSelect } from "../UI/ModalSelect/ModalSelect";
+import ModalAdd from "../UI/ModalAdd/ModalAdd";
 
 import link from "../../images/link.svg";
 import archiveSet from "../../images/archive.svg";
 import del from "../../images/delete.svg";
 import edit from "../../images/edit.svg";
 
-import {apiRequest} from "../../api/request";
-import {useDispatch} from "react-redux";
-import { deleteProject } from "../../redux/projectsTrackerSlice";
-
 import "./projectTiket.scss";
 
 export const ProjectTiket = ({ project, index }) => {
-  const [modalSettings, setModalSettings] = useState(false);
+  const [modalSelect, setModalSelect] = useState(false);
+  const [modalAdd, setModalAdd] = useState(false);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -32,20 +34,20 @@ export const ProjectTiket = ({ project, index }) => {
       event &&
       !path.find((item) => item.classList && item.classList.contains("project"))
     ) {
-      setModalSettings(false);
+      setModalSelect(false);
     }
   }
 
   function removeProject() {
-    apiRequest('/project/update', {
+    apiRequest("/project/update", {
-      method: 'PUT',
+      method: "PUT",
       data: {
         project_id: project.id,
-        status: 0
+        status: 0,
-      }
+      },
     }).then((res) => {
-      dispatch(deleteProject(project))
+      dispatch(deleteProject(project));
-    })
+    });
   }
 
   return (
@@ -53,16 +55,33 @@ export const ProjectTiket = ({ project, index }) => {
       <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
       <div className="project__info">
         <p>Открытые задачи</p>
-        <span className="count">{project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)}</span>
+        <span className="count">
-        {/*<span className="add">{project.columns.length ? '+' : ''}</span>*/}
+          {project.columns.reduce(
-        <span className="menu-settings" onClick={() => setModalSettings(true)}>
+            (accumulator, currentValue) =>
+              accumulator + currentValue.tasks.length,
+            0
+          )}
+        </span>
+        <span className="menu-settings" onClick={() => setModalSelect(true)}>
           ...
         </span>
       </div>
 
-      <ModalSettings active={modalSettings}>
+      <ModalAdd
+        active={modalAdd}
+        setActive={setModalAdd}
+        defautlInput={project.name}
+      ></ModalAdd>
+
+      <ModalSelect active={modalSelect}>
         <div className="project__settings-menu">
-          <div>
+          <div
+            onClick={() => {
+              dispatch(modalToggle("editProject"));
+              setModalAdd(true);
+              setModalSelect(false);
+            }}
+          >
             <img src={edit}></img>
             <p>редактировать</p>
           </div>
@@ -74,13 +93,12 @@ export const ProjectTiket = ({ project, index }) => {
             <img src={archiveSet}></img>
             <p>в архив</p>
           </div>
-          <div
+          <div onClick={removeProject}>
-            onClick={removeProject}>
             <img src={del}></img>
             <p>удалить</p>
           </div>
         </div>
-      </ModalSettings>
+      </ModalSelect>
     </div>
   );
 };

src/components/ProjectTiket/projectTiket.scss

@@ -83,7 +83,6 @@
       color: #6f6f6f;
       right: 0;
       top: -35%;
-      z-index: 999;
 
       @media (max-width: 430px) {
         display: none;

src/components/UI/ModalAdd/ModalAdd.jsx

@@ -1,17 +1,200 @@
-import React from "react";
+import React, { useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+import { apiRequest } from "../../../api/request";
+import {
+  getProjectBoard,
+  getValueModalType,
+  setProjectBoardFetch,
+} from "../../../redux/projectsTrackerSlice";
 
 import "./modalAdd.scss";
 
-export const ModalAdd = ({ children, active, setActive }) => {
+export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
+  const dispatch = useDispatch();
+  const projectBoard = useSelector(getProjectBoard);
+
+  const modalType = useSelector(getValueModalType);
+
+  const [valueTiket, setValueTiket] = useState("");
+  const [valueColl, setValueColl] = useState("");
+  const [descriptionTicket, setDescriptionTicket] = useState("");
+
+  function createTab() {
+    if (!valueColl) {
+      return;
+    }
+
+    apiRequest("/project-column/create-column", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        title: valueColl,
+      },
+    }).then((res) => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+    setValueColl("");
+    setActive(false);
+  }
+
+  function createTiket() {
+    if (!valueTiket || !descriptionTicket) {
+      return;
+    }
+
+    apiRequest("/task/create-task", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        title: valueTiket,
+        description: descriptionTicket,
+        status: 1,
+        user_id: localStorage.getItem("id"),
+        column_id: selectedTab,
+      },
+    }).then((res) => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+
+    setActive(false);
+    setValueTiket("");
+    setDescriptionTicket("");
+  }
+
+  function getModal() {
+    switch (modalType) {
+      case "createColumn":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите название колонки</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueColl}
+                  onChange={(e) => setValueColl(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={createTab}>
+              Создать
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "addWorker":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Добавьте участника</h4>
+              <p className="title-project__decs">Введите имя или e-mail </p>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueTiket}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={(e) => e.preventDefault()}>
+              Добавить
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "createTiketProject":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите название и описание задачи</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueTiket}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                  placeholder="Название задачи"
+                ></input>
+              </div>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={descriptionTicket}
+                  onChange={(e) => setDescriptionTicket(e.target.value)}
+                  placeholder="Описание задачи"
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={createTiket}>
+              Создать
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "editProject":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={defautlInput}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={(e) => e.preventDefault()}>
+              Сохранить
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "editColumn":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={defautlInput}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={(e) => e.preventDefault()}>
+              Сохранить
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
   return (
     <div
       className={active ? "modal-add active" : "modal-add"}
       onClick={() => setActive(false)}
     >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
+      {getModal()}
-        {children}
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
     </div>
   );
 };

src/components/UI/ModalAdd/modalAdd.scss

@@ -48,7 +48,7 @@
       font-weight: 300;
       font-size: 12px;
       line-height: 14px;
-      margin: -13px 0 16px 0;
+      margin: 12px 0 16px 0;
     }
 
     &__textarea {

src/components/UI/ModalSelect/ModalSelect.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import "./modalSelect.scss";
+
+export const ModalSelect = ({ active, children }) => {
+  return (
+    <div className={active ? "project__settings active" : "project__settings "}>
+      <span className="project__settings-ellipsis">...</span>
+      {children}
+    </div>
+  );
+};
+
+export default ModalSelect;

src/components/UI/ModalSelect/modalSelect.scss

@@ -21,6 +21,14 @@
         }
       }
     }
+
+    &-ellipsis {
+      position: absolute;
+      top: -2px;
+      left: 10px;
+      font-size: 21px;
+      color: #6f6f6f;
+    }
   }
 
   &__settings.active {

src/components/UI/ModalSettings/ModalSettings.jsx

@@ -1,13 +0,0 @@
-import React from "react";
-
-import "./modalSettings.scss";
-
-export const ModalSettings = ({ active, children }) => {
-  return (
-    <div className={active ? "project__settings active" : "project__settings "}>
-      {children}
-    </div>
-  );
-};
-
-export default ModalSettings;

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -1,13 +1,15 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 
 import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../Footer/Footer";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import ModalAdd from "../ModalAdd/ModalAdd";
+import { Navigation } from "../../Navigation/Navigation";
+
 import { useDispatch } from "react-redux";
 import { setToggleTab } from "../../../redux/projectsTrackerSlice";
-import {apiRequest} from "../../../api/request";
+import { apiRequest } from "../../../api/request";
 
 import project from "../../../images/trackerProject.svg";
 import watch from "../../../images/watch.png";
@@ -32,20 +34,22 @@ export const TicketFullScreen = ({}) => {
   const [addSubtask, setAddSubtask] = useState(false);
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const [valueTiket, setValueTiket] = useState("");
-  const ticketId = useParams()
+  const ticketId = useParams();
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [projectInfo, setProjectInfo] = useState({})
+  const [projectInfo, setProjectInfo] = useState({});
-  const [taskInfo, setTaskInfo] = useState({})
+  const [taskInfo, setTaskInfo] = useState({});
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
-      setTaskInfo(taskInfo)
+      setTaskInfo(taskInfo);
-      apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then((project) => {
+      apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then(
-        setProjectInfo(project)
+        (project) => {
-      })
+          setProjectInfo(project);
-    })
+        }
-  }, [])
+      );
+    });
+  }, []);
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -55,7 +59,7 @@ export const TicketFullScreen = ({}) => {
         status: 0,
       },
     }).then((res) => {
-      navigate(`/tracker/project/${taskInfo.project_id}`)
+      navigate(`/tracker/project/${taskInfo.project_id}`);
     });
   }
 
@@ -66,6 +70,7 @@ export const TicketFullScreen = ({}) => {
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
+      <Navigation />
       <div className="container">
         <div className="tracker__content">
           <ProfileBreadcrumbs
@@ -80,7 +85,7 @@ export const TicketFullScreen = ({}) => {
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
           <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
             className="tab active-tab"
             onClick={() => toggleTabs(1)}
           >
@@ -88,7 +93,7 @@ export const TicketFullScreen = ({}) => {
             <p>Проекты </p>
           </Link>
           <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
             className="tab"
             onClick={() => toggleTabs(2)}
           >
@@ -96,7 +101,7 @@ export const TicketFullScreen = ({}) => {
             <p>Все мои задачи</p>
           </Link>
           <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
             className="tab"
             onClick={() => toggleTabs(3)}
           >
@@ -189,9 +194,12 @@ export const TicketFullScreen = ({}) => {
           </div>
           <div className="workers">
             <div className="workers_box">
-              <p className="workers__creator">Создатель :  <span>{taskInfo.user?.fio}</span></p>
+              <p className="workers__creator">
+                Создатель : <span>{taskInfo.user?.fio}</span>
+              </p>
               <div>
-                {Boolean(taskInfo.taskUsers?.length) && taskInfo.taskUsers.map((worker, index) => {
+                {Boolean(taskInfo.taskUsers?.length) &&
+                  taskInfo.taskUsers.map((worker, index) => {
                     return (
                       <div className="worker" key={index}>
                         <img src={worker.avatar}></img>

src/pages/ProjectTracker/ProjectTracker.js

@@ -1,11 +1,19 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, { useEffect, useRef, useState } from "react";
-import {Link, useParams} from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
+import { Navigation } from "../../components/Navigation/Navigation";
 
 import { useDispatch, useSelector } from "react-redux";
-import {getProjectBoard, moveProjectTask, setProjectBoardFetch, setToggleTab} from "../../redux/projectsTrackerSlice";
+import { apiRequest } from "../../api/request";
+import {
+  getProjectBoard,
+  modalToggle,
+  moveProjectTask,
+  setProjectBoardFetch,
+  setToggleTab,
+} from "../../redux/projectsTrackerSlice";
 
 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
 import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
@@ -21,40 +29,35 @@ import arrow from "../../images/arrowCalendar.png";
 import del from "../../images/delete.svg";
 import edit from "../../images/edit.svg";
 
-import {apiRequest} from "../../api/request";
-import { Navigation } from "../../components/Navigation/Navigation";
-
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
-    const projectId = useParams()
+  const projectId = useParams();
-    const [openColumnSelect, setOpenColumnSelect] = useState({})
+
+  const [openColumnSelect, setOpenColumnSelect] = useState({});
   const [selectedTab, setSelectedTab] = useState(0);
-    const startWrapperIndexTest = useRef({})
   const [wrapperHover, setWrapperHover] = useState({});
+  const [modalAdd, setModalAdd] = useState(false);
+  const [modalActiveTicket, setModalActiveTicket] = useState(false);
+  const [selectedTicket, setSelectedTicket] = useState({});
+
+  const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
+
   useEffect(() => {
-        dispatch(setProjectBoardFetch(projectId.id))
+    dispatch(setProjectBoardFetch(projectId.id));
-    }, [])
+  }, []);
 
   useEffect(() => {
     if (Object.keys(projectBoard).length) {
-            projectBoard.columns.forEach(column => {
+      projectBoard.columns.forEach((column) => {
-                setOpenColumnSelect(prevState => ({...prevState, [column.id]: false}))
+        setOpenColumnSelect((prevState) => ({
-                setWrapperHover(prevState => ({...prevState, [column.id]: false}))
+          ...prevState,
-            })
+          [column.id]: false,
+        }));
+        setWrapperHover((prevState) => ({ ...prevState, [column.id]: false }));
+      });
     }
-    }, [projectBoard])
+  }, [projectBoard]);
-
-    // Modal State
-    const [modalActiveTicket, setModalActiveTicket] = useState(false);
-    const [selectedTicket, setSelectedTicket] = useState({});
-    const [modalAddWorker, setModalAddWorker] = useState(false);
-    const [modalCreateColl, setModalCreateColl] = useState(false);
-    const [modalCreateTiket, setModalCreateTiket] = useState(false);
-    const [valueTiket, setValueTiket] = useState("");
-    const [descriptionTicket, setDescriptionTicket] = useState("")
-    const [valueColl, setValueColl] = useState("");
-    //
 
   // function toggleMoreTasks(columnId) {
   //     setTabTaskMok((prevArray) =>
@@ -76,10 +79,9 @@ export const ProjectTracker = () => {
   }
 
   function dragEndHandler(e) {
-        setWrapperHover(prevState => ({
+    setWrapperHover((prevState) => ({
-                [prevState]: false
+      [prevState]: false,
-            })
+    }));
-        );
     e.target.classList.remove("tasks__board__item__hide");
   }
 
@@ -92,9 +94,10 @@ export const ProjectTracker = () => {
       return;
     }
 
-        setWrapperHover(prevState => ({
+    setWrapperHover((prevState) => ({
-            [prevState]: false, [columnId]: true
+      [prevState]: false,
-        }))
+      [columnId]: true,
+    }));
   }
   function dragDropHandler(e, columnId) {
     e.preventDefault();
@@ -102,19 +105,24 @@ export const ProjectTracker = () => {
       return;
     }
 
-        setWrapperHover(prevState => ({
+    setWrapperHover((prevState) => ({
-                [prevState]: false
+      [prevState]: false,
-            })
+    }));
-        );
 
     if (columnId !== startWrapperIndexTest.current.index) {
-            dispatch(moveProjectTask({startWrapperIndex: startWrapperIndexTest.current, columnId}))
+      dispatch(
+        moveProjectTask({
+          startWrapperIndex: startWrapperIndexTest.current,
+          columnId,
+        })
+      );
     }
   }
 
   function selectedTabTask(columnId) {
     setSelectedTab(columnId);
-        setModalCreateTiket(true);
+    dispatch(modalToggle("createTiketProject"));
+    setModalAdd(true);
   }
 
   function openTicket(e, task) {
@@ -122,59 +130,17 @@ export const ProjectTracker = () => {
     setModalActiveTicket(true);
   }
 
-    function createTiket() {
-        if (!valueTiket || !descriptionTicket) {
-            return
-        }
-
-        apiRequest('/task/create-task', {
-            method: 'POST',
-            data: {
-                project_id: projectBoard.id,
-                title: valueTiket,
-                description: descriptionTicket,
-                status: 1,
-                user_id: localStorage.getItem('id'),
-                column_id: selectedTab
-            }
-        }).then((res) => {
-            dispatch(setProjectBoardFetch(projectBoard.id))
-        })
-
-        setModalCreateTiket(false);
-        setValueTiket("");
-        setDescriptionTicket("")
-    }
-
-    function createTab() {
-        if (!valueColl) {
-            return
-        }
-
-        apiRequest('/project-column/create-column', {
-            method: 'POST',
-            data: {
-                project_id: projectBoard.id,
-                title: valueColl
-            }
-        }).then((res) => {
-            dispatch(setProjectBoardFetch(projectBoard.id))
-        })
-        setValueColl("");
-        setModalCreateColl(false);
-    }
-
   function deleteColumn(id) {
-        apiRequest('/project-column/update-column', {
+    apiRequest("/project-column/update-column", {
-            method: 'PUT',
+      method: "PUT",
       data: {
         column_id: id,
         project_id: projectBoard.id,
-                status: 0
+        status: 0,
-            }
+      },
     }).then((res) => {
-            dispatch(setProjectBoardFetch(projectBoard.id))
+      dispatch(setProjectBoardFetch(projectBoard.id));
-        })
+    });
   }
 
   return (
@@ -195,7 +161,7 @@ export const ProjectTracker = () => {
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
           <Link
-                        to='/profile/tracker'
+            to="/profile/tracker"
             className="tab active-tab tab"
             onClick={() => dispatch(setToggleTab(1))}
           >
@@ -203,16 +169,16 @@ export const ProjectTracker = () => {
             <p>Проекты </p>
           </Link>
           <Link
-                        to='/profile/tracker'
+            to="/profile/tracker"
-                        className='tab'
+            className="tab"
             onClick={() => dispatch(setToggleTab(2))}
           >
             <img src={tasks} alt="img" />
             <p>Все мои задачи</p>
           </Link>
           <Link
-                        to='/profile/tracker'
+            to="/profile/tracker"
-                        className='tab'
+            className="tab"
             onClick={() => dispatch(setToggleTab(3))}
           >
             <img src={archive} alt="img" />
@@ -220,63 +186,39 @@ export const ProjectTracker = () => {
           </Link>
         </div>
         <div className="tracker__tabs__content">
-                    <div
+          <div className="tracker__tabs__content__tasks tasks active__content">
-                        className="tracker__tabs__content__tasks tasks active__content"
-                    >
             <div className="tasks__head">
               <div className="tasks__head__wrapper">
                 <h4>Проект : {projectBoard.name}</h4>
 
                 <ModalAdd
-                                    active={modalCreateColl}
+                  active={modalAdd}
-                                    setActive={setModalCreateColl}
+                  setActive={setModalAdd}
-                                >
+                  selectedTab={selectedTab}
-                                    <div className="title-project">
+                ></ModalAdd>
-                                        <h4>Введите название колонки</h4>
-                                        <div className="input-container">
-                                            <input
-                                                className="name-project"
-                                                value={valueColl}
-                                                onChange={(e) => setValueColl(e.target.value)}
-                                            ></input>
-                                        </div>
-                                    </div>
-                                    <button className="button-add" onClick={createTab}>
-                                        Создать
-                                    </button>
-                                </ModalAdd>
-
-                                <ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
-                                    <div className="title-project">
-                                        <h4>Добавьте участника</h4>
-                                        <p className="title-project__decs">
-                                            Введите имя или e-mail{" "}
-                                        </p>
-                                        <div className="input-container">
-                                            <input
-                                                className="name-project"
-                                                value={valueTiket}
-                                                onChange={(e) => setValueTiket(e.target.value)}
-                                            ></input>
-                                        </div>
-                                    </div>
-                                    <button
-                                        className="button-add"
-                                        onClick={(e) => e.preventDefault()}
-                                    >
-                                        Добавить
-                                    </button>
-                                </ModalAdd>
 
                 <div className="tasks__head__add">
-                                    <span onClick={() => setModalCreateColl(true)}>+</span>
+                  <span
+                    onClick={() => {
+                      dispatch(modalToggle("createColumn"));
+                      setModalAdd(true);
+                    }}
+                  >
+                    +
+                  </span>
                   <p>добавить колонку</p>
                 </div>
                 <div className="tasks__head__persons">
                   <img src={avatarTest} alt="avatar" />
                   <img src={avatarTest} alt="avatar" />
                   <span className="countPersons">+9</span>
-                                    <span className="addPerson" onClick={setModalAddWorker}>
+                  <span
+                    className="addPerson"
+                    onClick={() => {
+                      dispatch(modalToggle("addWorker"));
+                      setModalAdd(true);
+                    }}
+                  >
                     +
                   </span>
                   <p>добавить участника</p>
@@ -289,10 +231,7 @@ export const ProjectTracker = () => {
                   <span>Мои</span>
                   <img src={selectArrow} alt="arrow" />
                 </div>
-                                <Link
+                <Link to="/profile/tracker" className="tasks__head__back">
-                                    to='/profile/tracker'
-                                    className="tasks__head__back"
-                                >
                   <p>Вернуться на проекты</p>
                   <img src={arrow} alt="arrow" />
                 </Link>
@@ -304,36 +243,13 @@ export const ProjectTracker = () => {
               setActive={setModalActiveTicket}
               task={selectedTicket}
               projectId={projectBoard.id}
-                            projectName = {projectBoard.name}
+              projectName={projectBoard.name}
             />
 
-                        <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
-                            <div className="title-project">
-                                <h4>Введите название и описание задачи</h4>
-                                <div className="input-container">
-                                    <input
-                                        className="name-project"
-                                        value={valueTiket}
-                                        onChange={(e) => setValueTiket(e.target.value)}
-                                        placeholder='Название задачи'
-                                    ></input>
-                                </div>
-                                <div className="input-container">
-                                    <input
-                                        className="name-project"
-                                        value={descriptionTicket}
-                                        onChange={(e) => setDescriptionTicket(e.target.value)}
-                                        placeholder='Описание задачи'
-                                    ></input>
-                                </div>
-                            </div>
-                            <button className="button-add" onClick={createTiket}>
-                                Создать
-                            </button>
-                        </ModalAdd>
-
             <div className="tasks__container">
-                            {Boolean(projectBoard?.columns) && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => {
+              {Boolean(projectBoard?.columns) &&
+                Boolean(projectBoard.columns.length) &&
+                projectBoard.columns.map((column) => {
                   return (
                     <div
                       key={column.id}
@@ -348,9 +264,7 @@ export const ProjectTracker = () => {
                     >
                       <div className="board__head">
                         {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
-                                            <span>
+                        <span>{column.title}</span>
-                                                {column.title}
-                                            </span>
                         <div>
                           <span
                             className="add"
@@ -358,25 +272,44 @@ export const ProjectTracker = () => {
                           >
                             +
                           </span>
-                                                <span onClick={() => {
+                          <span
-                                                    setOpenColumnSelect(prevState => ({...prevState, [column.id]: true}))
+                            onClick={() => {
-                                                }} className="more">...</span>
+                              setOpenColumnSelect((prevState) => ({
+                                ...prevState,
+                                [column.id]: true,
+                              }));
+                            }}
+                            className="more"
+                          >
+                            ...
+                          </span>
                         </div>
                       </div>
-                                        {openColumnSelect[column.id] &&
+                      {openColumnSelect[column.id] && (
-                                            <div className='column__select'>
+                        <div className="column__select">
-                                                <div className='column__select__item' onClick={() => {
+                          <div
-                                                    setOpenColumnSelect(prevState => ({...prevState, [column.id]: false}))
+                            className="column__select__item"
-                                                }}>
+                            onClick={() => {
-                                                    <img src={edit} alt='edit' />
+                              setOpenColumnSelect((prevState) => ({
+                                ...prevState,
+                                [column.id]: false,
+                              }));
+                              dispatch(modalToggle("editColumn"));
+                              setModalAdd(true);
+                            }}
+                          >
+                            <img src={edit} alt="edit" />
                             <span>Изменить</span>
                           </div>
-                                                <div className='column__select__item' onClick={() => deleteColumn(column.id)}>
+                          <div
-                                                    <img src={del} alt='delete' />
+                            className="column__select__item"
+                            onClick={() => deleteColumn(column.id)}
+                          >
+                            <img src={del} alt="delete" />
                             <span>Удалить</span>
                           </div>
                         </div>
-                                        }
+                      )}
                       {column.tasks.map((task, index) => {
                         if (index > 2) {
                           if (!column.open) {

src/redux/projectsTrackerSlice.js

@@ -1,15 +1,14 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import {apiRequest} from "../api/request";
+import { apiRequest } from "../api/request";
 
 const initialState = {
   projects: [],
   projectBoard: {},
-  toggleTab: 1
+  toggleTab: 1,
+  modalType: "",
 };
 
-export const setProjectBoardFetch = createAsyncThunk(
+export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
-    'userInfo',
-    (id) =>
   apiRequest(`/project/get-project?project_id=${id}&expand=columns`)
 );
 
@@ -18,47 +17,61 @@ export const projectsTrackerSlice = createSlice({
   initialState,
   reducers: {
     setAllProjects: (state, action) => {
-      state.projects = action.payload
+      state.projects = action.payload;
     },
     setProject: (state, action) => {
       state.projects.push(action.payload);
     },
     setToggleTab: (state, action) => {
-      state.toggleTab = action.payload
+      state.toggleTab = action.payload;
     },
     deleteProject: (state, action) => {
-      state.projects = state.projects.filter((project) => project.id !== action.payload.id)
+      state.projects = state.projects.filter(
+        (project) => project.id !== action.payload.id
+      );
     },
     moveProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
         if (column.id === action.payload.columnId) {
-          column.tasks.push(action.payload.startWrapperIndex.task)
+          column.tasks.push(action.payload.startWrapperIndex.task);
           apiRequest(`/task/update-task`, {
-            method: 'PUT',
+            method: "PUT",
             data: {
               task_id: action.payload.startWrapperIndex.task.id,
-              column_id: column.id
+              column_id: column.id,
-            }
+            },
-          }).then((res) => {
+          }).then((res) => {});
-          })
         }
         if (column.id === action.payload.startWrapperIndex.index) {
-          state.projectBoard.columns[index].tasks = column.tasks.filter((task)=> task.id !== action.payload.startWrapperIndex.task.id);
+          state.projectBoard.columns[index].tasks = column.tasks.filter(
-        }
+            (task) => task.id !== action.payload.startWrapperIndex.task.id
-      })
+          );
         }
+      });
+    },
+    modalToggle: (state, action) => {
+      state.modalType = action.payload;
+    },
   },
   extraReducers: {
     [setProjectBoardFetch.fulfilled]: (state, action) => {
-      state.projectBoard = action.payload
+      state.projectBoard = action.payload;
-    }
+    },
-  }
+  },
 });
 
-export const { setProject, deleteProject, setAllProjects, moveProjectTask, setToggleTab } = projectsTrackerSlice.actions;
+export const {
+  setProject,
+  deleteProject,
+  setAllProjects,
+  moveProjectTask,
+  setToggleTab,
+  modalToggle,
+} = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
 export const getProjectBoard = (state) => state.tracker.projectBoard;
-export const getToggleTab = (state) => state.tracker.toggleTab
+export const getToggleTab = (state) => state.tracker.toggleTab;
+export const getValueModalType = (state) => state.tracker.modalType;
 
 export default projectsTrackerSlice.reducer;