"use client"; import { FormEvent, useEffect, useState } from "react"; import Link from "next/link"; type About = { id: number; badge: string | null; title: string; highlight: string | null; description: string | null; photo: string | null; github: string | null; facebook: string | null; instagram: string | null; twitter: string | null; tiktok: string | null; email: string | null; active: boolean; }; type PageProps = { params: Promise<{ id: string; }>; }; export default function EditAboutPage({ params }: PageProps) { const [aboutId, setAboutId] = useState(null); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [uploading, setUploading] = useState(false); const [photoPreview, setPhotoPreview] = useState(""); const [photoFile, setPhotoFile] = useState(null); const [sidebarOpen, setSidebarOpen] = useState(false); const [form, setForm] = useState({ badge: "", title: "", highlight: "", description: "", photo: "", github: "", facebook: "", instagram: "", twitter: "", tiktok: "", email: "", active: true, }); // ========================================================= // GET DATA // ========================================================= useEffect(() => { const loadAbout = async () => { try { const { id } = await params; const numericId = Number(id); if (!numericId) { alert("ID About tidak valid"); return; } setAboutId(numericId); const response = await fetch("/api/about"); const result = await response.json(); if (!response.ok || !result.success) { alert(result.message || "Gagal mengambil data About"); return; } const about: About | undefined = result.data.find( (item: About) => item.id === numericId ); if (!about) { alert("Data About tidak ditemukan"); return; } setForm({ badge: about.badge ?? "", title: about.title ?? "", highlight: about.highlight ?? "", description: about.description ?? "", photo: about.photo ?? "", github: about.github ?? "", facebook: about.facebook ?? "", instagram: about.instagram ?? "", twitter: about.twitter ?? "", tiktok: about.tiktok ?? "", email: about.email ?? "", active: about.active, }); } catch (error) { console.error("GET ABOUT EDIT ERROR:", error); alert("Terjadi kesalahan saat mengambil data About"); } finally { setLoading(false); } }; loadAbout(); }, [params]); // ========================================================= // HANDLE INPUT // ========================================================= const handleChange = ( e: React.ChangeEvent ) => { const { name, value, type } = e.target; setForm((prev) => ({ ...prev, [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value, })); }; // ========================================================= // SELECT PHOTO // ========================================================= const handlePhotoChange = ( e: React.ChangeEvent ) => { const file = e.target.files?.[0]; if (!file) { return; } if (!file.type.startsWith("image/")) { alert("File yang dipilih harus berupa gambar"); return; } setPhotoFile(file); const preview = URL.createObjectURL(file); setPhotoPreview(preview); e.target.value = ""; }; // ========================================================= // UPLOAD PHOTO // ========================================================= const uploadPhoto = async () => { if (!photoFile) { return form.photo; } setUploading(true); try { const formData = new FormData(); formData.append("file", photoFile); const response = await fetch("/api/about/upload", { method: "POST", body: formData, }); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal mengupload Photo" ); } return result.data as string; } finally { setUploading(false); } }; // ========================================================= // UPDATE // ========================================================= const handleSubmit = async (e: FormEvent) => { e.preventDefault(); if (!aboutId) { alert("ID About tidak ditemukan"); return; } setSaving(true); try { const uploadedPhoto = await uploadPhoto(); const response = await fetch("/api/about", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: aboutId, ...form, photo: uploadedPhoto, }), }); const result = await response.json(); if (!response.ok || !result.success) { alert(result.message || "Gagal memperbarui About"); return; } alert("About berhasil diperbarui"); window.location.href = "/secure-panel/about"; } catch (error) { console.error("UPDATE ABOUT ERROR:", error); alert("Terjadi kesalahan saat memperbarui About"); } finally { setSaving(false); } }; // ========================================================= // LOADING // ========================================================= if (loading) { return (
Memuat data About

Sedang mengambil informasi dari database...

); } // ========================================================= // MAIN // ========================================================= return ( <> {/* MOBILE OVERLAY */} {sidebarOpen && (
setSidebarOpen(false)} className="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50 d-lg-none" style={{ zIndex: 1040, }} /> )}
{/* ===================================================== SIDEBAR ===================================================== */} {/* ===================================================== MAIN AREA ===================================================== */}
{/* TOPBAR */}
Admin Panel
Edit About
Website Logout
{/* ===================================================== CONTENT ===================================================== */}
{/* BREADCRUMB */}
Kembali ke Dashboard
{/* PAGE HEADER */}
Website Content

Edit About

Perbarui informasi About Me yang ditampilkan pada halaman utama website portfolio GloVaTech.

Kembali ke About
{/* FORM CARD */}
{/* ================================================= BASIC INFORMATION ================================================= */}
Informasi Utama
Informasi dasar About Me.
{/* BADGE */}
{/* TITLE */}
{/* HIGHLIGHT */}
Teks yang ditampilkan dengan warna utama pada halaman About.
{/* DESCRIPTION */}