kgroad-frontend2/src/Widgets/RatingSection/RatingSection.tsx

"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;