Fixed archive

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -1,11 +1,12 @@
 import React from "react";
-import ReactPaginate from "react-paginate";
 
-import AllMyTasksItem from "@components/Common/AllMyTasksItem/AllMyTasksItem";
+import { getCorrectDate } from "@components/Calendar/calendarHelper";
+import ArchiveTasksItem from "@components/Common/AllMyTasksItem/ArchiveTasksItem";
 
-const ArchiveTableTracker = ({ filterCompleteTasks, projects, loader }) => {
+import "./archiveTableTracker.scss";
+
+const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
   return (
-    <>
     <table className="archive__table">
       <thead>
         <tr>
@@ -14,13 +15,12 @@ const ArchiveTableTracker = ({ filterCompleteTasks, projects, loader }) => {
           <th>Дата окончания</th>
         </tr>
       </thead>
-
       <tbody>
         {!loader && (
           <>
             {Boolean(filterCompleteTasks.length) ? (
               filterCompleteTasks.map((task, index) => {
-                  <AllMyTasksItem task={task} projects={projects} />;
+                return <ArchiveTasksItem task={task} index={index} />;
               })
             ) : (
               <div className="archive__noItem">
@@ -31,7 +31,6 @@ const ArchiveTableTracker = ({ filterCompleteTasks, projects, loader }) => {
         )}
       </tbody>
     </table>
-    </>
   );
 };
 

src/components/Common/AllMyTasksItem/AllMyTasksItem.jsx

@@ -1,60 +0,0 @@
-import React from "react";
-
-import "./allMyTasksItem.scss";
-
-const AllMyTasksItem = ({ task, projects, currentItems }) => {
-  function toggleDescTask(e) {
-    e.target.closest("img").classList.toggle("open-desc-item");
-    e.target
-      .closest("td")
-      ?.querySelector(".taskList__table__name-project")
-      .classList.toggle("hide-desc");
-  }
-
-  return (
-    <tr key={task.id}>
-      <td>
-        <div className="taskList__table__title-task">
-          <p>
-            {task.title}#{currentItems}
-          </p>
-
-          <div
-            onClick={(e) => {
-              toggleDescTask(e);
-            }}
-          >
-            <img src={plus} alt="#" />
-          </div>
-        </div>
-        <div className="taskList__table__name-project hide-desc">
-          <h4>Проект:</h4>
-          <p>
-            {projects.map((project) => {
-              if (project.id == task.project_id) {
-                return project.name;
-              }
-            })}
-          </p>
-        </div>
-      </td>
-      <td>
-        <div className="task-status">
-          {task.status == 1 ? "Active" : "Close"}
-        </div>
-      </td>
-      <td>
-        {task.timers.map((item) => {
-          let time = new Date(item.deltaSeconds * 1000)
-            .toISOString()
-            .slice(11, 19);
-          return `${time}`;
-        })}
-      </td>
-      <td>{new Date(task.created_at).toLocaleDateString()}</td>
-      <td>{new Date(task.dead_line).toLocaleDateString()}</td>
-    </tr>
-  );
-};
-
-export default AllMyTasksItem;

src/components/Common/ArchiveTasksItem/ArchiveTasksItem.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { getCorrectDate } from "@components/Calendar/calendarHelper";
+
+import "./archiveTasksItem.scss";
+
+const ArchiveTasksItem = ({ task, index }) => {
+  return (
+    <tr key={index}>
+      <td className="archive__completeTask__description">
+        <p className="completeTask__title">{task.title}</p>
+        <p
+          className="date"
+          dangerouslySetInnerHTML={{
+            __html: task.description,
+          }}
+        />
+      </td>
+      <td className="archive__completeTask__time">
+        <p>
+          {task.timers.length == 0
+            ? "-"
+            : task.timers.map((item) => {
+                let time = new Date(item.deltaSeconds * 1000)
+                  .toISOString()
+                  .slice(11, 19);
+                return `${time}`;
+              })}
+        </p>
+      </td>
+      <td className="archive__completeTask__info">
+        <div>
+          <p>{getCorrectDate(task.updated_at)}</p>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default ArchiveTasksItem;

src/components/Common/TrackerArchivePaginated/TrackerArchivePaginated.jsx

@@ -1,6 +1,11 @@
 import React from "react";
+import { useState } from "react";
+import { useEffect } from "react";
+import ReactPaginate from "react-paginate";
 
-const PaginatedItems = ({ itemsPerPage, items }) => {
+import ArchiveTableTracker from "@components/ArchiveTableTracker/ArchiveTableTracker";
+
+const TrackerArchivePaginated = ({ itemsPerPage, items, projects, loader }) => {
   const [currentItems, setCurrentItems] = useState(null);
   const [pageCount, setPageCount] = useState(0);
   const [itemOffset, setItemOffset] = useState(0);
@@ -22,7 +27,6 @@ const PaginatedItems = ({ itemsPerPage, items }) => {
 
   return (
     <>
-      {/* <Items currentItems={currentItems} /> */}
       <ReactPaginate
         nextLabel=">"
         onPageChange={handlePageClick}
@@ -47,4 +51,4 @@ const PaginatedItems = ({ itemsPerPage, items }) => {
   );
 };
 
-export default PaginatedItems;
+export default TrackerArchivePaginated;

src/pages/Tracker/Tracker.jsx

@@ -18,6 +18,7 @@ import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
+import TrackerArchivePaginated from "@components/Common/TrackerArchivePaginated/TrackerArchivePaginated";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
@@ -443,7 +444,6 @@ export const Tracker = () => {
               <ArchiveTableTracker
                 loader={loader}
                 filterCompleteTasks={filterCompleteTasks}
-                projects={projects}
               />
             </div>
             <div className="archive__projects">