Add rvsp prompt to homepage

LaurierHawkHacks · May 11, 2024 · ce9bc06 · ce9bc06
1 parent 53ab326
commit ce9bc06
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/functions/src/index.ts b/functions/src/index.ts
@@ -385,6 +385,32 @@ export const logEvent = functions.https.onCall((data, context) => {
     }
 });
 
+export const getRVSPStatus = functions.https.onCall(async (_, context) => {
+    if (!context.auth) {
+        throw new functions.https.HttpsError(
+            "permission-denied",
+            "Not authenticated"
+        );
+    }
+
+    functions.logger.info("Getting RSVP status.", { uid: context.auth.uid });
+
+    const user = await admin.auth().getUser(context.auth.uid);
+    if (user.customClaims?.rsvpVerified) {
+        return {
+            status: 200,
+            verified: true,
+            message: "RSVP verified.",
+        };
+    } else {
+        return {
+            status: 200,
+            verified: false,
+            message: "RSVP not verified.",
+        };
+    }
+});
+
 export const verifyRSVP = functions.https.onCall(async (_, context) => {
     if (!context.auth) {
         throw new functions.https.HttpsError(

diff --git a/src/pages/Home/Home.page.tsx b/src/pages/Home/Home.page.tsx
@@ -1,6 +1,8 @@
 import { GoldenHawk, IpadKidHawks } from "@/assets";
 import { Card, Accordion, SocialIcons } from "@components";
 import { faqs, sponsors, importantDateTimes } from "@data";
+import { getFunctions, httpsCallable } from "firebase/functions";
+import { useEffect, useState } from "react";
 
 const ImportantInfoBlocks = importantDateTimes.map((importantDateTime, i) => {
     const entries = Object.entries(importantDateTime.events);
@@ -44,6 +46,25 @@ const Sponsors = sponsors.map((sponsor, i) => {
 });
 
 const HomePage = () => {
+    const [rsvpStatus, setRsvpStatus] = useState("Not RSVP'd");
+    const functions = getFunctions();
+
+    useEffect(() => {
+        const fetchRSVPStatus = async () => {
+            const fetchRSVPStatus = httpsCallable(functions, "getRVSPStatus");
+            try {
+                const result = await fetchRSVPStatus();
+                console.log("RSVP status:", result.data);
+                setRsvpStatus(result.data ? "RSVP'd" : "Not RSVP'd");
+            } catch (error) {
+                console.error("Error fetching RSVP status:", error);
+                setRsvpStatus("Error fetching status");
+            }
+        };
+
+        fetchRSVPStatus();
+    }, [functions]);
+
     return (
         <section className="homepage grid gap-4">
             <div className="grid xl:grid-cols-12 gap-4">
@@ -76,6 +97,17 @@ const HomePage = () => {
                     </div>
                 </Card>
 
+                <Card title="RSVP Status" className="xl:col-span-5">
+                    <span className="flex flex-col gap-2">
+                        <p className="text-[#333] text-sm">
+                            RSVP status: <b>{rsvpStatus}</b>
+                        </p>
+                        <button className="p-2 bg-white rounded-md">
+                            Not able to make it?
+                        </button>
+                    </span>
+                </Card>
+
                 <Card
                     title="Important Information"
                     className="infos xl:col-span-5"