Add Calendar for Availability (#125)

components/Home/AdminHomePage.tsx

@@ -1,22 +1,62 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { AdminCalendar } from "./Calendar/AdminCalendar";
 import { EventsView } from "./EventsView/EventsView";
 import homePageStyles from "./OveralHomePage.module.css";
 import { CreateOptions } from "./CreateOptions/CreateOptions";
 import { CreateClassWizard } from "./CreateClassWizard/CreateClassWizard";
 import { CreateEventWizard } from "./CreateEventWizard/CreateEventWizard";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import useSWR from "swr";
+import { APIContext } from "../../context/APIContext";
+import { AvailabilityCalendar } from "./Calendar/AvailabilityCalendar";
 
 const AdminHomePage: React.FC<object> = () => {
   const [showClassWizard, setShowClassWizard] = useState(false);
   const [showEventWizard, setShowEventWizard] = useState(false);
   const [showManageClassesView, setShowManageClassesViewView] = useState(false);
   const [showMainScreenButtons, setShowMainScreenButtons] = useState(true);
+  const [calendar, setCalendar] = useState<string>("full");
+  const [selectedTeacher, setSelectedTeacher] = useState<string | undefined>(undefined);
+
+  const client = useContext(APIContext);
+
+  // get all teachers in order to select them in the dropdown
+  const { data: allTeachers, error: fetchTeacherError } = useSWR("/api/users?filter=Teacher", () =>
+    client.getAllUsers("Teacher")
+  );
+
+  // handles changing calendar from full schedule to just availability
+  const handleCalendar = (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string | null
+  ): void => {
+    if (newAlignment != null) {
+      setCalendar(newAlignment);
+    }
+  };
+
+  // handles the change in selected teacher
+  const handleTeacherChange = (event: SelectChangeEvent): void => {
+    setSelectedTeacher(event.target.value as string);
+  };
 
   const handleClose = (): void => {
     setShowClassWizard(false);
     setShowEventWizard(false);
   };
 
+  // make teachers a list of menu items, to be selectable by MUI's select component
+  const teachers = allTeachers
+    ? allTeachers.map((teacher) => (
+        <MenuItem key={teacher.id} value={teacher.id}>
+          {teacher.firstName + teacher.lastName}
+        </MenuItem>
+      ))
+    : [];
+
   useEffect(() => {
     setShowMainScreenButtons(!showManageClassesView);
   }, [showManageClassesView]);
@@ -38,6 +78,46 @@ const AdminHomePage: React.FC<object> = () => {
             >
               {<div style={{ color: "white" }}>Manage Classes</div>}
             </button>
+            <div className={homePageStyles.availabilitySpacing}></div>
+            <div>
+              <ToggleButtonGroup
+                value={calendar}
+                exclusive
+                onChange={handleCalendar}
+                size="small"
+                color="primary"
+                aria-label="text alignment"
+                sx={{
+                  width: 300,
+                }}
+              >
+                <ToggleButton value="full" aria-label="left aligned">
+                  Full Schedule
+                </ToggleButton>
+                <ToggleButton value="availability" aria-label="centered">
+                  Availability
+                </ToggleButton>
+              </ToggleButtonGroup>
+            </div>
+            {/*show teacher selecting input if availability is selected and no error is seen*/}
+            {calendar == "availability" ? (
+              fetchTeacherError ? (
+                "System Error"
+              ) : (
+                <Select
+                  labelId="demo-simple-select-label"
+                  id="demo-simple-select"
+                  value={selectedTeacher}
+                  label="Age"
+                  onChange={handleTeacherChange}
+                  sx={{
+                    width: 500,
+                  }}
+                >
+                  {teachers}
+                </Select>
+              )
+            ) : null}
           </div>
         </div>
       )}
@@ -46,8 +126,10 @@ const AdminHomePage: React.FC<object> = () => {
 
       {showManageClassesView ? (
         <EventsView setShowEventsViewPage={setShowManageClassesViewView} />
-      ) : (
+      ) : calendar == "full" ? (
         <AdminCalendar />
+      ) : (
+        <AvailabilityCalendar userId={selectedTeacher} />
       )}
     </div>
   );

components/Home/Calendar/AdminCalendar.tsx

@@ -30,22 +30,6 @@ const AdminCalendar: React.FC = () => {
       />
     </div>
   );
-  //
-  //   return (
-  //       <>
-  //           <Calendar
-  //               selected={selected}
-  //               setSelected={setSelected}
-  //           />
-  //           <Scheduler
-  //               events={events}
-  //               selected={selected}
-  //               setSelected={setSelected}
-  //               onRequestAdd={(evt) => addEvent(evt)}
-  //               onRequestEdit={(evt) => alert("Edit element requested")}
-  //           />
-  //       </>
-  //   );
 };
 
 export { AdminCalendar };

components/Home/Calendar/AvailabilityCalendar.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "./CalendarViews.module.css";
+import Calendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+
+type AvailabilityCalendarProps = {
+  userId: string | undefined;
+};
+
+const AvailabilityCalendar: React.FC<AvailabilityCalendarProps> = ({ userId }) => {
+  const _ = dayGridPlugin;
+  // if no user id present, dont render calendar
+  if (!userId) {
+    return null;
+  }
+  return (
+    <div className={styles.calendarContainer}>
+      <Calendar
+        initialView="timeGridWeek"
+        plugins={[timeGridPlugin]}
+        height="85vh"
+        slotMinTime="06:00:00"
+        slotMaxTime="24:00:00"
+        expandRows={true}
+        eventSources={[
+          {
+            url: "/api/availability-feed/?userId=" + userId,
+            method: "GET",
+            textColor: "white",
+          },
+        ]}
+        eventColor="blue"
+        scrollTime="06:00:00"
+      />
+    </div>
+  );
+};
+
+export { AvailabilityCalendar };

components/Home/OveralHomePage.module.css

@@ -6,7 +6,7 @@
 }
 
 .buttonWrapper {
-  width: 438px;
+  width: 100%;
   padding-top: 65px;
   padding-bottom: 40px;
   display: flex;
@@ -19,9 +19,6 @@
 }
 
 .manageBtn {
-  display: inline-block;
-  align-items: center;
-  justify-content: space-around;
   width: 185px;
   height: 44px;
   border-radius: 32px;
@@ -31,3 +28,7 @@
   cursor: pointer;
   composes: labelLarge from "../../styles/globals.css";
 }
+
+.availabilitySpacing {
+  width: 50px;
+}