#121: Typescript fetch-events (#123)

* Basic TS files

* Templating

* Renaming and tidy

* Move filter to requests

* Document updates

* Updated events file

* Updated events file

* General tidy

---------

Co-authored-by: Josh Peak <[email protected]>

CONTRIBUTING.md

@@ -1,8 +1,8 @@
-<img 
+<img
   align="right"
   width="1600px"
   alt="Newwwie Logo"
-  src="newwwie-logo.svg?sanitize=true" 
+  src="newwwie-logo.svg?sanitize=true"
 />
 
 # Contributing to Newwwie Website
@@ -161,9 +161,9 @@ We are still working on having hack days where we can meetup in person and hack
 
 Pulls from the Meetup API based on a list of approved Meetup Group IDs.
 
-[`fetch-events/meetups.js`](fetch-events/meetups.js)
+[`fetch-events/meetups.json`](fetch-events/meetups.json)
 
-You can [edit it directly on the Github Website](https://github.com/newwwie/newwwie.com/edit/main/fetch-events/meetups.js)
+You can [edit it directly on the Github Website](https://github.com/newwwie/newwwie.com/edit/main/fetch-events/meetups.json)
 
 ## Communities page
 

README.md

@@ -1,8 +1,8 @@
-<img 
+<img
   align="right"
   width="1600px"
   alt="Newwwie Logo"
-  src="newwwie-logo.svg?sanitize=true" 
+  src="newwwie-logo.svg?sanitize=true"
 />
 
 # newwwie.com

fetch-events/event-data-template.njk

@@ -0,0 +1,5 @@
+{#- Template format for the generated event file  -#}
+// Auto Generated on {{ generationTime }}
+import { type EventItem } from "./types";
+
+export const events: readonly EventItem[] = {{ sortedEvents | dump(2) | safe }};

fetch-events/fetch-events.ts

@@ -0,0 +1,62 @@
+import _ from "lodash";
+import axios from "axios";
+import dayjs from "dayjs";
+import path from "path";
+import { readFileSync, writeFileSync } from "fs";
+import { renderString } from "nunjucks";
+
+import { EventItem } from "../src/js/events/types";
+import { GroupEdge, GroupResponse, MEETUP_GQL_QUERY } from "./types";
+import { Meetups } from "./meetups.json";
+
+const MEETUP_GQL_URL = "https://www.meetup.com/gql";
+const END_DATE_RANGE = dayjs().add(3, "month").toISOString(); // Retrieve up to three months from the current date
+const EVENT_OUTPUT_FILE = path.join(__dirname, "../src/js/events/events-data.ts");
+const EVENT_TEMPLATE_FILE = path.join(__dirname, "./event-data-template.njk");
+
+const buildGraphQLQuery = (groupName: string) => ({
+  query: MEETUP_GQL_QUERY,
+  variables: {
+    groupName,
+    endDateRange: END_DATE_RANGE,
+  },
+});
+
+const getGroupEvents = async (groupName: string): Promise<EventItem[]> => {
+  console.log(`Fetching events for "${groupName}"`);
+  const query = buildGraphQLQuery(groupName);
+  const events = (await axios.post(MEETUP_GQL_URL, JSON.stringify(query))).data as GroupResponse;
+
+  // Transform the response
+  const { unifiedEvents, ...group } = events.data.groupByUrlname || {};
+
+  console.log(`Finished fetching events for "${groupName}"`);
+  return (
+    unifiedEvents?.edges?.map((edge: GroupEdge) => ({
+      event: edge.node,
+      group,
+    })) || []
+  );
+};
+
+(async () => {
+  try {
+    console.log("Fetching events");
+    const events = await Promise.all(Meetups.map((eventName: string) => getGroupEvents(eventName)));
+
+    const sortedEvents = _.sortBy(events.flat(), (event: EventItem) => event.event.dateTime);
+
+    console.log("Rendering the events file");
+    const template = readFileSync(EVENT_TEMPLATE_FILE, "utf-8");
+    const rendered = renderString(template, {
+      generationTime: dayjs().toISOString(),
+      sortedEvents,
+    });
+
+    writeFileSync(EVENT_OUTPUT_FILE, rendered);
+
+    console.log("Fetch events complete");
+  } catch (err) {
+    console.error(`Error fetching events: ${err}`);
+  }
+})();

fetch-events/meetups.json

@@ -0,0 +1,30 @@
+{
+  "Meetups": [
+    "NewcastleJS-JavaScript-Meetup",
+    "Agile-Newcastle",
+    "Newcastle-Coders-Group",
+    "Newcastle-Software-Development-Meetup",
+    "Blast-Furnace",
+    "Newcastle-IoT-Pioneers",
+    "The-Things-Network-Meetup-Newcastle-Lake-Macquarie",
+    "Newcastle-Data-Analytics-Meetup",
+    "Newcastle-Futurists",
+    "IxDA-Newcastle",
+    "Core-Electronics-Workshops",
+    "TOOOL-au-Newcastle-Locksport-Security-Enthusiast-Meetup",
+    "Newcastle-Virtual-Reality-Meetup",
+    "Diversity-in-Technology-Newcastle",
+    "Newcastle-SEO",
+    "meetup-group-xveezgem",
+    "Blockchain-Incubator-Tank",
+    "Hunter-Information-and-Analytics-Forum",
+    "Crypto-Newcastle-Intelligence-Traded",
+    "Newcastle-Blockchain",
+    "Newcastle-Infracoders",
+    "Newcastle-Cyber-Security-Group",
+    "qa-newcastle",
+    "newcastle-women-and-gender-diverse-people-in-tech",
+    "newcastle-salesforce-community-group",
+    "blockchain-newcastle"
+  ]
+}

fetch-events/types.ts

@@ -0,0 +1,61 @@
+import { Event, Group } from "../src/js/events/types";
+
+export type GroupEdge = {
+  node: Event;
+};
+
+export type GroupResponse = {
+  data: {
+    groupByUrlname: Group & {
+      unifiedEvents: {
+        edges: GroupEdge[];
+      };
+    };
+  };
+};
+
+// Sandbox available at https://www.meetup.com/api/playground/#graphQl-playground
+export const MEETUP_GQL_QUERY = `
+query ($groupName: String!, $endDate: ZonedDateTime) {
+  groupByUrlname(
+    urlname: $groupName
+  ) {
+    name
+    urlname
+    groupPhoto {
+      id
+      baseUrl
+      preview
+    }
+    logo {
+      id
+      baseUrl
+      preview
+    }
+    unifiedEvents(
+      filter: {
+        endDateRange: $endDate
+      }
+    ) {
+      edges {
+        node {
+          title
+          description
+          dateTime
+          eventUrl
+          going
+          maxTickets
+          duration
+          imageUrl
+          venue {
+            name
+            lat
+            lng
+            address
+            city
+          }
+        }
+      }
+    }
+  }
+}`;