web-humas-fe/components/main/detail/new-detail.tsx

86 lines
2.8 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 "@/services/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 "@/services/activity-log";
import Cookies from "js-cookie";
import Head from "next/head";
import { getCookiesDecrypt } from "@/utils/global";
export default function NewsDetailPage(props: { datas: any }) {
const params = useParams();
const id: any = params?.id;
const pathname = usePathname();
const [detailArticle, setDetailArticle] = useState<any>();
const [articles, setArticles] = useState<any>([]);
const [uid, setUid] = useState<any>("");
useEffect(() => {
const uid = getCookiesDecrypt("uie");
setUid(uid);
}, []);
useEffect(() => {
getArticles();
sendActivity();
}, []);
async function getArticles() {
const req = { page: 1, search: "", limit: "50", isPublish: true };
const response = await getListArticle(req);
setArticles(response?.data?.data);
}
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 token = Cookies.get("access_token");
const resActivity = await saveActivity(req, token);
};
return (
<>
<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={props.datas} 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 categories={props.datas.categories} />
</div>
<div className="md:hidden text-black">
<SidebarDetail />
</div>
</div>
</div>
</>
);
}