"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; import { useParams } from "next/navigation"; import Navbar from "@/components/Navbar"; import Footer from "@/components/Footer"; type ArticleImage = { id: number; image: string; articleId: number; createdAt: string; }; type Article = { id: number; title: string; slug: string; excerpt: string | null; content: string; thumbnail: string | null; category: string | null; published: boolean; publishedAt: string | null; author: { id: string; name: string | null; email: string | null; image: string | null; } | null; articleimage: ArticleImage[]; }; export default function ReadArticlePage() { const params = useParams(); const slug = params.slug as string; const [article, setArticle] = useState
(null); const [loading, setLoading] = useState(true); const [notFound, setNotFound] = useState(false); const [currentImage, setCurrentImage] = useState(0); const [showLightbox, setShowLightbox] = useState(false); useEffect(() => { const loadArticle = async () => { try { const response = await fetch("/api/articles", { cache: "no-store", }); const result = await response.json(); if (!response.ok || !result.success) { setNotFound(true); return; } const foundArticle = result.data.find( (item: Article) => item.slug === slug && item.published === true ); if (!foundArticle) { setNotFound(true); return; } setArticle(foundArticle); } catch (error) { console.error("LOAD ARTICLE ERROR:", error); setNotFound(true); } finally { setLoading(false); } }; if (slug) { loadArticle(); } }, [slug]); const images = article?.articleimage && article.articleimage.length > 0 ? article.articleimage.map((item) => item.image) : article?.thumbnail ? [article.thumbnail] : []; const nextImage = () => { if (images.length <= 1) return; setCurrentImage((prev) => prev === images.length - 1 ? 0 : prev + 1 ); }; const previousImage = () => { if (images.length <= 1) return; setCurrentImage((prev) => prev === 0 ? images.length - 1 : prev - 1 ); }; const formatDate = (date: string | null) => { if (!date) return ""; return new Date(date).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", }); }; /* |-------------------------------------------------------------------------- | LOADING |-------------------------------------------------------------------------- */ if (loading) { return ( <>