tracker-connect

src/components/ProjectTiket/ProjectTiket.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import {Link} from "react-router-dom";
 import ModalSettings from "../UI/ModalSettings/ModalSettings";
 
 import link from "../../images/link.svg";
@@ -8,11 +9,11 @@ import edit from "../../images/edit.svg";
 
 import {apiRequest} from "../../api/request";
 import {useDispatch} from "react-redux";
-import { deleteProject, setProjectBoardFetch } from "../../redux/projectsTrackerSlice";
+import { deleteProject } from "../../redux/projectsTrackerSlice";
 
 import "./projectTiket.scss";
 
-export const ProjectTiket = ({ project, index, setOpenProject }) => {
+export const ProjectTiket = ({ project, index }) => {
   const [modalSettings, setModalSettings] = useState(false);
   const dispatch = useDispatch();
 
@@ -49,13 +50,10 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
 
   return (
     <div className="project" key={index}>
-      <h3 onClick={() =>{
-          setOpenProject(true)
-          dispatch(setProjectBoardFetch(project.id))
-      }}>{project.name}</h3>
+      <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
       <div className="project__info">
         <p>Открытые задачи</p>
-        <span className="count">-</span>
+        <span className="count">{project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)}</span>
         {/*<span className="add">{project.columns.length ? '+' : ''}</span>*/}
         <span className="menu-settings" onClick={() => setModalSettings(true)}>
           ...
@@ -64,7 +62,7 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
 
       <ModalSettings active={modalSettings}>
         <div className="project__settings-menu">
-          <div onClick={() => console.log(project)}>
+          <div>
             <img src={edit}></img>
             <p>редактировать</p>
           </div>

src/components/ProjectTiket/projectTiket.scss

@@ -19,7 +19,7 @@
     padding: 8px 13px 8px;
   }
 
-  h3 {
+  a {
     font-weight: 700;
     font-size: 18px;
     line-height: 32px;
@@ -27,7 +27,12 @@
     margin-bottom: 10px;
     overflow: hidden;
     white-space: nowrap;
+    display: flex;
     text-overflow: ellipsis;
+
+    &:hover {
+      color: black;
+    }
   }
 
   &__info {

src/components/UI/TicketFullScreen/TicketFullScreen.js

@@ -5,6 +5,8 @@ import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"
 import { Footer } from "../../Footer/Footer";
 import { Link } from "react-router-dom";
 import ModalAdd from "../ModalAdd/ModalAdd";
+import { useDispatch } from "react-redux";
+import {setToggleTab} from "../../../redux/projectsTrackerSlice";
 
 import avatarMock1 from "../../../images/avatarMoсk1.png";
 import avatarMock2 from "../../../images/avatarMoсk2.png";
@@ -28,10 +30,10 @@ import edit from "../../../images/edit.svg";
 import "./ticketFullScreen.scss";
 
 export const TicketFullScreen = ({}) => {
-  const [toggleTab, setToggleTab] = useState(1);
   const [addSubtask, setAddSubtask] = useState(false);
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const [valueTiket, setValueTiket] = useState("");
+  const dispatch = useDispatch();
 
   const [tiket] = useState({
     name: "Разработка трекера",
@@ -52,7 +54,7 @@ export const TicketFullScreen = ({}) => {
   ]);
 
   const toggleTabs = (index) => {
-    setToggleTab(index);
+    dispatch(setToggleTab(index));
   };
 
   return (
@@ -71,31 +73,30 @@ export const TicketFullScreen = ({}) => {
       </div>
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
-          <div
-            className={toggleTab === 1 ? "tab active-tab" : "tab"}
+          <Link
+            to='/profile/tracker'
+            className="tab active-tab"
             onClick={() => toggleTabs(1)}
           >
             <img src={project} alt="img" />
             <p>Проекты </p>
-          </div>
-          <div
-            className={toggleTab === 2 ? "tab active-tab" : "tab"}
+          </Link>
+          <Link
+            to='/profile/tracker'
+            className="tab"
             onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
-            <Link to={`/profile/tracker`} className="link">
-              <p>Все мои задачи</p>
-            </Link>
-          </div>
-          <div
-            className={toggleTab === 3 ? "tab active-tab" : "tab"}
+            <p>Все мои задачи</p>
+          </Link>
+          <Link
+            to='/profile/tracker'
+            className="tab"
             onClick={() => toggleTabs(3)}
           >
             <img src={archive} alt="img" />
-            <Link to={`/profile/tracker`} className="link">
-              <p>Архив</p>
-            </Link>
-          </div>
+            <p>Архив</p>
+          </Link>
         </div>
         <div className="tracker__tabs__content content-tabs">
           <div className="tasks__head">