Added backend events API

Author: Yankai Zhu

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*.env

backend/src/controllers/events.ts

@@ -0,0 +1,6 @@
+import { RequestHandler } from "express";
+import { eventInfo } from "../data/eventData";
+
+export const EventsHandler: RequestHandler = (req, res) => {
+  res.status(200).json(eventInfo);
+}

backend/src/controllers/eventsWebhook.ts

@@ -0,0 +1,107 @@
+import crypto from 'crypto';
+import { RequestHandler } from "express";
+import { eventInfo, fetchEvent, filterInPlace, replaceInPlace } from '../data/eventData';
+
+interface ChangesEntry {
+  field: string;
+  value: {
+    event_id: string;
+    item: string;
+    verb: string;
+  }
+}
+
+interface FacebookWebhookNotificationEntry {
+  id: string;
+  changes: ChangesEntry[];
+}
+
+interface FacebookWebhookNotification {
+  entry: FacebookWebhookNotificationEntry[];
+  object: string;
+}
+
+const verifySignature = (rawBody: Buffer, signatureHeader?: string): boolean => {
+  if (!signatureHeader) return false;
+  const [algo, signature] = signatureHeader.split('=');
+  if (algo !== 'sha256') return false;
+
+  const expected = crypto
+    .createHmac('sha256', process.env.FB_APP_SECRET as string)
+    .update(rawBody)
+    .digest('hex');
+
+  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected));
+}
+
+export const EventsWebhookVerifier: RequestHandler = (req, res) => {
+  const mode = req.query["hub.mode"];
+  const token = req.query["hub.verify_token"];
+  const challenge = req.query["hub.challenge"];
+
+  if (mode === "subscribe" && token === process.env.FB_WEBHOOK_VERIFY_TOKEN) {
+    return res.status(200).send(challenge);
+  }
+
+  res.sendStatus(403);
+};
+
+/*
+Sample webhook payload
+https://developers.facebook.com/docs/graph-api/webhooks/getting-started/webhooks-for-pages -- for the outer wrapper
+https://developers.facebook.com/docs/graph-api/webhooks/reference/page/#feed -- for the inner objects
+
+{
+  "object": "page",
+  "entry": [
+    {
+      "id": "PAGE_ID",
+      "time": 1623242342342,
+      "changes": [
+        {
+          "field": "events",
+          "value": {
+            "event_id": "123456789",
+            "verb": "create",  // also "edit" or "delete"
+            "published": 1
+          }
+        }
+      ]
+    }
+  ]
+}
+*/
+
+export const EventsWebhookUpdate: RequestHandler = async (req, res) => {
+  const signature = req.headers['x-hub-signature-256'];
+  if (!req.rawBody || typeof signature !== "string" || !verifySignature(req.rawBody, signature)) {
+    return res.sendStatus(401);
+  }
+
+  const notif: FacebookWebhookNotification = req.body;
+  if (!notif || !notif.entry || notif.object !== "page" || notif.entry.length === 0) {
+    return res.sendStatus(400);
+  }
+
+  for (const entry of notif.entry) {
+    if (entry.id !== process.env.FB_EVENT_PAGE_ID) continue;
+
+    for (const change of entry.changes) {
+      if (change.field !== "feed" || change.value.item !== "event") continue;
+
+      if (change.value.verb === "delete") {
+        // we need filter *in place* because all imports are immutable (the REAL const)
+        filterInPlace(eventInfo, (val, index, arr) => val.id !== change.value.event_id);
+      } else {
+        try {
+          const newEvent = await fetchEvent(change.value.event_id);
+          replaceInPlace(eventInfo, (val, index, arr) => val.id === change.value.event_id, newEvent);
+        } catch(err) {
+          console.log(`Wasn't able to update event for some reason: ${err}`);
+        }
+      }
+    }
+  }
+
+  res.sendStatus(200);
+}

backend/src/data/eventData.ts

