"use client"; import { useState } from "react"; import Link from "next/navigation"; import { useRouter } from "next/navigation"; type HeroImage = { id: number; image: string; heroId: number; createdAt: Date; }; type HeroFormProps = { hero: { id: number; badge: string | null; title: string; highlight: string | null; description: string | null; primaryButtonText: string | null; primaryButtonUrl: string | null; secondaryButtonText: string | null; secondaryButtonUrl: string | null; photo: string | null; githubUrl: string | null; linkedinUrl: string | null; email: string | null; cv: string | null; active: boolean; heroimage: HeroImage[]; }; }; export default function EditHeroForm({ hero }: HeroFormProps) { const router = useRouter(); const [sidebarOpen, setSidebarOpen] = useState(false); const [badge, setBadge] = useState(hero.badge ?? ""); const [title, setTitle] = useState(hero.title); const [highlight, setHighlight] = useState(hero.highlight ?? ""); const [description, setDescription] = useState( hero.description ?? "" ); const [primaryButtonText, setPrimaryButtonText] = useState( hero.primaryButtonText ?? "" ); const [primaryButtonUrl, setPrimaryButtonUrl] = useState( hero.primaryButtonUrl ?? "" ); const [secondaryButtonText, setSecondaryButtonText] = useState( hero.secondaryButtonText ?? "" ); const [secondaryButtonUrl, setSecondaryButtonUrl] = useState( hero.secondaryButtonUrl ?? "" ); const [githubUrl, setGithubUrl] = useState( hero.githubUrl ?? "" ); const [linkedinUrl, setLinkedinUrl] = useState( hero.linkedinUrl ?? "" ); const [email, setEmail] = useState(hero.email ?? ""); const [active, setActive] = useState(hero.active); const [heroImages, setHeroImages] = useState( hero.heroimage ?? [] ); const [newPhotoFiles, setNewPhotoFiles] = useState( [] ); const [newPhotoPreviews, setNewPhotoPreviews] = useState< string[] >([]); const [cvFile, setCvFile] = useState(null); const [loading, setLoading] = useState(false); const [message, setMessage] = useState(""); const [error, setError] = useState(""); // ===================================================== // PILIH FOTO BARU // ===================================================== function 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 harus berupa gambar."); return; } setError(""); setNewPhotoFiles(imageFiles); const previews = imageFiles.map((file) => URL.createObjectURL(file) ); setNewPhotoPreviews(previews); } // ===================================================== // PILIH CV // ===================================================== function 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 = ""; return; } setError(""); setCvFile(file); } // ===================================================== // HAPUS FOTO HERO // ===================================================== async function handleDeleteImage(imageId: number) { const confirmed = window.confirm( "Apakah Anda yakin ingin menghapus foto ini?" ); if (!confirmed) { return; } try { setError(""); const response = await fetch( `/api/hero/images?id=${imageId}`, { method: "DELETE", } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal menghapus foto." ); } setHeroImages((prev) => prev.filter((image) => image.id !== imageId) ); setMessage("Foto berhasil dihapus."); } catch (error) { console.error(error); setError( error instanceof Error ? error.message : "Gagal menghapus foto." ); } } // ===================================================== // UPLOAD FOTO // ===================================================== async function uploadPhotos() { const uploadedPhotos: string[] = []; for (const file of newPhotoFiles) { 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); } return uploadedPhotos; } // ===================================================== // UPLOAD CV // ===================================================== async function uploadCv() { if (!cvFile) { return hero.cv ?? ""; } const formData = new FormData(); formData.append("file", cvFile); const response = await fetch( "/api/hero/cv", { method: "POST", body: formData, } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal upload CV." ); } return result.data; } // ===================================================== // SUBMIT // ===================================================== async function handleSubmit( e: React.FormEvent ) { e.preventDefault(); setLoading(true); setMessage(""); setError(""); try { // ----------------------------------------------- // 1. UPDATE DATA HERO // ----------------------------------------------- const cvUrl = await uploadCv(); const response = await fetch( "/api/hero", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: hero.id, badge, title, highlight, description, primaryButtonText, primaryButtonUrl, secondaryButtonText, secondaryButtonUrl, githubUrl: githubUrl || null, linkedinUrl: linkedinUrl || null, email: email || null, cv: cvUrl || null, active, }), } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal memperbarui Hero." ); } // ----------------------------------------------- // 2. UPLOAD FOTO BARU // ----------------------------------------------- if (newPhotoFiles.length > 0) { const uploadedPhotos = await uploadPhotos(); for (const image of uploadedPhotos) { const imageResponse = await fetch( "/api/hero/images", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ heroId: hero.id, image, }), } ); const imageResult = await imageResponse.json(); if ( !imageResponse.ok || !imageResult.success ) { throw new Error( imageResult.message || "Gagal menyimpan foto Hero." ); } setHeroImages((prev) => [ ...prev, imageResult.data, ]); } } setNewPhotoFiles([]); setNewPhotoPreviews([]); setCvFile(null); setMessage("Hero berhasil diperbarui."); setTimeout(() => { router.push("/secure-panel/hero"); }, 500); } catch (error) { console.error( "UPDATE HERO ERROR:", error ); setError( error instanceof Error ? error.message : "Gagal memperbarui Hero." ); } finally { setLoading(false); } } return ( <>
{/* ===================================================== MOBILE OVERLAY ===================================================== */} {sidebarOpen && (
setSidebarOpen(false)} aria-hidden="true" /> )} {/* ===================================================== SIDEBAR ===================================================== */} {/* ===================================================== MAIN AREA ===================================================== */}
{/* ===================================================== TOPBAR ===================================================== */}
ADMIN PANEL
Edit Hero
{/* ===================================================== CONTENT ===================================================== */}
{/* ===================================================== PAGE HEADER ===================================================== */}
CONTENT MANAGEMENT

Edit Hero

Perbarui konten Hero pada halaman utama website GloVaTech. Anda dapat mengubah informasi Hero, foto, tombol, sosial media, CV, serta status publikasi sesuai kebutuhan.

Kembali ke Hero
{/* ===================================================== FORM ===================================================== */}
{/* ================================================= INFORMASI HERO ================================================= */}

Informasi Hero

Kelola informasi utama yang ditampilkan pada bagian Hero website, termasuk badge, judul, highlight, dan deskripsi.

{/* BADGE */}
setBadge(e.target.value) } placeholder="Contoh: Welcome to my portfolio" />
{/* TITLE */}
setTitle(e.target.value) } required placeholder="Masukkan title Hero" />
{/* HIGHLIGHT */}
setHighlight(e.target.value) } placeholder="Contoh: Web Programmer" />
{/* DESCRIPTION */}