Working in pagination

src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import plus from "assets/icons/plus.svg";
+
+const AllTaskTableItem = ({ task, projects }) => {
+  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}</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 AllTaskTableItem;

src/components/AllTaskTableTracker/AllTaskTableTracker.jsx

@@ -0,0 +1,302 @@
+import React from "react";
+import { useState } from "react";
+import { useEffect } from "react";
+import ReactPaginate from "react-paginate";
+
+import AllTaskTableItem from "./AllTaskTableItem/AllTaskTableItem";
+import "./allTaskTableTracker.scss";
+
+const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
+  const lol = [
+    {
+      id: 216,
+      project_id: 66,
+      project_name: "Tuman 2",
+      title: "Турниры",
+      created_at: "2023-06-28 13:31:11",
+      updated_at: "2023-11-07 11:02:50",
+      dead_line: "2023-11-10 12:32:42",
+      description:
+        "Когда проект передавался - турниры уже были взяты в работу, там была сделана какая-то мелочь. В данный момент статус неизвестен.",
+      status: 1,
+      column_id: 138,
+      user_id: 83,
+      user: {
+        fio: "Виктор Батищев",
+        avatar: "/profileava/m2.png",
+      },
+      executor_id: 110,
+      priority: 1,
+      executor: {
+        fio: "Овсянников Максим Сергеевич",
+        avatar: "/profileava/m2.png",
+      },
+      comment_count: 0,
+      taskUsers: [
+        {
+          id: 86,
+          task_id: 216,
+          user_id: 110,
+          fio: "Овсянников Максим Сергеевич",
+          avatar: "/profileava/m2.png",
+        },
+      ],
+      mark: [],
+      execution_priority: null,
+      timers: [
+        {
+          id: 172,
+          user_id: 110,
+          created_at: "2023-10-23 10:37:39",
+          stopped_at: "2023-10-23 10:38:01",
+          entity_id: 216,
+          entity_type: 2,
+          delta: {
+            y: 0,
+            m: 0,
+            d: 0,
+            h: 0,
+            i: 0,
+            s: 22,
+            f: 0,
+            weekday: 0,
+            weekday_behavior: 0,
+            first_last_day_of: 0,
+            invert: 0,
+            days: 0,
+            special_type: 0,
+            special_amount: 0,
+            have_weekday_relative: 0,
+            have_special_relative: 0,
+          },
+          deltaSeconds: 22,
+          status: 1,
+        },
+      ],
+    },
+    {
+      id: 404,
+      project_id: 93,
+      project_name: "Тест2",
+      title: "Кек",
+      created_at: "2023-10-11 19:04:14",
+      updated_at: "2023-10-11 19:04:19",
+      dead_line: "2023-10-11 16:03:51",
+      description: "<p>12321313</p>",
+      status: 0,
+      column_id: 182,
+      user_id: 110,
+      user: {
+        fio: "Овсянников Максим Сергеевич",
+        avatar: "/profileava/m2.png",
+      },
+      executor_id: 110,
+      priority: 1,
+      executor: {
+        fio: "Овсянников Максим Сергеевич",
+        avatar: "/profileava/m2.png",
+      },
+      comment_count: 0,
+      taskUsers: [],
+      mark: [],
+      execution_priority: null,
+      timers: [],
+    },
+    {
+      id: 405,
+      project_id: 93,
+      project_name: "Тест2",
+      title: "15481",
+      created_at: "2023-10-11 19:04:49",
+      updated_at: "2023-10-11 19:05:24",
+      dead_line: "2023-10-11 16:04:32",
+      description: "<p>Тест</p>",
+      status: 0,
+      column_id: 182,
+      user_id: 110,
+      user: {
+        fio: "Овсянников Максим Сергеевич",
+        avatar: "/profileava/m2.png",
+      },
+      executor_id: 110,
+      priority: 1,
+      executor: {
+        fio: "Овсянников Максим Сергеевич",
+        avatar: "/profileava/m2.png",
+      },
+      comment_count: 0,
+      taskUsers: [],
+      mark: [],
+      execution_priority: null,
+      timers: [
+        {
+          id: 162,
+          user_id: 110,
+          created_at: "2023-10-11 16:04:53",
+          stopped_at: "2023-10-11 16:05:20",
+          entity_id: 405,
+          entity_type: 2,
+          delta: {
+            y: 0,
+            m: 0,
+            d: 0,
+            h: 0,
+            i: 0,
+            s: 27,
+            f: 0,
+            weekday: 0,
+            weekday_behavior: 0,
+            first_last_day_of: 0,
+            invert: 0,
+            days: 0,
+            special_type: 0,
+            special_amount: 0,
+            have_weekday_relative: 0,
+            have_special_relative: 0,
+          },
+          deltaSeconds: 27,
+          status: 1,
+        },
+      ],
+    },
+    {
+      id: 403,
+      project_id: 66,
+      project_name: "Tuman 2",
+      title: "Тест",
+      created_at: "2023-10-11 19:03:28",
+      updated_at: "2023-10-13 18:01:33",
+      dead_line: "2023-10-11 16:02:52",
+      description: "<p>Тест2</p>",
+      status: 0,
+      column_id: 136,
+      user_id: 110,
+      user: {
+        fio: "Овсянников Максим Сергеевич",
+        avatar: "/profileava/m2.png",
+      },
+      executor_id: 110,
+      priority: -1,
+      executor: {
+        fio: "Овсянников Максим Сергеевич",
+        avatar: "/profileava/m2.png",
+      },
+      comment_count: 0,
+      taskUsers: [],
+      mark: [],
+      execution_priority: null,
+      timers: [
+        {
+          id: 169,
+          user_id: 110,
+          created_at: "2023-10-13 15:00:16",
+          stopped_at: "2023-10-13 15:01:30",
+          entity_id: 403,
+          entity_type: 2,
+          delta: {
+            y: 0,
+            m: 0,
+            d: 0,
+            h: 0,
+            i: 1,
+            s: 14,
+            f: 0,
+            weekday: 0,
+            weekday_behavior: 0,
+            first_last_day_of: 0,
+            invert: 0,
+            days: 0,
+            special_type: 0,
+            special_amount: 0,
+            have_weekday_relative: 0,
+            have_special_relative: 0,
+          },
+          deltaSeconds: 74,
+          status: 1,
+        },
+      ],
+    },
+  ];
+
+  const [items, setItems] = useState([]);
+  const itemsPerPage = 2;
+
+  const [currentItems, setCurrentItems] = useState([]);
+  const [pageCount, setPageCount] = useState(0);
+  const [itemOffset, setItemOffset] = useState(0);
+
+  useEffect(() => {
+    setItems(filteredAllTasks);
+  }, [filteredAllTasks]);
+
+  // Баг с отрисовкой массив currentItems пустой
+  console.log(currentItems);
+  console.log(items);
+
+  useEffect(() => {
+    const endOffset = itemOffset + itemsPerPage;
+    setCurrentItems(items.slice(itemOffset, endOffset));
+    setPageCount(Math.ceil(items.length / itemsPerPage));
+  }, [itemOffset, itemsPerPage]);
+
+  const handlePageClick = (event) => {
+    const newOffset = (event.selected * itemsPerPage) % items.length;
+    setItemOffset(newOffset);
+  };
+
+  return (
+    <>
+      <table className="taskList__table">
+        <thead>
+          <tr>
+            <th>Задача</th>
+            <th>Статус</th>
+            <th>Потраченное время</th>
+            <th>Дата начала</th>
+            <th>Дедлайн</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {!loader && (
+            <>
+              {Boolean(currentItems.length) &&
+                currentItems.map((task, index) => {
+                  return (
+                    <AllTaskTableItem
+                      projects={projects}
+                      task={task}
+                      key={index}
+                    />
+                  );
+                })}
+            </>
+          )}
+        </tbody>
+      </table>
+
+      <ReactPaginate
+        nextLabel="вперед >"
+        onPageChange={handlePageClick}
+        pageRangeDisplayed={3}
+        marginPagesDisplayed={2}
+        pageCount={pageCount}
+        previousLabel="< назад"
+        pageClassName="pagination__item"
+        pageLinkClassName="pagination__link"
+        previousClassName="pagination__item"
+        previousLinkClassName="pagination__link"
+        nextClassName="pagination__item"
+        nextLinkClassName="pagination__link"
+        breakLabel="..."
+        breakClassName="pagination__item"
+        breakLinkClassName="pagination__link"
+        containerClassName="pagination"
+        activeClassName="active-btn"
+        renderOnZeroPageCount={null}
+      />
+    </>
+  );
+};
+
+export default AllTaskTableTracker;

