latosa-escrima/frontend/components/contact.tsx

"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { ApiResponse } from "@/hooks/use-api";
import { API_URL } from "@/lib/constants";
import { useEffect, useState } from "react";

interface FormData {
	firstname: string;
	lastname: string;
	email: string;
	subject: string;
	message: string;
}

const Contact = () => {
	const [formData, setFormData] = useState<FormData>({
		firstname: "",
		lastname: "",
		subject: "",
		email: "",
		message: "",
	});

	const [csrfToken, setCsrfToken] = useState("");

	const handleChange = (
		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
	) => {
		console.log(e.currentTarget);
		setFormData({
			...formData,
			[e.currentTarget.name]: e.currentTarget.value,
		});
	};

	useEffect(() => {
		const fetchCsrfToken = async () => {
			try {
				const response = await fetch(`${API_URL}/csrf-token`, {
					credentials: "include",
				});
				const data: ApiResponse<{ csrf: string }> =
					await response.json();
				if (data.data) setCsrfToken(data.data.csrf);
			} catch (e: any) {
				console.log(e);
			}
		};

		fetchCsrfToken();
	}, []);

	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		const res = await fetch(`${API_URL}/contact`, {
			headers: {
				"Content-Type": "application/json",
				"X-CSRF-Token": csrfToken,
			},
			method: "POST",
			body: JSON.stringify(formData),
			credentials: "include",
		});
	};

	return (
		<section className="py-32">
			<div className="p-4">
				<div className="mx-auto flex max-w-screen-xl flex-col justify-between gap-10 lg:flex-row lg:gap-20">
					<div className="self-center max-w-lg flex flex-col justify-between gap-10">
						<div className="text-center lg:text-left">
							<h1 className="mb-2 text-5xl font-semibold lg:mb-1 lg:text-6xl">
								Contactez-nous !
							</h1>
							<p className="text-muted-foreground">
								Nous nous rendons disponible pour répondre à
								toutes vos questions.
							</p>
						</div>
						<div className="mx-auto w-fit lg:mx-0">
							<h3 className="mb-6 text-center text-2xl font-semibold lg:text-left">
								Informations de contact
							</h3>
							<ul className="ml-4 list-disc">
								<li>
									<span className="font-bold">
										Téléphone:{" "}
									</span>
									(123) 34567890
								</li>
								<li>
									<span className="font-bold">Email: </span>
									<a href="" className="underline">
										nicolas.goruk@orange.fr
									</a>
								</li>
							</ul>
						</div>
					</div>
					<form
						onSubmit={handleSubmit}
						className="mx-auto flex max-w-screen-md flex-col gap-6 rounded-lg border p-10"
					>
						<div className="flex gap-4">
							<div className="grid w-full items-center gap-1.5">
								<Label htmlFor="firstname">Prénom</Label>
								<Input
									value={formData.firstname}
									onChange={handleChange}
									type="text"
									id="firstname"
									name="firstname"
									placeholder="Prénom"
									required
								/>
							</div>
							<div className="grid w-full items-center gap-1.5">
								<Label htmlFor="lastname">Nom de famille</Label>
								<Input
									value={formData.lastname}
									onChange={handleChange}
									type="text"
									id="lastname"
									name="lastname"
									placeholder="Nom de famille"
									required
								/>
							</div>
						</div>
						<div className="grid w-full items-center gap-1.5">
							<Label htmlFor="email">Email</Label>
							<Input
								value={formData.email}
								onChange={handleChange}
								type="email"
								id="email"
								name="email"
								placeholder="Email"
								required
							/>
						</div>
						<div className="grid w-full items-center gap-1.5">
							<Label htmlFor="subject">Objet</Label>
							<Input
								value={formData.subject}
								onChange={handleChange}
								type="text"
								id="subject"
								name="subject"
								placeholder="Objet"
								required
							/>
						</div>
						<div className="grid w-full gap-1.5">
							<Label htmlFor="message">Message</Label>
							<Textarea
								value={formData.message}
								onChange={handleChange}
								placeholder="Écrivez votre message ici."
								id="message"
								name="message"
								required
							/>
						</div>
						<Button type="submit" className="w-full">
							Envoyer
						</Button>
					</form>
				</div>
			</div>
		</section>
	);
};

export default Contact;