refactoring of home page; remove constants, leave const folder

Author: Victoria Ivanova

frontend/src/const/index.ts

@@ -1,3 +1,5 @@
+import { StatusMeta } from "@/types/status";
+
 export enum BugStatuses {
   IN_PROGRESS = 0,
   READY = 1,
@@ -14,3 +16,29 @@ export enum RequestStates {
   DONE = 2,
   ERROR = 3,
 }
+
+export const reportStatusMap: Record<number, StatusMeta> = {
+  0: {
+    title: "В работе",
+    color: "badge-error",
+    border: "border-error",
+  },
+  1: {
+    title: "Решён",
+    color: "badge-success",
+    border: "border-success",
+  },
+};
+
+export const bugStatusMap: Record<number, StatusMeta> = {
+  0: {
+    title: "Открыт",
+    color: "badge-error",
+    border: "border-error",
+  },
+  1: {
+    title: "Исправлен",
+    color: "badge-success",
+    border: "border-success",
+  },
+};

frontend/src/constants/status.ts

@@ -1,8 +1,3 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
 
 .section-title {
   font-size: 1.5em;

frontend/src/pages/Home/Home.css

@@ -4,8 +4,8 @@ import {
   loadReportsFx,
   $responsibleReports,
   $participantReports,
-} from "../../store/reportsSummary";
-import ReportSummary from "./components/ReportSummary/ReportSummary";
+} from "@/store/reportsSummary";
+import Section from "./components/Section/Section";
 import "./Home.css";
 
 const Main = () => {
@@ -18,25 +18,9 @@ const Main = () => {
 
   return (
     <div className="text-base-content auto-rows-min gap-4">
-      <section className="flex flex-column section">
-        <h2 className="section-title text-base-content">Ответственный</h2>
-        <div className="reports-summary-wrapper">
-          {!!responsibleReports.length &&
-            responsibleReports.map((report) => (
-              <ReportSummary key={report.id} report={report} highlight />
-            ))}
-        </div>
-      </section>
+      <Section title="Ответственный" reports={responsibleReports} />
       <div className="divider section-divider"></div>
-      <section className="flex flex-column section">
-        <h2 className="section-title text-base-content">Участник</h2>
-        <div className="reports-summary-wrapper">
-          {!!participantReports.length &&
-            participantReports.map((report) => (
-              <ReportSummary key={report.id} report={report} />
-            ))}
-        </div>
-      </section>
+      <Section title="Участник" reports={participantReports} />
     </div>
   );
 };

frontend/src/pages/Home/Home.tsx

@@ -1,6 +1,4 @@
 import { useNavigate } from "react-router-dom";
-
-import "./ReportSummary.css";
 import { Report } from "@/types/report";
 
 type ReportProps = {

frontend/src/pages/Home/components/ReportSummary/ReportSummary.css

@@ -0,0 +1,23 @@
+import { Report } from "@/types/report";
+import ReportSummary from "./ReportSummary";
+
+type Props = {
+  title: string;
+  reports: Report[];
+};
+
+const Section = ({ title, reports }: Props) => {
+  return (
+    <section className="flex flex-col gap-3">
+      <h2 className="section-title text-base-content">{title}</h2>
+      <div className="reports-summary-wrapper">
+        {!!reports.length &&
+          reports.map((report) => (
+            <ReportSummary key={report.id} report={report} highlight />
+          ))}
+      </div>
+    </section>
+  );
+};
+
+export default Section;

…mponents/ReportSummary/ReportSummary.tsx …ome/components/Section/ReportSummary.tsxfrontend/src/pages/Home/components/ReportSummary/ReportSummary.tsx renamed to frontend/src/pages/Home/components/Section/ReportSummary.tsx frontend/src/pages/Home/components/ReportSummary/ReportSummary.tsx renamed to frontend/src/pages/Home/components/Section/ReportSummary.tsx

@@ -2,7 +2,7 @@ import { useUnit } from "effector-react";
 import { $searchResult } from "@/store/search";
 import { formatDistanceToNow } from "date-fns";
 import { ru } from "date-fns/locale";
-import { getStatusMeta } from "@/constants/status";
+import getStatusMeta from "@/utils/getStatusMeta";
 import { useNavigate } from "react-router-dom";
 import { ReportResponse } from "@/api/reports/models";
 

frontend/src/pages/Home/components/Section/Section.tsx

@@ -0,0 +1,10 @@
+export type StatusMeta = {
+  title: string;
+  color:
+    | "badge-success"
+    | "badge-warning"
+    | "badge-error"
+    | "badge-info"
+    | "badge-neutral";
+  border: string;
+};

frontend/src/pages/Search/components/SearchResults/SearchResults.tsx

@@ -0,0 +1,19 @@
+import { bugStatusMap, reportStatusMap } from "@/const";
+import { StatusMeta } from "@/types/status";
+
+type EntityType = "bug" | "report";
+
+const unknownStatus: StatusMeta = {
+  title: "Неизвестно",
+  color: "badge-neutral",
+  border: "border-neutral",
+};
+
+export default function getStatusMeta(
+  type: EntityType,
+  status: number
+): StatusMeta {
+  if (type === "report") return reportStatusMap[status] ?? unknownStatus;
+  if (type === "bug") return bugStatusMap[status] ?? unknownStatus;
+  return unknownStatus;
+}