fix ModalTicket logic

src/pages/ProjectTracker/ProjectTracker.jsx

@@ -1,7 +1,7 @@
 import moment from "moment";
 import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Link, useParams } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 
 import {
   activeLoader,
@@ -51,6 +51,8 @@ import avatarMok from "assets/images/avatarMok.webp";
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
   const projectId = useParams();
+  const taskParams = useParams();
+  const taskRefs = useRef([]);
 
   const [openColumnSelect, setOpenColumnSelect] = useState({});
   const [selectedTab, setSelectedTab] = useState(0);
@@ -78,6 +80,29 @@ export const ProjectTracker = () => {
     initListeners();
   }, []);
 
+  useEffect(() => {
+    // const observer = new MutationObserver(() => {
+    //   if (taskParams.taskId && taskRefs.current[taskParams.taskId]) {
+    //     taskRefs.current[taskParams.taskId].click();
+    //     console.log(taskRefs.current[taskParams.taskId]);
+    //   }
+    // });
+
+    // observer.observe(document.body, { childList: true, subtree: true });
+
+    // return () => observer.disconnect();
+    if (projectBoard.columns && taskParams.taskId) {
+      for (const column of projectBoard.columns) {
+        const task = column.tasks.find((task) => task.id == taskParams.taskId);
+        if (task) {
+          openTicket(task);
+          return;
+        }
+      }
+      console.log(projectBoard);
+    }
+  }, [projectBoard]);
+
   useEffect(() => {
     let columnsTasksEmpty = true;
     if (Object.keys(projectBoard).length) {
@@ -145,21 +170,32 @@ export const ProjectTracker = () => {
     setPriorityTask(length);
   }
 
-  function openTicket(e, task) {
+  const updateUrlWithTaskId = (taskId) => {
+    const currentUrl = window.location.pathname;
+    const taskUrlSegment = `/task/`;
+
+    if (currentUrl.includes(taskUrlSegment)) {
+      // Если URL содержит '/task/', заменяем старый ID на новый
+      const baseUrl = currentUrl.substring(
+        0,
+        currentUrl.indexOf(taskUrlSegment) + taskUrlSegment.length
+      );
+      const newUrl = `${baseUrl}${taskId}`;
+      window.history.pushState({}, "", newUrl);
+    } else {
+      // Если URL не содержит '/task/', добавляем '/task/${taskId}'
+      const newUrl = `${currentUrl}${taskUrlSegment}${taskId}`;
+      window.history.pushState({}, "", newUrl);
+    }
+  };
+
+  function openTicket(task) {
     setSelectedTicket(task);
     setModalActiveTicket(true);
-    const currentUrl = window.location.pathname;
-    const newUrl = `${currentUrl}/task/${task.id}`;
-    window.history.pushState({}, "", newUrl);
+    updateUrlWithTaskId(task.id);
     document.body.style.overflow = "hidden";
   }
 
-  useEffect(() => {
-    const currentUrl = window.location.pathname;
-    const newUrl = currentUrl.replace(/\/task\/\d+$/, "");
-    window.history.replaceState({}, "", newUrl);
-  }, []);
-
   function deleteColumn(column) {
     const priorityColumns = [];
     apiRequest("/project-column/update-column", {
@@ -421,19 +457,16 @@ export const ProjectTracker = () => {
                   </Link>
                 </div>
               </div>
-
-              {Boolean(modalActiveTicket) && (
-                <ModalTicket
-                  active={modalActiveTicket}
-                  setActive={setModalActiveTicket}
-                  task={selectedTicket}
-                  projectId={projectBoard.id}
-                  projectName={projectBoard.name}
-                  projectUsers={projectBoard.projectUsers}
-                  projectOwnerId={projectBoard.owner_id}
-                  projectMarks={projectBoard.mark}
-                />
-              )}
+              <ModalTicket
+                active={modalActiveTicket}
+                setActive={setModalActiveTicket}
+                task={selectedTicket}
+                projectId={projectBoard.id}
+                projectName={projectBoard.name}
+                projectUsers={projectBoard.projectUsers}
+                projectOwnerId={projectBoard.owner_id}
+                projectMarks={projectBoard.mark}
+              />
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -535,6 +568,9 @@ export const ProjectTracker = () => {
                                 startWrapperIndexTest={startWrapperIndexTest}
                                 task={task}
                                 titleColor={titleColor}
+                                ref={(el) => {
+                                  taskRefs.current[task.id] = el;
+                                }}
                               />
                             );
                           })}