src/components/AllTaskTableTracker/allTaskTableTracker.scss

@@ -0,0 +1,24 @@
+.pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+  justify-content: center;
+  margin-top: 50px;
+  font-size: 14px;
+
+  &__item {
+  }
+
+  &__link {
+    border-radius: 15px;
+    color: black;
+    padding: 6px 10px;
+  }
+}
+
+.active-btn {
+  .pagination__link {
+    color: white;
+    background-color: #52b709;
+  }
+}

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -19,7 +19,9 @@ const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
           <>
             {Boolean(filterCompleteTasks.length) ? (
               filterCompleteTasks.map((task, index) => {
-                return <ArchiveTasksItem task={task} index={index} />;
+                return (
+                  <ArchiveTasksItem task={task} index={index} key={index} />
+                );
               })
             ) : (
               <div className="archive__noItem">

src/components/Common/TrackerArchivePaginated/TrackerArchivePaginated.jsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import { useEffect } from "react";
-import ReactPaginate from "react-paginate";
-
-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);
-
-  useEffect(() => {
-    const endOffset = itemOffset + itemsPerPage;
-    console.log(`Loading items from ${itemOffset} to ${endOffset}`);
-    setCurrentItems(items.slice(itemOffset, endOffset));
-    setPageCount(Math.ceil(items.length / itemsPerPage));
-  }, [itemOffset, itemsPerPage]);
-
-  const handlePageClick = (event) => {
-    const newOffset = (event.selected * itemsPerPage) % items.length;
-    console.log(
-      `User requested page number ${event.selected}, which is offset ${newOffset}`
-    );
-    setItemOffset(newOffset);
-  };
-
-  return (
-    <>
-      <ReactPaginate
-        nextLabel=">"
-        onPageChange={handlePageClick}
-        pageRangeDisplayed={3}
-        marginPagesDisplayed={2}
-        pageCount={pageCount}
-        previousLabel="<"
-        pageClassName="page-item"
-        pageLinkClassName="page-link"
-        previousClassName="page-item"
-        previousLinkClassName="page-link"
-        nextClassName="page-item"
-        nextLinkClassName="page-link"
-        breakLabel="..."
-        breakClassName="page-item"
-        breakLinkClassName="page-link"
-        containerClassName="pagination"
-        activeClassName="active"
-        renderOnZeroPageCount={null}
-      />
-    </>
-  );
-};
-
-export default TrackerArchivePaginated;

