Added walk-in registration and stats page

Author: MichaelZhao21

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env*
 .env*.local
 
 # vercel

components/AdminStatsCard.tsx

@@ -0,0 +1,20 @@
+interface AdminStatsCardProps {
+  title: string;
+  value: number;
+}
+
+export default function AdminStatsCard({
+  title,
+  value,
+}: AdminStatsCardProps) {
+  return (
+    <div className="border-2 p-5 flex flex-col rounded-xl m-4">
+      <div className="flex items-center gap-x-6">
+        <div className="flex flex-col">
+          <h1 className="text-xl">{title}</h1>
+          <h1 className="text-3xl font-bold">{value}</h1>
+        </div>
+      </div>
+    </div>
+  );
+}

pages/api/batchadd.ts

@@ -0,0 +1,38 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import qr from 'qrcode';
+import { auth, firestore } from 'firebase-admin';
+import initializeApi from '../../lib/admin/init';
+
+initializeApi();
+
+const REGISTRATION_COLLECTION = '/registrations';
+const db = firestore();
+
+// NOTE: Max 500 emails at once lmao
+async function sendEmail(req: NextApiRequest, res: NextApiResponse) {
+  // Make sure you set the Content-Type header to application/json
+  const { emails } = req.body;
+
+  if (!emails) {
+    return res.status(400).send('Invalid email list');
+  }
+  let batch = db.batch();
+  emails.forEach((email) => {
+    batch.set(db.collection(REGISTRATION_COLLECTION).doc(email), {});
+  });
+  await batch.commit();
+
+  res.status(200).json({});
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === 'POST') {
+    await sendEmail(req, res);
+  } else {
+    res.status(405).json({});
+  }
+}

pages/api/count.ts

@@ -0,0 +1,39 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import sendgrid from '@sendgrid/mail';
+import qr from 'qrcode';
+import { auth, firestore } from 'firebase-admin';
+import initializeApi from '../../lib/admin/init';
+
+sendgrid.setApiKey(process.env.SENDGRID_API_KEY ?? '');
+
+initializeApi();
+
+const REGISTRATION_COLLECTION = '/registrations';
+const db = firestore();
+
+async function countReg(req: NextApiRequest, res: NextApiResponse) {
+  // Count which scans are done
+
+  const snapshot = await db.collection(REGISTRATION_COLLECTION).get();
+  const scanCount = new Map<string, number>();
+  snapshot.forEach((doc) => {
+    const scanRef = doc.get('scans');
+    if (scanRef === undefined) return;
+    scanRef.forEach((scan) => {
+      scanCount.set(scan, (scanCount.get(scan) ?? 0) + 1);
+    });
+  });
+  res.status(200).json({ scans: Object.fromEntries(scanCount) });
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === 'GET') {
+    await countReg(req, res);
+  } else {
+    res.status(405).json({});
+  }
+}

pages/api/email.ts

@@ -2,16 +2,23 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import sendgrid from '@sendgrid/mail';
 import qr from 'qrcode';
+import { auth, firestore } from 'firebase-admin';
+import initializeApi from '../../lib/admin/init';
 
 sendgrid.setApiKey(process.env.SENDGRID_API_KEY ?? '');
 
