Fixed state modal

src/components/UI/ModalAdd/ModalAdd.jsx

@@ -1,17 +1,158 @@
-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 }) => {
+  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>
+        );
+      default:
+        return null;
+    }
+  }
+
   return (
     <div
       className={active ? "modal-add active" : "modal-add"}
       onClick={() => setActive(false)}
     >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
-        {children}
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
+      {getModal()}
     </div>
   );
 };

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -5,8 +5,10 @@ import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"
 import { Footer } from "../../Footer/Footer";
 import { Link } 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 { setToggleTab } from "../../../redux/projectsTrackerSlice";
 
 import avatarMock1 from "../../../images/avatarMoсk1.png";
 import avatarMock2 from "../../../images/avatarMoсk2.png";
@@ -60,6 +62,7 @@ export const TicketFullScreen = ({}) => {
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
+      <Navigation />
       <div className="container">
         <div className="tracker__content">
           <ProfileBreadcrumbs
@@ -74,7 +77,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)}
           >
@@ -82,7 +85,7 @@ export const TicketFullScreen = ({}) => {
             <p>Проекты </p>
           </Link>
           <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
             className="tab"
             onClick={() => toggleTabs(2)}
           >
@@ -90,7 +93,7 @@ export const TicketFullScreen = ({}) => {
             <p>Все мои задачи</p>
           </Link>
           <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
             className="tab"
             onClick={() => toggleTabs(3)}
           >