107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import DetailNews from "../../page/detail-news";
|
|
import SidebarDetail from "../../page/sidebar-detail";
|
|
import RelatedNews from "../../page/related-news";
|
|
import Comment from "./comment";
|
|
import { getArticleById, getListArticle } from "@/service/article";
|
|
import { useParams, usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { ChevronRightIcon, UserIcon } from "@/components/icons";
|
|
import { close, loading } from "@/config/swal";
|
|
import { saveActivity } from "@/service/activity-log";
|
|
import Cookies from "js-cookie";
|
|
import Head from "next/head";
|
|
|
|
const token = Cookies.get("access_token");
|
|
const uid = Cookies.get("uie");
|
|
|
|
export default function NewsDetailPage() {
|
|
const params = useParams();
|
|
const id: any = params?.id;
|
|
const pathname = usePathname();
|
|
const [detailArticle, setDetailArticle] = useState<any>();
|
|
const [articles, setArticles] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
initFetch();
|
|
getArticles();
|
|
sendActivity();
|
|
}, []);
|
|
|
|
async function getArticles() {
|
|
const req = { page: 1, search: "", limit: "50" };
|
|
const response = await getListArticle(req);
|
|
setArticles(response?.data?.data);
|
|
}
|
|
|
|
const initFetch = async () => {
|
|
loading();
|
|
const res = await getArticleById(id?.split("-")[0]);
|
|
const data = res?.data?.data;
|
|
setDetailArticle(data);
|
|
close();
|
|
};
|
|
|
|
const sendActivity = async () => {
|
|
let req: any = {
|
|
activityTypeId: 2,
|
|
url: "https://kontenhumas.com/" + pathname,
|
|
articleId: Number(id?.split("-")[0]),
|
|
};
|
|
if (uid) {
|
|
req.userId = Number(uid);
|
|
}
|
|
|
|
const resActivity = await saveActivity(req, token);
|
|
};
|
|
return (
|
|
<>
|
|
{" "}
|
|
<Head>
|
|
<title>{detailArticle?.title}</title>
|
|
<meta property="og:title" content={detailArticle.title} />
|
|
<meta property="og:description" content={detailArticle.description} />
|
|
<meta property="og:image" content={detailArticle.thumbnailUrl} />
|
|
<meta
|
|
property="og:url"
|
|
content={`https://kontenhumas.com/news/detail/${detailArticle?.id}-${detailArticle?.slug}`}
|
|
/>
|
|
<meta property="og:type" content="article" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content={detailArticle?.title} />
|
|
<meta name="twitter:description" content={detailArticle?.description} />
|
|
<meta name="twitter:image" content={detailArticle?.thumbnailUrl} />
|
|
</Head>
|
|
<div className="bg-white dark:bg-stone-900">
|
|
<div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
|
|
<div className="flex flex-row gap-4 items-end ">
|
|
<Link href="/" className=" font-semibold text-lg">
|
|
Beranda
|
|
</Link>
|
|
<ChevronRightIcon />
|
|
<p className=" text-lg">Berita</p>
|
|
</div>
|
|
<div className=" lg:flex lg:justify-around gap-4 lg:gap-16 w-full">
|
|
<DetailNews data={detailArticle} listArticle={articles} />
|
|
<div className="w-auto lg:w-[25%] hidden lg:block">
|
|
<SidebarDetail />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full lg:w-[70%] h-auto my-2 md:my-5 lg:my-10 px-0 lg:px-3">
|
|
<Comment id={id?.split("-")[0]} />
|
|
</div>
|
|
|
|
<div className="bg-gray-50 text-black dark:bg-black dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
|
|
<RelatedNews />
|
|
</div>
|
|
<div className="md:hidden text-black">
|
|
<SidebarDetail />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|