forked from Transparency/kgroad-frontend2
106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
import Typography from "@/shared/ui/components/Typography/Typography";
|
||
import "./NewsDetails.scss";
|
||
import { apiInstance } from "@/shared/config/apiConfig";
|
||
import { INews } from "@/shared/types/news-type";
|
||
import Image from "next/image";
|
||
import message from "./icons/message.svg";
|
||
import calendar from "./icons/calendar.svg";
|
||
import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
|
||
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
|
||
import { Metadata } from "next";
|
||
|
||
export async function generateMetadata({
|
||
params,
|
||
}: {
|
||
params: { id: string };
|
||
}): Promise<Metadata> {
|
||
const response = await apiInstance.get<INews>(`/news/${params.id}/`);
|
||
|
||
return {
|
||
title: response.data.title,
|
||
description: response.data.description,
|
||
openGraph: {
|
||
images: [response.data.image],
|
||
type: "article",
|
||
publishedTime: response.data.created_at,
|
||
},
|
||
};
|
||
}
|
||
const formatDescription = (text: string) => {
|
||
return text.replace(/(\r\n|\n|\r)/g, "<br />");
|
||
};
|
||
|
||
//<<<<<<< HEAD:src/app/[locale]/news/[id]/page.tsx
|
||
const NewsDetails = async ({
|
||
params,
|
||
}: {
|
||
params: { id: string; новость: string };
|
||
}) => {
|
||
//=======
|
||
//const NewsDetails = async ({ params }: { params: { id: string } }) => {
|
||
//>>>>>>> master:src/app/news/[id]/page.tsx
|
||
const getNewsById = async () => {
|
||
const response = await apiInstance.get<INews>(`/news/${params.id}/`);
|
||
return response.data;
|
||
};
|
||
|
||
const data = await getNewsById();
|
||
|
||
const months: Record<string, string> = {
|
||
"01": "Январь",
|
||
"02": "Февраль",
|
||
"03": "Март",
|
||
"04": "Апрель",
|
||
"05": "Май",
|
||
"06": "Июнь",
|
||
"07": "Июль",
|
||
"08": "Август",
|
||
"09": "Сентябрь",
|
||
"10": "Октябрь",
|
||
"11": "Ноябрь",
|
||
"12": "Декабрь",
|
||
};
|
||
|
||
return (
|
||
<div className="news-details page-padding">
|
||
<BreadCrumbs />
|
||
<Typography element="h2">{data.title}</Typography>
|
||
|
||
<div className="news-details__img">
|
||
<img id="news-img" src={data.image} alt="News Image" />
|
||
<div className="news-details__date-and-reviews">
|
||
<div className="news-details__date">
|
||
<Image src={calendar} alt="Calendar Icon" />
|
||
<p>
|
||
{months[data.created_at.slice(5, 7)]}{" "}
|
||
{data.created_at.slice(8, 10) === "0"
|
||
? data.created_at.slice(9, 10)
|
||
: data.created_at.slice(8, 10)}
|
||
, {data.created_at.slice(0, 4)}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="news-details__reviews">
|
||
<Image src={message} alt="Message Icon" />
|
||
<p>Комментарии: {data.count_reviews}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="news-details__text">
|
||
<h3>{data.title}</h3>
|
||
<div
|
||
className="news-details__description"
|
||
dangerouslySetInnerHTML={{
|
||
__html: formatDescription(data.description),
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<ReviewSection endpoint="news" id={data.id} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NewsDetails;
|