humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:meta data

This commit is contained in:
Rama Priyanto 2025-03-14 14:50:34 +07:00
parent f5fbf31eb9
commit 55e9b390e4
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/news/detail/[id]/page.tsx
View File

@ -1,20 +1,34 @@
"use client";
import { HumasLayout } from "@/components/layout/humas-layout"; import { HumasLayout } from "@/components/layout/humas-layout";
import DetailPage from "@/components/main/detail/new-detail"; import DetailPage from "@/components/main/detail/new-detail";
import React, { useEffect, useState } from "react"; import { getArticleById } from "@/service/article";
import { Metadata } from "next";
export default function NewsPage() { type Props = {
const [hasMounted, setHasMounted] = useState(false); params: { id: string };
};
useEffect(() => { export async function generateMetadata({ params }: Props): Promise<Metadata> {
setHasMounted(true); const res = await getArticleById(params.id?.split("-")[0]);
}, []); const article = res?.data?.data;
// Render return {
if (!hasMounted) return null; title: article.title,
description: article.description,
openGraph: {
title: article.title,
description: article.description,
images: [article.thumbnailUrl],
},
};
}
export default async function NewsPage({ params }: Props) {
const articleId = params.id?.split("-")[0];
const res = await getArticleById(articleId);
const article = res?.data?.data;
return ( return (
<HumasLayout> <HumasLayout>
<DetailPage /> <DetailPage datas={article} />
</HumasLayout> </HumasLayout>
); );
} }

10
components/main/detail/new-detail.tsx
View File

@ -16,7 +16,7 @@ import Head from "next/head";
const token = Cookies.get("access_token"); const token = Cookies.get("access_token");
const uid = Cookies.get("uie"); const uid = Cookies.get("uie");
export default function NewsDetailPage() { export default function NewsDetailPage(props: { datas: any }) {
const params = useParams(); const params = useParams();
const id: any = params?.id; const id: any = params?.id;
const pathname = usePathname(); const pathname = usePathname();
@ -24,7 +24,7 @@ export default function NewsDetailPage() {
const [articles, setArticles] = useState<any>([]); const [articles, setArticles] = useState<any>([]);
useEffect(() => { useEffect(() => {
initFetch(); // initFetch();
getArticles(); getArticles();
sendActivity(); sendActivity();
}, []); }, []);
@ -57,7 +57,7 @@ export default function NewsDetailPage() {
}; };
return ( return (
<> <>
{" "} {/* {" "}
<Head> <Head>
<title>{detailArticle?.title}</title> <title>{detailArticle?.title}</title>
<meta property="og:title" content={detailArticle?.title} /> <meta property="og:title" content={detailArticle?.title} />
@ -72,7 +72,7 @@ export default function NewsDetailPage() {
<meta name="twitter:title" content={detailArticle?.title} /> <meta name="twitter:title" content={detailArticle?.title} />
<meta name="twitter:description" content={detailArticle?.description} /> <meta name="twitter:description" content={detailArticle?.description} />
<meta name="twitter:image" content={detailArticle?.thumbnailUrl} /> <meta name="twitter:image" content={detailArticle?.thumbnailUrl} />
</Head> </Head> */}
<div className="bg-white dark:bg-stone-900"> <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="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
<div className="flex flex-row gap-4 items-end "> <div className="flex flex-row gap-4 items-end ">
@ -83,7 +83,7 @@ export default function NewsDetailPage() {
<p className=" text-lg">Berita</p> <p className=" text-lg">Berita</p>
</div> </div>
<div className=" lg:flex lg:justify-around gap-4 lg:gap-16 w-full"> <div className=" lg:flex lg:justify-around gap-4 lg:gap-16 w-full">
<DetailNews data={detailArticle} listArticle={articles} /> <DetailNews data={props.datas} listArticle={articles} />
<div className="w-auto lg:w-[25%] hidden lg:block"> <div className="w-auto lg:w-[25%] hidden lg:block">
<SidebarDetail /> <SidebarDetail />
</div> </div>