src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -1,37 +1,36 @@
 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">
-      <table className="archive__table">
+      <thead>
-        <thead>
+        <tr>
-          <tr>
+          <th>Задача</th>
-            <th>Задача</th>
+          <th>Потраченное время</th>
-            <th>Потраченное время</th>
+          <th>Дата окончания</th>
-            <th>Дата окончания</th>
+        </tr>
-          </tr>
+      </thead>
-        </thead>
+      <tbody>
-
+        {!loader && (
-        <tbody>
+          <>
-          {!loader && (
+            {Boolean(filterCompleteTasks.length) ? (
-            <>
+              filterCompleteTasks.map((task, index) => {
-              {Boolean(filterCompleteTasks.length) ? (
+                return <ArchiveTasksItem task={task} index={index} />;
-                filterCompleteTasks.map((task, index) => {
+              })
-                  <AllMyTasksItem task={task} projects={projects} />;
+            ) : (
-                })
+              <div className="archive__noItem">
-              ) : (
+                <p>В данном месяце у вас не было задач</p>
-                <div className="archive__noItem">
+              </div>
-                  <p>В данном месяце у вас не было задач</p>
+            )}
-                </div>
+          </>
-              )}
+        )}
-            </>
+      </tbody>
-          )}
+    </table>
-        </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">