update column names and add type checks

ITPNYU · Apr 6, 2024 · 9338ea7 · 9338ea7
1 parent 8b85c18
commit 9338ea7
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 81 deletions.
diff --git a/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx b/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx
@@ -70,7 +70,7 @@ export const Bookings: React.FC<BookingsProps> = ({
                   {!isUserView && (
                     <BookingActions
                       status={status}
-                      calendarEventId={booking.calendarId}
+                      calendarEventId={booking.calendarEventId}
                     />
                   )}
                   <td className="px-2 py-4 w-24">{status}</td>

diff --git a/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts b/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts
@@ -6,7 +6,7 @@ export default function getBookingStatus(
 ): BookingStatusLabel {
   const bookingStatusLabel = () => {
     const bookingStatusMatch = bookingStatuses.filter(
-      (row) => row.calendarId === booking.calendarId
+      (row) => row.calendarEventId === booking.calendarEventId
     )[0];
     if (bookingStatusMatch === undefined) return BookingStatusLabel.UNKNOWN;
     if (bookingStatusMatch.checkedInAt !== '') {

diff --git a/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx b/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx
@@ -7,9 +7,9 @@ import { RoomSetting } from '../../../../types';
 import { formatDate } from '../../../utils/date';
 
 type CalendarProps = {
-  allRooms: any[];
+  allRooms: RoomSetting[];
   selectedRooms: RoomSetting[];
-  handleSetDate: any;
+  handleSetDate: (x: DateSelectArg) => void;
   refs?: any[];
 };
 

diff --git a/media_commons_booking_app/src/client/routes/booking/components/MultipleCalendars.tsx b/media_commons_booking_app/src/client/routes/booking/components/MultipleCalendars.tsx
@@ -1,10 +1,16 @@
 import React, { useEffect, useState } from 'react';
 
 import { Calendars } from './Calendars';
+import { DateSelectArg } from '@fullcalendar/core';
 import { RoomSetting } from '../../../../types';
 import { SelectRooms } from './SelectRooms';
 
-export const MultipleCalendars = ({ allRooms, handleSetDate }) => {
+interface Props {
+  allRooms: RoomSetting[];
+  handleSetDate: (x: DateSelectArg, y: RoomSetting[]) => void;
+}
+
+export const MultipleCalendars = ({ allRooms, handleSetDate }: Props) => {
   const [calendarRefs, setCalendarRefs] = useState([]);
   const [loading, setLoading] = useState(true);
   const [checkedRoomIds, setCheckedRoomIds] = useState<string[]>([]);
@@ -55,7 +61,7 @@ export const MultipleCalendars = ({ allRooms, handleSetDate }) => {
     }
   };
 
-  const handleSubmit = (bookInfo) => {
+  const handleSubmit = (bookInfo: DateSelectArg) => {
     handleSetDate(bookInfo, checkedRooms);
   };
 

diff --git a/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx b/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx
@@ -1,6 +1,11 @@
-import { BookingStatusLabel, CalendarEvent } from '../../../../types';
-import React, { useEffect, useRef, useState } from 'react';
+import {
+  BookingStatusLabel,
+  CalendarEvent,
+  RoomSetting,
+} from '../../../../types';
+import React, { useEffect, useState } from 'react';
 
+import { DateSelectArg } from '@fullcalendar/core';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import googleCalendarPlugin from '@fullcalendar/google-calendar';
@@ -10,14 +15,23 @@ import timeGridPlugin from '@fullcalendar/timegrid'; // a plugin!
 
 const TITLE_TAG = '[Click to Delete]';
 
+interface Props {
+  allRooms: RoomSetting[];
+  bookingTimeEvent: DateSelectArg;
+  isOverlap: (x: DateSelectArg) => boolean;
+  room: RoomSetting;
+  selectedRooms: RoomSetting[];
+  setBookingTimeEvent: (x: DateSelectArg) => void;
+}
+
 export const RoomCalendar = ({
   room,
   selectedRooms,
   allRooms,
   bookingTimeEvent,
   setBookingTimeEvent,
   isOverlap,
-}) => {
+}: Props) => {
   const [events, setEvents] = useState<CalendarEvent[]>([]);
 
   useEffect(() => {
@@ -29,7 +43,7 @@ export const RoomCalendar = ({
     fetchCalendarEvents(
       process.env.CALENDAR_ENV === 'production'
         ? room.calendarIdProd
-        : room.calendarId
+        : room.calendarIdDev
     );
   }, []);
 

diff --git a/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx b/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
@@ -1,5 +1,6 @@
 import {
   Booking,
+  BookingFormDetails,
   BookingStatusLabel,
   Inputs,
   RoomSetting,
@@ -49,12 +50,14 @@ export default function useSubmitBooking(): [
     if (process.env.CALENDAR_ENV === 'production') {
       return room.calendarIdProd;
     } else {
-      return room.calendarId;
+      return room.calendarIdDev;
     }
   };
 
-  const sendApprovalEmail = (recipients: string[], contents: Booking) => {
-    var subject = 'Approval Request';
+  const sendApprovalEmail = (
+    recipients: string[],
+    contents: BookingFormDetails
+  ) => {
     recipients.forEach((recipient) =>
       serverFunctions.sendHTMLEmail(
         'approval_email',
@@ -140,10 +143,10 @@ export default function useSubmitBooking(): [
       const getApprovalUrl = serverFunctions.approvalUrl(calendarEventId);
       const getRejectedUrl = serverFunctions.rejectUrl(calendarEventId);
       Promise.all([getApprovalUrl, getRejectedUrl]).then((values) => {
-        const userEventInputs: Booking = {
-          calendarEventId: calendarEventId,
+        const userEventInputs: BookingFormDetails = {
+          calendarEventId,
           roomId: selectedRoomIds,
-          email: email,
+          email,
           startDate: bookingCalendarInfo?.startStr,
           endDate: bookingCalendarInfo?.endStr,
           approvalUrl: values[0],

diff --git a/media_commons_booking_app/src/server/admin.ts b/media_commons_booking_app/src/server/admin.ts
@@ -3,6 +3,7 @@ import {
   TableNames,
   getSecondApproverEmail,
 } from '../policy';
+import { BookingFormDetails, BookingStatusLabel } from '../types';
 import { approvalUrl, rejectUrl } from './ui';
 import {
   fetchById,
@@ -12,13 +13,11 @@ import {
   updateActiveSheetValueById,
 } from './db';
 import { inviteUserToCalendarEvent, updateEventPrefix } from './calendars';
-import { sendHTMLEmail, sendTextEmail } from './emails';
 
-import { BookingStatusLabel } from '../types';
+import { sendHTMLEmail } from './emails';
 
-export const bookingContents = (id: string) => {
+export const bookingContents = (id: string): BookingFormDetails => {
   const bookingObj = fetchById(TableNames.BOOKING, id);
-  bookingObj.calendarEventId = id;
   bookingObj.approvalUrl = approvalUrl(id);
   bookingObj.rejectedUrl = rejectUrl(id);
   return bookingObj;
@@ -78,21 +77,24 @@ export const approveBooking = (id: string) => {
   }
 };
 
-export const bookingTitle = (id: string) =>
-  getActiveSheetValueById(TableNames.BOOKING, id, 16);
-
-export const sendConfirmationEmail = (id, status) => {
+export const sendConfirmationEmail = (
+  calendarEventId: string,
+  status: BookingStatusLabel
+) => {
   const email = getSecondApproverEmail(process.env.BRANCH_NAME);
-  const headerMessage = 'This is confirmation email.';
-  sendBookingDetailEmail(id, email, headerMessage, status);
+  const headerMessage = 'This is a confirmation email.';
+  sendBookingDetailEmail(calendarEventId, email, headerMessage, status);
 };
 
-export const sendBookingDetailEmail = (id, email, headerMessage, status) => {
-  const title = bookingTitle(id);
-  const contents = bookingContents(id);
+export const sendBookingDetailEmail = (
+  calendarEventId: string,
+  email: string,
+  headerMessage: string,
+  status: BookingStatusLabel
+) => {
+  const contents = bookingContents(calendarEventId);
   contents.headerMessage = headerMessage;
-  console.log('contents', contents);
-  sendHTMLEmail('booking_detail', contents, email, status, title, '');
+  sendHTMLEmail('booking_detail', contents, email, status, contents.title, '');
 };
 
 export const approveEvent = (id: string) => {
@@ -104,6 +106,7 @@ export const approveEvent = (id: string) => {
 
   const headerMessage =
     'Your reservation request for Media Commons is approved.';
+  console.log('sending booking detail email...');
   sendBookingDetailEmail(
     id,
     guestEmail,

diff --git a/media_commons_booking_app/src/server/calendars.ts b/media_commons_booking_app/src/server/calendars.ts
@@ -1,8 +1,3 @@
-// export const getEvents = async (calendarId: string, startCalendarDate, endCalendarDate) => {
-//   const calendar = CalendarApp.getCalendarById(calendarId);
-//   const startDate = new Date(startCalendarDate);
-//   const endDate = new Date(endCalendarDate);
-
 import { RoomSetting } from '../types';
 import { TableNames } from '../policy';
 import { getAllActiveSheetRows } from './db';
@@ -36,8 +31,8 @@ export const addEventToCalendar = (
   return event.getId();
 };
 
-export const confirmEvent = (calendarId: string) => {
-  const event = CalendarApp.getEventById(calendarId);
+export const confirmEvent = (calendarEventId: string) => {
+  const event = CalendarApp.getEventById(calendarEventId);
   event.setTitle(event.getTitle().replace('[HOLD]', '[CONFIRMED]'));
   // @ts-expect-error GAS type doesn't match the documentation
   event.setColor(CalendarApp.EventColor.GREEN);
@@ -61,35 +56,44 @@ export const getCalendarEvents = (calendarId: string) => {
   return formattedEvents;
 };
 
-const allRoomIds = () => {
+const getAllRoomCalendarIds = (): string[] => {
   const rows = getAllActiveSheetRows(TableNames.ROOMS);
-  const ids = JSON.parse(rows).map((row: RoomSetting) => row.calendarId);
+  const ids = JSON.parse(rows).map((room: RoomSetting) =>
+    process.env.CALENDAR_ENV === 'production'
+      ? room.calendarIdProd
+      : room.calendarIdDev
+  );
   return ids;
 };
 
 export const inviteUserToCalendarEvent = (
-  eventId: string,
+  calendarEventId: string,
   guestEmail: string
 ) => {
   console.log(`Invite User: ${guestEmail}`);
   //TODO: getting roomId from booking sheet
-  const roomIds = allRoomIds();
-  roomIds.forEach((roomId) => {
-    const calendar = CalendarApp.getCalendarById(roomId);
-    const event = calendar.getEventById(eventId);
+  const roomCalendarIds = getAllRoomCalendarIds();
+  roomCalendarIds.forEach((roomCalendarId) => {
+    const calendar = CalendarApp.getCalendarById(roomCalendarId);
+    const event = calendar.getEventById(calendarEventId);
     if (event) {
       event.addGuest(guestEmail);
-      console.log(`Invited ${guestEmail} to room: ${roomId} event: ${eventId}`);
+      console.log(
+        `Invited ${guestEmail} to room: ${roomCalendarId} event: ${calendarEventId}`
+      );
     }
   });
 };
 
-export const updateEventPrefix = (id: string, newPrefix: string) => {
-  const roomIds = allRoomIds();
+export const updateEventPrefix = (
+  calendarEventId: string,
+  newPrefix: string
+) => {
+  const roomCalendarIds = getAllRoomCalendarIds();
   //TODO: getting roomId from booking sheet
-  roomIds.map((roomId) => {
-    const calendar = CalendarApp.getCalendarById(roomId);
-    const event = calendar.getEventById(id);
+  roomCalendarIds.map((roomCalendarId) => {
+    const calendar = CalendarApp.getCalendarById(roomCalendarId);
+    const event = calendar.getEventById(calendarEventId);
     const description =
       ' Cancellation Policy: To cancel reservations please email the Media Commons Team([email protected]) at least 24 hours before the date of the event. Failure to cancel may result in restricted use of event spaces.';
     if (event) {

diff --git a/media_commons_booking_app/src/server/db.ts b/media_commons_booking_app/src/server/db.ts
@@ -5,17 +5,6 @@ import {
   TableNames,
 } from '../policy';
 
-function formatHeaderString(header: string): string {
-  // replace all spaces with underscores
-  let snakeCase = header.replace(/ /g, '_');
-  // convert snake_case_string to camelCaseString
-  let camelCase = snakeCase.replace(/([-_][a-z])/gi, ($1) => {
-    return $1.toUpperCase().replace('-', '').replace('_', '');
-  });
-  // ensure first letter is lowercased
-  return camelCase.charAt(0).toLowerCase() + camelCase.slice(1);
-}
-
 const sheetToStrings = (rows: any[][] | undefined) =>
   (rows || []).map((row) => row.map((cell) => `${cell}`));
 
@@ -24,7 +13,7 @@ function sheetRowToJSON(headers: string[], row: any[]) {
   headers
     .filter((header) => header.length > 0)
     .forEach((header, index) => {
-      rowObject[formatHeaderString(header)] = `${row[index]}`;
+      rowObject[header] = `${row[index]}`;
     });
   return rowObject;
 }

diff --git a/media_commons_booking_app/src/server/ui.ts b/media_commons_booking_app/src/server/ui.ts
@@ -1,26 +1,18 @@
-import { appendRowActive, getAllActiveSheetRows } from './db';
 import { approveBooking, reject } from './admin';
 
-import { TableNames } from '../policy';
-
-// export const addBookingStatusRequest = (calendarId: string, email: string) => {
-//   const row = [calendarId, email, new Date()];
-//   appendRowActive(TableNames.BOOKING_STATUS, row);
-// };
-
 export const scriptURL = () => {
   const url = ScriptApp.getService().getUrl();
   return url;
 };
 
-export const approvalUrl = (calendarId) => {
+export const approvalUrl = (calendarEventId: string) => {
   const url = ScriptApp.getService().getUrl();
-  return `${url}?action=approve&page=admin&calendarId=${calendarId}`;
+  return `${url}?action=approve&page=admin&calendarEventId=${calendarEventId}`;
 };
 
-export const rejectUrl = (calendarId) => {
+export const rejectUrl = (calendarEventId: string) => {
   const url = ScriptApp.getService().getUrl();
-  return `${url}?action=reject&page=admin&calendarId=${calendarId}`;
+  return `${url}?action=reject&page=admin&calendarEventId=${calendarEventId}`;
 };
 
 export const getActiveUserEmail = () => {
@@ -34,13 +26,13 @@ export const getActiveUserEmail = () => {
 export const doGet = (e) => {
   console.log('DO GET', JSON.stringify(e));
   var action = e.parameter['action'];
-  var calendarId = e.parameter['calendarId'];
+  var calendarEventId = e.parameter['calendarEventId'];
 
   if (action === 'approve') {
-    approveBooking(calendarId);
+    approveBooking(calendarEventId);
     return HtmlService.createHtmlOutputFromFile('approval');
   } else if (action === 'reject') {
-    reject(calendarId);
+    reject(calendarEventId);
     return HtmlService.createHtmlOutputFromFile('reject');
   }
 

diff --git a/media_commons_booking_app/src/types.ts b/media_commons_booking_app/src/types.ts
@@ -9,16 +9,22 @@ export type Ban = {
 };
 
 export type Booking = Inputs & {
-  calendarId: string;
+  calendarEventId: string;
   email: string;
   startDate: string;
   endDate: string;
   roomId: string;
   devBranch: string;
 };
 
+export type BookingFormDetails = Booking & {
+  approvalUrl: string;
+  rejectUrl: string;
+  headerMessage?: string;
+};
+
 export type BookingStatus = {
-  calendarId: string;
+  calendarEventId: string;
   email: string;
   requestedAt: string;
   firstApprovedAt: string;
@@ -115,7 +121,7 @@ export type RoomSetting = {
   roomId: string;
   name: string;
   capacity: string;
-  calendarId: string;
+  calendarIdDev: string;
   calendarIdProd: string;
   calendarRef?: any;
 };