@@ -0,0 +1,126 @@
+class EventInfo {
+  // god forbid a class have public members
+  public id: string;
+  public title: string;
+  public startTime: string;
+  public endTime?: string;
+  public location: string;
+  public imageUrl: string;
+  public link: string;
+
+  constructor(
+    id: string,
+    title: string,
+    startTime: string,
+    endTime: string | undefined,
+    location: string,
+    imageUrl: string
+  ) {
+    this.id = id;
+    this.title = title;
+    this.startTime = startTime;
+    this.endTime = endTime;
+    this.location = location;
+    this.imageUrl = imageUrl;
+    // would use link as getter but getters are not enumerable so it doesn't appear in JSON.stringify :skull:
+    // maybe a cursed fix would be to use Object.defineProperty LOL
+    this.link = `https://www.facebook.com/events/${id}`;
+  }
+}
+
+// We are altering the array in place, pray we do not alter it from another thread
+// I don't even know if concurrent modification exception is a thing in JS
+// Maybe this is a single threaded moment :icant:
+export function filterInPlace<T>(
+  arr: T[],
+  predicate: (value: T, index: number, array: T[]) => boolean
+): T[] {
+  let write = 0;
+  for (let read = 0; read < arr.length; read++) {
+    const val = arr[read];
+    if (predicate(val, read, arr)) {
+      arr[write++] = val;
+    }
+  }
+  arr.length = write;
+  return arr;
+}
+
+// This one is definitely not thread safe lmao
+// TODO fix with a mutex probably
+export function replaceInPlace<T>(
+  arr: T[],
+  predicate: (value: T, index: number, array: T[]) => boolean,
+  replacement: T
+): number {
+  const idx = arr.findIndex(predicate);
+  if (idx !== -1) arr[idx] = replacement;
+  return idx;
+}
+
+// we LOVE global variables
+export let eventInfo: EventInfo[] = [];
+
+interface FacebookEvent {
+  id: string;
+  name: string;
+  cover?: { source: string };
+  place?: { name: string };
+  start_time: string;
+  end_time?: string;
+}
+
+interface FacebookEventsResponse {
+  data: FacebookEvent[];
+}
+
+// this isn't in .env for different module compatiblity
+const FB_API_VERSION = "v23.0";
+
+export async function fetchEvents() {
+  const response = await fetch(
+    `https://graph.facebook.com/${FB_API_VERSION}/${process.env.FB_EVENT_PAGE_ID}/events?access_token=${process.env.FB_ACCESS_TOKEN}&fields=id,name,cover,place,start_time,end_time`
+  );
+
+  const res: FacebookEventsResponse = await response.json();
+
+  if (!res || !res.data) {
+    console.log("No events found...");
+    return;
+  }
+
+  const processed = res.data.map(
+    (e) =>
+      new EventInfo(
+        e.id,
+        e.name,
+        e.start_time,
+        e.end_time,
+        e.place?.name ?? "Everything everywhere all at once!!!",
+        e.cover?.source || "/images/events/default_event.jpg"
+      )
+  );
+
+  eventInfo = processed;
+}
+
+export async function fetchEvent(id: string) {
+  const response = await fetch(
+    `https://graph.facebook.com/${FB_API_VERSION}/${id}?access_token=${process.env.FB_ACCESS_TOKEN}&fields=id,name,cover,place,start_time,end_time`
+  );
+
+  const res: FacebookEvent = await response.json();
+
+  if (!res) {
+    throw new Error(`Couldn't get details for event ${id}`);
+  }
+
+  return new EventInfo(
+    res.id,
+    res.name,
+    res.start_time,
+    res.end_time,
+    res.place?.name ?? "Everything everywhere all at once!!!",
+    res.cover?.source || "/images/events/default_event.jpg"
+  );
+}

backend/src/index.ts

@@ -2,18 +2,39 @@ import express, { Express } from "express";
 import cors from "cors";
 import dotenv from "dotenv";
 import pingRoute from "./routes/ping";
+import eventsRoute from "./routes/events";
+import eventsWebhookRoute from "./routes/eventsWebhook";
+import { fetchEvents } from "./data/eventData";
 
 dotenv.config();
 
-const app: Express = express();
-const port = process.env.PORT || 9000;
+(async () => {
+  try {
+    await fetchEvents();
+    console.log("Events fetched successfully");
+  } catch (error) {
+    // do we ungracefully bail out here???
+    console.error("Error fetching events:", error);
+  }
 
-// Middleware
-app.use(express.json());
-app.use(cors());
-
-app.use(pingRoute);
-
-app.listen(port, () => {
-  console.log(`Server successfully started on port ${port}`);
-});
+  const app: Express = express();
+  const port = process.env.PORT || 9000;
+  
+  // Middleware
+  app.use(
+    express.json({
+      verify: (req, res, buf) => {
+        req.rawBody = buf;
+      },
+    })
+  );
+  app.use(cors());
+  
+  app.use(pingRoute);
+  app.use(eventsWebhookRoute);
+  app.use(eventsRoute);
+  
+  app.listen(port, () => {
+    console.log(`Server successfully started on port ${port}`);
+  });
+})();

backend/src/routes/events.ts

@@ -0,0 +1,8 @@
+import { Router } from "express";
+import { EventsHandler } from "../controllers/events";
+
+const router = Router();
+
+router.get("/events", EventsHandler);
+
+export default router;

backend/src/routes/eventsWebhook.ts

@@ -0,0 +1,9 @@
+import { Router } from "express";
+import { EventsWebhookUpdate, EventsWebhookVerifier } from "../controllers/eventsWebhook";
+
+const router = Router();
+
+router.post("/eventsWebhook", EventsWebhookUpdate);
+router.get("/eventsWebhook", EventsWebhookVerifier);
+
+export default router;

backend/src/types/express/index.d.ts

@@ -0,0 +1,11 @@
+import "express";
+
+declare module "express-serve-static-core" {
+  interface Request {
+    rawBody?: Buffer;
+  }
+
+  interface IncomingMessage {
+    rawBody?: Buffer;
+  }
+}

backend/src/types/http/index.d.ts

@@ -0,0 +1,7 @@
+import "http";
+
+declare module "http" {
+  interface IncomingMessage {
+    rawBody?: Buffer;
+  }
+}

backend/tsconfig.json

@@ -31,7 +31,7 @@
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    "typeRoots": ["./src/types"],                        /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */