نموذج الرد RSVP التفاعلي
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: صفحات الدعوة والواجهة الأمامية
مدخل إلى الدرس: نموذج الرد RSVP التفاعلي
نموذج الرد RSVP التفاعلي — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
أهداف هذا الدرس
- بناء مكوّن 'use client' يُرسل الرد بالأرشفة.
- استخدام upsert بحيث تبقى إعادة الإرسال منطقية.
- إضافة حالات سهلة: جارٍ الإرسال / نجاح / خطأ.
مثال
// app/i/[token]/rsvp-form.tsx
"use client";
import { useState } from "react";
export function RsvpForm({
guestId, eventId, initial,
}: { guestId: string; eventId: string; initial?: string }) {
const [status, setStatus] = useState(initial ?? "pending");
const [sending, setSending] = useState(false);
const [msg, setMsg] = useState("");
async function submit(value: string) {
setSending(true); setMsg("");
try {
const res = await fetch("/api/rsvp", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ guestId, eventId, status: value }),
});
const body = await res.json();
if (body.ok) {
setStatus(value);
setMsg("تم حفظ ردّك بنجاح");
} else {
setMsg(body.error ?? "تعذر الحفظ");
}
} catch {
setMsg("شبكة/خادم: حدث خطأ");
} finally {
setSending(false);
}
}
return (
هل يسعدك حضورنا؟
{msg && {msg}
}
);
} المخطط: حالة نموذج الرد عبر تفاعلاته
stateDiagram-v2
[*] --> idle
idle --> sending: submit
sending --> saved: res.ok
sending --> error: res.error
saved --> [*]
error --> [*]
تصميم واجهة مرنة
upsert في الـ API تعني: إذا ضغط الضيف «قبول» ثم «اعتذار» يبقى آخر رأيه مسجلاً دون خطأ 500. نبني ما يوازي ذلك في الواجهة بتعطيل الزر النشط الحالي لمنع الضغط المزدوج.
تمرين تطبيقي: أضف زر 'تحديث تعليقات' نصياً للمدعو وارسله ضمن notes في نفس الطلب، ثم عرضه في قائمة الضيوف في الفصل التالي.
أخطاء شائعة يجب تفاديها
- إرسال النموذج بتحديث صفحة كامل (form action خادم) يكسر تجربة RSVP.
- إهمال حالة sending في عراض الزر—المستخدم يضغط المرة عشرة.
- تجاهل res.ok فيقرأ من بيانات بدأها عميل غير الخادم.
معجم مصطلحات الدرس
- use client
- توجيه يجعل المكوّن تفاعلياً على المتصفح.
- fetch/rsvp
- إرسال حالة الرد إلى مسار API المركزي.
- تعطيل الضغط المزدوج
- منع إعادة إرسال متكررة من نفس المستخدم.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «نموذج الرد RSVP التفاعلي»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: صفحة قائمة الضيوف والفرز. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
