add dropdown that allows viewing meetings for other team members, or all team members at once

src/components/calendar/CalendarPage.tsx

@@ -2,15 +2,15 @@ import { Calendar,  momentLocalizer, Views } from "react-big-calendar";
 import moment from "moment";
 
 import "react-big-calendar/lib/css/react-big-calendar.css";
-import { Divider, Toolbar } from "@mui/material";
+import { Divider, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Toolbar, Typography } from "@mui/material";
-import { selectUserUpcomingMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
+import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
-import { selectMe } from "../../redux/slices/usersSlice";
+import { selectMe, selectTeam, selectUser, selectUsers } from "../../redux/slices/usersSlice";
 import { open } from "../../redux/slices/meetingDetailsOpenSlice";
 import DetailedMeeting from "../../api-bodies/DetailedMeeting";
+import { useState } from "react";
+import UserLite from "../../api-bodies/UserLite";
 
-// TODO: per user calendar
-// TODO: full view (all teammates)
 // TODO: match the styles and themes
 
 // A superset of DetailedMeeting; contains fields required for the calendar to work
@@ -28,12 +28,25 @@ interface CalendarEvent {
   end: Date;
 }
 
-const CalendarPage: React.FC = () => {
+enum CalendarTaskView {
+  ViewAll = "VIEWALL"
+}
 
+const CalendarPage: React.FC = () => {
   const dispatch = useAppDispatch();
-  const currentUserUuid = useAppSelector(selectMe); // TODO: per-user
+
-  const meetings = useAppSelector((state) => 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    selectUserUpcomingMeetings(state, currentUserUuid)
+  const currentUserUuid: string = useAppSelector(selectMe)!;
+  const currentUser: UserLite = useAppSelector((state) =>
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    selectUser(state, currentUserUuid)!
+  );
+  const teamUuids: string[] = useAppSelector(selectTeam);
+  const team: UserLite[] = useAppSelector((state) =>
+    selectUsers(state, teamUuids)
+  );
+  const meetings: CalendarEvent[] = useAppSelector((state) => 
+    selectMeetings(state)
   ).map(m => 
     ({
       meetingId: m.meetingId,
@@ -51,6 +64,9 @@ const CalendarPage: React.FC = () => {
     })
   );
 
+  const [selectedUserUuid, setSelectedUserUuid] = useState(currentUserUuid);
+
+  // turns calendar event back into DetailedMeeting then opens meeting view
   const handleSelectEvent = (event: CalendarEvent) => {
     const meeting: DetailedMeeting = {
       meetingId: event.meetingId,
@@ -65,12 +81,48 @@ const CalendarPage: React.FC = () => {
     dispatch(open(meeting));
   };
 
+  // dropdown selection event
+  const handleUserChange = (event: SelectChangeEvent) => {
+    setSelectedUserUuid(event.target.value);
+  };
+
+  // filter the meetings based on the uuid
+  const getUserMeetings = (uuid: string): CalendarEvent[] => {
+    if (uuid == CalendarTaskView.ViewAll) { // "View all team member meetings" option
+      return meetings;
+    } else {
+      return meetings.filter(meeting => meeting.registrantIds.includes(uuid));
+    }
+    
+  };
+
   return (
     <>
       <Toolbar />
+
+      <FormControl variant="filled" fullWidth>
+        <InputLabel id="calendar-user-select-label">
+          <Typography color="black">User</Typography>
+        </InputLabel>
+        <Select
+          labelId="calendar-user-select-label"
+          id="calendar-user-select"
+          value={selectedUserUuid}
+          label="User"
+          onChange={handleUserChange}
+        >
+          <MenuItem value={CalendarTaskView.ViewAll}>View all team member meetings</MenuItem>
+          <MenuItem value={currentUserUuid}>{currentUser.name + " (Me)"}</MenuItem>
+          {team.map(user => (
+            <MenuItem key={user.uuid} value={user.uuid}>{user.name}</MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+
       <Divider sx={{ my: 1 }} />
+      
       <Calendar
-        events={meetings}
+        events={getUserMeetings(selectedUserUuid)}
         views={["month", "week", "day"]}
         defaultView={Views.WEEK}
         onSelectEvent={handleSelectEvent}