"use client"; import { FormEvent, useEffect, useState, } from "react"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; type ProjectImage = { id: number; image: string; createdAt: string; }; type Project = { id: number; title: string; slug: string; description: string | null; image: string | null; projectUrl: string | null; technologies: string | null; startDate: string | null; endDate: string | null; featured: boolean; projectimage?: ProjectImage[]; }; type PreviewImage = { id: string; url: string; file?: File; isNew: boolean; }; export default function EditProjectPage() { const params = useParams(); const router = useRouter(); const id = params.id; const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [uploading, setUploading] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); const [form, setForm] = useState({ title: "", slug: "", description: "", projectUrl: "", technologies: "", startDate: "", endDate: "", featured: false, }); const [images, setImages] = useState([]); /* ========================================================= GET PROJECT ========================================================= */ useEffect(() => { const getProject = async () => { try { setLoading(true); const response = await fetch( `/api/projects/${id}`, { cache: "no-store", } ); const result = await response.json(); if (!result.success) { alert( result.message || "Project tidak ditemukan." ); router.push( "/secure-panel/projects" ); return; } const project: Project = result.data; setForm({ title: project.title || "", slug: project.slug || "", description: project.description || "", projectUrl: project.projectUrl || "", technologies: project.technologies || "", startDate: project.startDate ? project.startDate.substring( 0, 10 ) : "", endDate: project.endDate ? project.endDate.substring( 0, 10 ) : "", featured: project.featured || false, }); /* ===================================================== EXISTING IMAGES ===================================================== */ if ( project.projectimage && project.projectimage.length > 0 ) { setImages( project.projectimage.map( (item) => ({ id: `old-${item.id}`, url: item.image, isNew: false, }) ) ); } else if (project.image) { setImages([ { id: `old-main-${project.id}`, url: project.image, isNew: false, }, ]); } } catch (error) { console.error( "GET PROJECT:", error ); alert( "Gagal mengambil data project." ); router.push( "/secure-panel/projects" ); } finally { setLoading(false); } }; if (id) { getProject(); } }, [id, router]); /* ========================================================= HANDLE FORM ========================================================= */ const handleChange = ( e: React.ChangeEvent< HTMLInputElement | HTMLTextAreaElement > ) => { const { name, value, type, } = e.target; setForm((prev) => ({ ...prev, [name]: type === "checkbox" ? ( e.target as HTMLInputElement ).checked : value, })); }; /* ========================================================= SELECT IMAGE ========================================================= */ const handleImageSelect = ( e: React.ChangeEvent ) => { const files = Array.from( e.target.files || [] ); if (files.length === 0) { return; } const maxSize = 5 * 1024 * 1024; const allowedTypes = [ "image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif", ]; const validFiles: File[] = []; for (const file of files) { if ( !allowedTypes.includes( file.type ) ) { alert( `${file.name} bukan format gambar yang didukung.` ); continue; } if (file.size > maxSize) { alert( `${file.name} terlalu besar. Maksimal 5 MB.` ); continue; } validFiles.push(file); } const newPreviews: PreviewImage[] = validFiles.map((file) => ({ id: `new-${Date.now()}-${Math.random() .toString(36) .substring(2, 9)}`, url: URL.createObjectURL(file), file, isNew: true, })); setImages((prev) => [ ...prev, ...newPreviews, ]); e.target.value = ""; }; /* ========================================================= REMOVE IMAGE ========================================================= */ const removeImage = ( imageId: string ) => { setImages((prev) => { const target = prev.find( (item) => item.id === imageId ); if ( target?.isNew && target.url.startsWith("blob:") ) { URL.revokeObjectURL( target.url ); } return prev.filter( (item) => item.id !== imageId ); }); }; /* ========================================================= UPLOAD NEW IMAGES ========================================================= */ const uploadNewImages = async () => { const newImages = images.filter( (item) => item.isNew && item.file ); if (newImages.length === 0) { return []; } setUploading(true); try { const formData = new FormData(); newImages.forEach((item) => { if (item.file) { formData.append( "files", item.file ); } }); const response = await fetch( "/api/projects/upload", { method: "POST", body: formData, } ); const result = await response.json(); if (!result.success) { throw new Error( result.message || "Gagal mengupload gambar." ); } return result.data.map( (item: { url: string; fileName: string; }) => item.url ); } finally { setUploading(false); } }; /* ========================================================= SAVE PROJECT ========================================================= */ const handleSubmit = async ( e: FormEvent ) => { e.preventDefault(); if (!form.title.trim()) { alert( "Nama project wajib diisi." ); return; } if (!form.slug.trim()) { alert( "Slug project wajib diisi." ); return; } setSaving(true); try { const uploadedUrls = await uploadNewImages(); const existingUrls = images .filter( (item) => !item.isNew ) .map( (item) => item.url ); const allImages = [ ...existingUrls, ...uploadedUrls, ]; const response = await fetch( `/api/projects/${id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: form.title.trim(), slug: form.slug.trim(), description: form.description.trim() || null, image: allImages[0] || null, images: allImages, projectUrl: form.projectUrl.trim() || null, technologies: form.technologies.trim() || null, startDate: form.startDate || null, endDate: form.endDate || null, featured: form.featured, }), } ); const result = await response.json(); if (!result.success) { alert( result.message || "Gagal memperbarui project." ); return; } images.forEach((item) => { if ( item.isNew && item.url.startsWith("blob:") ) { URL.revokeObjectURL( item.url ); } }); alert( "Project berhasil diperbarui." ); router.push( "/secure-panel/projects" ); router.refresh(); } catch (error) { console.error( "UPDATE PROJECT:", error ); alert( error instanceof Error ? error.message : "Gagal memperbarui project." ); } finally { setSaving(false); } }; /* ========================================================= CLEANUP ========================================================= */ useEffect(() => { return () => { images.forEach((item) => { if ( item.isNew && item.url.startsWith("blob:") ) { URL.revokeObjectURL( item.url ); } }); }; }, [images]); /* ========================================================= CLOSE SIDEBAR ========================================================= */ const closeSidebar = () => { setSidebarOpen(false); }; /* ========================================================= LOADING ========================================================= */ if (loading) { return ( <>

Memuat Project

Sedang mengambil data project dari sistem. Mohon tunggu sebentar.

); } /* ========================================================= PAGE ========================================================= */ return ( <>
{/* =================================================== OVERLAY =================================================== */} {sidebarOpen && (