Merge pull request #297 from TreeHacks/thijs/live-admin-panel

connorff · web-flow · commit f606123128f8 · 2025-01-24T12:10:48.000-08:00
[live] Admin panel section for live notifications
diff --git a/backend/index.ts b/backend/index.ts
@@ -26,7 +26,7 @@ import {
   setApplicationInfo,
   submitApplicationInfo,
 } from "./routes/application_info";
-import { createEventPushSubscription, deleteEventPushSubscription, getEventSubscriptions } from "./routes/event_subscriptions"
+import { createEventPushSubscription, deleteEventPushSubscription, getEventSubscriptions, getLiveStats, sendLiveNotification } from "./routes/event_subscriptions"
 import { getMeetInfo, setMeetInfo } from "./routes/meet_info";
 import { getMealInfo, setMealInfo } from "./routes/meal_info";
 import { getWorkshopList, setWorkshopList } from "./routes/workshop_info";
@@ -157,10 +157,12 @@ apiRouter.get("/leaderboard", [anonymousRoute], leaderboard);
 apiRouter.post("/mentor_create", [anonymousRoute], mentorCreate);
 apiRouter.post("/sponsor/admin", createAdmin);
 
-// Live push notifications, no auth required
+// Live push notifications
 apiRouter.post('/live/event_subscriptions', createEventPushSubscription);
 apiRouter.delete('/live/event_subscriptions', deleteEventPushSubscription);
 apiRouter.get('/live/event_subscriptions', getEventSubscriptions);
+authenticatedRoute.get("/live/stats", [adminRoute], getLiveStats);
+authenticatedRoute.post("/live/notifications", [adminRoute], sendLiveNotification);
 
 apiRouter.use("/", authenticatedRoute);
 
diff --git a/backend/routes/event_subscriptions.ts b/backend/routes/event_subscriptions.ts
@@ -1,16 +1,26 @@
 // Push notifications for TreeHacks Live
 
 import { Request, Response } from 'express';
-import { PushSubscription } from 'web-push';
+import webpush, { PushSubscription } from 'web-push';
 import axios from 'axios';
-import LiveNotificationSubscription from '../models/LiveNotificationSubscription';
 import { EventiveResponse } from '../services/live_notifications';
+import LiveNotificationSubscription from '../models/LiveNotificationSubscription';
+
+webpush.setVapidDetails(
+  'mailto:hello@treehacks.com',
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY
+);
 
 const EVENTS_API_URL = `https://api.eventive.org/event_buckets/${process.env.EVENTIVE_EVENT_BUCKET}/events?api_key=${process.env.EVENTIVE_API_KEY}`;
 