+initializeApi();
+
+const REGISTRATION_COLLECTION = '/registrations';
+const db = firestore();
+
 async function sendEmail(req: NextApiRequest, res: NextApiResponse) {
-  const { emails } = JSON.parse(req.body);
+  // Make sure you set the Content-Type header to application/json
+  const { emails } = req.body;
 
   if (!emails) {
     return res.status(400).send('Invalid email list');
   }
-
   emails.forEach(async (email) => {
     const qrcode = (await qr.toDataURL(email)).replace(
       'data:image/png;base64,',
@@ -21,15 +28,18 @@ async function sendEmail(req: NextApiRequest, res: NextApiResponse) {
       to: email,
       from: process.env.SENDGRID_SENDER as string,
       subject: 'Axxess Hackathon QR Code',
-      text: "Hello,\n\nThank you for registering for the Axxess Hackathon. Below is your unique QR-code for check-in, swag, and food! We recommend arriving at 8:45am to get in line for check-in as space is limited.\n\nYou'll recieve an email in a few days (Wednesday or Thursday) with all the Axxess Hackathon event details.\n\nHackathon check-in begins at April 1st, 9 a.m. CDT.\n\nLocation:\nECSW 1.100 Axxess Atrium\n800 W. Campbell Road, Richardson, Texas 75080\n\nIf you have any questions or concerns, please don't hesitate to reach out to us at [email protected].\n\nThank you again for registering for the Axxess Hackathon. We can't wait to see you there!\n\nBest regards,\n\nThe Axxess Hackathon Team",
+      text: "Hello,\n\nThank you for registering for the Axxess Hackathon. Below is your unique QR-code for check-in, swag, and food! We recommend arriving at 8:45am to get in line for check-in as space is limited.\n\nYou'll recieve an email soon (Wednesday or Thursday) with all the Axxess Hackathon event details.\n\nHackathon check-in begins at April 1st, 9 a.m. CDT.\n\nLocation:\nECSW 1.100 Axxess Atrium\n800 W. Campbell Road, Richardson, Texas 75080\n\nIf you have any questions or concerns, please don't hesitate to reach out to us at [email protected].\n\nThank you again for registering for the Axxess Hackathon. We can't wait to see you there!\n\nBest regards,\n\nThe Axxess Hackathon Team",
       attachments: [
         {
           content: qrcode,
           filename: 'qrcode.png',
         },
       ],
     };
-    sendgrid.send(msg).catch((err) => console.log(err.response.body.errors));
+    sendgrid.send(msg).catch((err) => {
+      console.log(email);
+      console.log(err.response.body.errors);
+    });
   });
   res.status(200).json({});
 }

pages/api/walkin.ts

@@ -0,0 +1,58 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import sendgrid from "@sendgrid/mail";
+import qr from "qrcode";
+import { auth, firestore } from "firebase-admin";
+import initializeApi from "../../lib/admin/init";
+
+sendgrid.setApiKey(process.env.SENDGRID_API_KEY ?? "");
+
+initializeApi();
+
+const REGISTRATION_COLLECTION = "/registrations";
+const db = firestore();
+
+async function sendEmail(req: NextApiRequest, res: NextApiResponse) {
+  const { email } = req.body;
+
+  if (!email) {
+    return res.status(400).send("Invalid email");
+  }
+
+  // Make sure user is not already in the collection
+  const snapshot = await db
+    .collection(REGISTRATION_COLLECTION)
+    .doc(email)
+    .get();
+  if (snapshot.exists) return res.status(400).send("Email already exists");
+
+  // Create user in the collection
+  await db.collection(REGISTRATION_COLLECTION).doc(email).set({});
+
+  const qrcode = (await qr.toDataURL(email)).replace(
+    "data:image/png;base64,",
+    ""
+  );
+  const msg: sendgrid.MailDataRequired = {
+    to: email,
+    from: process.env.SENDGRID_SENDER as string,
+    subject: "Axxess Hackathon QR Code",
+    text: "Hello,\n\nThank you for registering for the Axxess Hackathon. Below is your unique QR-code for check-in, swag, and food! We recommend arriving at 8:45am to get in line for check-in as space is limited.\n\nYou'll recieve an email in a few days (Wednesday or Thursday) with all the Axxess Hackathon event details.\n\nHackathon check-in begins at April 1st, 9 a.m. CDT.\n\nLocation:\nECSW 1.100 Axxess Atrium\n800 W. Campbell Road, Richardson, Texas 75080\n\nIf you have any questions or concerns, please don't hesitate to reach out to us at [email protected].\n\nThank you again for registering for the Axxess Hackathon. We can't wait to see you there!\n\nBest regards,\n\nThe Axxess Hackathon Team",
+    attachments: [
+      {
+        content: qrcode,
+        filename: "qrcode.png",
+      },
+    ],
+  };
+  sendgrid.send(msg).catch((err) => console.log(err.response.body.errors));
+  res.status(200).json({});
+}
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "POST") {
+    sendEmail(req, res);
+  } else {
+    res.status(405).json({});
+  }
+}

pages/index.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { Dialog } from '@headlessui/react';
 import LoadIcon from '../components/LoadIcon';
 import ScanType from '../components/ScanType';
