"use client"; import { useEffect, useState } from "react"; import { useSession } from "next-auth/react"; import Navbar from "@/components/Navbar"; import Footer from "@/components/Footer"; type ContactInfo = { id: number; description: string | null; email: string | null; phone: string | null; location: string | null; website: string | null; github: string | null; linkedin: string | null; facebook: string | null; instagram: string | null; twitter: string | null; youtube: string | null; tiktok: string | null; active: boolean; }; export default function ContactFormPage() { const { data: session } = useSession(); const [remainingUses, setRemainingUses] = useState(null); const [contactActive, setContactActive] = useState(null); const FORM_FROZEN = !session || contactActive === false || remainingUses === 0; const [contact, setContact] = useState(null); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(false); const [contactLoading, setContactLoading] = useState(true); const [error, setError] = useState(""); const [showSuccessModal, setShowSuccessModal] = useState(false); const [animateSuccessModal, setAnimateSuccessModal] = useState(false); // ===================================================== // AUTO FILL GOOGLE ACCOUNT // ===================================================== useEffect(() => { if (session?.user) { setName(session.user.name || ""); setEmail(session.user.email || ""); } }, [session]); // ===================================================== // LOAD CONTACT FORM USAGE // ===================================================== useEffect(() => { const loadUsage = async () => { if (!session?.user) { setRemainingUses(null); setContactActive(null); return; } try { const response = await fetch( "/api/contact/usage" ); if (!response.ok) { return; } const data = await response.json(); setRemainingUses(data.remainingUses); setContactActive(data.active); } catch (error) { console.error( "LOAD CONTACT USAGE ERROR:", error ); } }; loadUsage(); }, [session]); // ===================================================== // LOAD CONTACT INFORMATION // ===================================================== useEffect(() => { const loadContact = async () => { try { const response = await fetch( "/api/contact-info", { cache: "no-store", } ); const result = await response.json(); if (response.ok && result.data) { setContact(result.data); } } catch (error) { console.error( "LOAD CONTACT ERROR:", error ); } finally { setContactLoading(false); } }; loadContact(); }, []); // ===================================================== // HANDLE SUBMIT // ===================================================== const handleSubmit = async ( e: React.FormEvent ) => { e.preventDefault(); if (FORM_FROZEN) { return; } setLoading(true); setError(""); try { const response = await fetch( "/api/contact", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name, email, message, }), } ); const data = await response.json(); if (!response.ok) { throw new Error( data.message || "Failed to send message." ); } setShowSuccessModal(true); setTimeout(() => { setAnimateSuccessModal(true); }, 50); } catch (err) { setError( err instanceof Error ? err.message : "An error occurred." ); } finally { setLoading(false); } }; // ===================================================== // SOCIAL MEDIA // ===================================================== const socialMedia = [ { name: "GitHub", url: contact?.github, icon: "bi-github", className: "social-github", }, { name: "LinkedIn", url: contact?.linkedin, icon: "bi-linkedin", className: "social-linkedin", }, { name: "Facebook", url: contact?.facebook, icon: "bi-facebook", className: "social-facebook", }, { name: "Instagram", url: contact?.instagram, icon: "bi-instagram", className: "social-instagram", }, { name: "Twitter / X", url: contact?.twitter, icon: "bi-twitter-x", className: "social-twitter", }, { name: "YouTube", url: contact?.youtube, icon: "bi-youtube", className: "social-youtube", }, { name: "TikTok", url: contact?.tiktok, icon: "bi-tiktok", className: "social-tiktok", }, ]; return ( <>
{/* ================================================= HEADER ================================================== */}