Prevent event creation in the past (#247)

* Prevent event creation in the past * fix: Disable past dates in DatePicker and TimePicker components * fix: Remove unused variables in DatePicker component * Add proper time and date validation --------- Co-authored-by: Akinfolami Akin-Alamu <aoa9@cornell.edu>
cornellh4i · Jun 9, 2024 · 2e0dc2f · 2e0dc2f
1 parent 949b53a
commit 2e0dc2f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 31 deletions.
diff --git a/frontend/src/components/atoms/TimePicker.tsx b/frontend/src/components/atoms/TimePicker.tsx
@@ -1,16 +1,14 @@
 import React, { forwardRef, Ref } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { TimeField } from "@mui/x-date-pickers/TimeField";
-import { IconButton } from "@mui/material";
-import { InputAdornment } from "@mui/material";
-import { AccessTime } from "@mui/icons-material";
+import { TimePicker } from "@mui/x-date-pickers/TimePicker";
 import dayjs from "dayjs";
 
 interface TimePickerProps {
   label: string;
   value?: string;
   error?: string;
+  disablePast?: boolean;
   [key: string]: any;
 }
 
@@ -20,14 +18,20 @@ interface TimePickerProps {
  */
 const CustomTimePicker = forwardRef(
   (
-    { label, value, error = "", ...props }: TimePickerProps,
+    {
+      label,
+      value,
+      error = "",
+      disablePast = false,
+      ...props
+    }: TimePickerProps,
     ref: Ref<HTMLInputElement>
   ) => {
     return (
       <div>
         <div className="mb-1">{label}</div>
         <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <TimeField
+          <TimePicker
             sx={{
               "& .MuiInputBase-root": {
                 borderRadius: "8px",
@@ -36,24 +40,10 @@ const CustomTimePicker = forwardRef(
                 height: "9px",
               },
             }}
-            fullWidth
             label=""
             defaultValue={value ? dayjs(value) : undefined}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    className="cursor-default"
-                    disableRipple
-                    edge="end"
-                  >
-                    <AccessTime />
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-            slotProps={{ textField: { error: error !== "" } }}
             ref={ref}
+            disablePast={disablePast}
             {...props}
           />
         </LocalizationProvider>

diff --git a/frontend/src/components/organisms/EventForm.tsx b/frontend/src/components/organisms/EventForm.tsx
@@ -243,21 +243,27 @@ const EventForm = ({
 
   /** Helper for handling creating events */
   const handleCreateEvent: SubmitHandler<FormValues> = async (data) => {
-    try {
-      await handleCreateNewEvent(data);
-    } catch (error) {
-      setErrorNotificationOpen(true);
-      setErrorMessage("We were unable to create this event. Please try again");
+    if (timeAndDateValidation()) {
+      try {
+        await handleCreateNewEvent(data);
+      } catch (error) {
+        setErrorNotificationOpen(true);
+        setErrorMessage(
+          "We were unable to create this event. Please try again"
+        );
+      }
     }
   };
 
   /** Helper for handling editing events */
   const handleEditEvent: SubmitHandler<FormValues> = async (data) => {
-    try {
-      await handleEditEventAsync(data);
-    } catch (error) {
-      setErrorNotificationOpen(true);
-      setErrorMessage("We were unable to edit this event. Please try again");
+    if (timeAndDateValidation()) {
+      try {
+        await handleEditEventAsync(data);
+      } catch (error) {
+        setErrorNotificationOpen(true);
+        setErrorMessage("We were unable to edit this event. Please try again");
+      }
     }
   };
 
@@ -271,6 +277,20 @@ const EventForm = ({
     }
   };
 
+  /** Performs validation to ensure event starts after current time */
+  const timeAndDateValidation = () => {
+    const { startTime, startDate } = getValues();
+    const startDateTime = convertToISO(startTime, startDate);
+    if (new Date(startDateTime) <= new Date()) {
+      setErrorNotificationOpen(true);
+      setErrorMessage("Created event cannot be in the past.");
+      return false;
+    } else {
+      setErrorMessage(null);
+      return true;
+    }
+  };
+
   /** Confirmation modal for canceling an event */
   const ModalBody = ({ handleClose }: modalBodyProps) => {
     return (