"use client"; import { FormEvent, useEffect, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; export default function CreateHeroPage() { const router = useRouter(); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [form, setForm] = useState({ badge: "", title: "", highlight: "", description: "", primaryButtonText: "", primaryButtonUrl: "", secondaryButtonText: "", secondaryButtonUrl: "", githubUrl: "", linkedinUrl: "", email: "", cv: "", active: true, }); const [photoFiles, setPhotoFiles] = useState([]); const [photoPreviews, setPhotoPreviews] = useState([]); const [cvFile, setCvFile] = useState(null); const [sidebarOpen, setSidebarOpen] = useState(false); /* ========================================================= CLEANUP PHOTO PREVIEWS ========================================================= */ useEffect(() => { return () => { photoPreviews.forEach((preview) => { URL.revokeObjectURL(preview); }); }; }, []); /* ========================================================= HANDLE FORM ========================================================= */ const handleChange = ( e: React.ChangeEvent ) => { const { name, value } = e.target; setForm((prev) => ({ ...prev, [name]: value, })); }; /* ========================================================= HANDLE PHOTO ========================================================= */ const handlePhotoChange = ( e: React.ChangeEvent ) => { const files = Array.from(e.target.files || []); if (files.length === 0) { return; } const imageFiles = files.filter((file) => file.type.startsWith("image/") ); if (imageFiles.length !== files.length) { setError("Semua file foto harus berupa gambar."); e.target.value = ""; return; } setError(""); setPhotoFiles((prev) => [...prev, ...imageFiles]); const newPreviews = imageFiles.map((file) => URL.createObjectURL(file) ); setPhotoPreviews((prev) => [...prev, ...newPreviews]); e.target.value = ""; }; /* ========================================================= REMOVE PHOTO ========================================================= */ const removePhoto = (index: number) => { const preview = photoPreviews[index]; if (preview) { URL.revokeObjectURL(preview); } setPhotoFiles((prev) => prev.filter((_, i) => i !== index) ); setPhotoPreviews((prev) => prev.filter((_, i) => i !== index) ); }; /* ========================================================= HANDLE CV ========================================================= */ const handleCvChange = ( e: React.ChangeEvent ) => { const file = e.target.files?.[0] || null; if (!file) { setCvFile(null); return; } if (file.type !== "application/pdf") { setError("File CV harus berupa PDF."); e.target.value = ""; setCvFile(null); return; } setError(""); setCvFile(file); }; /* ========================================================= CLOSE SIDEBAR ========================================================= */ const closeSidebar = () => { setSidebarOpen(false); }; /* ========================================================= SUBMIT ========================================================= */ const handleSubmit = async (e: FormEvent) => { e.preventDefault(); setLoading(true); setError(""); try { /* ===================================================== VALIDASI ===================================================== */ if (!form.title.trim()) { throw new Error("Title Hero wajib diisi."); } /* ===================================================== 1. UPLOAD FOTO HERO ===================================================== */ const uploadedPhotos: string[] = []; for (const file of photoFiles) { const formData = new FormData(); formData.append("file", file); const response = await fetch("/api/hero/upload", { method: "POST", body: formData, }); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal upload foto Hero." ); } uploadedPhotos.push(result.data); } /* ===================================================== 2. UPLOAD CV ===================================================== */ let cvUrl = ""; if (cvFile) { const cvFormData = new FormData(); cvFormData.append("file", cvFile); const cvResponse = await fetch("/api/hero/cv", { method: "POST", body: cvFormData, }); const cvResult = await cvResponse.json(); if (!cvResponse.ok || !cvResult.success) { throw new Error( cvResult.message || "Gagal upload CV." ); } cvUrl = cvResult.data; } /* ===================================================== 3. BUAT HERO ===================================================== */ const response = await fetch("/api/hero", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...form, cv: cvUrl, }), }); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal menambahkan Hero." ); } /* ===================================================== 4. SIMPAN FOTO KE HERO IMAGE ===================================================== */ if (uploadedPhotos.length > 0) { for (const image of uploadedPhotos) { const imageResponse = await fetch( "/api/hero/images", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ heroId: result.data.id, image, }), } ); const imageResult = await imageResponse.json(); if ( !imageResponse.ok || !imageResult.success ) { throw new Error( imageResult.message || "Gagal menyimpan foto Hero." ); } } } /* ===================================================== 5. SELESAI ===================================================== */ router.push("/secure-panel/hero"); router.refresh(); } catch (error) { console.error("CREATE HERO ERROR:", error); setError( error instanceof Error ? error.message : "Terjadi kesalahan saat menambahkan Hero." ); } finally { setLoading(false); } }; return ( <>
{/* ===================================================== MOBILE OVERLAY ===================================================== */} {sidebarOpen && (