add notifications for upcoming meetings

src/ProtectedRoute.tsx

@@ -2,11 +2,16 @@ import { useLocation, Outlet, Navigate } from "react-router-dom";
 import useAuth from "./hooks/useAuth";
 import Navbar from "./components/navbar/Navbar";
 import Sidebar from "./components/sidebar/Sidebar";
-import { Box } from "@mui/material";
+import { Alert, AlertTitle, Box, Snackbar, Typography } from "@mui/material";
 import { store } from "./redux/store";
 import { fetchFavorites } from "./redux/slices/favoritesSlice";
-import { fetchMeetings } from "./redux/slices/meetingsAndUserStatusSlice";
+import { fetchMeetings, selectMeetings } from "./redux/slices/meetingsAndUserStatusSlice";
-import { fetchUsers } from "./redux/slices/usersSlice";
+import { fetchUsers, selectMe } from "./redux/slices/usersSlice";
+import { useAppDispatch, useAppSelector, useInterval } from "./redux/hooks";
+import DetailedMeeting from "./api-bodies/DetailedMeeting";
+import React, { useState } from "react";
+
+
 
 const ProtectedRoute = () => {
   const auth = useAuth();
@@ -18,8 +23,61 @@ const ProtectedRoute = () => {
     store.dispatch(fetchUsers(auth?.uuid));
     store.dispatch(fetchFavorites(auth?.uuid));
   }
+
+  useAppDispatch();
+  const currentUserUuid: string = useAppSelector(selectMe);
+  const meetings: DetailedMeeting[] = useAppSelector(selectMeetings);
+  const currentUserMeetings = meetings.filter((m) => m.registrantIds.includes(currentUserUuid));
+
+  const [open, setOpen] = useState(false);
+  const [notifMeetings, setNotifMeetings] = useState([""]);
+
+  const sixtySec = 60000;
+  // polls the current time against meeting times
+  useInterval(
+    () => {
+      console.log("polling");
+      const currentTime = Math.floor(Date.now() / sixtySec); // in minutes
+      const upcomingMeetings = currentUserMeetings.filter((meeting) => 
+        (currentTime == Math.floor(Date.parse(meeting.start) / sixtySec) - 15) || // 15 mins before meeting time
+        (currentTime == Math.floor(Date.parse(meeting.start) / sixtySec) - 30) // or 30 mins before meeting time
+      );
+      if (upcomingMeetings.length != 0) {
+        setOpen(true);
+        const newNotifMeetings: string[] = upcomingMeetings.map((m) => {
+          if (currentTime == Math.floor(Date.parse(m.start) / sixtySec) - 15) {
+            return m.topic + " in 15 minutes";
+          } else {
+            return m.topic + " in 30 minutes";
+          }
+        });
+        setNotifMeetings(newNotifMeetings);
+      }
+    },
+    sixtySec // poll time
+  );
+
+  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason == "clickaway") {
+      return;
+    }
+    setOpen(false);
+  };
+
+  // -----
+  
   return auth?.isLoggedIn ? (
     <>
+      {/* ----- */}
+      <Snackbar open={open} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="info" sx={{ width: "100%" }}>
+          <AlertTitle>Upcoming Meetings</AlertTitle>
+          {notifMeetings.map((m, i) => 
+            <Typography key={i}>{m}</Typography>
+          )}
+        </Alert>
+      </Snackbar>
+      {/* ----- */}
       <Navbar />
       <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
         <Box sx={{ flexGrow: 1 }}>