forked from Transparency/kgroad-frontend2
119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
"use client";
|
||
|
||
import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
|
||
import "./RatingSection.scss";
|
||
import SearchBar from "@/Features/SearchBar/SearchBar";
|
||
import arrow_down_icon from "./icons/arrow-down-icon.svg";
|
||
import arrow_up_icon from "./icons/arrow-up-icon.svg";
|
||
import like_icon from "./icons/like-icon.svg";
|
||
import message_icon from "./icons/message-icon.svg";
|
||
import Image from "next/image";
|
||
import { useRating } from "./rating.store";
|
||
import { useEffect } from "react";
|
||
import Link from "next/link";
|
||
|
||
const RatingSection = () => {
|
||
const { data: reports, getRatings } = useRating();
|
||
|
||
useEffect(() => {
|
||
getRatings();
|
||
}, []);
|
||
|
||
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 description="Yorem ipsum dolor sit amet, consectetur adipiscing elit.">
|
||
Рейтинг
|
||
</SectionHeader>
|
||
<SearchBar placeholder="Введите адрес" />
|
||
|
||
<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.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">
|
||
<span>Разбитая дорога</span>
|
||
</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>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default RatingSection;
|