From 678c55a1e2b53de9116d68fd8b255a1e83a75d7d Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Wed, 19 Mar 2025 08:40:47 +0100
Subject: [PATCH] Integrate RSVP context and enhance form responsiveness

Added RSVP context to manage current guest and RSVP data, ensuring dynamic updates based on state changes. Adjusted styling to improve button responsiveness and removed redundant borders for a cleaner UI. These updates enhance functionality and provide a more seamless user experience.
---
 frontend/src/components/rsvp/rsvp-form.tsx | 42 ++++++++++++++++------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/rsvp/rsvp-form.tsx b/frontend/src/components/rsvp/rsvp-form.tsx
index 318a12a..458c703 100644
--- a/frontend/src/components/rsvp/rsvp-form.tsx
+++ b/frontend/src/components/rsvp/rsvp-form.tsx
@@ -19,6 +19,7 @@ import { useSearchParams, useParams } from "next/navigation";
 import { Loader2, Plus, Minus } from "lucide-react";
 import { motion } from "framer-motion";
 import { useTheme } from "next-themes";
+import { useRSVPs } from "@/context/rsvp-context";
 
 interface RSVPProps {
   eventId: string;
@@ -32,6 +33,8 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
     findGuestByInvitationCode,
     submitGuestRsvp,
   } = useGuests();
+
+  const { rsvps } = useRSVPs();
   const searchParams = useSearchParams();
   const { slug } = useParams<{ slug: string }>();
   const { event, fetchEventBySlug, isLoadingEvent } = useEvents();
@@ -45,6 +48,9 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<boolean>(false);
+  const [currentGuest, setCurrentGuest] = useState<any | null>(null);
+  const [currentRSVP, setCurrentRSVP] = useState<any | null>(null);
+
   const { setTheme } = useTheme();
 
   useEffect(() => {
@@ -58,6 +64,21 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
     }
   }, [slug, fetchEventBySlug]);
 
+  useEffect(() => {
+    if (rsvps && currentGuest) {
+      setCurrentRSVP(rsvps.find((rsvp) => rsvp.guest_id === currentGuest?.id));
+    }
+  }, [rsvps, currentGuest]);
+
+  useEffect(() => {
+    if (currentRSVP) {
+      setStatus(currentRSVP.status);
+      setNumberOfGuests(currentRSVP.number_of_guests);
+      setResponseMessage(currentRSVP.response_message);
+      setDietaryRequirements(currentRSVP.dietary_requirements);
+    }
+  }, [currentRSVP]);
+
   // Find the theme for this event
   const eventTheme =
     event && themes?.find((theme) => theme.id === event.theme_id);
@@ -114,7 +135,7 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
     // Find the guest with matching invitation code
     if (guests) {
       const matchingGuest = findGuestByInvitationCode(invitationCode);
-
+      setCurrentGuest(matchingGuest);
       if (matchingGuest) {
         console.log("matchingGuest ", matchingGuest);
         setGuestId(matchingGuest.id);
@@ -248,13 +269,12 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
   if (success) {
     return (
       <motion.div
-        className="w-full rounded-lg border shadow-sm p-8 text-center"
+        className="w-full rounded-lg shadow-sm p-8 text-center"
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ duration: 0.5 }}
         style={{
           backgroundColor: colors.background,
-          borderColor: colors.primary,
           color: colors.text,
         }}
       >
@@ -298,13 +318,12 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
 
   return (
     <motion.div
-      className="w-full rounded-lg border shadow-sm"
+      className="w-full rounded-lg shadow-sm"
       initial="hidden"
       animate="visible"
       variants={formVariants}
       style={{
         backgroundColor: colors.background,
-        borderColor: colors.backgroundDark,
         color: colors.text,
       }}
     >
@@ -466,12 +485,15 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
           <motion.div className="flex justify-end mt-6" variants={itemVariants}>
             <Button
               type="submit"
-              className="w-full md:w-auto"
+              className="w-full md:w-auto text-white transition-colors duration-300"
               disabled={isProcessing}
-              style={{
-                backgroundColor: colors.accent,
-                color: "white",
-              }}
+              style={{ backgroundColor: colors.accent }}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.accent2)
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.accent)
+              }
             >
               {isProcessing ? (
                 <>