"use client"; import { FormEvent, useEffect, useState } from "react"; import { useParams, useRouter } from "next/navigation"; import Link from "next/link"; type EducationForm = { institution: string; degree: string; field: string; startDate: string; endDate: string; description: string; }; export default function EditEducationPage() { const params = useParams(); const router = useRouter(); const id = params.id as string; const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); const [form, setForm] = useState({ institution: "", degree: "S1", field: "", startDate: "", endDate: "", description: "", }); // ========================================================= // GET EDUCATION // ========================================================= useEffect(() => { const getEducation = async () => { try { setLoading(true); const response = await fetch(`/api/education?id=${id}`, { cache: "no-store", }); const result = await response.json(); if (!response.ok || !result.success) { alert(result.message || "Failed to load education."); router.push("/secure-panel/education"); return; } const education = result.data; setForm({ institution: education.institution || "", degree: education.degree || "S1", field: education.field || "", startDate: education.startDate ? new Date(education.startDate).getFullYear().toString() : "", endDate: education.endDate ? new Date(education.endDate).getFullYear().toString() : "", description: education.description || "", }); } catch (error) { console.error("GET EDUCATION ERROR:", error); alert("Failed to load education."); router.push("/secure-panel/education"); } finally { setLoading(false); } }; if (id) { getEducation(); } }, [id, router]); // ========================================================= // HANDLE CHANGE // ========================================================= const handleChange = ( e: React.ChangeEvent< HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement > ) => { const { name, value } = e.target; setForm((prev) => ({ ...prev, [name]: value, })); }; // ========================================================= // HANDLE SUBMIT // ========================================================= const handleSubmit = async (e: FormEvent) => { e.preventDefault(); if (!form.institution.trim()) { alert("Institution is required."); return; } if (!form.degree) { alert("Education level is required."); return; } if (!form.startDate) { alert("Start year is required."); return; } setSaving(true); try { const response = await fetch("/api/education", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: Number(id), institution: form.institution.trim(), degree: form.degree, field: form.field.trim(), startDate: form.startDate, endDate: form.endDate || null, description: form.description.trim(), }), }); const result = await response.json(); if (!response.ok || !result.success) { console.error("UPDATE EDUCATION API ERROR:", result); alert(result.message || "Failed to update education."); return; } alert("Education successfully updated."); router.push("/secure-panel/education"); } catch (error) { console.error("UPDATE EDUCATION ERROR:", error); alert("An error occurred while updating education."); } finally { setSaving(false); } }; // ========================================================= // CLOSE SIDEBAR // ========================================================= const closeSidebar = () => { setSidebarOpen(false); }; // ========================================================= // LOADING // ========================================================= if (loading) { return ( <>
Loading Education

Sedang mengambil data pendidikan dari database...

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