-async function getEvent(eventId: string) {
+async function getEvents() {
   const req = await axios.get<EventiveResponse>(EVENTS_API_URL);
-  const events = req.data.events;
+  return req.data.events;
+}
+
+async function getEvent(eventId: string) {
+  const events = await getEvents();
   return events.find((evt) => evt.id === eventId);
 }
 
@@ -84,3 +94,67 @@ export async function deleteEventPushSubscription(req: Request, res: Response) {
   const events = await getSubscriptions(sub.endpoint);
   return res.json({ subscriptions: events });
 }
+
+// Admin endpoints
+
+export interface LiveStats {
+  numDevices: number;
+  numSubscriptions: number;
+  events: Array<{ id: string; name: string; numSubscriptions: number }>;
+}
+
+export async function getLiveStats(req: Request, res: Response) {
+  const subscriptions = await LiveNotificationSubscription.find();
+  const numDevices = new Set(
+    subscriptions.map((sub) => sub.subscription.endpoint)
+  ).size;
+  const numSubscriptions = subscriptions.length;
+
+  const eventData = await getEvents();
+  const groupedSubscriptions = await LiveNotificationSubscription.aggregate([
+    { $group: { _id: '$eventId', count: { $sum: 1 } } },
+  ]);
+
+  const eventStats = await Promise.all(
+    groupedSubscriptions.map(async (event) => {
+      const evt = eventData.find((e) => e.id === event._id);
+      return evt != null
+        ? { id: evt.id, name: evt.name, numSubscriptions: event.count }
+        : null;
+    })
+  ).then((events) => events.filter((e) => e != null));
+
+  return res.json({ numDevices, numSubscriptions, events: eventStats });
+}
+
+export async function sendLiveNotification(req: Request, res: Response) {
+  const title = req.body.title;
+  const body = req.body.body;
+
+  if (title == null || body == null) {
+    return res.status(400).json({ error: 'Invalid notification' });
+  }
+
+  const uniqueSubscriptions = await LiveNotificationSubscription.aggregate([
+    {
+      $group: {
+        _id: '$subscription.endpoint',
+        subscription: { $first: '$subscription' },
+      },
+    },
+  ]);
+
+  const payload = JSON.stringify({ title, body });
+
+  await Promise.all(
+    uniqueSubscriptions.map(async (sub) => {
+      try {
+        await webpush.sendNotification(sub.subscription, payload);
+      } catch (err) {
+        console.error('Error sending notification', err);
+      }
+    })
+  );
+
+  return res.json({ success: true });
+}
diff --git a/backend/services/live_notifications.ts b/backend/services/live_notifications.ts
@@ -113,6 +113,11 @@ export default class LiveNotificationsService {
     const nextNotification = this.notificationQueue[0];
     const delay = nextNotification.time - Date.now();
 
+    // If the event is more than 20 days in the future, don't schedule the notification, or the timeout will run instantly
+    if (delay > 20 * 24 * 60 * 60 * 1000) {
+      return;
+    }
+
     this.timeoutId = setTimeout(() => {
       this.sendNotificationsForEvent(nextNotification);
 
diff --git a/src/Admin/Admin.tsx b/src/Admin/Admin.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
-import { RoutedTabs, NavTab } from 'react-router-tabs';
- 
+import { NavTab } from 'react-router-tabs';
 import 'react-router-tabs/styles/react-router-tabs.scss';
 import Stats from './Stats';
 import AdminTable from './AdminTable';
 import BulkChange from './BulkChange';
- import BulkCreate from './BulkCreate';
+import BulkCreate from './BulkCreate';
 import BulkImportHacks from './BulkImportHacks';
 import HackTable from './HackTable';
 import JudgeTable from './JudgeTable';
 import JudgeLeaderboard from './JudgeLeaderboard';
+import Live from './LiveNotifications';
 
 const Admin = ({ match }) => {
   return (
@@ -23,20 +23,32 @@ const Admin = ({ match }) => {
       <NavTab to={`${match.path}/bulkcreate`}>Bulk Create Users</NavTab>
       {/* <NavTab to={`${match.path}/bulk_import_hacks`}>Bulk Import Hacks</NavTab> */}
       <NavTab to={`${match.path}/stats`}>Application Stats</NavTab>
+      <NavTab to={`${match.path}/live`}>Live Notifications</NavTab>
 
       <Switch>
-        <Route exact path={`${match.path}`} render={() => <Redirect replace to={`${match.path}/table`} />} />
+        <Route
+          exact
+          path={`${match.path}`}
+          render={() => <Redirect replace to={`${match.path}/table`} />}
+        />
         <Route path={`${match.path}/table`} component={AdminTable} />
         <Route path={`${match.path}/stats`} component={Stats} />
         <Route path={`${match.path}/bulkchange`} component={BulkChange} />
         <Route path={`${match.path}/bulkcreate`} component={BulkCreate} />
         <Route path={`${match.path}/hack_table`} component={HackTable} />
-        <Route path={`${match.path}/bulk_import_hacks`} component={BulkImportHacks} />
+        <Route
+          path={`${match.path}/bulk_import_hacks`}
+          component={BulkImportHacks}
+        />
         <Route path={`${match.path}/judge_table`} component={JudgeTable} />
-        <Route path={`${match.path}/judge_leaderboard`} component={JudgeLeaderboard} />
+        <Route
+          path={`${match.path}/judge_leaderboard`}
+          component={JudgeLeaderboard}
+        />
+        <Route path={`${match.path}/live`} component={Live} />
       </Switch>
     </div>
   );
 };
- 
-export default Admin;
+
+export default Admin;
diff --git a/src/Admin/LiveNotifications.tsx b/src/Admin/LiveNotifications.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { ILiveNotificationsProps } from './types';
+import { IAdminState } from '../store/admin/types';
+import Loading from '../Loading/Loading';
+import { connect } from 'react-redux';
+import {
+  getLiveStats,
+  sendLiveNotification,
+  setLiveNotificationData,
+} from '../store/admin/actions';
+import ReactTable from 'react-table';
+
+const columns = [
+  {
+    Header: 'Event Id',
+    accessor: 'id',
+  },
+  {
+    Header: 'Event Name',
+    accessor: 'name',
+  },
+  {
+    Header: 'Subscriptions',
+    accessor: 'numSubscriptions',
+  },
+];
+
+const LiveNotifications = (props: ILiveNotificationsProps) => {
+  return (
+    <div>
+      <div className="row">
+        <div className="form-group col-12 col-sm-6">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              props.sendNotification();
+            }}
+          >
+            <textarea
+              required
+              className="form-control"
+              placeholder="Notification Title"
+              value={props.liveNotification.title}
+              onChange={(e) =>
+                props.setNotificationData({
+                  title: e.target.value,
+                  body: props.liveNotification.body,
+                })
+              }
+            ></textarea>
+            <textarea
+              required
+              className="form-control"
+              placeholder="Notification Body"
+              value={props.liveNotification.body}
+              onChange={(e) =>
+                props.setNotificationData({
+                  title: props.liveNotification.title,
+                  body: e.target.value,
+                })
+              }
+            ></textarea>
+            <input className="form-control" type="submit" />
+          </form>
+        </div>
+        <div className="col-12 col-sm-6">
+          <small>
+            <div>
+              The input on the left will send a mass notification to all devices
+              subscribed to any event notification via TreeHacks Live, the event
+              schedule app. This is a good way to notify all attendees of a
+              last-minute change or important information.
+            </div>
+            <hr />
+            <div>
+              <b>Total Devices:</b> {props.liveStats.numDevices}
+              <br />
+              <b>Total Subscriptions:</b> {props.liveStats.numSubscriptions}
+            </div>
+          </small>
+        </div>
+      </div>
+      <div className="col-12">
+        <ReactTable
+          filterable
+          columns={columns}
+          data={props.liveStats.events}
+          minRows={0}
+        />
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  ...(state.admin as IAdminState),
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  getLiveStats: () => dispatch(getLiveStats()),
+  setNotificationData: (data: { title: string; body: string }) =>
+    dispatch(setLiveNotificationData(data)),
+  sendNotification: () => dispatch(sendLiveNotification()),
+});
+
+class LiveNotificationsWrapper extends React.Component<
+  ILiveNotificationsProps,
+  {}
+> {
+  componentDidMount() {
+    this.props.getLiveStats();
+  }
+  render() {
+    if (!this.props.liveStats) {
+      return <Loading />;
+    }
+    return <LiveNotifications {...this.props} />;
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LiveNotificationsWrapper);
diff --git a/src/Admin/types.d.ts b/src/Admin/types.d.ts
@@ -1,5 +1,5 @@
 import { IFormState } from "../store/form/types";
-import { IAdminState } from "src/store/admin/types";
+import { IAdminState } from '../store/admin/types';
 import { getApplicationList, getExportedApplications } from "src/store/admin/actions";
 import { IBaseState } from "src/store/base/types";
 
@@ -50,6 +50,11 @@ export interface IBulkImportHacksProps extends IAdminState {
     setBulkImportHacksFloor: (e: number) => void
 }
 
+export interface ILiveNotificationsProps extends IAdminState {
+    getLiveStats: () => void,
+    sendNotification: () => void,
+    setNotificationData: (data: {title: string, body: string}) => void,
+}
 export interface IReactTableHeader {
     Header?: string,
     id?: string,
diff --git a/src/store/admin/actions.ts b/src/store/admin/actions.ts
@@ -38,6 +38,16 @@ export const setApplicationStats = (applicationStats) => ({
   applicationStats,
 });
 
+export const setLiveStats = (liveStats) => ({
+  type: "SET_LIVE_STATS",
+  liveStats,
+});
+
+export const setLiveNotificationData = (data: { title: string, body: string }) => ({
+  type: "SET_LIVE_NOTIFICATION_DATA",
+  data,
+});
+
 export const getApplicationList = (tableState: IReactTableState) => (
   dispatch,
   getState
@@ -392,6 +402,39 @@ export const getApplicationStats = () => (dispatch, getState) => {
     });
 };
 
+export const getLiveStats = () => (dispatch, getState) => {
+  dispatch(loadingStart());
+  return API.get("treehacks", `/live/stats`, {})
+    .then((e) => {
+      dispatch(setLiveStats(e));
+      dispatch(loadingEnd());
+    })
+    .catch((e) => {
+      console.error(e);
+      dispatch(loadingEnd());
+      alert("Error getting live stats " + e);
+    });
+};
+
+export const sendLiveNotification = () => (dispatch, getState) => {
+  dispatch(loadingStart());
+  const { title, body } = (getState().admin as IAdminState).liveNotification;
+  return API.post("treehacks", `/live/notifications`, {
+    body: {
+      title,
+      body,
+    },
+  })
+    .then((e) => {
+      dispatch(loadingEnd());
+    })
+    .catch((e) => {
+      console.error(e);
+      dispatch(loadingEnd());
+      alert("Error sending notification " + e);
+    });
+};
+
 export const setBulkChangeStatus = (status) => ({
   type: "SET_BULK_CHANGE_STATUS",
   status,
diff --git a/src/store/admin/reducer.ts b/src/store/admin/reducer.ts
diff --git a/src/store/admin/types.d.ts b/src/store/admin/types.d.ts
