forked from Transparency/kgroad-frontend2
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import "./ReportDetails.scss";
|
|
import { IReport } from "@/shared/types/report-type";
|
|
import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
|
|
import { Metadata } from "next";
|
|
import ReportInformation from "@/widgets/report-details/ReportInformation/ReportInformation";
|
|
import ReportImages from "@/widgets/report-details/ReportImages/ReportImages";
|
|
import dynamic from "next/dynamic";
|
|
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
|
|
import { apiInstance } from "@/shared/config/apiConfig";
|
|
|
|
const DynamicMap = dynamic(
|
|
() => import("@/widgets/report-details/ReportMap/ReportMap"),
|
|
{
|
|
ssr: false,
|
|
}
|
|
);
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: {
|
|
params: { id: string };
|
|
}): Promise<Metadata> {
|
|
const response = await apiInstance.get<IReport>(
|
|
`/report/${params.id}/`
|
|
);
|
|
|
|
return {
|
|
title: `KG ROAD | ${response.data.description}`,
|
|
description: `${response.data.location[0].address}, ${response.data.description}`,
|
|
openGraph: {
|
|
title: `KG ROAD | ${response.data.description}`,
|
|
description: `${response.data.location[0].address}, ${response.data.description}`,
|
|
images: [response.data.image[0].image],
|
|
type: "article",
|
|
},
|
|
};
|
|
}
|
|
|
|
const ReportDetails = async ({
|
|
params,
|
|
}: {
|
|
params: { id: string };
|
|
}) => {
|
|
const getReportDetails = async () => {
|
|
try {
|
|
const res = await fetch(
|
|
`${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
|
|
{ cache: "no-store" }
|
|
);
|
|
|
|
return res.json();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
const report: IReport = await getReportDetails();
|
|
|
|
return (
|
|
<div className="report-details page-padding">
|
|
<BreadCrumbs homeRequired />
|
|
<div className="report-details__container">
|
|
<ReportInformation
|
|
id={report.id}
|
|
location={report.location[0]}
|
|
date={report.created_at}
|
|
description={report.description}
|
|
category={report.category}
|
|
total_likes={report.total_likes}
|
|
author={report.author}
|
|
/>
|
|
<div className="report-details__map">
|
|
<DynamicMap
|
|
location={report.location}
|
|
category={report.category}
|
|
/>
|
|
</div>
|
|
<ReportImages images={report.image} />
|
|
</div>
|
|
|
|
<ReviewSection endpoint="report" id={+params.id} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ReportDetails;
|