+import { useRouter } from 'next/router';
 
 const successStrings = {
   claimed: 'Scan claimed...',
@@ -57,6 +58,8 @@ const Home: NextPage = () => {
     setCurrentScanIdx(idx);
   };
 
+  const router = useRouter();
+
   const handleScan = async (data: string) => {
     const query = new URL(`http://localhost:3000/api/scan`);
     fetch(query.toString().replaceAll('http://localhost:3000', ''), {
@@ -475,7 +478,7 @@ const Home: NextPage = () => {
               !editScan &&
               !showDeleteScanDialog &&
               !startScan && (
-                <div className="mx-auto my-5">
+                <div className="mx-auto my-5 flex flex-col items-center">
                   <button
                     className="bg-green-300 p-3 rounded-lg font-bold hover:bg-green-200"
                     onClick={() => {
@@ -484,6 +487,22 @@ const Home: NextPage = () => {
                   >
                     Add a new Scan
                   </button>
+                  <button
+                    className="bg-blue-300 p-3 rounded-lg font-bold hover:bg-blue-200 block mt-4"
+                    onClick={() => {
+                      router.push('/new');
+                    }}
+                  >
+                    REGISTER WALK-INS
+                  </button>
+                  <button
+                    className="bg-red-300 p-3 rounded-lg font-bold hover:bg-red-200 block mt-4"
+                    onClick={() => {
+                      router.push('/stats');
+                    }}
+                  >
+                    Stats
+                  </button>
                 </div>
               )}
           </div>

pages/new.tsx

@@ -0,0 +1,69 @@
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+const NewEmail: NextPage = () => {
+  const [email, setEmail] = useState("");
+  const router = useRouter();
+
+  const handleInputChange = (newEmail) => {
+    setEmail(newEmail.target.value);
+  };
+
+  const handleKeydown = (k) => {
+    if (k.key == "Enter") {
+      submit();
+    }
+  };
+
+  const submit = async () => {
+    try {
+      const res = await fetch("/api/walkin", {
+        mode: "cors",
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email,
+        }),
+      });
+      if (res.status !== 200) {
+        alert(await res.text());
+      } else {
+        alert("Email added!");
+      }
+    } catch (err) {
+      alert(err);
+    }
+    setEmail("");
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-[100vh]">
+      <h1 className="text-center text-3xl mb-4 text-red-300">Add a Walk-in</h1>
+      <input
+        type="text"
+        className="text-2xl"
+        value={email}
+        onChange={handleInputChange}
+        onKeyDown={handleKeydown}
+      />
+      <button
+        className="bg-green-300 p-3 rounded-lg font-bold hover:bg-green-200 block mt-4"
+        onClick={submit}
+      >
+        Submit
+      </button>
+
+      <button
+        className="bg-orange-300 p-3 rounded-lg font-bold hover:bg-orange-200 block mt-4"
+        onClick={() => {
+          router.push("/");
+        }}
+      >
+        back
+      </button>
+    </div>
+  );
+};
+
+export default NewEmail;

pages/stats.tsx

@@ -0,0 +1,52 @@
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import AdminStatsCard from "../components/AdminStatsCard";
+
+const StatsPage: NextPage = () => {
+  const [statsData, setStatsData] = useState<Record<string, number>>();
+  const router = useRouter();
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch("/api/count", {
+          mode: "cors",
+          method: "GET",
+        });
+        if (res.status !== 200) {
+          alert(await res.text());
+        } else {
+          const data = await res.json();
+          console.log(data);
+          setStatsData(data.scans);
+        }
+      } catch (err) {
+        alert(err);
+      }
+    })();
+  }, []);
+  return (
+    <div>
+      <div className="w-full mx-auto flex flex-col gap-y-6">
+        <div className="flex-col gap-y-3 w-full md:flex-row flex justify-around gap-x-2">
+          {statsData &&
+            Object.keys(statsData).map((scan) => (
+              <AdminStatsCard title={scan} value={statsData[scan]} />
+            ))}
+        </div>
+      </div>
+      <div className="w-full flex items-center justify-center">
+        <button
+          className="bg-blue-300 p-3 rounded-lg font-bold hover:bg-blue-200 block mt-4"
+          onClick={() => {
+            router.push("/");
+          }}
+        >
+          Back
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default StatsPage;