"use client"; import Image from "next/image"; import { useEffect, useState } from "react"; import Link from "next/link"; import { getArticleById, getListArticle } from "@/service/article"; import { close, loading } from "@/config/swal"; import { useParams } from "next/navigation"; import Author from "../landing-page/author"; type TabKey = "trending" | "comments" | "latest"; type Article = { id: number; title: string; description: string; categoryName: string; createdAt: string; createdByName: string; thumbnailUrl: string; categories: { title: string; }[]; files: { file_url: string; file_alt: string; }[]; }; interface CategoryType { id: number; label: string; value: number; } export default function DetailContent() { const params = useParams(); const id = params?.id; const [page, setPage] = useState(1); const [totalPage, setTotalPage] = useState(1); const [articles, setArticles] = useState([]); const [articleDetail, setArticleDetail] = useState(null); const [showData, setShowData] = useState("5"); const [search, setSearch] = useState("-"); const [listCategory, setListCategory] = useState([]); const [selectedCategories, setSelectedCategories] = useState("-"); const [startDateValue, setStartDateValue] = useState({ startDate: null, endDate: null, }); const [detailfiles, setDetailFiles] = useState([]); const [mainImage, setMainImage] = useState(0); const [thumbnail, setThumbnail] = useState("-"); const [diseId, setDiseId] = useState(0); const [thumbnailImg, setThumbnailImg] = useState([]); const [selectedMainImage, setSelectedMainImage] = useState( null ); const [tabArticles, setTabArticles] = useState([]); const [activeTab, setActiveTab] = useState("trending"); const tabs: { id: TabKey; label: string }[] = [ { id: "trending", label: "Trending" }, { id: "comments", label: "Comments" }, { id: "latest", label: "Latest" }, ]; useEffect(() => { fetchTabArticles(); }, [activeTab]); async function fetchTabArticles() { const req: any = { limit: showData, page, search, categorySlug: Array.from(selectedCategories).join(","), sort: "desc", sortBy: "created_at", }; // Sesuaikan sortBy berdasarkan tab if (activeTab === "trending") { req.sortBy = "view_count"; } else if (activeTab === "comments") { req.sortBy = "comment_count"; } else { req.sortBy = "created_at"; } // Hanya kirimkan search jika valid if (search && search !== "-" && search !== "") { req.search = search; } if (selectedCategories && selectedCategories !== "-") { req.categorySlug = selectedCategories; } try { const res = await getListArticle(req); setTabArticles(res?.data?.data || []); } catch (error) { console.error("Failed fetching tab articles:", error); setTabArticles([]); // Optional fallback } } const content: Record< TabKey, { image: string; title: string; date: string }[] > = { trending: [ { image: "/thumb1.png", title: "#StopBullyDiSekolah: Peran Positif Media Sosial dalam Mengatasi Bullying", date: "22 FEBRUARI 2024", }, { image: "/thumb2.png", title: "Polri Gelar Lomba Orasi Unjuk Rasa dalam Rangka Hari HAM Sedunia Berhadiah Total Lebih dari Rp 150 juta!", date: "29 NOVEMBER 2021", }, { image: "/thumb3.png", title: "Tingkatkan Ibadah Sambut #RamadhanPenuhDamai", date: "7 MARET 2024", }, { image: "/thumb4.png", title: "Exploring the Charm of Papua’s Traditional Clothing: A Captivating and Meaningful Cultural Heritage", date: "1 AGUSTUS 2024", }, ], comments: [ { image: "/thumb-comment.png", title: "Pengunjung Komentar Positif tentang Fitur Baru", date: "3 JUNI 2024", }, ], latest: [ { image: "/thumb-latest.png", title: "Update Terbaru dari Redaksi Hari Ini", date: "2 JULI 2025", }, ], }; useEffect(() => { initState(); }, [page, showData, startDateValue, selectedCategories]); async function initState() { // loading(); const req = { limit: showData, page, search, categorySlug: Array.from(selectedCategories).join(","), sort: "desc", sortBy: "created_at", }; try { const res = await getListArticle(req); setArticles(res?.data?.data || []); setTotalPage(res?.data?.meta?.totalPage || 1); } finally { // close(); } } useEffect(() => { initStateData(); }, [listCategory]); async function initStateData() { loading(); const res = await getArticleById(id); const data = res.data?.data; setThumbnail(data?.thumbnailUrl); setDiseId(data?.aiArticleId); setDetailFiles(data?.files); setArticleDetail(data); // <-- Add this close(); } return ( <>
Background

Home {">"}Detail

{articleDetail?.title}

{articleDetail?.createdByName} • {new Date(articleDetail?.createdAt).toLocaleDateString( "id-ID", { day: "numeric", month: "long", year: "numeric", } )} • {articleDetail?.categories?.[0]?.title}
{articleDetail?.files?.[0]?.file_url ? ( Berita ) : (

Gambar tidak tersedia

)}

{articleDetail?.slug}

Mikulnews.com - {articleDetail?.description}

Tags:
{articleDetail?.tags ? ( {articleDetail.tags} ) : ( Tidak ada tag )}
Berita Utama
Author

christine natalia

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *