Refactor file structure

src/pages/Tracker/Tracker.jsx

@@ -9,8 +9,6 @@ import {
   setToggleTab
 } from "@redux/projectsTrackerSlice";
 
-import { caseOfNum } from "@utils/helper";
-
 import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
@@ -20,19 +18,17 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import ProjectTicket from "@components/ProjectTicket/ProjectTicket";
 import AllTaskTableTracker from "@components/TrackerComponents/AllTaskTableTracker/AllTaskTableTracker";
-import ArchiveTableTracker from "@components/TrackerComponents/ArchiveTableTracker/ArchiveTableTracker";
+import Archive from "@components/TrackerComponents/Archive/Archive";
+import ProjectTicket from "@components/TrackerComponents/ProjectTicket/ProjectTicket";
 
 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 search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import archive from "assets/images/archiveIcon.png";
-import mockAvatar from "assets/images/avatarMok.png";
 import downloadExcel from "assets/images/downloadExcel.svg";
 import noProjects from "assets/images/noProjects.png";
 import statusTimeTask from "assets/images/statusTimeTask.svg";
@@ -106,24 +102,6 @@ export const Tracker = () => {
     );
   }
 
-  function filterArchiveTasks(e) {
-    setFilterCompleteTasks(
-      allCompletedTasks.filter((item) => {
-        if (!e.target.value) {
-          return item;
-        }
-        if (
-          item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
-          item.description
-            .toLowerCase()
-            .startsWith(e.target.value.toLowerCase())
-        ) {
-          return item;
-        }
-      })
-    );
-  }
-
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -328,95 +306,13 @@ export const Tracker = () => {
                 : "tracker__tabs__content__projects"
             }
           >
-            <div className="archive__tasks">
-              <div className="archive__title">
-                <h3>Архив задач:</h3>
-                <p>
-                  {`${filterCompleteTasks.length} 
-                    ${caseOfNum(filterCompleteTasks.length, "tasks")}`}
-                </p>
-
-                <div className="archive__tasks-period">
-                  <div className="buttons-month">
-                    <button>
-                      <img src={arrowViewReport} alt="<"></img>
-                    </button>
-                    <button>
-                      <img src={arrowViewReport} alt=">"></img>
-                    </button>
-                  </div>
-                  <div className="month-period">
-                    <h2>Сентябрь,</h2>
-                    <h3>2023</h3>
-                  </div>
-                </div>
-                <div className="archive__tasks__search">
-                  <img src={search} alt="search" />
-                  <input
-                    type="text"
-                    placeholder="Найти задачу"
-                    onChange={(event) => filterArchiveTasks(event)}
-                  />
-                </div>
-              </div>
-
-              {loader && <Loader style="green" />}
-
-              <ArchiveTableTracker
-                loader={loader}
-                filterCompleteTasks={filterCompleteTasks}
-              />
-            </div>
-            <div className="archive__projects">
-              <div className="archive__projects-title">
-                <h3>Архив проектов:</h3>
-                <p>
-                  {`${
-                    projects?.filter((project) => project.status === 10).length
-                  } 
-                     ${caseOfNum(
-                       projects?.filter((project) => project.status === 10)
-                         .length,
-                       "projects"
-                     )}`}
-                </p>
-              </div>
-              <div className="archive__tasksWrapper">
-                {Boolean(
-                  projects?.filter((project) => project.status === 10).length
-                ) ? (
-                  projects?.map((project, index) => {
-                    return project.status === 10 ? (
-                      <div
-                        className="archive__completeTask-project"
-                        key={index}
-                      >
-                        <div className="archive__completeTask__description">
-                          <p className="project-title-archive">
-                            {project.name}
-                          </p>
-                          <p className="date">{project.date}</p>
-                        </div>
-                        <div className="archive__completeTask__creator">
-                          <img src={mockAvatar} alt="#" />
-                          <div className="creator-title">
-                            <h4>Создатель проекта:</h4>
-                            <p>{"Василий Тарасов"}</p>
-                          </div>
-                        </div>
-                      </div>
-                    ) : (
-                      ""
-                    );
-                  })
-                ) : (
-                  <div className="archive__noItem-project">
-                    <img src={archiveTrackerProjects} alt="#" />
-                    <p>В архиве проектов нет</p>
-                  </div>
-                )}
-              </div>
-            </div>
+            <Archive
+              projects={projects}
+              loader={loader}
+              filterCompleteTasks={filterCompleteTasks}
+              allCompletedTasks={allCompletedTasks}
+              setFilterCompleteTasks={setFilterCompleteTasks}
+            />
           </div>
         </div>
       </div>