moving rsvps to local api route

src/components/RSVP.tsx

@@ -1,15 +1,17 @@
+"use client"
+
 import useSWR from "swr";
 
 const fetcher = (url: string) => fetch(url).then(res => res.json());
 
 export default function RSVP() {
-  const { data, error } = useSWR("https://aces.femboyin.tech/count", fetcher, {
-    refreshInterval: 60000,
+  const { data, error } = useSWR("/api/rsvp", fetcher, {
+    refreshInterval: 10000,
     revalidateOnFocus: false,
   });
 
   if (error) return <span className="font-bold text-rose-300">error!</span>;
-  if (!data) return <span className="font-bold animate-pulse ">...</span>
+  if (!data || data.count === -1) return <span className="font-bold animate-pulse ">...</span>
 
-  return <span className="font-bold">{data.record_count}</span>
+  return <span className="font-bold">{data.count}</span>
 }

src/pages/api/git.ts

@@ -1,15 +1,13 @@
 import { NextApiRequest, NextApiResponse } from "next";
 
-const branch = process.env.NODE_ENV === "production" ? "main" : "dev";
-
 let cache: {
 	hash: string,
 	message: string
 } | undefined
 
 export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
 	if (!cache) {
-		const githubRes = await fetch(`https://api.github.com/repos/hackclub/aces/commits/${branch}`)
+		const githubRes = await fetch(`https://api.github.com/repos/hackclub/aces/commits/main`)
     if (!githubRes.ok) throw new Error(`GitHub API error: ${githubRes.status}`)
     const json = await githubRes.json()
 		cache = {

src/pages/api/rsvp.ts

@@ -0,0 +1,48 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+async function getCount() {
+  let offset;
+  let count = 0;
+
+  do {
+    const url = new URL(`https://api.airtable.com/v0/${process.env.RSVP_AIRTABLE_BASE_ID}/RSVPs`);
+    if (offset) url.searchParams.set("offset", offset);
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${process.env.RSVP_AIRTABLE_API_KEY}`,
+      },
+    });
+    if (!res.ok) {
+      console.error(res.statusText);
+      throw new Error(res.statusText);
+    }
+    const data = await res.json();
+    count += data.records?.length ?? 0;
+    offset = data.offset;
+
+    if (offset) await new Promise((resolve) => setTimeout(resolve, 200));
+  } while (offset);
+
+  return count;
+}
+
+let cached = { value: -1, updated: 0 };
+
+// Cache duration in milliseconds
+const CACHE_DURATION = 30000;
+
+export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
+  const now = Date.now();
+  if (now - cached.updated > CACHE_DURATION) {
+    try {
+      const count = await getCount();
+      cached = { value: count, updated: now };
+      console.log("cached value", cached.value, "updatedAt", new Date(cached.updated).toISOString());
+    } catch (err: unknown) {
+      console.error("getCount failed:", err);
+      res.status(500).json({ error: "couldnt get count" });
+    }
+  }
+  res.status(200).json({ count: cached.value });
+}

src/pages/index.tsx

@@ -94,7 +94,7 @@ export default function Home() {
           />
           <p className="md:text-3xl text-lg text-white font-medium mb-5">
             Build your own digital <strong>board/card game</strong>, get a{" "}
-            <strong>grant</strong> to build it irl, and head to DC for{" "}
+            <strong>grant</strong> to make it real, and head to DC for{" "}
             <strong>AwesomeCon</strong> to showcase it, then stay for an
             in-person <strong>hackathon!</strong>
           </p>