just started rewritig the project, found a lot of fails

src/Widgets/RatingSection/RatingSection.tsx

@@ -0,0 +1,175 @@
+"use client";
+import "./RatingSection.scss";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import SectionHeader from "@/entities/SectionHeader/SectionHeader";
+import SearchForm from "@/features/SearchBar/SearchForm";
+import arrow_down_icon from "./icons/arrow-down.svg";
+import arrow_up_icon from "./icons/arrow-up.svg";
+import like_icon from "./icons/like.svg";
+import message_icon from "./icons/message.svg";
+import { useRatingStore } from "./ratingSectionStore";
+import { useShallow } from "zustand/react/shallow";
+import Link from "next/link";
+import {
+  ROAD_TYPES,
+  ROAD_TYPES_COLORS,
+} from "@/shared/variables/road-types";
+import RoadType from "@/entities/RoadType/RoadType";
+
+interface IRatingSectionProps {
+  [key: string]: string;
+}
+
+const RatingSection: React.FC<IRatingSectionProps> = ({
+  categories = "1,2,3,4,5,6",
+  queryMap,
+  queryRating,
+}: IRatingSectionProps) => {
+  const [ratingSearch, setRatingSearch] = useState<string>(
+    queryRating || ""
+  );
+  const router = useRouter();
+
+  const reports = useRatingStore(useShallow((state) => state.data));
+  const getReports = useRatingStore(
+    useShallow((state) => state.getReports)
+  );
+
+  useEffect(() => {
+    getReports(ratingSearch);
+  }, []);
+
+  const handleSubmit: React.FormEventHandler<
+    HTMLFormElement
+  > = async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    setRatingSearch(formData.get("rating-search") as string);
+
+    router.push(
+      `/?тип-дороги=${categories}${
+        queryMap ? `&поиск-на-карте=${queryMap}` : ""
+      }${ratingSearch ? `&поиск-рейтинг=${ratingSearch}` : ""}`,
+      {
+        scroll: false,
+      }
+    );
+
+    getReports(ratingSearch);
+  };
+
+  const sliceDate = (date: string) => {
+    return `${date.slice(8, 10)}.${date.slice(5, 7)}.${date.slice(
+      0,
+      4
+    )}`;
+  };
+
+  const sliceLocation = (location: string) => {
+    if (location.length > 15) return `${location.slice(0, 15)}...`;
+
+    return location;
+  };
+
+  const sliceDescription = (description: string) => {
+    if (description.length > 49) {
+      return `${description.slice(0, 50)}...`;
+    }
+
+    return description;
+  };
+
+  return (
+    <div className="rating-section">
+      <SectionHeader
+        title="Рейтинг"
+        description="Обсуждаем дороги: рейтинг, опыт, комфорт в пути!"
+      />
+      <SearchForm
+        onChange={(e) => setRatingSearch(e.target.value)}
+        name="rating-search"
+        placeholder="Введите адрес"
+        value={ratingSearch}
+        handleSubmit={handleSubmit}
+      />
+      <div className="rating-section__table">
+        <table>
+          <thead>
+            <tr>
+              <th id="report-header-date" tabIndex={0}>
+                <div>
+                  Дата
+                  <Image src={arrow_down_icon} alt="Arrow Down" />
+                  <Image src={arrow_up_icon} alt="Arrow Up" />
+                </div>
+              </th>
+              <th>Адрес</th>
+              <th>Статус</th>
+              <th>Описание</th>
+              <th id="report-header-comment" tabIndex={0}>
+                <div>
+                  Комментарии
+                  <Image src={arrow_down_icon} alt="Arrow Down" />
+                  <Image src={arrow_up_icon} alt="Arrow Up" />
+                </div>
+              </th>
+              <th id="report-header-like" tabIndex={0}>
+                <div>
+                  Рейтинг
+                  <Image src={arrow_down_icon} alt="Arrow Down" />
+                  <Image src={arrow_up_icon} alt="Arrow Up" />
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {reports.results.length !== 0 ? (
+              reports.results.map((report) => (
+                <tr key={report.id}>
+                  <td id="report-date">
+                    {sliceDate(report.created_at)}
+                  </td>
+                  <td id="report-location">
+                    <Link href={`/report/${report.location[0].id}`}>
+                      {sliceLocation(report.location[0].address)}
+                    </Link>
+                  </td>
+                  <td id="report-type">
+                    <RoadType
+                      color={ROAD_TYPES_COLORS[report.category]}
+                    >
+                      {ROAD_TYPES[report.category]}
+                    </RoadType>
+                  </td>
+                  <td id="report-description">
+                    <p>{sliceDescription(report.description)}</p>
+                  </td>
+                  <td id="report-comment">
+                    <div>
+                      <Image src={message_icon} alt="Message Icon" />
+                      {report.count_reviews}
+                    </div>
+                  </td>
+                  <td id="report-like">
+                    <div>
+                      <Image src={like_icon} alt="Like Icon" />
+                      {report.total_likes}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr className="rating-section-error">
+                <td colSpan={7}>Упс, адрес не найден</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default RatingSection;