src/pages/Tracker/Tracker.jsx

@@ -13,12 +13,11 @@ import { caseOfNum } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import AllTaskTableTracker from "@components/AllTaskTableTracker/AllTaskTableTracker";
 import ArchiveTableTracker from "@components/ArchiveTableTracker/ArchiveTableTracker";
-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";
@@ -29,7 +28,6 @@ import addProjectImg from "assets/icons/addProjectImg.svg";
 import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
 import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
 import filterIcon from "assets/icons/filterIcon.svg";
-import plus from "assets/icons/plus.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
@@ -299,73 +297,12 @@ export const Tracker = () => {
             </div>
 
             {loader && <Loader style="green" />}
-            <table className="taskList__table">
-              <thead>
-                <tr>
-                  <th>Задача</th>
-                  <th>Статус</th>
-                  <th>Потраченное время</th>
-                  <th>Дата начала</th>
-                  <th>Дедлайн</th>
-                </tr>
-              </thead>
 
-              <tbody>
-                {!loader && (
-                  <>
-                    {Boolean(filteredAllTasks.length) &&
-                      filteredAllTasks.map((task, index) => {
-                        return (
-                          <tr key={task.id}>
-                            <td>
-                              <div className="taskList__table__title-task">
-                                <p>{task.title}</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>
-                        );
-                      })}
-                  </>
-                )}
-              </tbody>
-            </table>
+            <AllTaskTableTracker
+              loader={loader}
+              filteredAllTasks={filteredAllTasks}
+              projects={projects}
+            />
 
             <div className="taskList__time">
               <div className="taskList__time-compited">