"use client"; import { ChangeEvent, FormEvent, useEffect, useState, } from "react"; import Link from "next/link"; import Navbar from "@/components/Navbar"; import Footer from "@/components/Footer"; export default function CreateArticlePage() { const [title, setTitle] = useState(""); const [slug, setSlug] = useState(""); const [excerpt, setExcerpt] = useState(""); const [content, setContent] = useState(""); const [category, setCategory] = useState(""); const [published, setPublished] = useState(false); const getCurrentDate = () => { const now = new Date(); const offset = now.getTimezoneOffset(); const localDate = new Date( now.getTime() - offset * 60 * 1000 ); return localDate.toISOString().split("T")[0]; }; const [publishedAt, setPublishedAt] = useState(getCurrentDate()); const [images, setImages] = useState([]); const [previews, setPreviews] = useState([]); const [uploading, setUploading] = useState(false); const [saving, setSaving] = useState(false); const [articleAccess, setArticleAccess] = useState(null); const [checkingAccess, setCheckingAccess] = useState(true); const [showAlertModal, setShowAlertModal] = useState(false); const [alertType, setAlertType] = useState< "success" | "error" | "warning" | "info" >("info"); const [alertTitle, setAlertTitle] = useState(""); const [alertMessage, setAlertMessage] = useState(""); const showAlert = ( type: "success" | "error" | "warning" | "info", title: string, message: string ) => { setAlertType(type); setAlertTitle(title); setAlertMessage(message); setShowAlertModal(true); }; const closeAlert = () => { setShowAlertModal(false); }; useEffect(() => { const checkArticleAccess = async () => { try { const response = await fetch( "/api/user/articles/article-access-check", { method: "GET", cache: "no-store", } ); const result = await response.json(); if (!response.ok || !result.success) { showAlert( "warning", "Article Access", result.message || "Unable to verify your Article access." ); return; } setArticleAccess( result.data?.articleAccess === true ); } catch (error) { console.error( "CHECK ARTICLE ACCESS ERROR:", error ); showAlert( "error", "Connection Error", "Unable to verify your Article access." ); } finally { setCheckingAccess(false); } }; checkArticleAccess(); }, []); const generateSlug = (value: string) => { return value .toLowerCase() .trim() .replace(/[^a-z0-9\s-]/g, "") .replace(/\s+/g, "-") .replace(/-+/g, "-"); }; const handleTitleChange = (value: string) => { setTitle(value); if (!slug) { setSlug(generateSlug(value)); } }; const handleImagesChange = ( event: ChangeEvent ) => { if (checkingAccess || articleAccess !== true) { event.target.value = ""; showAlert( "warning", "Article Access Disabled", "Your access to add Articles has been disabled by the Admin." ); return; } const selectedFiles = Array.from( event.target.files || [] ); if (selectedFiles.length === 0) { return; } const imageFiles = selectedFiles.filter((file) => file.type.startsWith("image/") ); if (imageFiles.length === 0) { showAlert( "warning", "Invalid File", "The selected files are not images." ); event.target.value = ""; return; } setImages((previous) => [ ...previous, ...imageFiles, ]); const newPreviews = imageFiles.map((file) => URL.createObjectURL(file) ); setPreviews((previous) => [ ...previous, ...newPreviews, ]); event.target.value = ""; }; const removeImage = (index: number) => { if (checkingAccess || articleAccess !== true) { return; } const preview = previews[index]; if (preview) { URL.revokeObjectURL(preview); } setImages((previous) => previous.filter( (_, imageIndex) => imageIndex !== index ) ); setPreviews((previous) => previous.filter( (_, imageIndex) => imageIndex !== index ) ); }; const uploadImages = async () => { if (checkingAccess || articleAccess !== true) { throw new Error( "Your access to add Articles has been disabled by the Admin." ); } if (images.length === 0) { return []; } const formData = new FormData(); images.forEach((file) => { formData.append("images", file); }); setUploading(true); try { const response = await fetch( "/api/user/articles/upload", { method: "POST", body: formData, } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Failed to upload images" ); } return result.data as string[]; } finally { setUploading(false); } }; const handleSubmit = async ( event: FormEvent ) => { event.preventDefault(); if (checkingAccess) { return; } if (articleAccess !== true) { showAlert( "warning", "Article Access Disabled", "Your access to add Articles has been disabled by the Admin." ); return; } if (!title.trim()) { showAlert( "warning", "Article Title Required", "Please enter an article title before continuing." ); return; } if (!slug.trim()) { showAlert( "warning", "Article Slug Required", "Please enter an article slug before continuing." ); return; } if (!content.trim()) { showAlert( "warning", "Article Content Required", "Please enter the article content before continuing." ); return; } if (!publishedAt) { showAlert( "warning", "Publish Date Required", "Please select a publish date before continuing." ); return; } setSaving(true); try { const uploadedImages = await uploadImages(); const publishDate = publishedAt ? new Date( `${publishedAt}T00:00:00` ).toISOString() : null; const response = await fetch( "/api/user/articles", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: title.trim(), slug: slug.trim(), excerpt: excerpt.trim() || null, content: content.trim(), category: category.trim() || null, published, publishedAt: publishDate, images: uploadedImages, }), } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Failed to save article" ); } showAlert( "success", published ? "Article Published Successfully" : "Article Saved Successfully", published ? "Your article has been added and published successfully." : "Your article has been added as a draft successfully." ); } catch (error) { console.error( "CREATE USER ARTICLE ERROR:", error ); showAlert( "error", "Failed to Create Article", error instanceof Error ? error.message : "Failed to create article." ); } finally { setSaving(false); } }; return ( <>
ARTICLE MANAGEMENT

Create New Article

Create and publish a new article to share knowledge, insights, tutorials, and experiences through GloVaTech.

Article Information

Complete the article details, content, category, images, publication date, and publication status.

{/* BASIC INFORMATION */}
Basic Information
handleTitleChange( event.target.value ) } placeholder="Example: Introduction to Artificial Intelligence" required disabled={ checkingAccess || articleAccess !== true } />
Use a clear, informative, and easy-to-understand title.
setCategory( event.target.value ) } placeholder="Technology" disabled={ checkingAccess || articleAccess !== true } />
setSlug( event.target.value ) } placeholder="introduction-to-artificial-intelligence" required disabled={ checkingAccess || articleAccess !== true } /> {slug && (
/{slug}
)}