Merge branch 'main' into staging

ITPNYU · Sep 19, 2024 · 7a04bb7 · 7a04bb7
2 parents a1f653a + a15a5c1
commit 7a04bb7
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 47 deletions.
diff --git a/booking-app/components/src/client/routes/booking/components/CalendarVerticalResource.tsx b/booking-app/components/src/client/routes/booking/components/CalendarVerticalResource.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { CalendarApi, DateSelectArg, EventClickArg } from "@fullcalendar/core";
 import { CalendarEvent, RoomSetting } from "../../../../types";
 import CalendarEventBlock, { NEW_TITLE_TAG } from "./CalendarEventBlock";
@@ -83,6 +83,9 @@ export default function CalendarVerticalResource({
   } = useContext(BookingContext);
   const ref = useRef(null);
 
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const resources = useMemo(
     () =>
       rooms.map((room) => ({
@@ -215,7 +218,7 @@ export default function CalendarVerticalResource({
         slotMinTime="09:00:00"
         slotMaxTime="21:00:00"
         allDaySlot={false}
-        aspectRatio={1.5}
+        aspectRatio={isMobile ? 0.5 : 1.5}
         expandRows={true}
         stickyHeaderDates={true}
         ref={ref}

diff --git a/booking-app/components/src/client/routes/booking/formPages/BookingFormDetailsPage.tsx b/booking-app/components/src/client/routes/booking/formPages/BookingFormDetailsPage.tsx
@@ -20,7 +20,7 @@ export default function BookingFormDetailsPage({
   return (
     <Grid container>
       <Grid width={330} />
-      <Grid xs={7} paddingRight={2}>
+      <Grid xs={12} md={7} margin={2} paddingRight={{ xs: 0, md: 2 }}>
         <FormInput {...{ isEdit, isWalkIn, calendarEventId }} />
       </Grid>
     </Grid>

diff --git a/booking-app/components/src/client/routes/booking/formPages/LandingPage.tsx b/booking-app/components/src/client/routes/booking/formPages/LandingPage.tsx
@@ -31,7 +31,12 @@ export default function LandingPage() {
   const router = useRouter();
 
   return (
-    <Center sx={{ width: "100vw", height: "90vh" }}>
+    <Center
+      sx={{ width: "100vw" }}
+      height={{ xs: "unset", md: "90vh" }}
+      padding={{ xs: 3 }}
+      // marginTop={{ xs: "10vh", md: 0 }}
+    >
       <Title as="h1">370🅙 Media Commons Reservation Form</Title>
       <p>Thank you for your interest in booking with the Media Commons</p>
       <Modal padding={4}>

diff --git a/booking-app/components/src/client/routes/booking/formPages/SelectRoomPage.tsx b/booking-app/components/src/client/routes/booking/formPages/SelectRoomPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
 import React, { useContext, useMemo, useState } from "react";
 
 import { BookingContext } from "../bookingProvider";
@@ -27,6 +27,8 @@ export default function SelectRoomPage({
   const { selectedRooms, setSelectedRooms } = useContext(BookingContext);
   const [date, setDate] = useState<Date>(new Date());
   useCheckFormMissingData();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const roomsToShow = useMemo(() => {
     return !isWalkIn
@@ -36,9 +38,12 @@ export default function SelectRoomPage({
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container>
-        <Grid width={330}>
-          <Stack spacing={2}>
+      <Grid container={!isMobile}>
+        <Grid width={{ xs: "100%", md: 330 }}>
+          <Stack
+            spacing={{ xs: 0, md: 2 }}
+            alignItems={{ xs: "center", md: "unset" }}
+          >
             {!isWalkIn && <CalendarDatePicker handleChange={setDate} />}
             <Box paddingLeft="24px">
               <Typography fontWeight={500}>Spaces</Typography>

diff --git a/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx b/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx
@@ -19,7 +19,6 @@ const Center = styled(Box)`
 `;
 
 const Container = styled(Box)(({ theme }) => ({
-  width: "50%",
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -60,7 +59,12 @@ export default function UserRolePage({
 
   return (
     <Center>
-      <Container padding={4} marginTop={6}>
+      <Container
+        padding={4}
+        margin={3}
+        marginTop={6}
+        width={{ xs: "100%", md: "50%" }}
+      >
         <Typography fontWeight={500}>Affiliation</Typography>
         <Dropdown
           value={department}

diff --git a/booking-app/components/src/client/routes/booking/hooks/fetchCalendarEvents.tsx b/booking-app/components/src/client/routes/booking/hooks/fetchCalendarEvents.tsx
@@ -1,40 +1,29 @@
-import { Booking, CalendarEvent, RoomSetting } from "../../../../types";
-import { CALENDAR_HIDE_STATUS, STORAGE_KEY_BOOKING } from "../../../../policy";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { CalendarEvent, RoomSetting } from "../../../../types";
+import { useCallback, useEffect, useState } from "react";
 
+import { CALENDAR_HIDE_STATUS } from "../../../../policy";
 import axios from "axios";
-import getBookingStatus from "../../hooks/getBookingStatus";
 
 export default function fetchCalendarEvents(allRooms: RoomSetting[]) {
   const [events, setEvents] = useState<CalendarEvent[]>([]);
 
   const loadEvents = useCallback(() => {
-    Promise.all(allRooms.map(fetchRoomCalendarEvents)).then(
-      (results) => {
-        const flatResults = results.flat();
-        console.log("FETCHED CALENDAR RESULTS:", flatResults.length);
-        const filtered = flatResults.filter(
-          (event) =>
-            !CALENDAR_HIDE_STATUS.some((hideStatus) =>
-              event.title?.includes(hideStatus)
-            )
-        );
-        if (filtered.length === 0 && events.length > 0) {
-          console.log("!!! RE-FETCHING CALENDAR EVENTS WAS EMPTY !!!");
-        } else {
-          setEvents(filtered);
-        }
+    Promise.all(allRooms.map(fetchRoomCalendarEvents)).then((results) => {
+      const flatResults = results.flat();
+      console.log("FETCHED CALENDAR RESULTS:", flatResults.length);
+      const filtered = flatResults.filter(
+        (event) =>
+          !CALENDAR_HIDE_STATUS.some((hideStatus) =>
+            event.title?.includes(hideStatus)
+          )
+      );
+      if (filtered.length === 0 && events.length > 0) {
+        console.log("!!! RE-FETCHING CALENDAR EVENTS WAS EMPTY !!!");
+      } else {
+        setEvents(filtered);
       }
-      // setEvents(
-      //   [...results.flat()].filter(
-      //     (event) =>
-      //       !CALENDAR_HIDE_STATUS.some((status) =>
-      //         event?.title?.includes(status)
-      //       )
-      //   )
-      // )
-    );
-  }, [allRooms]);
+    });
+  }, [allRooms, events]);
 
   useEffect(() => {
     loadEvents();

diff --git a/booking-app/components/src/client/routes/components/Provider.tsx b/booking-app/components/src/client/routes/components/Provider.tsx
@@ -251,13 +251,22 @@ export const DatabaseProvider = ({
           completedAt: item.completedAt || new Date().toISOString(), // Use current time if completedAt is missing
         })
       );
+      console.log(
+        "FETCHED SAFETY TRAINED EMAILS FROM DB:",
+        firestoreUsers.length
+      );
 
       // Fetch data from spreadsheet
       const response = await fetch("/api/safety_training_users");
       if (!response.ok) {
         throw new Error("Failed to fetch authorized emails from spreadsheet");
       }
       const spreadsheetData = await response.json();
+
+      console.log(
+        "FETCHED SAFETY TRAINED EMAILS FROM SPREADSHEET:",
+        spreadsheetData.emails.length
+      );
       const currentDate = new Date().toISOString();
 
       // Map to merge users
@@ -277,6 +286,7 @@ export const DatabaseProvider = ({
 
       // Convert Map to SafetyTraining array
       const uniqueUsers = Array.from(userMap.values());
+      console.log("TOTAL UNIQUE SAFETY TRAINED USER:", uniqueUsers.length);
       // Update state
       setSafetyTrainedUsers(uniqueUsers);
     } catch (error) {

diff --git a/booking-app/components/src/client/routes/components/Table.tsx b/booking-app/components/src/client/routes/components/Table.tsx
@@ -12,10 +12,15 @@ import {
 import React from "react";
 import { styled } from "@mui/system";
 
+const Clip = styled(Box)`
+  overflow-x: auto;
+`;
+
 const TableCustom = styled(MuiTable)(({ theme }) => ({
   border: `1px solid ${theme.palette.custom.border}`,
   borderCollapse: "separate",
   borderRadius: "0px 0px 4px 4px",
+  // overflowX: "scroll",
 
   "& tr:last-child td": {
     borderBottom: "none",
@@ -31,6 +36,7 @@ const ShadedHeader = styled(TableHead)(({ theme }) => ({
 }));
 
 export const TableTopRow = styled(MuiTable)`
+  width: 100%;
   height: 48px;
   border-bottom: none;
   border-collapse: separate;
@@ -69,12 +75,14 @@ export default function Table({ columns, children, topRow, sx }: Props) {
           </TableRow>
         </TableBody>
       </TableTopRow>
-      <TableCustom size="small" sx={sx ?? {}}>
-        <ShadedHeader>
-          <TableRow>{columns}</TableRow>
-        </ShadedHeader>
-        <TableBody>{children}</TableBody>
-      </TableCustom>
+      <Clip>
+        <TableCustom size="small" sx={sx ?? {}}>
+          <ShadedHeader>
+            <TableRow>{columns}</TableRow>
+          </ShadedHeader>
+          <TableBody>{children}</TableBody>
+        </TableCustom>
+      </Clip>
     </>
   );
 }
diff --git a/booking-app/components/src/client/routes/components/navBar.tsx b/booking-app/components/src/client/routes/components/navBar.tsx
@@ -7,6 +7,8 @@ import {
   Select,
   Toolbar,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
@@ -58,6 +60,8 @@ export default function NavBar() {
     PagePermission.BOOKING
   );
   const pathname = usePathname();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const netId = userEmail?.split("@")[0];
 
@@ -169,7 +173,7 @@ export default function NavBar() {
     <Nav>
       <LogoBox onClick={handleClickHome}>
         <Image src={SVGLOGO} alt="Media Commons logo" height={40} />
-        <Title as="h1">Media Commons {envTitle}</Title>
+        {!isMobile && <Title as="h1">Media Commons {envTitle}</Title>}
       </LogoBox>
       <Box display="flex" alignItems="center">
         {button}

diff --git a/booking-app/components/src/client/routes/myBookings/myBookingsPage.tsx b/booking-app/components/src/client/routes/myBookings/myBookingsPage.tsx
@@ -11,10 +11,15 @@ const Center = styled(Box)`
   align-items: center;
 `;
 
+const Container = styled(Box)`
+  width: 65%;
+  margin: 48px;
+`;
+
 export default function MyBookingsPage() {
   return (
     <Center>
-      <Box width="65%" margin={6}>
+      <Box width={{ xs: "90%", md: "65%" }} margin={6}>
         <Typography variant="h6">Welcome</Typography>
         <Bookings pageContext={PageContextLevel.USER} />
       </Box>