"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; import Navbar from "@/components/Navbar"; import Footer from "@/components/Footer"; type Article = { id: number; title: string; slug: string; category: string | null; published: boolean; publishedAt: string | null; createdAt: string; }; export default function EditArticlesPage() { const [articles, setArticles] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); useEffect(() => { const loadArticles = async () => { try { const response = await fetch( "/api/user/articles" ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal mengambil Article" ); } setArticles(result.articles || []); } catch (error) { console.error( "LOAD USER ARTICLES ERROR:", error ); setError( error instanceof Error ? error.message : "Gagal mengambil Article" ); } finally { setLoading(false); } }; loadArticles(); }, []); const publishedCount = articles.filter( (article) => article.published ).length; const draftCount = articles.filter( (article) => !article.published ).length; return ( <>
{/* ================================================= HEADER ================================================= */}
Article Management

Edit My Articles

Manage and update the articles you have created. Only your own articles are displayed on this page.

{/* ================================================= MAIN CARD ================================================= */}
{/* ================================================= CARD HEADER ================================================= */}
✎

My Articles

Articles created by your account

{!loading && !error && articles.length > 0 && (
{articles.length} Total
{publishedCount} Published
{draftCount} Draft
)}
{/* ================================================= LOADING ================================================= */} {loading ? (
{[1, 2, 3, 4].map( (item) => (
) )}
) : error ? ( /* ================================================= ERROR ================================================= */
!
Unable to Load Articles

{error}

) : articles.length === 0 ? ( /* ================================================= EMPTY ================================================= */
✎
No Articles Yet

You have not created any articles yet. Create your first article to start sharing your content.

+ Add Article
) : ( <> {/* ================================================= DESKTOP TABLE ================================================= */}
{articles.map( ( article, index ) => ( {/* NUMBER */} {/* ARTICLE */} {/* CATEGORY */} {/* STATUS */} {/* DATE */} {/* ACTION */} ) )}
No Article Category Status Published Action
{String( index + 1 ).padStart( 2, "0" )}
{article.title}
/{article.slug}
{article.category ? ( {article.category} ) : ( No category )} {article.published ? ( Published ) : ( Draft )} {article.publishedAt ? ( ● {new Date( article.publishedAt ).toLocaleDateString( "id-ID", { day: "2-digit", month: "short", year: "numeric", } )} ) : ( Not published )} Edit →
{/* ================================================= MOBILE ================================================= */}
{articles.map( ( article, index ) => (
{String( index + 1 ).padStart( 2, "0" )}

{article.title}

/{article.slug}
{article.published ? ( Published ) : ( Draft )}
Category {article.category || "No category"}
Published {article.publishedAt ? new Date( article.publishedAt ).toLocaleDateString( "id-ID", { day: "2-digit", month: "short", year: "numeric", } ) : "Not published"}
Edit Article →
) )}
)}