kgroad-frontend2/src/app/report/[id]/page.tsx

import "./ReportDetails.scss";
import Image from "next/image";
import RoadType from "@/entities/RoadType/RoadType";
import ReportLike from "@/features/ReportLike/ReportLike";
import { apiInstance } from "@/shared/config/apiConfig";
import { IReport } from "@/shared/types/report-type";
import {
  ROAD_TYPES,
  ROAD_TYPES_COLORS,
} from "@/shared/variables/road-types";
import calendar from "./icons/calendar.svg";
import map_pin from "./icons/map-pin.svg";
import def_image from "./icons/def_image.svg";
import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "KG ROAD | Обращение",
  description:
    "Страница обращения KG ROAD",
};

const ReportDetails = async ({
  params,
}: {
  params: { id: string };
}) => {
  const getReportDetails = async () => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
      { cache: "no-store" }
    );

    return res.json();
  };
  const report: IReport = await getReportDetails();

  const months: Record<string, string> = {
    "01": "Январь",
    "02": "Февраль",
    "03": "Март",
    "04": "Апрель",
    "05": "Май",
    "06": "Июнь",
    "07": "Июль",
    "08": "Август",
    "09": "Сентябрь",
    "10": "Октябрь",
    "11": "Ноябрь",
    "12": "Декабрь",
  };

  const showImages = () => {
    const images = [];

    for (let i = 0; i < 5; i++) {
      if (report.image[i]) {
        const image = (
          <img
            className={`report-images__exist report-images__item${
              i + 1
            }`}
            key={i}
            src={report.image[i].image}
            alt="Report Image"
          />
        );
        images.push(image);
      } else {
        const defImage = (
          <div
            className={`report-images__default report-images__item${
              i + 1
            }`}
            key={i}
          >
            <Image src={def_image} alt="Default Image" />
          </div>
        );
        images.push(defImage);
      }
    }

    return images;
  };

  return (
    <div className="report-details page-padding">
      <div className="report-details__container">
        <div className="report-information">
          <RoadType color={ROAD_TYPES_COLORS[report.category]}>
            {ROAD_TYPES[report.category]}
          </RoadType>
          <h2>{report.location[0].address}</h2>
          <div className="report-information__date-and-like">
            <div className="report-information__date">
              <Image src={calendar} alt="Calendar Icon" />
              <p>
                {months[report.created_at.slice(5, 7)]}{" "}
                {report.created_at.slice(5, 7).slice(0, 1) === "0"
                  ? report.created_at.slice(6, 7)
                  : report.created_at.slice(5, 7)}
                , {report.created_at.slice(0, 4)}
              </p>
            </div>
            <ReportLike
              count={report.total_likes}
              report_id={report.id}
            />
          </div>

          <p className="report-information__description">
            {report.description}
          </p>

          <p className="report-information__author">
            Автор обращения:{" "}
            <span>
              {report.author.first_name}{" "}
              {report.author.last_name.slice(0, 1)}.
            </span>
          </p>
          <button className="report-information__show-map">
            <Image src={map_pin} alt="Map Pin Icon" />
            Показать на карте
          </button>
        </div>
        <div className="report-images">
          {showImages().map((image) => image)}
        </div>
      </div>

      <ReviewSection endpoint="report" id={+params.id} />
    </div>
  );
};

export default ReportDetails;