From f412444a3dbe422a248e44ca4080f9da73fe7113 Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Tue, 14 May 2024 17:26:34 -0700
Subject: [PATCH 01/17] update events creator sidebar

---
 backend/src/controllers/eventDetails.ts       |   3 +-
 backend/src/models/eventDetails.ts            |   1 +
 backend/src/validators/eventDetails.ts        |   8 +
 frontend/src/api/eventDetails.ts              |  20 +-
 .../app/admin/event-creator/page.module.css   |  68 +++
 frontend/src/app/admin/event-creator/page.tsx | 389 +++++++++++++++++
 .../src/components/EventSidebar.module.css    | 191 +++++++++
 frontend/src/components/EventSidebar.tsx      | 401 ++++++++++++++++++
 8 files changed, 1077 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/admin/event-creator/page.module.css
 create mode 100644 frontend/src/app/admin/event-creator/page.tsx
 create mode 100644 frontend/src/components/EventSidebar.module.css
 create mode 100644 frontend/src/components/EventSidebar.tsx

diff --git a/backend/src/controllers/eventDetails.ts b/backend/src/controllers/eventDetails.ts
index b0af355d..68d206b5 100644
--- a/backend/src/controllers/eventDetails.ts
+++ b/backend/src/controllers/eventDetails.ts
@@ -35,7 +35,7 @@ export const getEventDetails: RequestHandler = async (req, res, next) => {
 
 export const createEventDetails: RequestHandler = async (req, res, next) => {
   const errors = validationResult(req);
-  const { name, description, guidelines, date, location, imageURI } = req.body;
+  const { name, description, content, guidelines, date, location, imageURI } = req.body;
 
   try {
     validationErrorParser(errors);
@@ -43,6 +43,7 @@ export const createEventDetails: RequestHandler = async (req, res, next) => {
     const eventDetails = await EventDetails.create({
       name,
       description,
+      content,
       guidelines,
       date,
       location,
diff --git a/backend/src/models/eventDetails.ts b/backend/src/models/eventDetails.ts
index e6d47ac7..0d346323 100644
--- a/backend/src/models/eventDetails.ts
+++ b/backend/src/models/eventDetails.ts
@@ -3,6 +3,7 @@ import { InferSchemaType, Schema, model } from "mongoose";
 const eventDetailsSchema = new Schema({
   name: { type: String, required: true },
   description: { type: String, required: true },
+  content: { type: String, required: true },
   guidelines: { type: String, required: true },
   date: { type: String, required: true },
   location: { type: String, required: true },
diff --git a/backend/src/validators/eventDetails.ts b/backend/src/validators/eventDetails.ts
index 91ec8450..1dc046cc 100644
--- a/backend/src/validators/eventDetails.ts
+++ b/backend/src/validators/eventDetails.ts
@@ -21,6 +21,13 @@ const makeDescriptionValidator = () =>
     .bail()
     .isString()
     .withMessage("description must be a string");
+const makeContentValidator = () =>
+  body("content")
+    .exists()
+    .withMessage("content is required")
+    .bail()
+    .isString()
+    .withMessage("content must be a string");
 const makeGuidlinesValidator = () =>
   body("guidelines")
     .exists()
@@ -56,6 +63,7 @@ const makeImageURIValidator = () =>
 export const createEventDetails = [
   makeNameValidator(),
   makeDescriptionValidator(),
+  makeContentValidator(),
   makeGuidlinesValidator(),
   makeDateValidator(),
   makeLocationValidator(),
diff --git a/frontend/src/api/eventDetails.ts b/frontend/src/api/eventDetails.ts
index d354d35c..faf91245 100644
--- a/frontend/src/api/eventDetails.ts
+++ b/frontend/src/api/eventDetails.ts
@@ -1,4 +1,4 @@
-import { get, handleAPIError, post, put } from "./requests";
+import { del, get, handleAPIError, post, put } from "./requests";
 
 import type { APIResult } from "./requests";
 
@@ -6,6 +6,7 @@ export type EventDetails = {
   _id: string;
   name: string;
   description: string;
+  content: string;
   guidelines: string;
   date: string;
   location: string;
@@ -32,9 +33,10 @@ export async function getAllEventDetails(): Promise<APIResult<EventDetails[]>> {
   }
 }
 
-type CreateEventDetailsRequest = {
+export type CreateEventDetailsRequest = {
   name: string;
   description: string;
+  content: string;
   guidelines: string;
   date: string;
   location: string;
@@ -49,14 +51,16 @@ export async function createEventDetails(
     const json = (await response.json()) as EventDetails;
     return { success: true, data: json };
   } catch (error) {
+    console.log(error);
     return handleAPIError(error);
   }
 }
 
-type UpdateEventDetailsRequest = {
+export type UpdateEventDetailsRequest = {
   _id: string;
   name: string;
   description: string;
+  content: string;
   guidelines: string;
   date: string;
   location: string;
@@ -77,3 +81,13 @@ export async function updateEventDetails(
     return handleAPIError(error);
   }
 }
+
+export async function deleteEventDetails(id: string): Promise<APIResult<EventDetails>> {
+  try {
+    const response = await del(`/api/eventDetails/${id}`);
+    const json = (await response.json()) as EventDetails;
+    return { success: true, data: json };
+  } catch (error) {
+    return handleAPIError(error);
+  }
+}
diff --git a/frontend/src/app/admin/event-creator/page.module.css b/frontend/src/app/admin/event-creator/page.module.css
new file mode 100644
index 00000000..a76ae236
--- /dev/null
+++ b/frontend/src/app/admin/event-creator/page.module.css
@@ -0,0 +1,68 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Roboto+Slab:wght@100..900&display=swap");
+
+.page {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 282px;
+  padding-top: 22px;
+  padding-bottom: 50px;
+}
+
+.Headings {
+  text-align: left;
+  font: var(--font-body);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px; /* 133.333% */
+  color: white;
+}
+
+.cellentry {
+  text-align: left;
+  font: var(--font-body);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 133.333% */
+  color: black;
+}
+
+.headingBackground {
+  background-color: #694c97; /* Replace with your desired color */
+}
+
+.cellBorderStyle {
+  border-right: 1px solid #c9c9c9; /* Adjust the border style as needed */
+}
+
+.selectedRow {
+  border-radius: 5px;
+  box-shadow: inset 0 0 0 2px #bda7e0;
+  box-shadow: inset 0 0.5px 0 2px #bda7e0;
+}
+.selectedCol {
+  background: rgba(105, 76, 151, 0.05);
+}
+
+.evenRow {
+  background-color: #ffffff; /* White color for even rows */
+}
+
+.oddRow {
+  background-color: #f8f5fb; /* #F8F5FB color for odd rows */
+}
+
+.sidebar-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 400px; /* Adjust width as needed */
+  transition: transform 0.3s ease-out;
+  transform: translateX(100%);
+}
+
+.sidebar-container.open {
+  transform: translateX(0%);
+}
diff --git a/frontend/src/app/admin/event-creator/page.tsx b/frontend/src/app/admin/event-creator/page.tsx
new file mode 100644
index 00000000..cb280682
--- /dev/null
+++ b/frontend/src/app/admin/event-creator/page.tsx
@@ -0,0 +1,389 @@
+"use client";
+import Box from "@mui/material/Box";
+import {
+  DataGrid,
+  GridColDef,
+  GridEventListener,
+  GridRowClassNameParams,
+  GridRowId,
+} from "@mui/x-data-grid";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+
+import styles from "./page.module.css";
+
+import {
+  CreateEventDetailsRequest,
+  EventDetails,
+  createEventDetails,
+  getAllEventDetails,
+  getEventDetails,
+  updateEventDetails,
+} from "@/api/eventDetails";
+import EventSidebar from "@/components/EventSidebar";
+import PageToggle from "@/components/PageToggle";
+
+export default function EventCreator() {
+  const columns: GridColDef<(typeof rows)[number]>[] = [
+    {
+      field: "name",
+      headerName: "Event Title",
+      width: 372.29,
+      editable: false,
+      resizable: false,
+      headerClassName: `${styles.headingBackground} ${styles.cellBorderStyle} ${styles.Headings}`,
+      cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
+      disableColumnMenu: true,
+      renderHeader: () => <div>Event Title</div>,
+    },
+    {
+      field: "description",
+      headerName: "Subtitle",
+      width: 372.29,
+      editable: false,
+      resizable: false,
+      headerClassName: `${styles.Headings} ${styles.headingBackground} ${styles.cellBorderStyle}`,
+      cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
+      disableColumnMenu: true,
+      renderHeader: () => <div>Subtitle</div>,
+    },
+
+    {
+      field: "date",
+      headerName: "Date",
+      width: 372.29,
+      editable: false,
+      resizable: false,
+      headerClassName: `${styles.Headings} ${styles.headingBackground} ${styles.cellBorderStyle}`,
+      cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
+      disableColumnMenu: true,
+      renderHeader: () => <div>Date</div>,
+    },
+  ];
+
+  const [rows, setRow] = useState<EventDetails[]>([]);
+  const [rowsCurrent, setRowsCurrent] = React.useState(rows);
+  const [currentEvents, setCurrentEvents] = useState<EventDetails[]>([]);
+  const [pastEvents, setPastEvents] = useState<EventDetails[]>([]);
+  const [pageToggle, setPageToggle] = useState(0);
+  const [selectedRow, setSelectedRow] = useState<GridRowId | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(Math.ceil(rows.length / 14));
+  const [selectedEvent, setSelectedEvent] = useState<EventDetails | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [rerenderKey, setRerenderKey] = useState(0);
+
+  useEffect(() => {
+    getAllEventDetails()
+      .then((result) => {
+        if (result.success) {
+          const currentYear = new Date().getFullYear();
+
+          const filteredCurrent = result.data.filter((item) => {
+            return true;
+            // to implement
+          });
+
+          const formattedCurrentRows = filteredCurrent.map((item) => ({
+            ...item,
+            id: item._id.toString(),
+          }));
+
+          setCurrentEvents(formattedCurrentRows);
+
+          const filteredPast = result.data.filter((item) => {
+            // to implement
+          });
+
+          const formattedPastRows = filteredPast.map((item) => ({
+            ...item,
+            id: item._id.toString(),
+          }));
+
+          setPastEvents(formattedPastRows);
+
+          setRow(formattedCurrentRows);
+          setRowsCurrent(formattedCurrentRows);
+        } else {
+          console.error("ERROR:", result.error);
+        }
+      })
+      .catch((error) => {
+        alert(error);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (selectedRow) {
+      getEventDetails(selectedRow?.toString())
+        .then((result) => {
+          if (result.success) {
+            setSelectedEvent(result.data);
+            setRerenderKey((prevKey) => prevKey + 1);
+          } else {
+            console.error("ERROR:", result.error);
+          }
+        })
+        .catch((error) => {
+          alert(error);
+        });
+    } else {
+      setSelectedEvent(null);
+    }
+  }, [selectedRow]);
+
+  useEffect(() => {
+    if (sidebarOpen) {
+      setRerenderKey((prevKey) => prevKey + 1);
+    }
+  }, [sidebarOpen]);
+
+  const handleTogglePage = (index: number) => {
+    if (index === 0) {
+      setRowsCurrent(currentEvents);
+    } else if (index === 1) {
+      setRowsCurrent(pastEvents);
+    }
+    setPageToggle(index);
+  };
+
+  const openEvent = (createNew: boolean) => {
+    if (createNew) {
+      setSelectedRow(null);
+    }
+    setSidebarOpen(true);
+  };
+
+  useEffect(() => {
+    // Update total pages when rows change
+    setTotalPages(Math.ceil(rows.length / 14));
+  }, [rows]);
+
+  const handleCellClick: GridEventListener<"rowClick"> = (params) => {
+    if (!sidebarOpen) {
+      setSelectedRow(params.id === selectedRow ? null : params.id);
+      openEvent(false);
+    }
+  };
+
+  const handleSetSidebarOpen = (open: boolean) => {
+    setSidebarOpen(open);
+  };
+  const handleUpdateEvent = (eventData: EventDetails) => {
+    updateEventDetails(eventData)
+      .then((result) => {
+        if (!result.success) {
+          alert(result.error);
+          console.error("ERROR:", result.error);
+        }
+      })
+      .catch((error) => {
+        alert(error);
+      });
+  };
+
+  const handleCreateEvent = (eventData: CreateEventDetailsRequest) => {
+    createEventDetails(eventData)
+      .then((result) => {
+        if (!result.success) {
+          alert(result.error);
+          console.error("ERROR:", result.error);
+        }
+      })
+      .catch((error) => {
+        alert(error);
+      });
+  };
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const getRowClassName = (params: GridRowClassNameParams) => {
+    let rowClasses = "";
+
+    // Add alternating row colors
+    rowClasses += params.indexRelativeToCurrentPage % 2 === 0 ? styles.evenRow : styles.oddRow;
+
+    // Add border to the selected row
+    if (selectedRow === params.id) {
+      rowClasses += ` ${styles.selectedRow}`;
+    }
+    return rowClasses;
+  };
+
+  return (
+    <div className={styles.page}>
+      <Box sx={{ height: 720, width: 1119, justifyContent: "space-between" }}>
+        {sidebarOpen && (
+          <div className={`${styles.sidebarContainer} ${sidebarOpen ? styles.open : ""}`}>
+            <EventSidebar
+              key={rerenderKey}
+              eventDetails={selectedEvent}
+              setSidebarOpen={handleSetSidebarOpen}
+              updateEvent={handleUpdateEvent}
+              createEvent={handleCreateEvent}
+            />
+          </div>
+        )}
+
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "30px",
+            marginTop: "50px",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "flex-start",
+              alignItems: "center",
+            }}
+          >
+            <PageToggle
+              pages={["Current Events", "Past Events"]}
+              onTogglePage={handleTogglePage}
+              currPage={pageToggle}
+            />
+          </Box>
+
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "flex-end",
+              alignItems: "center",
+            }}
+          >
+            <button
+              onClick={() => {
+                openEvent(true);
+              }}
+              style={{
+                position: "relative",
+                fontFamily: "Open Sans",
+                fontWeight: 700,
+                fontSize: "16px",
+                lineHeight: "24px",
+                letterSpacing: "0.32",
+                width: 196,
+                height: 40,
+                backgroundColor: "#694C97",
+                color: "#FFF",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                borderRadius: "4px",
+              }}
+            >
+              <img
+                src="/ic_add.svg"
+                alt="Add Icon"
+                style={{ width: 24, height: 24, marginRight: 5 }}
+              />
+              Add Event
+            </button>
+          </Box>
+        </Box>
+
+        <DataGrid
+          columns={columns}
+          rows={rowsCurrent.slice((currentPage - 1) * 14, currentPage * 14)}
+          autoHeight
+          rowHeight={48}
+          hideFooter
+          rowSelectionModel={selectedRow !== null ? [selectedRow] : []}
+          onCellClick={handleCellClick}
+          getRowClassName={getRowClassName} // Here's where you pass the function
+          initialState={{
+            pagination: {
+              paginationModel: {
+                pageSize: 14, // Set page size
+              },
+            },
+          }}
+          sx={{
+            "& .MuiDataGrid-row:hover": {
+              background: "rgba(105, 76, 151, 0.05)",
+            },
+          }}
+          disableRowSelectionOnClick
+        />
+        <Box
+          sx={{
+            width: 245,
+            height: 80,
+            position: "relative",
+            gap: 16,
+            marginLeft: 53,
+            marginTop: 5,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontFamily: "Open Sans",
+              fontWeight: 400,
+              fontSize: "16px",
+              lineHeight: "24px",
+              color: "#909090",
+            }}
+          >
+            <Image
+              src="/ic_caretleft.svg" //
+              alt="Previous page"
+              width={24}
+              height={24}
+              className={styles.arrow}
+              onClick={handlePreviousPage}
+              style={{ marginRight: 15, opacity: currentPage === 1 ? 0.5 : 1 }} // Adjust opacity for disabled state
+            />
+            <span style={{ marginRight: "15px" }}>Page </span>
+            <div
+              style={{
+                display: "inline-block",
+                padding: "2px 11px",
+                margin: "0 5px",
+                fontFamily: "Open Sans",
+                fontWeight: 400,
+                fontSize: "16px",
+                lineHeight: "24px",
+                color: "#000000",
+                borderRadius: "4px",
+                border: "1px solid #D8D8D8",
+              }}
+            >
+              {currentPage}
+            </div>
+            <span style={{ marginLeft: "15px" }}> of </span>
+            <span style={{ marginLeft: "15px" }}> {totalPages}</span>
+            <Image
+              src="/ic_caretright.svg"
+              alt="Next page"
+              width={24}
+              height={24}
+              className={styles.arrow}
+              onClick={handleNextPage}
+              style={{ marginLeft: 15, opacity: currentPage === totalPages ? 0.5 : 1 }} // Adjust opacity for disabled state
+            />
+          </div>
+        </Box>
+      </Box>
+    </div>
+  );
+}
diff --git a/frontend/src/components/EventSidebar.module.css b/frontend/src/components/EventSidebar.module.css
new file mode 100644
index 00000000..5383cf52
--- /dev/null
+++ b/frontend/src/components/EventSidebar.module.css
@@ -0,0 +1,191 @@
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  width: 38vw;
+  z-index: 3;
+  border-left: 1px solid #c9c9c9;
+  background: #fff;
+}
+
+.grayOut {
+  opacity: 0.3;
+  background: #484848;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 38vw;
+}
+
+.closeWindow {
+  display: flex;
+  width: 524px;
+  height: 41px;
+  padding: 10px 20px;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  color: var(--Neutral-Gray4, #909090);
+  border-bottom: 1px solid #c9c9c9;
+  font: var(--font-body);
+  font-size: 14px;
+}
+
+.closeWindow:hover {
+  cursor: pointer;
+}
+
+.sidebarContents {
+  padding: 60px;
+  padding-left: 35px;
+}
+
+.sidebarContents h1 {
+  font: var(--font-small-subtitle);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 27px */
+  letter-spacing: 0.36px;
+}
+
+.sidebarContents h2 {
+  padding-top: 24px;
+  font: var(--font-body);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+  color: #909090;
+}
+
+.sidebarContents {
+  font: var(--font-body);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+}
+
+.header {
+  display: flex;
+  direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 46px;
+}
+
+.sidebar button {
+  display: flex;
+  padding: 4px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 4px;
+}
+
+.sidebar button img {
+  padding: 4px;
+}
+
+.sidebar button p {
+  font: var(--text-body);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 150%; /* 30px */
+  letter-spacing: 0.7px;
+}
+
+.editButton {
+  background: #694c97;
+  color: #fff;
+}
+
+.cancelButton {
+  font: var(--font-body);
+  background: #fff;
+  border: 1px solid #694c97;
+  color: #694c97;
+}
+
+.saveButton {
+  font: var(--font-body);
+  background: #694c97;
+  color: #fff;
+}
+
+.deleteButton {
+  background: #fff;
+  border: 1px solid #b93b3b;
+  color: #b93b3b;
+}
+
+.bottomButtons {
+  display: flex;
+  direction: row;
+  gap: 24px;
+  justify-content: flex-end;
+  margin-right: 60px;
+  margin-bottom: 77px;
+}
+
+.deleteButtonWrapper {
+  display: flex;
+  direction: row;
+  justify-content: center;
+  margin-top: 50px;
+}
+
+.contentPar {
+  margin-bottom: 1rem;
+}
+
+.sidebar .alert {
+  position: relative;
+  top: 35px;
+}
+
+.sidebar .alert .div {
+  position: absolute;
+}
+
+.sidebar .alert img {
+  padding: 0;
+}
+
+.textField {
+  width: 454px;
+}
+
+.textArea {
+  width: 454px;
+  height: 80px;
+  padding: 12px;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.textAreaLong {
+  width: 454px;
+  height: 120px;
+  padding: 12px;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.textAreaContent {
+  width: 100%;
+  white-space: pre-wrap;
+  font: var(--font-body);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
new file mode 100644
index 00000000..2e704653
--- /dev/null
+++ b/frontend/src/components/EventSidebar.tsx
@@ -0,0 +1,401 @@
+"use client";
+import Image from "next/image";
+import React, { useState } from "react";
+
+import { CreateEventDetailsRequest, EventDetails, deleteEventDetails } from "../api/eventDetails";
+
+import styles from "./EventSidebar.module.css";
+
+import AlertBanner from "@/components/AlertBanner";
+import { TextField } from "@/components/TextField";
+import { WarningModule } from "@/components/WarningModule";
+
+type eventSidebarProps = {
+  eventDetails: null | EventDetails;
+  setSidebarOpen: (open: boolean) => void;
+  updateEvent: (eventData: EventDetails) => boolean;
+  createEvent: (eventData: CreateEventDetailsRequest) => boolean;
+};
+
+type formErrors = {
+  name?: boolean;
+  description?: boolean;
+  content?: boolean;
+  guidelines?: boolean;
+  date?: boolean;
+  location?: boolean;
+};
+
+const EventSidebar = ({
+  eventDetails,
+  setSidebarOpen,
+  updateEvent,
+  createEvent,
+}: eventSidebarProps) => {
+  const [name, setName] = useState(eventDetails ? eventDetails.name : "");
+  const [description, setDescription] = useState(eventDetails ? eventDetails.description : "");
+  const [content, setContent] = useState(eventDetails ? eventDetails.content : "");
+  const [date, setDate] = useState(eventDetails ? eventDetails.date : "");
+  const [location, setLocation] = useState(eventDetails ? eventDetails.location : "");
+  const [guidelines, setGuidelines] = useState(eventDetails ? eventDetails.guidelines : "");
+  const [isEditing, setIsEditing] = useState<boolean>(!eventDetails);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+  const [errors, setErrors] = useState<formErrors>({});
+  const [warningOpen, setWarningOpen] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+
+  const confirmCancel = () => {
+    setName(eventDetails ? eventDetails.name : "");
+    setDescription(eventDetails ? eventDetails.description : "");
+    setContent(eventDetails ? eventDetails.content : "");
+    setDate(eventDetails ? eventDetails.date : "");
+    setLocation(eventDetails ? eventDetails.location : "");
+    setGuidelines(eventDetails ? eventDetails.guidelines : "");
+    setIsEditing(false);
+    setIsDeleting(false);
+    setErrors({});
+    setWarningOpen(false);
+    setSidebarOpen(false);
+  };
+
+  const handleCancel = () => {
+    if (
+      name !== (eventDetails ? eventDetails.name : "") ||
+      description !== (eventDetails ? eventDetails.description : "") ||
+      content !== (eventDetails ? eventDetails.content : "") ||
+      date !== (eventDetails ? eventDetails.date : "") ||
+      location !== (eventDetails ? eventDetails.location : "") ||
+      guidelines !== (eventDetails ? eventDetails.guidelines : "")
+    ) {
+      setWarningOpen(true);
+    } else {
+      confirmCancel();
+    }
+  };
+
+  const handleCloseSidebar = () => {
+    if (
+      name !== (eventDetails ? eventDetails.name : "") ||
+      description !== (eventDetails ? eventDetails.description : "") ||
+      content !== (eventDetails ? eventDetails.content : "") ||
+      date !== (eventDetails ? eventDetails.date : "") ||
+      location !== (eventDetails ? eventDetails.location : "") ||
+      guidelines !== (eventDetails ? eventDetails.guidelines : "")
+    ) {
+      setWarningOpen(true);
+    } else {
+      confirmCancel();
+      setSidebarOpen(false);
+    }
+  };
+
+  const handleSave = () => {
+    setWarningOpen(false);
+    if (
+      name === "" ||
+      description === "" ||
+      content === "" ||
+      date === "" ||
+      location === "" ||
+      guidelines === ""
+    ) {
+      setErrors({
+        name: name === "",
+        description: description === "",
+        content: content === "",
+        date: date === "",
+        location: location === "",
+        guidelines: guidelines === "",
+      });
+    } else {
+      setIsEditing(false);
+      if (eventDetails) {
+        updateEvent({
+          _id: eventDetails._id,
+          name,
+          description,
+          content,
+          guidelines,
+          date,
+          location,
+          imageURI: eventDetails.imageURI,
+        });
+      } else {
+        createEvent({
+          name,
+          description,
+          content,
+          guidelines,
+          date,
+          location,
+          imageURI: "https://tse.ucsd.edu/assets/images/icons__tse-bulb__128.png",
+        });
+      }
+      setIsEditing(false);
+      setErrors({});
+      setShowAlert(true);
+      window.location.reload();
+    }
+  };
+
+  const handleDelete = () => {
+    setIsDeleting(true);
+  };
+
+  const confirmDelete = () => {
+    if (eventDetails) {
+      deleteEventDetails(eventDetails._id)
+        .then((result) => {
+          if (result.success) {
+            console.log("successful deletion");
+          } else {
+            console.error("ERROR:", result.error);
+          }
+        })
+        .catch((error) => {
+          alert(error);
+        });
+      setSidebarOpen(false);
+      window.location.reload();
+    }
+  };
+
+  const alertContent = {
+    text: "Event Saved!",
+  };
+
+  const handleCloseAlert = () => {
+    setShowAlert(false);
+  };
+
+  if (isDeleting) {
+    return (
+      <div className={styles.sidebar}>
+        <div className={styles.alert}>
+          {showAlert && <AlertBanner text={alertContent.text} onClose={handleCloseAlert} />}
+        </div>
+        <div
+          className={styles.closeWindow}
+          onClick={() => {
+            setSidebarOpen(false);
+          }}
+        >
+          <Image src="/ic_doublecaretright.svg" alt="test" width={24} height={24} />
+          <p>Close Window</p>
+        </div>
+        <div className={styles.sidebarContents}>
+          <div className={styles.header}>
+            <h1>Event Details</h1>
+
+            {/* Edit button */}
+            <button
+              onClick={() => {
+                setIsEditing(true);
+              }}
+              className={styles.editButton}
+            >
+              <Image src="/ic_edit.svg" alt="Add Icon" width={24} height={24} />
+              <p>Edit</p>
+            </button>
+          </div>
+          <h2>Event Title</h2>
+          <p>{name}</p>
+          <h2>Event Description (short)</h2>
+          <pre className={styles.textAreaContent}>{description}</pre>
+          <h2>Event Description (long)</h2>
+          <pre className={styles.textAreaContent}>{content}</pre>
+          <h2>Date & Time</h2>
+          <p>{date}</p>
+          <h2>Location</h2>
+          <p>{location}</p>
+          <h2>Guidelines</h2>
+          <pre className={styles.textAreaContent}>{guidelines}</pre>
+          <h2>Image</h2>
+          <p>Placeholder - to be replaced with image</p>
+
+          {/* Delete button */}
+
+          <div className={styles.deleteButtonWrapper}>
+            <button onClick={handleDelete} className={styles.deleteButton}>
+              <p>Delete</p>
+            </button>
+          </div>
+          <div className={styles.grayOut}></div>
+          <WarningModule
+            titleText="Are you sure you want to delete this event?"
+            subtitleText="This action is permanent and cannot be undone."
+            cancelText="No, cancel"
+            actionText="Delete event"
+            cancel={confirmCancel}
+            action={confirmDelete}
+            onClose={confirmCancel}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (isEditing) {
+    return (
+      <div className={styles.sidebar}>
+        {warningOpen && <div className={styles.grayOut}></div>}
+        {warningOpen && (
+          <WarningModule
+            titleText="You have unsaved changes!"
+            subtitleText="Do you want to save the changes you made to this event?"
+            cancelText="Discard changes"
+            actionText="Save changes"
+            cancel={confirmCancel}
+            action={handleSave}
+            onClose={() => {
+              setWarningOpen(false);
+            }}
+          />
+        )}
+        <div
+          className={styles.closeWindow}
+          onClick={() => {
+            handleCloseSidebar();
+          }}
+        >
+          <Image src="/ic_doublecaretright.svg" alt="test" width={24} height={24} />
+          <p>Close Window</p>
+        </div>
+        <div className={styles.sidebarContents}>
+          <div className={styles.header}>
+            <h1>Event Details</h1>
+          </div>
+          <form>
+            <div className={styles.formRow}>
+              <TextField
+                className={styles.textField}
+                label="Event Title"
+                value={name}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setName(event.target.value);
+                }}
+                error={errors.name}
+              />
+              <h2>Event Description (short)</h2>
+              <textarea
+                id="description"
+                className={`${styles.textArea} ${styles.stretch}`}
+                value={description}
+                onChange={(event) => {
+                  setDescription(event.target.value);
+                }}
+              />
+              <h2>Event Description (long)</h2>
+              <textarea
+                id="content"
+                className={`${styles.textAreaLong} ${styles.stretch}`}
+                value={content}
+                onChange={(event) => {
+                  setContent(event.target.value);
+                }}
+              />
+              <TextField
+                className={`${styles.textField} ${styles.stretch}`}
+                label="Date & Time"
+                value={date}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setDate(event.target.value);
+                }}
+                error={errors.date}
+              />
+              <TextField
+                className={`${styles.textField} ${styles.stretch}`}
+                label="Location"
+                value={location}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setLocation(event.target.value);
+                }}
+                error={errors.location}
+              />
+              <h2>Guidelines</h2>
+              <textarea
+                id="guidelines"
+                className={`${styles.textArea} ${styles.stretch}`}
+                value={guidelines}
+                onChange={(event) => {
+                  setGuidelines(event.target.value);
+                }}
+              />
+              <h2>Image</h2>
+              <p>Placeholder - to be replaced with image</p>
+            </div>
+          </form>
+        </div>
+        <div className={styles.bottomButtons}>
+          {/* Cancel button */}
+          <button onClick={handleCancel} className={styles.cancelButton}>
+            <p>Cancel</p>
+          </button>
+          {/* Save button */}
+          <button onClick={handleSave} className={styles.saveButton}>
+            <p>Save</p>
+          </button>
+        </div>
+      </div>
+    );
+
+    //if is deleting
+  } else {
+    // not in edit mode
+    return (
+      <div className={styles.sidebar}>
+        <div className={styles.alert}>
+          {showAlert && <AlertBanner text={alertContent.text} onClose={handleCloseAlert} />}
+        </div>
+        <div
+          className={styles.closeWindow}
+          onClick={() => {
+            setSidebarOpen(false);
+          }}
+        >
+          <Image src="/ic_doublecaretright.svg" alt="test" width={24} height={24} />
+          <p>Close Window</p>
+        </div>
+        <div className={styles.sidebarContents}>
+          <div className={styles.header}>
+            <h1>Event Details</h1>
+
+            {/* Edit button */}
+            <button
+              onClick={() => {
+                setIsEditing(true);
+              }}
+              className={styles.editButton}
+            >
+              <Image src="/ic_edit.svg" alt="Add Icon" width={24} height={24} />
+              <p>Edit</p>
+            </button>
+          </div>
+          <h2>Event Title</h2>
+          <p>{name}</p>
+          <h2>Event Description (short)</h2>
+          <pre className={styles.textAreaContent}>{description}</pre>
+          <h2>Event Description (long)</h2>
+          <pre className={styles.textAreaContent}>{content}</pre>
+          <h2>Date & Time</h2>
+          <p>{date}</p>
+          <h2>Location</h2>
+          <p>{location}</p>
+          <h2>Guidelines</h2>
+          <pre className={styles.textAreaContent}>{guidelines}</pre>
+          <h2>Image</h2>
+          <p>Placeholder - to be replaced with image</p>
+
+          {/* Delete button */}
+          <div className={styles.deleteButtonWrapper}>
+            <button onClick={handleDelete} className={styles.deleteButton}>
+              <p>Delete</p>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default EventSidebar;

From 19d11dbdd55a9d06771dd844cb8a94915fd49892 Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Wed, 15 May 2024 16:28:31 -0700
Subject: [PATCH 02/17] update warning module button styling

---
 .../src/components/WarningModule.module.css   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/components/WarningModule.module.css b/frontend/src/components/WarningModule.module.css
index 8c6ca0da..ecd83d18 100644
--- a/frontend/src/components/WarningModule.module.css
+++ b/frontend/src/components/WarningModule.module.css
@@ -75,3 +75,24 @@
   gap: 18px;
   margin-top: 18px;
 }
+
+.wrapper button {
+  display: flex;
+  padding: 4px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 4px;
+}
+
+.wrapper button img {
+  padding: 4px;
+}
+
+.wrapper button p {
+  font: var(--text-body);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 150%; /* 30px */
+  letter-spacing: 0.7px;
+}

From 8c6a042676fabe239fd3cef4e90576224c2b465b Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Fri, 17 May 2024 00:32:32 -0700
Subject: [PATCH 03/17] fix sidebar scrolling issue

---
 .../src/components/EventSidebar.module.css    |  8 ++++
 frontend/src/components/EventSidebar.tsx      | 48 ++++++++++---------
 .../src/components/WarningModule.module.css   |  2 +-
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/EventSidebar.module.css b/frontend/src/components/EventSidebar.module.css
index 5383cf52..5b9c9e9a 100644
--- a/frontend/src/components/EventSidebar.module.css
+++ b/frontend/src/components/EventSidebar.module.css
@@ -12,6 +12,14 @@
   background: #fff;
 }
 
+.fixedPosition {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 38vw;
+}
+
 .grayOut {
   opacity: 0.3;
   background: #484848;
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 2e704653..e0b87f3d 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -220,16 +220,18 @@ const EventSidebar = ({
               <p>Delete</p>
             </button>
           </div>
-          <div className={styles.grayOut}></div>
-          <WarningModule
-            titleText="Are you sure you want to delete this event?"
-            subtitleText="This action is permanent and cannot be undone."
-            cancelText="No, cancel"
-            actionText="Delete event"
-            cancel={confirmCancel}
-            action={confirmDelete}
-            onClose={confirmCancel}
-          />
+          <div className={styles.fixedPosition}>
+            <div className={styles.grayOut}></div>
+            <WarningModule
+              titleText="Are you sure you want to delete this event?"
+              subtitleText="This action is permanent and cannot be undone."
+              cancelText="No, cancel"
+              actionText="Delete event"
+              cancel={confirmCancel}
+              action={confirmDelete}
+              onClose={confirmCancel}
+            />
+          </div>
         </div>
       </div>
     );
@@ -238,19 +240,21 @@ const EventSidebar = ({
   if (isEditing) {
     return (
       <div className={styles.sidebar}>
-        {warningOpen && <div className={styles.grayOut}></div>}
         {warningOpen && (
-          <WarningModule
-            titleText="You have unsaved changes!"
-            subtitleText="Do you want to save the changes you made to this event?"
-            cancelText="Discard changes"
-            actionText="Save changes"
-            cancel={confirmCancel}
-            action={handleSave}
-            onClose={() => {
-              setWarningOpen(false);
-            }}
-          />
+          <div className={styles.fixedPosition}>
+            <div className={styles.grayOut}></div>
+            <WarningModule
+              titleText="You have unsaved changes!"
+              subtitleText="Do you want to save the changes you made to this event?"
+              cancelText="Discard changes"
+              actionText="Save changes"
+              cancel={confirmCancel}
+              action={handleSave}
+              onClose={() => {
+                setWarningOpen(false);
+              }}
+            />
+          </div>
         )}
         <div
           className={styles.closeWindow}
diff --git a/frontend/src/components/WarningModule.module.css b/frontend/src/components/WarningModule.module.css
index ecd83d18..82efb7bd 100644
--- a/frontend/src/components/WarningModule.module.css
+++ b/frontend/src/components/WarningModule.module.css
@@ -1,6 +1,6 @@
 .wrapper {
   position: absolute;
-  top: 200px;
+  top: 175px;
   padding: 24px;
   background-color: #fff;
   border-radius: 5px;

From 1c701d5a4942567c67c90c238b4fb7cfa88a63a6 Mon Sep 17 00:00:00 2001
From: kevindo0720 <80845738+kevindo0720@users.noreply.github.com>
Date: Wed, 22 May 2024 13:39:11 -0700
Subject: [PATCH 04/17] fixed backend, fixed save and delete functionalities;
 redesign the table; added filter functionalities

---
 backend/src/controllers/eventDetails.ts       | 27 ++++++-
 backend/src/models/eventDetails.ts            |  2 +-
 backend/src/routes/eventDetails.ts            |  1 +
 backend/src/validators/eventDetails.ts        | 18 +++--
 frontend/package-lock.json                    |  2 +-
 frontend/src/api/eventDetails.ts              |  9 ++-
 frontend/src/app/admin/event-creator/page.tsx | 75 ++++++++++++++++---
 frontend/src/components/EventSidebar.tsx      | 59 +++++++++------
 frontend/src/components/EventsCard.tsx        |  6 +-
 frontend/src/components/TextField.tsx         |  4 +-
 10 files changed, 151 insertions(+), 52 deletions(-)

diff --git a/backend/src/controllers/eventDetails.ts b/backend/src/controllers/eventDetails.ts
index 68d206b5..e5fcdf77 100644
--- a/backend/src/controllers/eventDetails.ts
+++ b/backend/src/controllers/eventDetails.ts
@@ -35,7 +35,7 @@ export const getEventDetails: RequestHandler = async (req, res, next) => {
 
 export const createEventDetails: RequestHandler = async (req, res, next) => {
   const errors = validationResult(req);
-  const { name, description, content, guidelines, date, location, imageURI } = req.body;
+  const { name, description, guidelines, date, location, imageURI,description_short } = req.body;
 
   try {
     validationErrorParser(errors);
@@ -43,11 +43,11 @@ export const createEventDetails: RequestHandler = async (req, res, next) => {
     const eventDetails = await EventDetails.create({
       name,
       description,
-      content,
       guidelines,
       date,
       location,
       imageURI,
+      description_short,
     });
 
     res.status(201).json(eventDetails);
@@ -83,3 +83,26 @@ export const updateEventDetails: RequestHandler = async (req, res, next) => {
     next(error);
   }
 };
+export const deleteEventDetails: RequestHandler = async (req, res, next) => {
+
+  console.log("haha2");
+  const { id } = req.params;
+
+  try {
+    const eventDetails = await EventDetails.findByIdAndDelete(id);
+    console.log(eventDetails);
+
+    if (!eventDetails) {
+
+      throw createHttpError(404, "event not found");
+
+    }
+
+    res.status(200).json(eventDetails);
+  } catch (error) {
+
+    next(error);
+
+  }
+};
+
diff --git a/backend/src/models/eventDetails.ts b/backend/src/models/eventDetails.ts
index 0d346323..0a8afe4c 100644
--- a/backend/src/models/eventDetails.ts
+++ b/backend/src/models/eventDetails.ts
@@ -3,11 +3,11 @@ import { InferSchemaType, Schema, model } from "mongoose";
 const eventDetailsSchema = new Schema({
   name: { type: String, required: true },
   description: { type: String, required: true },
-  content: { type: String, required: true },
   guidelines: { type: String, required: true },
   date: { type: String, required: true },
   location: { type: String, required: true },
   imageURI: { type: String, required: true },
+  description_short: { type: String, required: true },
 });
 
 type EventDetails = InferSchemaType<typeof eventDetailsSchema>;
diff --git a/backend/src/routes/eventDetails.ts b/backend/src/routes/eventDetails.ts
index bd733e83..15b2d8b3 100644
--- a/backend/src/routes/eventDetails.ts
+++ b/backend/src/routes/eventDetails.ts
@@ -16,5 +16,6 @@ router.post(
   EventDetailsValidator.createEventDetails,
   EventDetailsController.createEventDetails,
 );
+router.delete("/:id", EventDetailsValidator.deleteEventDetails, EventDetailsController.deleteEventDetails);
 
 export default router;
diff --git a/backend/src/validators/eventDetails.ts b/backend/src/validators/eventDetails.ts
index 1dc046cc..9fa6b296 100644
--- a/backend/src/validators/eventDetails.ts
+++ b/backend/src/validators/eventDetails.ts
@@ -21,13 +21,6 @@ const makeDescriptionValidator = () =>
     .bail()
     .isString()
     .withMessage("description must be a string");
-const makeContentValidator = () =>
-  body("content")
-    .exists()
-    .withMessage("content is required")
-    .bail()
-    .isString()
-    .withMessage("content must be a string");
 const makeGuidlinesValidator = () =>
   body("guidelines")
     .exists()
@@ -59,15 +52,24 @@ const makeImageURIValidator = () =>
     .bail()
     .isURL()
     .withMessage("imageURI must be a URL");
+const makeDescriptionShortValidator = () =>
+  body("description_short")
+    .exists()
+    .withMessage("description_short is required")
+    .bail()
+    .isString()
+    .withMessage("description_short must be a string");
+
 
 export const createEventDetails = [
   makeNameValidator(),
   makeDescriptionValidator(),
-  makeContentValidator(),
   makeGuidlinesValidator(),
   makeDateValidator(),
   makeLocationValidator(),
   makeImageURIValidator(),
+  makeDescriptionShortValidator(),
 ];
 
 export const getEventDetails = [makeIDValidator()];
+export const deleteEventDetails = [makeIDValidator()];
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bd726d2b..e61f51e5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,9 +13,9 @@
         "@mui/icons-material": "^5.15.12",
         "@mui/material": "^5.15.12",
         "@mui/x-data-grid": "^7.1.1",
+        "@paypal/react-paypal-js": "^8.2.0",
         "envalid": "^8.0.0",
         "firebase": "^10.11.0",
-        "@paypal/react-paypal-js": "^8.2.0",
         "html2canvas": "^1.4.1",
         "html2pdf.js": "^0.9.3",
         "jspdf": "^2.5.1",
diff --git a/frontend/src/api/eventDetails.ts b/frontend/src/api/eventDetails.ts
index faf91245..d4a15d55 100644
--- a/frontend/src/api/eventDetails.ts
+++ b/frontend/src/api/eventDetails.ts
@@ -6,11 +6,11 @@ export type EventDetails = {
   _id: string;
   name: string;
   description: string;
-  content: string;
   guidelines: string;
   date: string;
   location: string;
   imageURI: string;
+  description_short: string;
 };
 
 export async function getEventDetails(id: string): Promise<APIResult<EventDetails>> {
@@ -36,11 +36,11 @@ export async function getAllEventDetails(): Promise<APIResult<EventDetails[]>> {
 export type CreateEventDetailsRequest = {
   name: string;
   description: string;
-  content: string;
   guidelines: string;
   date: string;
   location: string;
   imageURI: string;
+  description_short: string;
 };
 
 export async function createEventDetails(
@@ -60,11 +60,11 @@ export type UpdateEventDetailsRequest = {
   _id: string;
   name: string;
   description: string;
-  content: string;
   guidelines: string;
   date: string;
   location: string;
   imageURI: string;
+  description_short: string;
 };
 
 export async function updateEventDetails(
@@ -88,6 +88,9 @@ export async function deleteEventDetails(id: string): Promise<APIResult<EventDet
     const json = (await response.json()) as EventDetails;
     return { success: true, data: json };
   } catch (error) {
+    console.log("haha");
     return handleAPIError(error);
   }
 }
+
+
diff --git a/frontend/src/app/admin/event-creator/page.tsx b/frontend/src/app/admin/event-creator/page.tsx
index cb280682..7ef04612 100644
--- a/frontend/src/app/admin/event-creator/page.tsx
+++ b/frontend/src/app/admin/event-creator/page.tsx
@@ -28,7 +28,7 @@ export default function EventCreator() {
     {
       field: "name",
       headerName: "Event Title",
-      width: 372.29,
+      width: 223,
       editable: false,
       resizable: false,
       headerClassName: `${styles.headingBackground} ${styles.cellBorderStyle} ${styles.Headings}`,
@@ -36,28 +36,53 @@ export default function EventCreator() {
       disableColumnMenu: true,
       renderHeader: () => <div>Event Title</div>,
     },
+    {
+      field: "description_short",
+      headerName: "Description Short",
+      width: 223,
+      editable: false,
+      resizable: false,
+      headerClassName: `${styles.Headings} ${styles.headingBackground} ${styles.cellBorderStyle}`,
+      cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
+      disableColumnMenu: true,
+      renderHeader: () => <div>Description (short)</div>,
+    },
+
     {
       field: "description",
-      headerName: "Subtitle",
-      width: 372.29,
+      headerName: "Description Long",
+      width: 223,
       editable: false,
       resizable: false,
       headerClassName: `${styles.Headings} ${styles.headingBackground} ${styles.cellBorderStyle}`,
       cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
       disableColumnMenu: true,
-      renderHeader: () => <div>Subtitle</div>,
+      renderHeader: () => <div>Description (long)</div>,
     },
 
+
     {
       field: "date",
-      headerName: "Date",
-      width: 372.29,
+      headerName: "DateTime",
+      width: 223,
+      editable: false,
+      resizable: false,
+      headerClassName: `${styles.Headings} ${styles.headingBackground} ${styles.cellBorderStyle}`,
+      cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
+      disableColumnMenu: true,
+      renderHeader: () => <div>Date/Time</div>,
+    },
+
+    {
+      field: "location",
+      headerName: "Location",
+      width: 225.4,
       editable: false,
       resizable: false,
       headerClassName: `${styles.Headings} ${styles.headingBackground} ${styles.cellBorderStyle}`,
       cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
       disableColumnMenu: true,
-      renderHeader: () => <div>Date</div>,
+      renderHeader: () => <div>Location</div>,
     },
   ];
 
@@ -77,12 +102,26 @@ export default function EventCreator() {
     getAllEventDetails()
       .then((result) => {
         if (result.success) {
+
+          const now = new Date();
+          const utcDateCurrent = now;
+
           const currentYear = new Date().getFullYear();
 
           const filteredCurrent = result.data.filter((item) => {
+
+            const dateObj = new Date(item.date);
+            const utcDateitem = dateObj.getTime();;
+
+            console.log(utcDateitem);
+            
+            if (utcDateitem >= utcDateCurrent.getTime()) {
+
             return true;
-            // to implement
-          });
+            // to implement            
+            
+          }
+          return false});
 
           const formattedCurrentRows = filteredCurrent.map((item) => ({
             ...item,
@@ -92,7 +131,18 @@ export default function EventCreator() {
           setCurrentEvents(formattedCurrentRows);
 
           const filteredPast = result.data.filter((item) => {
-            // to implement
+            const dateObj = new Date(item.date);
+            const utcDateitem = dateObj.getTime();
+
+            console.log(utcDateitem);
+            
+            if (utcDateitem <utcDateCurrent.getTime()) {
+
+            return true;
+            // to implement            
+            
+          }
+          return false
           });
 
           const formattedPastRows = filteredPast.map((item) => ({
@@ -268,6 +318,7 @@ export default function EventCreator() {
               alignItems: "center",
             }}
           >
+            {pageToggle ===0 && (
             <button
               onClick={() => {
                 openEvent(true);
@@ -295,7 +346,7 @@ export default function EventCreator() {
                 style={{ width: 24, height: 24, marginRight: 5 }}
               />
               Add Event
-            </button>
+            </button>)}
           </Box>
         </Box>
 
@@ -318,6 +369,7 @@ export default function EventCreator() {
           sx={{
             "& .MuiDataGrid-row:hover": {
               background: "rgba(105, 76, 151, 0.05)",
+              
             },
           }}
           disableRowSelectionOnClick
@@ -342,6 +394,7 @@ export default function EventCreator() {
               fontSize: "16px",
               lineHeight: "24px",
               color: "#909090",
+              
             }}
           >
             <Image
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index e0b87f3d..1b81b851 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -20,7 +20,7 @@ type eventSidebarProps = {
 type formErrors = {
   name?: boolean;
   description?: boolean;
-  content?: boolean;
+  description_short?: boolean;
   guidelines?: boolean;
   date?: boolean;
   location?: boolean;
@@ -34,7 +34,7 @@ const EventSidebar = ({
 }: eventSidebarProps) => {
   const [name, setName] = useState(eventDetails ? eventDetails.name : "");
   const [description, setDescription] = useState(eventDetails ? eventDetails.description : "");
-  const [content, setContent] = useState(eventDetails ? eventDetails.content : "");
+  const [description_short, setDescription_short] = useState(eventDetails ? eventDetails.description_short : "");
   const [date, setDate] = useState(eventDetails ? eventDetails.date : "");
   const [location, setLocation] = useState(eventDetails ? eventDetails.location : "");
   const [guidelines, setGuidelines] = useState(eventDetails ? eventDetails.guidelines : "");
@@ -47,7 +47,7 @@ const EventSidebar = ({
   const confirmCancel = () => {
     setName(eventDetails ? eventDetails.name : "");
     setDescription(eventDetails ? eventDetails.description : "");
-    setContent(eventDetails ? eventDetails.content : "");
+    setDescription_short(eventDetails ? eventDetails.description_short : "");
     setDate(eventDetails ? eventDetails.date : "");
     setLocation(eventDetails ? eventDetails.location : "");
     setGuidelines(eventDetails ? eventDetails.guidelines : "");
@@ -62,7 +62,7 @@ const EventSidebar = ({
     if (
       name !== (eventDetails ? eventDetails.name : "") ||
       description !== (eventDetails ? eventDetails.description : "") ||
-      content !== (eventDetails ? eventDetails.content : "") ||
+      description_short !== (eventDetails ? eventDetails.description_short : "") ||
       date !== (eventDetails ? eventDetails.date : "") ||
       location !== (eventDetails ? eventDetails.location : "") ||
       guidelines !== (eventDetails ? eventDetails.guidelines : "")
@@ -77,7 +77,7 @@ const EventSidebar = ({
     if (
       name !== (eventDetails ? eventDetails.name : "") ||
       description !== (eventDetails ? eventDetails.description : "") ||
-      content !== (eventDetails ? eventDetails.content : "") ||
+      description_short !== (eventDetails ? eventDetails.description_short : "") ||
       date !== (eventDetails ? eventDetails.date : "") ||
       location !== (eventDetails ? eventDetails.location : "") ||
       guidelines !== (eventDetails ? eventDetails.guidelines : "")
@@ -91,10 +91,11 @@ const EventSidebar = ({
 
   const handleSave = () => {
     setWarningOpen(false);
+
     if (
       name === "" ||
       description === "" ||
-      content === "" ||
+      description_short === "" ||
       date === "" ||
       location === "" ||
       guidelines === ""
@@ -102,7 +103,7 @@ const EventSidebar = ({
       setErrors({
         name: name === "",
         description: description === "",
-        content: content === "",
+        description_short: description_short === "",
         date: date === "",
         location: location === "",
         guidelines: guidelines === "",
@@ -110,32 +111,37 @@ const EventSidebar = ({
     } else {
       setIsEditing(false);
       if (eventDetails) {
+        
         updateEvent({
           _id: eventDetails._id,
           name,
           description,
-          content,
           guidelines,
           date,
           location,
           imageURI: eventDetails.imageURI,
+          description_short
         });
       } else {
+        
         createEvent({
           name,
           description,
-          content,
           guidelines,
           date,
           location,
           imageURI: "https://tse.ucsd.edu/assets/images/icons__tse-bulb__128.png",
+          description_short,
         });
       }
       setIsEditing(false);
       setErrors({});
       setShowAlert(true);
       window.location.reload();
+    
     }
+  
+    
   };
 
   const handleDelete = () => {
@@ -144,10 +150,13 @@ const EventSidebar = ({
 
   const confirmDelete = () => {
     if (eventDetails) {
+      console.log(eventDetails._id)
+
       deleteEventDetails(eventDetails._id)
         .then((result) => {
           if (result.success) {
             console.log("successful deletion");
+            window.location.reload();
           } else {
             console.error("ERROR:", result.error);
           }
@@ -156,7 +165,7 @@ const EventSidebar = ({
           alert(error);
         });
       setSidebarOpen(false);
-      window.location.reload();
+      
     }
   };
 
@@ -201,9 +210,9 @@ const EventSidebar = ({
           <h2>Event Title</h2>
           <p>{name}</p>
           <h2>Event Description (short)</h2>
-          <pre className={styles.textAreaContent}>{description}</pre>
+          <pre className={styles.textAreaContent}>{description_short}</pre>
           <h2>Event Description (long)</h2>
-          <pre className={styles.textAreaContent}>{content}</pre>
+          <pre className={styles.textAreaContent}>{description}</pre>
           <h2>Date & Time</h2>
           <p>{date}</p>
           <h2>Location</h2>
@@ -274,34 +283,39 @@ const EventSidebar = ({
               <TextField
                 className={styles.textField}
                 label="Event Title"
+                placeholder="Event Title"
                 value={name}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setName(event.target.value);
+                  
                 }}
                 error={errors.name}
               />
               <h2>Event Description (short)</h2>
               <textarea
-                id="description"
+                id="description_short"
                 className={`${styles.textArea} ${styles.stretch}`}
-                value={description}
+                placeholder="This is a short description of your event that will be displayed on the event page."
+                value={description_short}
                 onChange={(event) => {
-                  setDescription(event.target.value);
+                  setDescription_short(event.target.value);
                 }}
               />
               <h2>Event Description (long)</h2>
               <textarea
-                id="content"
+                id="description"
                 className={`${styles.textAreaLong} ${styles.stretch}`}
-                value={content}
+                placeholder = "This is a long description of your event that will be displayed on the event page."
+                value={description}
                 onChange={(event) => {
-                  setContent(event.target.value);
+                  setDescription(event.target.value);
                 }}
               />
               <TextField
                 className={`${styles.textField} ${styles.stretch}`}
-                label="Date & Time"
+                label="Date & Time (Month DD, YYYY, HH:MM-HH:MM)"
                 value={date}
+                placeholder = "Example: December 24, 2024, 9:00-10:00"
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setDate(event.target.value);
                 }}
@@ -311,6 +325,7 @@ const EventSidebar = ({
                 className={`${styles.textField} ${styles.stretch}`}
                 label="Location"
                 value={location}
+                placeholder = "Where will this event take place?"
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setLocation(event.target.value);
                 }}
@@ -320,6 +335,8 @@ const EventSidebar = ({
               <textarea
                 id="guidelines"
                 className={`${styles.textArea} ${styles.stretch}`}
+                placeholder = "This is a description of your event guidelines (dress codes, materials, qualifications, etc.)"
+
                 value={guidelines}
                 onChange={(event) => {
                   setGuidelines(event.target.value);
@@ -378,9 +395,9 @@ const EventSidebar = ({
           <h2>Event Title</h2>
           <p>{name}</p>
           <h2>Event Description (short)</h2>
-          <pre className={styles.textAreaContent}>{description}</pre>
+          <pre className={styles.textAreaContent}>{description_short}</pre>
           <h2>Event Description (long)</h2>
-          <pre className={styles.textAreaContent}>{content}</pre>
+          <pre className={styles.textAreaContent}>{description}</pre>
           <h2>Date & Time</h2>
           <p>{date}</p>
           <h2>Location</h2>
diff --git a/frontend/src/components/EventsCard.tsx b/frontend/src/components/EventsCard.tsx
index 2de65e3d..eab1f437 100644
--- a/frontend/src/components/EventsCard.tsx
+++ b/frontend/src/components/EventsCard.tsx
@@ -25,7 +25,7 @@ const EventsCard = ({ event, page }: CardProps) => {
         <div className={styles.homeCardContent}>
           <div className={styles.textContainer}>
             <div className={styles.cardTitle}>{event.name}</div>
-            <div className={styles.homeCardDescription}>{event.description}</div>
+            <div className={styles.homeCardDescription}>{event.description_short}</div>
           </div>
           <Link href={`/upcoming-events/${event._id}`}>
             <button className={styles.homeCardButton}>Learn More</button>
@@ -43,7 +43,7 @@ const EventsCard = ({ event, page }: CardProps) => {
         <div className={styles.cardContent}>
           <div className={styles.textContainer}>
             <div className={styles.cardTitle}>{event.name}</div>
-            <div className={styles.cardDescription}>{event.description}</div>
+            <div className={styles.cardDescription}>{event.description_short}</div>
           </div>
           <Link href={`/upcoming-events/${event._id}`}>
             <button className={styles.cardButton}>Learn More</button>
@@ -61,7 +61,7 @@ const EventsCard = ({ event, page }: CardProps) => {
         <div className={styles.cardContent}>
           <div className={styles.textContainer}>
             <div className={styles.cardTitle}>{event.name}</div>
-            <div className={styles.cardDescription}>{event.description}</div>
+            <div className={styles.cardDescription}>{event.description_short}</div>
           </div>
         </div>
       </main>
diff --git a/frontend/src/components/TextField.tsx b/frontend/src/components/TextField.tsx
index 3bf1315c..7c258b79 100644
--- a/frontend/src/components/TextField.tsx
+++ b/frontend/src/components/TextField.tsx
@@ -19,7 +19,7 @@ export type TextFieldProps = {
  * See `src/components/Button.tsx` for an explanation of `React.forwardRef`.
  */
 export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
-  { label, error = false, className, ...props },
+  { label, error = false, className, placeholder,...props },
   ref,
 ) {
   let wrapperClass = styles.wrapper;
@@ -34,7 +34,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(func
     <div className={wrapperClass}>
       <label className={styles.label}>
         <p>{label}</p>
-        <input ref={ref} type="text" className={inputClass} {...props} />
+        <input ref={ref} type="text" className={inputClass} {...props} placeholder= {placeholder}/>
       </label>
     </div>
   );

From 2deead89e20f1b66dab1dd8cfee180c05f8625ea Mon Sep 17 00:00:00 2001
From: kevindo0720 <80845738+kevindo0720@users.noreply.github.com>
Date: Wed, 29 May 2024 15:51:04 -0700
Subject: [PATCH 05/17] added calendar functionality

---
 frontend/package-lock.json                    |  67 +++++++++-
 frontend/package.json                         |   4 +-
 frontend/src/app/admin/event-creator/page.tsx |  16 ++-
 .../src/components/EventSidebar.module.css    |   8 ++
 frontend/src/components/EventSidebar.tsx      | 119 ++++++++++++------
 .../src/components/TextFieldSmall.module.css  |  48 +++++++
 frontend/src/components/TextFieldSmall.tsx    |  41 ++++++
 .../components/TextFieldSmallest.module.css   |  55 ++++++++
 frontend/src/components/TextFieldSmallest.tsx |  41 ++++++
 .../components/TextFieldWrapper.module.css    |  10 ++
 10 files changed, 361 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/components/TextFieldSmall.module.css
 create mode 100644 frontend/src/components/TextFieldSmall.tsx
 create mode 100644 frontend/src/components/TextFieldSmallest.module.css
 create mode 100644 frontend/src/components/TextFieldSmallest.tsx
 create mode 100644 frontend/src/components/TextFieldWrapper.module.css

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e61f51e5..81c47401 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@mui/material": "^5.15.12",
         "@mui/x-data-grid": "^7.1.1",
         "@paypal/react-paypal-js": "^8.2.0",
+        "date-fns": "^3.6.0",
         "envalid": "^8.0.0",
         "firebase": "^10.11.0",
         "html2canvas": "^1.4.1",
@@ -23,6 +24,7 @@
         "next": "14.0.4",
         "nodemailer": "^6.9.11",
         "react": "^18",
+        "react-datepicker": "^6.9.0",
         "react-dom": "^18",
         "react-material-symbols": "^4.3.1"
       },
@@ -990,12 +992,26 @@
         "@floating-ui/utils": "^0.2.0"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz",
+      "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.0",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
-      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
       "dependencies": {
-        "@floating-ui/dom": "^1.6.1"
+        "@floating-ui/dom": "^1.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -2896,6 +2912,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6035,6 +6060,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.9.0.tgz",
+      "integrity": "sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "clsx": "^2.1.0",
+        "date-fns": "^3.3.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -6064,6 +6105,19 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
+      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6825,6 +6879,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 31167bff..15037fb4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,9 +19,10 @@
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^7.1.1",
+    "@paypal/react-paypal-js": "^8.2.0",
+    "date-fns": "^3.6.0",
     "envalid": "^8.0.0",
     "firebase": "^10.11.0",
-    "@paypal/react-paypal-js": "^8.2.0",
     "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.9.3",
     "jspdf": "^2.5.1",
@@ -29,6 +30,7 @@
     "next": "14.0.4",
     "nodemailer": "^6.9.11",
     "react": "^18",
+    "react-datepicker": "^6.9.0",
     "react-dom": "^18",
     "react-material-symbols": "^4.3.1"
   },
diff --git a/frontend/src/app/admin/event-creator/page.tsx b/frontend/src/app/admin/event-creator/page.tsx
index 7ef04612..f65405b1 100644
--- a/frontend/src/app/admin/event-creator/page.tsx
+++ b/frontend/src/app/admin/event-creator/page.tsx
@@ -59,8 +59,6 @@ export default function EventCreator() {
       disableColumnMenu: true,
       renderHeader: () => <div>Description (long)</div>,
     },
-
-
     {
       field: "date",
       headerName: "DateTime",
@@ -71,6 +69,17 @@ export default function EventCreator() {
       cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
       disableColumnMenu: true,
       renderHeader: () => <div>Date/Time</div>,
+      valueGetter: (params: { value?: string }) => {
+        if (String(params)) {
+          const itemDate = new Date(String(params));
+          const formattedDate = itemDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+          const formattedTime = itemDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+          const formattedDateTime = `${formattedDate}, ${formattedTime}-00:00`;
+          console.log('formattedDateTime:', formattedDateTime);
+          return formattedDateTime;
+        }
+        return null;
+      },
     },
 
     {
@@ -98,6 +107,8 @@ export default function EventCreator() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [rerenderKey, setRerenderKey] = useState(0);
 
+
+
   useEffect(() => {
     getAllEventDetails()
       .then((result) => {
@@ -111,6 +122,7 @@ export default function EventCreator() {
           const filteredCurrent = result.data.filter((item) => {
 
             const dateObj = new Date(item.date);
+            
             const utcDateitem = dateObj.getTime();;
 
             console.log(utcDateitem);
diff --git a/frontend/src/components/EventSidebar.module.css b/frontend/src/components/EventSidebar.module.css
index 5b9c9e9a..d0e9253e 100644
--- a/frontend/src/components/EventSidebar.module.css
+++ b/frontend/src/components/EventSidebar.module.css
@@ -197,3 +197,11 @@
   font-weight: 400;
   line-height: 24px;
 }
+
+.twoFieldsSameRow {
+  display: flex;
+  gap: 10px; /* Adjust the gap as needed */
+}
+.twoFieldsSameRow .textFieldSmallest {
+  flex: 1; /* Allows the fields to take up equal space */
+}
\ No newline at end of file
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 1b81b851..bdb541b6 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -1,13 +1,17 @@
 "use client";
 import Image from "next/image";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 
 import { CreateEventDetailsRequest, EventDetails, deleteEventDetails } from "../api/eventDetails";
-
 import styles from "./EventSidebar.module.css";
 
 import AlertBanner from "@/components/AlertBanner";
 import { TextField } from "@/components/TextField";
+import { TextFieldSmall } from "@/components/TextFieldSmall";
+import { TextFieldSmallest } from "@/components/TextFieldSmallest";
+
 import { WarningModule } from "@/components/WarningModule";
 
 type eventSidebarProps = {
@@ -35,7 +39,9 @@ const EventSidebar = ({
   const [name, setName] = useState(eventDetails ? eventDetails.name : "");
   const [description, setDescription] = useState(eventDetails ? eventDetails.description : "");
   const [description_short, setDescription_short] = useState(eventDetails ? eventDetails.description_short : "");
-  const [date, setDate] = useState(eventDetails ? eventDetails.date : "");
+  const [date, setDate] = useState(eventDetails ? new Date(eventDetails.date) : new Date());
+  const [startTime, setStartTime] = useState(eventDetails ? new Date(eventDetails.date).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
+  const [endTime, setEndTime] = useState(eventDetails ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
   const [location, setLocation] = useState(eventDetails ? eventDetails.location : "");
   const [guidelines, setGuidelines] = useState(eventDetails ? eventDetails.guidelines : "");
   const [isEditing, setIsEditing] = useState<boolean>(!eventDetails);
@@ -44,11 +50,28 @@ const EventSidebar = ({
   const [warningOpen, setWarningOpen] = useState(false);
   const [showAlert, setShowAlert] = useState(false);
 
+  useEffect(() => {
+    if (date && startTime && endTime) {
+      const [startHour, startMinute] = startTime.split(":");
+      const [endHour, endMinute] = endTime.split(":");
+      const updatedStartDate = new Date(date);
+      const updatedEndDate = new Date(date);
+
+      updatedStartDate.setHours(parseInt(startHour), parseInt(startMinute));
+      updatedEndDate.setHours(parseInt(endHour), parseInt(endMinute));
+
+      setDate(updatedStartDate);
+      setEndTime(updatedEndDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
+    }
+  }, [startTime, endTime]);
+
   const confirmCancel = () => {
     setName(eventDetails ? eventDetails.name : "");
     setDescription(eventDetails ? eventDetails.description : "");
     setDescription_short(eventDetails ? eventDetails.description_short : "");
-    setDate(eventDetails ? eventDetails.date : "");
+    setDate(eventDetails ? new Date(eventDetails.date) : new Date());
+    setStartTime(eventDetails ? new Date(eventDetails.date).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
+    setEndTime(eventDetails ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
     setLocation(eventDetails ? eventDetails.location : "");
     setGuidelines(eventDetails ? eventDetails.guidelines : "");
     setIsEditing(false);
@@ -63,7 +86,7 @@ const EventSidebar = ({
       name !== (eventDetails ? eventDetails.name : "") ||
       description !== (eventDetails ? eventDetails.description : "") ||
       description_short !== (eventDetails ? eventDetails.description_short : "") ||
-      date !== (eventDetails ? eventDetails.date : "") ||
+      date !== (eventDetails ? new Date(eventDetails.date) : new Date()) ||
       location !== (eventDetails ? eventDetails.location : "") ||
       guidelines !== (eventDetails ? eventDetails.guidelines : "")
     ) {
@@ -78,7 +101,7 @@ const EventSidebar = ({
       name !== (eventDetails ? eventDetails.name : "") ||
       description !== (eventDetails ? eventDetails.description : "") ||
       description_short !== (eventDetails ? eventDetails.description_short : "") ||
-      date !== (eventDetails ? eventDetails.date : "") ||
+      date !== (eventDetails ? new Date(eventDetails.date) : new Date()) ||
       location !== (eventDetails ? eventDetails.location : "") ||
       guidelines !== (eventDetails ? eventDetails.guidelines : "")
     ) {
@@ -96,7 +119,7 @@ const EventSidebar = ({
       name === "" ||
       description === "" ||
       description_short === "" ||
-      date === "" ||
+      !date ||
       location === "" ||
       guidelines === ""
     ) {
@@ -104,31 +127,29 @@ const EventSidebar = ({
         name: name === "",
         description: description === "",
         description_short: description_short === "",
-        date: date === "",
+        date: !date,
         location: location === "",
         guidelines: guidelines === "",
       });
     } else {
       setIsEditing(false);
       if (eventDetails) {
-        
         updateEvent({
           _id: eventDetails._id,
           name,
           description,
           guidelines,
-          date,
+          date: date.toISOString(),
           location,
           imageURI: eventDetails.imageURI,
-          description_short
+          description_short,
         });
       } else {
-        
         createEvent({
           name,
           description,
           guidelines,
-          date,
+          date: date.toISOString(),
           location,
           imageURI: "https://tse.ucsd.edu/assets/images/icons__tse-bulb__128.png",
           description_short,
@@ -138,10 +159,7 @@ const EventSidebar = ({
       setErrors({});
       setShowAlert(true);
       window.location.reload();
-    
     }
-  
-    
   };
 
   const handleDelete = () => {
@@ -150,12 +168,9 @@ const EventSidebar = ({
 
   const confirmDelete = () => {
     if (eventDetails) {
-      console.log(eventDetails._id)
-
       deleteEventDetails(eventDetails._id)
         .then((result) => {
           if (result.success) {
-            console.log("successful deletion");
             window.location.reload();
           } else {
             console.error("ERROR:", result.error);
@@ -165,7 +180,6 @@ const EventSidebar = ({
           alert(error);
         });
       setSidebarOpen(false);
-      
     }
   };
 
@@ -214,7 +228,7 @@ const EventSidebar = ({
           <h2>Event Description (long)</h2>
           <pre className={styles.textAreaContent}>{description}</pre>
           <h2>Date & Time</h2>
-          <p>{date}</p>
+          <p>{date.toLocaleString()}</p>
           <h2>Location</h2>
           <p>{location}</p>
           <h2>Guidelines</h2>
@@ -223,7 +237,6 @@ const EventSidebar = ({
           <p>Placeholder - to be replaced with image</p>
 
           {/* Delete button */}
-
           <div className={styles.deleteButtonWrapper}>
             <button onClick={handleDelete} className={styles.deleteButton}>
               <p>Delete</p>
@@ -287,7 +300,6 @@ const EventSidebar = ({
                 value={name}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setName(event.target.value);
-                  
                 }}
                 error={errors.name}
               />
@@ -305,27 +317,56 @@ const EventSidebar = ({
               <textarea
                 id="description"
                 className={`${styles.textAreaLong} ${styles.stretch}`}
-                placeholder = "This is a long description of your event that will be displayed on the event page."
+                placeholder="This is a long description of your event that will be displayed on the event page."
                 value={description}
                 onChange={(event) => {
                   setDescription(event.target.value);
                 }}
               />
-              <TextField
-                className={`${styles.textField} ${styles.stretch}`}
-                label="Date & Time (Month DD, YYYY, HH:MM-HH:MM)"
-                value={date}
-                placeholder = "Example: December 24, 2024, 9:00-10:00"
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  setDate(event.target.value);
-                }}
-                error={errors.date}
-              />
+              <div className={styles.textField}>
+                <label>Date & Time </label>
+                <DatePicker
+                  selected={date}
+                  onChange={(date: Date) => setDate(date)}
+                  dateFormat="MMMM d, yyyy"
+                  customInput={
+                    <TextFieldSmall
+                      className={`${styles.textField} ${styles.stretch}`}
+                      label="Date & Time"
+                      value={date ? `${date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}, ${startTime}-${endTime}` : ''}
+                      placeholder="Select date and time"
+                    />
+                  }
+                />
+                {errors.date && <p className={styles.error}>Date is required</p>}
+              </div>
+              <div style={{ display: 'flex'}}>
+                <TextFieldSmallest
+                  className={styles.textField}
+                  label="Start Time"
+                  value={startTime}
+                  placeholder="Start Time"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    setStartTime(event.target.value);
+                  }}
+                  error={errors.date}
+                />
+                <TextFieldSmallest
+                  className={styles.textField}
+                  label="End Time"
+                  value={endTime}
+                  placeholder="End Time"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    setEndTime(event.target.value);
+                  }}
+                  error={errors.date}
+                />
+              </div>
               <TextField
                 className={`${styles.textField} ${styles.stretch}`}
                 label="Location"
                 value={location}
-                placeholder = "Where will this event take place?"
+                placeholder="Where will this event take place?"
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setLocation(event.target.value);
                 }}
@@ -335,8 +376,7 @@ const EventSidebar = ({
               <textarea
                 id="guidelines"
                 className={`${styles.textArea} ${styles.stretch}`}
-                placeholder = "This is a description of your event guidelines (dress codes, materials, qualifications, etc.)"
-
+                placeholder="This is a description of your event guidelines (dress codes, materials, qualifications, etc.)"
                 value={guidelines}
                 onChange={(event) => {
                   setGuidelines(event.target.value);
@@ -359,10 +399,7 @@ const EventSidebar = ({
         </div>
       </div>
     );
-
-    //if is deleting
   } else {
-    // not in edit mode
     return (
       <div className={styles.sidebar}>
         <div className={styles.alert}>
@@ -399,7 +436,7 @@ const EventSidebar = ({
           <h2>Event Description (long)</h2>
           <pre className={styles.textAreaContent}>{description}</pre>
           <h2>Date & Time</h2>
-          <p>{date}</p>
+          <p>{date.toLocaleString()}</p>
           <h2>Location</h2>
           <p>{location}</p>
           <h2>Guidelines</h2>
diff --git a/frontend/src/components/TextFieldSmall.module.css b/frontend/src/components/TextFieldSmall.module.css
new file mode 100644
index 00000000..010af24c
--- /dev/null
+++ b/frontend/src/components/TextFieldSmall.module.css
@@ -0,0 +1,48 @@
+.wrapper {
+    padding-top: 24px;
+    width: 20rem;
+    height: auto;
+  }
+  
+  .label {
+    font: var(--font-body);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    color: #909090;
+  }
+  
+  .input {
+    width: 50%;
+    line-height: 20px;
+    padding: 6px 12px;
+    border: 1px solid #d8d8d8;
+    border-radius: 4px;
+    font: var(--font-body);
+    color: var(--Neutral-Black, #000);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+  }
+  
+  .inputcontent {
+    width: 100%;
+    height: 300px;
+    line-height: 20px;
+    padding: 6px 12px;
+    border: 1px solid #d8d8d8;
+    border-radius: 4px;
+    font: var(--font-body);
+    color: var(--Neutral-Black, #000);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+  }
+  
+  .input.error {
+    border-color: #b93b3b;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/components/TextFieldSmall.tsx b/frontend/src/components/TextFieldSmall.tsx
new file mode 100644
index 00000000..6ec7a88d
--- /dev/null
+++ b/frontend/src/components/TextFieldSmall.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+import styles from "./TextFieldSmall.module.css";
+
+/**
+ * See `src/components/Button.tsx` for basic info about prop interfaces. Here we also use an `Omit`
+ * type, which is a built-in TypeScript utility type. `Omit<X, Y>` gives us the type X, excluding
+ * any fields Y. In this case, we are extending `React.ComponentProps<"input">` (the props that an
+ * `<input>` component can receive), but excluding the specific prop `type`. We exclude `type`
+ * because we will set `type="text"` on the underlying `<input>` component, so there's no point in
+ * allowing the developer to pass that prop in themselves.
+ */
+export type TextFieldSmallProps = {
+  label: string;
+  error?: boolean;
+} & Omit<React.ComponentProps<"input">, "type">;
+
+/**
+ * See `src/components/Button.tsx` for an explanation of `React.forwardRef`.
+ */
+export const TextFieldSmall = React.forwardRef<HTMLInputElement, TextFieldSmallProps>(function TextFieldSmall(
+  { label, error = false, className, placeholder,...props },
+  ref,
+) {
+  let wrapperClass = styles.wrapper;
+  if (className) {
+    wrapperClass += ` ${className}`;
+  }
+  let inputClass = styles.input;
+  if (error) {
+    inputClass += ` ${styles.error}`;
+  }
+  return (
+    <div className={wrapperClass}>
+      <label className={styles.label}>
+        <p>{label}</p>
+        <input ref={ref} type="text" className={inputClass} {...props} placeholder= {placeholder}/>
+      </label>
+    </div>
+  );
+});
diff --git a/frontend/src/components/TextFieldSmallest.module.css b/frontend/src/components/TextFieldSmallest.module.css
new file mode 100644
index 00000000..b4540584
--- /dev/null
+++ b/frontend/src/components/TextFieldSmallest.module.css
@@ -0,0 +1,55 @@
+.wrapper {
+  
+    padding-top: 24px;
+    width: 20rem;
+    height: auto;
+  }
+  
+  .label {
+    
+    font: var(--font-body);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    color: #909090;
+  }
+  
+  .input {
+    
+    width: 40%;
+    line-height: 20px;
+    padding: 6px 12px;
+    border: 1px solid #d8d8d8;
+    border-radius: 4px;
+    font: var(--font-body);
+    color: var(--Neutral-Black, #000);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+
+  }
+  
+  .inputcontent {
+        margin-right: 1px;
+
+    width: 100%;
+    height: 300px;
+    line-height: 20px;
+    padding: 6px 12px;
+    border: 1px solid #d8d8d8;
+    border-radius: 4px;
+    font: var(--font-body);
+    color: var(--Neutral-Black, #000);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+
+  }
+  
+  .input.error {
+    border-color: #b93b3b;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/components/TextFieldSmallest.tsx b/frontend/src/components/TextFieldSmallest.tsx
new file mode 100644
index 00000000..3fd669c5
--- /dev/null
+++ b/frontend/src/components/TextFieldSmallest.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+import styles from "./TextFieldSmallest.module.css";
+
+/**
+ * See `src/components/Button.tsx` for basic info about prop interfaces. Here we also use an `Omit`
+ * type, which is a built-in TypeScript utility type. `Omit<X, Y>` gives us the type X, excluding
+ * any fields Y. In this case, we are extending `React.ComponentProps<"input">` (the props that an
+ * `<input>` component can receive), but excluding the specific prop `type`. We exclude `type`
+ * because we will set `type="text"` on the underlying `<input>` component, so there's no point in
+ * allowing the developer to pass that prop in themselves.
+ */
+export type TextFieldSmallProps = {
+  label: string;
+  error?: boolean;
+} & Omit<React.ComponentProps<"input">, "type">;
+
+/**
+ * See `src/components/Button.tsx` for an explanation of `React.forwardRef`.
+ */
+export const TextFieldSmallest = React.forwardRef<HTMLInputElement, TextFieldSmallProps>(function TextFieldSmallest(
+  { label, error = false, className, placeholder,...props },
+  ref,
+) {
+  let wrapperClass = styles.wrapper;
+  if (className) {
+    wrapperClass += ` ${className}`;
+  }
+  let inputClass = styles.input;
+  if (error) {
+    inputClass += ` ${styles.error}`;
+  }
+  return (
+    <div className={wrapperClass}>
+      <label className={styles.label}>
+        <p>{label}</p>
+        <input ref={ref} type="text" className={inputClass} {...props} placeholder= {placeholder}/>
+      </label>
+    </div>
+  );
+});
diff --git a/frontend/src/components/TextFieldWrapper.module.css b/frontend/src/components/TextFieldWrapper.module.css
new file mode 100644
index 00000000..fbe9f9dc
--- /dev/null
+++ b/frontend/src/components/TextFieldWrapper.module.css
@@ -0,0 +1,10 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+  }
+  
+  .toText {
+    margin: 0 10px;
+    font-size: 16px;
+    color: #000; /* You can adjust the color and other styles as needed */
+  }
\ No newline at end of file

From cc8a133a86d11eede62b5fa389f24357c0eef3a8 Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Wed, 29 May 2024 16:17:11 -0700
Subject: [PATCH 06/17] start end time frontend formatting

---
 frontend/src/components/EventSidebar.tsx | 100 ++++++++++++++++-------
 1 file changed, 71 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index bdb541b6..801bdbfe 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -38,10 +38,26 @@ const EventSidebar = ({
 }: eventSidebarProps) => {
   const [name, setName] = useState(eventDetails ? eventDetails.name : "");
   const [description, setDescription] = useState(eventDetails ? eventDetails.description : "");
-  const [description_short, setDescription_short] = useState(eventDetails ? eventDetails.description_short : "");
+  const [description_short, setDescription_short] = useState(
+    eventDetails ? eventDetails.description_short : "",
+  );
   const [date, setDate] = useState(eventDetails ? new Date(eventDetails.date) : new Date());
-  const [startTime, setStartTime] = useState(eventDetails ? new Date(eventDetails.date).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
-  const [endTime, setEndTime] = useState(eventDetails ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
+  const [startTime, setStartTime] = useState(
+    eventDetails
+      ? new Date(eventDetails.date).toLocaleTimeString("en-US", {
+          hour: "2-digit",
+          minute: "2-digit",
+        })
+      : "",
+  );
+  const [endTime, setEndTime] = useState(
+    eventDetails
+      ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString(
+          "en-US",
+          { hour: "2-digit", minute: "2-digit" },
+        )
+      : "",
+  );
   const [location, setLocation] = useState(eventDetails ? eventDetails.location : "");
   const [guidelines, setGuidelines] = useState(eventDetails ? eventDetails.guidelines : "");
   const [isEditing, setIsEditing] = useState<boolean>(!eventDetails);
@@ -61,7 +77,9 @@ const EventSidebar = ({
       updatedEndDate.setHours(parseInt(endHour), parseInt(endMinute));
 
       setDate(updatedStartDate);
-      setEndTime(updatedEndDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
+      setEndTime(
+        updatedEndDate.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
+      );
     }
   }, [startTime, endTime]);
 
@@ -70,8 +88,22 @@ const EventSidebar = ({
     setDescription(eventDetails ? eventDetails.description : "");
     setDescription_short(eventDetails ? eventDetails.description_short : "");
     setDate(eventDetails ? new Date(eventDetails.date) : new Date());
-    setStartTime(eventDetails ? new Date(eventDetails.date).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
-    setEndTime(eventDetails ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
+    setStartTime(
+      eventDetails
+        ? new Date(eventDetails.date).toLocaleTimeString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+          })
+        : "",
+    );
+    setEndTime(
+      eventDetails
+        ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString(
+            "en-US",
+            { hour: "2-digit", minute: "2-digit" },
+          )
+        : "",
+    );
     setLocation(eventDetails ? eventDetails.location : "");
     setGuidelines(eventDetails ? eventDetails.guidelines : "");
     setIsEditing(false);
@@ -324,7 +356,6 @@ const EventSidebar = ({
                 }}
               />
               <div className={styles.textField}>
-                <label>Date & Time </label>
                 <DatePicker
                   selected={date}
                   onChange={(date: Date) => setDate(date)}
@@ -333,34 +364,45 @@ const EventSidebar = ({
                     <TextFieldSmall
                       className={`${styles.textField} ${styles.stretch}`}
                       label="Date & Time"
-                      value={date ? `${date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}, ${startTime}-${endTime}` : ''}
+                      value={
+                        date
+                          ? `${date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}, ${startTime}-${endTime}`
+                          : ""
+                      }
                       placeholder="Select date and time"
                     />
                   }
                 />
                 {errors.date && <p className={styles.error}>Date is required</p>}
               </div>
-              <div style={{ display: 'flex'}}>
-                <TextFieldSmallest
-                  className={styles.textField}
-                  label="Start Time"
-                  value={startTime}
-                  placeholder="Start Time"
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    setStartTime(event.target.value);
-                  }}
-                  error={errors.date}
-                />
-                <TextFieldSmallest
-                  className={styles.textField}
-                  label="End Time"
-                  value={endTime}
-                  placeholder="End Time"
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    setEndTime(event.target.value);
-                  }}
-                  error={errors.date}
-                />
+              <div style={{ display: "flex" }}>
+                <div style={{ width: "100px" }}>
+                  <TextFieldSmallest
+                    className={styles.textField}
+                    label="Start Time"
+                    value={startTime}
+                    placeholder="Start Time"
+                    style={{ width: "100px" }}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setStartTime(event.target.value);
+                    }}
+                    error={errors.date}
+                  />
+                </div>
+                <p style={{ marginTop: "50px", marginLeft: "10px", marginRight: "10px" }}>to</p>
+                <div style={{ width: "100px" }}>
+                  <TextFieldSmallest
+                    className={styles.textField}
+                    label="End Time"
+                    value={endTime}
+                    placeholder="End Time"
+                    style={{ width: "100px" }}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setEndTime(event.target.value);
+                    }}
+                    error={errors.date}
+                  />
+                </div>
               </div>
               <TextField
                 className={`${styles.textField} ${styles.stretch}`}

From 1c7b79842c0327a54372d7ce647128a1edcbb0cd Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Wed, 29 May 2024 23:03:31 -0700
Subject: [PATCH 07/17] text field formatting

---
 frontend/src/components/EventSidebar.module.css | 10 +++++++++-
 frontend/src/components/EventSidebar.tsx        | 12 ++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/EventSidebar.module.css b/frontend/src/components/EventSidebar.module.css
index d0e9253e..fd767a5e 100644
--- a/frontend/src/components/EventSidebar.module.css
+++ b/frontend/src/components/EventSidebar.module.css
@@ -170,6 +170,14 @@
   width: 454px;
 }
 
+.textFieldSmall {
+  width: 240px;
+}
+
+.textFieldSmallest {
+  width: 100px;
+}
+
 .textArea {
   width: 454px;
   height: 80px;
@@ -204,4 +212,4 @@
 }
 .twoFieldsSameRow .textFieldSmallest {
   flex: 1; /* Allows the fields to take up equal space */
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 801bdbfe..42fc72a3 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -361,8 +361,8 @@ const EventSidebar = ({
                   onChange={(date: Date) => setDate(date)}
                   dateFormat="MMMM d, yyyy"
                   customInput={
-                    <TextFieldSmall
-                      className={`${styles.textField} ${styles.stretch}`}
+                    <TextField
+                      className={`${styles.textFieldSmall} ${styles.stretch}`}
                       label="Date & Time"
                       value={
                         date
@@ -377,8 +377,8 @@ const EventSidebar = ({
               </div>
               <div style={{ display: "flex" }}>
                 <div style={{ width: "100px" }}>
-                  <TextFieldSmallest
-                    className={styles.textField}
+                  <TextField
+                    className={styles.textFieldSmallest}
                     label="Start Time"
                     value={startTime}
                     placeholder="Start Time"
@@ -391,8 +391,8 @@ const EventSidebar = ({
                 </div>
                 <p style={{ marginTop: "50px", marginLeft: "10px", marginRight: "10px" }}>to</p>
                 <div style={{ width: "100px" }}>
-                  <TextFieldSmallest
-                    className={styles.textField}
+                  <TextField
+                    className={styles.textFieldSmallest}
                     label="End Time"
                     value={endTime}
                     placeholder="End Time"

From 5f78f07a2510cf8ea80c533982e601cad493ed50 Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Wed, 29 May 2024 23:06:51 -0700
Subject: [PATCH 08/17] update imports

---
 frontend/src/components/EventSidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 42fc72a3..ce677e18 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -1,17 +1,15 @@
 "use client";
 import Image from "next/image";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
 import { CreateEventDetailsRequest, EventDetails, deleteEventDetails } from "../api/eventDetails";
+
 import styles from "./EventSidebar.module.css";
 
 import AlertBanner from "@/components/AlertBanner";
 import { TextField } from "@/components/TextField";
-import { TextFieldSmall } from "@/components/TextFieldSmall";
-import { TextFieldSmallest } from "@/components/TextFieldSmallest";
-
 import { WarningModule } from "@/components/WarningModule";
 
 type eventSidebarProps = {
@@ -358,7 +356,9 @@ const EventSidebar = ({
               <div className={styles.textField}>
                 <DatePicker
                   selected={date}
-                  onChange={(date: Date) => setDate(date)}
+                  onChange={(date: Date) => {
+                    setDate(date);
+                  }}
                   dateFormat="MMMM d, yyyy"
                   customInput={
                     <TextField

From f7d55d6565f2463d057d396a7ada2f14ea0533e6 Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Wed, 29 May 2024 23:44:52 -0700
Subject: [PATCH 09/17] simple character counter (does not prevent typing too
 much)

---
 .../src/components/CharacterCount.module.css  |  9 +++++
 frontend/src/components/CharacterCount.tsx    | 23 +++++++++++
 frontend/src/components/EventSidebar.tsx      | 11 ++++--
 frontend/src/components/TextAreaCharLimit.tsx | 38 ++++++++++++++++++
 .../src/components/TextFieldCharLimit.tsx     | 39 +++++++++++++++++++
 5 files changed, 117 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/CharacterCount.module.css
 create mode 100644 frontend/src/components/CharacterCount.tsx
 create mode 100644 frontend/src/components/TextAreaCharLimit.tsx
 create mode 100644 frontend/src/components/TextFieldCharLimit.tsx

diff --git a/frontend/src/components/CharacterCount.module.css b/frontend/src/components/CharacterCount.module.css
new file mode 100644
index 00000000..41c85fe4
--- /dev/null
+++ b/frontend/src/components/CharacterCount.module.css
@@ -0,0 +1,9 @@
+.wrapper {
+  color: #484848;
+  font-family: --var(--font-body);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 15px */
+  letter-spacing: 0.2px;
+}
diff --git a/frontend/src/components/CharacterCount.tsx b/frontend/src/components/CharacterCount.tsx
new file mode 100644
index 00000000..3e953bf1
--- /dev/null
+++ b/frontend/src/components/CharacterCount.tsx
@@ -0,0 +1,23 @@
+import styles from "./CharacterCount.module.css";
+
+export type CharacterCountProps = {
+  currCount: number;
+  maxCount: number;
+  error: boolean;
+};
+
+export const CharacterCount = ({ currCount, maxCount, error }: CharacterCountProps) => {
+  return (
+    <div className={styles.wrapper}>
+      {error ? (
+        <p style={{ color: "#B93B3B" }}>
+          {currCount}/{maxCount} characters
+        </p>
+      ) : (
+        <p>
+          {currCount}/{maxCount} characters
+        </p>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index ce677e18..5b72767e 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -7,6 +7,8 @@ import "react-datepicker/dist/react-datepicker.css";
 import { CreateEventDetailsRequest, EventDetails, deleteEventDetails } from "../api/eventDetails";
 
 import styles from "./EventSidebar.module.css";
+import { TextAreaCharLimit } from "./TextAreaCharLimit";
+import { TextFieldCharLimit } from "./TextFieldCharLimit";
 
 import AlertBanner from "@/components/AlertBanner";
 import { TextField } from "@/components/TextField";
@@ -323,7 +325,7 @@ const EventSidebar = ({
           </div>
           <form>
             <div className={styles.formRow}>
-              <TextField
+              <TextFieldCharLimit
                 className={styles.textField}
                 label="Event Title"
                 placeholder="Event Title"
@@ -332,9 +334,10 @@ const EventSidebar = ({
                   setName(event.target.value);
                 }}
                 error={errors.name}
+                maxCount={35}
               />
               <h2>Event Description (short)</h2>
-              <textarea
+              <TextAreaCharLimit
                 id="description_short"
                 className={`${styles.textArea} ${styles.stretch}`}
                 placeholder="This is a short description of your event that will be displayed on the event page."
@@ -342,9 +345,10 @@ const EventSidebar = ({
                 onChange={(event) => {
                   setDescription_short(event.target.value);
                 }}
+                maxCount={200}
               />
               <h2>Event Description (long)</h2>
-              <textarea
+              <TextAreaCharLimit
                 id="description"
                 className={`${styles.textAreaLong} ${styles.stretch}`}
                 placeholder="This is a long description of your event that will be displayed on the event page."
@@ -352,6 +356,7 @@ const EventSidebar = ({
                 onChange={(event) => {
                   setDescription(event.target.value);
                 }}
+                maxCount={275}
               />
               <div className={styles.textField}>
                 <DatePicker
diff --git a/frontend/src/components/TextAreaCharLimit.tsx b/frontend/src/components/TextAreaCharLimit.tsx
new file mode 100644
index 00000000..5a84e520
--- /dev/null
+++ b/frontend/src/components/TextAreaCharLimit.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import { CharacterCount } from "@/components/CharacterCount";
+
+export type TextAreaCharLimitProps = {
+  id: string;
+  className: string;
+  placeholder: string;
+  value: string;
+  maxCount: number;
+  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+} & Omit<React.ComponentProps<"input">, "type">;
+
+export const TextAreaCharLimit = ({
+  id,
+  className,
+  placeholder,
+  value,
+  maxCount,
+  onChange,
+}: TextAreaCharLimitProps) => {
+  return (
+    <div>
+      <textarea
+        id={id}
+        className={className}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+      {value.length > maxCount ? (
+        <CharacterCount currCount={value.length} maxCount={maxCount} error={true} />
+      ) : (
+        <CharacterCount currCount={value.length} maxCount={maxCount} error={false} />
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/TextFieldCharLimit.tsx b/frontend/src/components/TextFieldCharLimit.tsx
new file mode 100644
index 00000000..553a5bce
--- /dev/null
+++ b/frontend/src/components/TextFieldCharLimit.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import { CharacterCount } from "@/components/CharacterCount";
+import { TextField } from "@/components/TextField";
+
+export type TextFieldCharLimitProps = {
+  label: string;
+  placeholder: string;
+  value: string;
+  maxCount: number;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: boolean;
+} & Omit<React.ComponentProps<"input">, "type">;
+
+export const TextFieldCharLimit = ({
+  label,
+  placeholder,
+  value,
+  maxCount,
+  onChange,
+  error,
+}: TextFieldCharLimitProps) => {
+  return (
+    <div>
+      <TextField
+        label={label}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        error={error}
+      />
+      {value.length > maxCount ? (
+        <CharacterCount currCount={value.length} maxCount={maxCount} error={true} />
+      ) : (
+        <CharacterCount currCount={value.length} maxCount={maxCount} error={false} />
+      )}
+    </div>
+  );
+};

From b1d3b28cce17a918bb2b7670b506ec34c0a51750 Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Thu, 30 May 2024 00:00:26 -0700
Subject: [PATCH 10/17] deselect row upon closing sidebar

---
 frontend/src/app/admin/event-creator/page.tsx | 110 +++++++++---------
 1 file changed, 56 insertions(+), 54 deletions(-)

diff --git a/frontend/src/app/admin/event-creator/page.tsx b/frontend/src/app/admin/event-creator/page.tsx
index f65405b1..13c24f13 100644
--- a/frontend/src/app/admin/event-creator/page.tsx
+++ b/frontend/src/app/admin/event-creator/page.tsx
@@ -72,10 +72,17 @@ export default function EventCreator() {
       valueGetter: (params: { value?: string }) => {
         if (String(params)) {
           const itemDate = new Date(String(params));
-          const formattedDate = itemDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
-          const formattedTime = itemDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+          const formattedDate = itemDate.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          });
+          const formattedTime = itemDate.toLocaleTimeString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+          });
           const formattedDateTime = `${formattedDate}, ${formattedTime}-00:00`;
-          console.log('formattedDateTime:', formattedDateTime);
+          console.log("formattedDateTime:", formattedDateTime);
           return formattedDateTime;
         }
         return null;
@@ -107,33 +114,28 @@ export default function EventCreator() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [rerenderKey, setRerenderKey] = useState(0);
 
-
-
   useEffect(() => {
     getAllEventDetails()
       .then((result) => {
         if (result.success) {
-
           const now = new Date();
           const utcDateCurrent = now;
 
           const currentYear = new Date().getFullYear();
 
           const filteredCurrent = result.data.filter((item) => {
-
             const dateObj = new Date(item.date);
-            
-            const utcDateitem = dateObj.getTime();;
+
+            const utcDateitem = dateObj.getTime();
 
             console.log(utcDateitem);
-            
-            if (utcDateitem >= utcDateCurrent.getTime()) {
 
-            return true;
-            // to implement            
-            
-          }
-          return false});
+            if (utcDateitem >= utcDateCurrent.getTime()) {
+              return true;
+              // to implement
+            }
+            return false;
+          });
 
           const formattedCurrentRows = filteredCurrent.map((item) => ({
             ...item,
@@ -147,14 +149,12 @@ export default function EventCreator() {
             const utcDateitem = dateObj.getTime();
 
             console.log(utcDateitem);
-            
-            if (utcDateitem <utcDateCurrent.getTime()) {
 
-            return true;
-            // to implement            
-            
-          }
-          return false
+            if (utcDateitem < utcDateCurrent.getTime()) {
+              return true;
+              // to implement
+            }
+            return false;
           });
 
           const formattedPastRows = filteredPast.map((item) => ({
@@ -229,6 +229,9 @@ export default function EventCreator() {
   };
 
   const handleSetSidebarOpen = (open: boolean) => {
+    if (!open) {
+      setSelectedRow(null);
+    }
     setSidebarOpen(open);
   };
   const handleUpdateEvent = (eventData: EventDetails) => {
@@ -330,35 +333,36 @@ export default function EventCreator() {
               alignItems: "center",
             }}
           >
-            {pageToggle ===0 && (
-            <button
-              onClick={() => {
-                openEvent(true);
-              }}
-              style={{
-                position: "relative",
-                fontFamily: "Open Sans",
-                fontWeight: 700,
-                fontSize: "16px",
-                lineHeight: "24px",
-                letterSpacing: "0.32",
-                width: 196,
-                height: 40,
-                backgroundColor: "#694C97",
-                color: "#FFF",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                borderRadius: "4px",
-              }}
-            >
-              <img
-                src="/ic_add.svg"
-                alt="Add Icon"
-                style={{ width: 24, height: 24, marginRight: 5 }}
-              />
-              Add Event
-            </button>)}
+            {pageToggle === 0 && (
+              <button
+                onClick={() => {
+                  openEvent(true);
+                }}
+                style={{
+                  position: "relative",
+                  fontFamily: "Open Sans",
+                  fontWeight: 700,
+                  fontSize: "16px",
+                  lineHeight: "24px",
+                  letterSpacing: "0.32",
+                  width: 196,
+                  height: 40,
+                  backgroundColor: "#694C97",
+                  color: "#FFF",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  borderRadius: "4px",
+                }}
+              >
+                <img
+                  src="/ic_add.svg"
+                  alt="Add Icon"
+                  style={{ width: 24, height: 24, marginRight: 5 }}
+                />
+                Add Event
+              </button>
+            )}
           </Box>
         </Box>
 
@@ -381,7 +385,6 @@ export default function EventCreator() {
           sx={{
             "& .MuiDataGrid-row:hover": {
               background: "rgba(105, 76, 151, 0.05)",
-              
             },
           }}
           disableRowSelectionOnClick
@@ -406,7 +409,6 @@ export default function EventCreator() {
               fontSize: "16px",
               lineHeight: "24px",
               color: "#909090",
-              
             }}
           >
             <Image

From f54e50713a3279c22a9a80ac204bc44f0602dc8b Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Thu, 30 May 2024 01:18:05 -0700
Subject: [PATCH 11/17] put datepicker input behind gray-out when cancelling

---
 .../src/components/EventSidebar.module.css    |  8 -----
 frontend/src/components/EventSidebar.tsx      | 34 ++++++++++---------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/EventSidebar.module.css b/frontend/src/components/EventSidebar.module.css
index fd767a5e..084cdba2 100644
--- a/frontend/src/components/EventSidebar.module.css
+++ b/frontend/src/components/EventSidebar.module.css
@@ -205,11 +205,3 @@
   font-weight: 400;
   line-height: 24px;
 }
-
-.twoFieldsSameRow {
-  display: flex;
-  gap: 10px; /* Adjust the gap as needed */
-}
-.twoFieldsSameRow .textFieldSmallest {
-  flex: 1; /* Allows the fields to take up equal space */
-}
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 5b72767e..99582554 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -294,22 +294,6 @@ const EventSidebar = ({
   if (isEditing) {
     return (
       <div className={styles.sidebar}>
-        {warningOpen && (
-          <div className={styles.fixedPosition}>
-            <div className={styles.grayOut}></div>
-            <WarningModule
-              titleText="You have unsaved changes!"
-              subtitleText="Do you want to save the changes you made to this event?"
-              cancelText="Discard changes"
-              actionText="Save changes"
-              cancel={confirmCancel}
-              action={handleSave}
-              onClose={() => {
-                setWarningOpen(false);
-              }}
-            />
-          </div>
-        )}
         <div
           className={styles.closeWindow}
           onClick={() => {
@@ -444,6 +428,24 @@ const EventSidebar = ({
             <p>Save</p>
           </button>
         </div>
+        {warningOpen && (
+          <div className={styles.fixedPosition}>
+            <div className={styles.grayOut}></div>
+            <div className={styles.warningModule}>
+              <WarningModule
+                titleText="You have unsaved changes!"
+                subtitleText="Do you want to save the changes you made to this event?"
+                cancelText="Discard changes"
+                actionText="Save changes"
+                cancel={confirmCancel}
+                action={handleSave}
+                onClose={() => {
+                  setWarningOpen(false);
+                }}
+              />
+            </div>
+          </div>
+        )}
       </div>
     );
   } else {

From 67fff668ec83cad50409cc56cccf0edf6343a440 Mon Sep 17 00:00:00 2001
From: Sophia Zhu <sophiazhu16@gmail.com>
Date: Thu, 30 May 2024 01:23:39 -0700
Subject: [PATCH 12/17] adjust time input box placement

---
 frontend/src/components/EventSidebar.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 99582554..6f121259 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -364,7 +364,7 @@ const EventSidebar = ({
                 />
                 {errors.date && <p className={styles.error}>Date is required</p>}
               </div>
-              <div style={{ display: "flex" }}>
+              <div style={{ display: "flex", width: "240px" }}>
                 <div style={{ width: "100px" }}>
                   <TextField
                     className={styles.textFieldSmallest}
@@ -378,7 +378,16 @@ const EventSidebar = ({
                     error={errors.date}
                   />
                 </div>
-                <p style={{ marginTop: "50px", marginLeft: "10px", marginRight: "10px" }}>to</p>
+                <p
+                  style={{
+                    marginTop: "50px",
+                    marginLeft: "10px",
+                    marginRight: "10px",
+                    flexGrow: "1",
+                  }}
+                >
+                  to
+                </p>
                 <div style={{ width: "100px" }}>
                   <TextField
                     className={styles.textFieldSmallest}

From 32f02ad1355312439c41d808b45ad287fae30f99 Mon Sep 17 00:00:00 2001
From: jennymar <jenmar528@gmail.com>
Date: Sat, 1 Jun 2024 22:27:47 -0700
Subject: [PATCH 13/17] Date and time are separate fields. put req in proj

---
 backend/src/controllers/emails.ts             |   1 -
 backend/src/controllers/eventDetails.ts       |  24 ++--
 backend/src/controllers/newsletter.ts         |   1 -
 backend/src/models/eventDetails.ts            |   2 +
 backend/src/routes/eventDetails.ts            |   6 +-
 backend/src/validators/eventDetails.ts        |   1 -
 frontend/package-lock.json                    |  12 ++
 frontend/package.json                         |   1 +
 frontend/src/api/eventDetails.ts              |  12 +-
 frontend/src/app/admin/event-creator/page.tsx |  33 ++----
 frontend/src/app/admin/util/validateEnv.ts    |   2 +-
 .../src/components/EventSidebar.module.css    |   4 +-
 frontend/src/components/EventSidebar.tsx      | 110 +++++++++---------
 frontend/src/components/TextField.tsx         |   4 +-
 .../src/components/TextFieldSmall.module.css  |  93 ++++++++-------
 frontend/src/components/TextFieldSmall.tsx    |  47 ++++----
 .../components/TextFieldSmallest.module.css   |  96 +++++++--------
 frontend/src/components/TextFieldSmallest.tsx |  47 ++++----
 .../components/TextFieldWrapper.module.css    |  18 +--
 19 files changed, 264 insertions(+), 250 deletions(-)

diff --git a/backend/src/controllers/emails.ts b/backend/src/controllers/emails.ts
index c8beb4cc..e8ff310f 100644
--- a/backend/src/controllers/emails.ts
+++ b/backend/src/controllers/emails.ts
@@ -17,7 +17,6 @@ export const createEmail: RequestHandler = async (req, res, next) => {
     if (question === "Other") {
       questionType = "Other message";
     } else {
-      console.log("question: " + question);
       questionType = question.split(" ").slice(3).join(" ");
       questionType = questionType[0].toUpperCase() + questionType.slice(1);
     }
diff --git a/backend/src/controllers/eventDetails.ts b/backend/src/controllers/eventDetails.ts
index e5fcdf77..481d9de6 100644
--- a/backend/src/controllers/eventDetails.ts
+++ b/backend/src/controllers/eventDetails.ts
@@ -35,7 +35,17 @@ export const getEventDetails: RequestHandler = async (req, res, next) => {
 
 export const createEventDetails: RequestHandler = async (req, res, next) => {
   const errors = validationResult(req);
-  const { name, description, guidelines, date, location, imageURI,description_short } = req.body;
+  const {
+    name,
+    description,
+    guidelines,
+    date,
+    startTime,
+    endTime,
+    location,
+    imageURI,
+    description_short,
+  } = req.body;
 
   try {
     validationErrorParser(errors);
@@ -45,6 +55,8 @@ export const createEventDetails: RequestHandler = async (req, res, next) => {
       description,
       guidelines,
       date,
+      startTime,
+      endTime,
       location,
       imageURI,
       description_short,
@@ -61,7 +73,6 @@ export const updateEventDetails: RequestHandler = async (req, res, next) => {
   const { id } = req.params;
 
   if (id !== req.body._id) {
-    // If the _id in the URL does not match the _id in the body, bad request
     res.status(400);
   }
 
@@ -76,6 +87,7 @@ export const updateEventDetails: RequestHandler = async (req, res, next) => {
     const updatedEventDetails = await EventDetails.findById(id);
     if (updatedEventDetails === null) {
       // No event found, something went wrong
+      console.log("updatedEventDetails is null");
       res.status(404);
     }
     res.status(200).json(updatedEventDetails);
@@ -84,25 +96,17 @@ export const updateEventDetails: RequestHandler = async (req, res, next) => {
   }
 };
 export const deleteEventDetails: RequestHandler = async (req, res, next) => {
-
-  console.log("haha2");
   const { id } = req.params;
 
   try {
     const eventDetails = await EventDetails.findByIdAndDelete(id);
-    console.log(eventDetails);
 
     if (!eventDetails) {
-
       throw createHttpError(404, "event not found");
-
     }
 
     res.status(200).json(eventDetails);
   } catch (error) {
-
     next(error);
-
   }
 };
-
diff --git a/backend/src/controllers/newsletter.ts b/backend/src/controllers/newsletter.ts
index e3b57c66..2b8a0fbe 100644
--- a/backend/src/controllers/newsletter.ts
+++ b/backend/src/controllers/newsletter.ts
@@ -49,7 +49,6 @@ export const createNewsletter: RequestHandler = async (req, res, next) => {
       content,
     });
 
-    console.log("newsletter: ", newsletter);
     res.status(201).json(newsletter);
   } catch (error) {
     console.error("Error creating newsletter:", error);
diff --git a/backend/src/models/eventDetails.ts b/backend/src/models/eventDetails.ts
index 0a8afe4c..1f048f4b 100644
--- a/backend/src/models/eventDetails.ts
+++ b/backend/src/models/eventDetails.ts
@@ -5,6 +5,8 @@ const eventDetailsSchema = new Schema({
   description: { type: String, required: true },
   guidelines: { type: String, required: true },
   date: { type: String, required: true },
+  startTime: { type: String, required: true },
+  endTime: { type: String, required: true },
   location: { type: String, required: true },
   imageURI: { type: String, required: true },
   description_short: { type: String, required: true },
diff --git a/backend/src/routes/eventDetails.ts b/backend/src/routes/eventDetails.ts
index 15b2d8b3..4a884f72 100644
--- a/backend/src/routes/eventDetails.ts
+++ b/backend/src/routes/eventDetails.ts
@@ -16,6 +16,10 @@ router.post(
   EventDetailsValidator.createEventDetails,
   EventDetailsController.createEventDetails,
 );
-router.delete("/:id", EventDetailsValidator.deleteEventDetails, EventDetailsController.deleteEventDetails);
+router.delete(
+  "/:id",
+  EventDetailsValidator.deleteEventDetails,
+  EventDetailsController.deleteEventDetails,
+);
 
 export default router;
diff --git a/backend/src/validators/eventDetails.ts b/backend/src/validators/eventDetails.ts
index 9fa6b296..0caf36b3 100644
--- a/backend/src/validators/eventDetails.ts
+++ b/backend/src/validators/eventDetails.ts
@@ -60,7 +60,6 @@ const makeDescriptionShortValidator = () =>
     .isString()
     .withMessage("description_short must be a string");
 
-
 export const createEventDetails = [
   makeNameValidator(),
   makeDescriptionValidator(),
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ad5fe326..7ee6b774 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -32,6 +32,7 @@
       "devDependencies": {
         "@types/node": "^20",
         "@types/react": "^18",
+        "@types/react-datepicker": "^6.2.0",
         "@types/react-dom": "^18",
         "@typescript-eslint/eslint-plugin": "^6.18.0",
         "@typescript-eslint/parser": "^6.18.0",
@@ -1845,6 +1846,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-datepicker": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-6.2.0.tgz",
+      "integrity": "sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "@types/react": "*",
+        "date-fns": "^3.3.1"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.2.18",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a8c5909a..f2c0920d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,6 +38,7 @@
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.18.0",
     "@typescript-eslint/parser": "^6.18.0",
diff --git a/frontend/src/api/eventDetails.ts b/frontend/src/api/eventDetails.ts
index d4a15d55..30ff98cb 100644
--- a/frontend/src/api/eventDetails.ts
+++ b/frontend/src/api/eventDetails.ts
@@ -8,6 +8,8 @@ export type EventDetails = {
   description: string;
   guidelines: string;
   date: string;
+  startTime: string;
+  endTime: string;
   location: string;
   imageURI: string;
   description_short: string;
@@ -38,6 +40,8 @@ export type CreateEventDetailsRequest = {
   description: string;
   guidelines: string;
   date: string;
+  startTime: string;
+  endTime: string;
   location: string;
   imageURI: string;
   description_short: string;
@@ -47,6 +51,7 @@ export async function createEventDetails(
   eventDetails: CreateEventDetailsRequest,
 ): Promise<APIResult<EventDetails>> {
   try {
+    console.log("eventDetails", eventDetails);
     const response = await post("/api/eventDetails", eventDetails);
     const json = (await response.json()) as EventDetails;
     return { success: true, data: json };
@@ -62,6 +67,8 @@ export type UpdateEventDetailsRequest = {
   description: string;
   guidelines: string;
   date: string;
+  startTime: string;
+  endTime: string;
   location: string;
   imageURI: string;
   description_short: string;
@@ -76,8 +83,10 @@ export async function updateEventDetails(
       "Content-Type": "application/json",
     });
     const json = (await response.json()) as EventDetails;
+    console.log("updateEventDetails json: ", json);
     return { success: true, data: json };
   } catch (error) {
+    console.log("updateEventDetails error: ", error);
     return handleAPIError(error);
   }
 }
@@ -88,9 +97,6 @@ export async function deleteEventDetails(id: string): Promise<APIResult<EventDet
     const json = (await response.json()) as EventDetails;
     return { success: true, data: json };
   } catch (error) {
-    console.log("haha");
     return handleAPIError(error);
   }
 }
-
-
diff --git a/frontend/src/app/admin/event-creator/page.tsx b/frontend/src/app/admin/event-creator/page.tsx
index 13c24f13..0da0a65f 100644
--- a/frontend/src/app/admin/event-creator/page.tsx
+++ b/frontend/src/app/admin/event-creator/page.tsx
@@ -69,23 +69,14 @@ export default function EventCreator() {
       cellClassName: `${styles.cellEntry} ${styles.cellBorderStyle}`,
       disableColumnMenu: true,
       renderHeader: () => <div>Date/Time</div>,
-      valueGetter: (params: { value?: string }) => {
-        if (String(params)) {
-          const itemDate = new Date(String(params));
-          const formattedDate = itemDate.toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          });
-          const formattedTime = itemDate.toLocaleTimeString("en-US", {
-            hour: "2-digit",
-            minute: "2-digit",
-          });
-          const formattedDateTime = `${formattedDate}, ${formattedTime}-00:00`;
-          console.log("formattedDateTime:", formattedDateTime);
-          return formattedDateTime;
-        }
-        return null;
+      renderCell: (params) => {
+        const { date, startTime, endTime } = params.row;
+        const formattedDate = new Date(date).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        });
+        return `${formattedDate}. ${startTime} - ${endTime}`;
       },
     },
 
@@ -121,8 +112,6 @@ export default function EventCreator() {
           const now = new Date();
           const utcDateCurrent = now;
 
-          const currentYear = new Date().getFullYear();
-
           const filteredCurrent = result.data.filter((item) => {
             const dateObj = new Date(item.date);
 
@@ -132,7 +121,6 @@ export default function EventCreator() {
 
             if (utcDateitem >= utcDateCurrent.getTime()) {
               return true;
-              // to implement
             }
             return false;
           });
@@ -152,7 +140,6 @@ export default function EventCreator() {
 
             if (utcDateitem < utcDateCurrent.getTime()) {
               return true;
-              // to implement
             }
             return false;
           });
@@ -235,19 +222,23 @@ export default function EventCreator() {
     setSidebarOpen(open);
   };
   const handleUpdateEvent = (eventData: EventDetails) => {
+    console.log("page.tsx handleUpdateEvent");
     updateEventDetails(eventData)
       .then((result) => {
         if (!result.success) {
+          console.log("result was not a success");
           alert(result.error);
           console.error("ERROR:", result.error);
         }
       })
       .catch((error) => {
+        console.log("catching error after updateEventDetails");
         alert(error);
       });
   };
 
   const handleCreateEvent = (eventData: CreateEventDetailsRequest) => {
+    console.log("page.tsx eventData ", eventData);
     createEventDetails(eventData)
       .then((result) => {
         if (!result.success) {
diff --git a/frontend/src/app/admin/util/validateEnv.ts b/frontend/src/app/admin/util/validateEnv.ts
index f362f9e8..2ab30d9d 100644
--- a/frontend/src/app/admin/util/validateEnv.ts
+++ b/frontend/src/app/admin/util/validateEnv.ts
@@ -4,7 +4,7 @@
  */
 
 import { cleanEnv } from "envalid";
-import { str, json } from "envalid/dist/validators";
+import { json, str } from "envalid/dist/validators";
 
 /**
  * NextJS only allows the frontend to access environment variables if they start with
diff --git a/frontend/src/components/EventSidebar.module.css b/frontend/src/components/EventSidebar.module.css
index 084cdba2..8ecee7c3 100644
--- a/frontend/src/components/EventSidebar.module.css
+++ b/frontend/src/components/EventSidebar.module.css
@@ -181,7 +181,7 @@
 .textArea {
   width: 454px;
   height: 80px;
-  padding: 12px;
+  padding: 11px;
   border: 1px solid #d8d8d8;
   border-radius: 4px;
   font-size: 14px;
@@ -190,7 +190,7 @@
 .textAreaLong {
   width: 454px;
   height: 120px;
-  padding: 12px;
+  padding: 10px;
   border: 1px solid #d8d8d8;
   border-radius: 4px;
   font-size: 14px;
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 6f121259..74c3dfb4 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
@@ -17,8 +17,8 @@ import { WarningModule } from "@/components/WarningModule";
 type eventSidebarProps = {
   eventDetails: null | EventDetails;
   setSidebarOpen: (open: boolean) => void;
-  updateEvent: (eventData: EventDetails) => boolean;
-  createEvent: (eventData: CreateEventDetailsRequest) => boolean;
+  updateEvent: (eventData: EventDetails) => void;
+  createEvent: (eventData: CreateEventDetailsRequest) => void;
 };
 
 type formErrors = {
@@ -27,6 +27,8 @@ type formErrors = {
   description_short?: boolean;
   guidelines?: boolean;
   date?: boolean;
+  startTime?: boolean;
+  endTime?: boolean;
   location?: boolean;
 };
 
@@ -42,22 +44,9 @@ const EventSidebar = ({
     eventDetails ? eventDetails.description_short : "",
   );
   const [date, setDate] = useState(eventDetails ? new Date(eventDetails.date) : new Date());
-  const [startTime, setStartTime] = useState(
-    eventDetails
-      ? new Date(eventDetails.date).toLocaleTimeString("en-US", {
-          hour: "2-digit",
-          minute: "2-digit",
-        })
-      : "",
-  );
-  const [endTime, setEndTime] = useState(
-    eventDetails
-      ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString(
-          "en-US",
-          { hour: "2-digit", minute: "2-digit" },
-        )
-      : "",
-  );
+  const [startTime, setStartTime] = useState(eventDetails ? eventDetails.startTime : "");
+  const [endTime, setEndTime] = useState(eventDetails ? eventDetails.endTime : "");
+
   const [location, setLocation] = useState(eventDetails ? eventDetails.location : "");
   const [guidelines, setGuidelines] = useState(eventDetails ? eventDetails.guidelines : "");
   const [isEditing, setIsEditing] = useState<boolean>(!eventDetails);
@@ -66,44 +55,30 @@ const EventSidebar = ({
   const [warningOpen, setWarningOpen] = useState(false);
   const [showAlert, setShowAlert] = useState(false);
 
-  useEffect(() => {
-    if (date && startTime && endTime) {
-      const [startHour, startMinute] = startTime.split(":");
-      const [endHour, endMinute] = endTime.split(":");
-      const updatedStartDate = new Date(date);
-      const updatedEndDate = new Date(date);
+  // useEffect(() => {
+  //   if (date && startTime && endTime) {
+  //     const [startHour, startMinute] = startTime.split(":");
+  //     const [endHour, endMinute] = endTime.split(":");
+  //     const updatedStartDate = new Date(date);
+  //     const updatedEndDate = new Date(date);
 
-      updatedStartDate.setHours(parseInt(startHour), parseInt(startMinute));
-      updatedEndDate.setHours(parseInt(endHour), parseInt(endMinute));
+  //     updatedStartDate.setHours(parseInt(startHour), parseInt(startMinute));
+  //     updatedEndDate.setHours(parseInt(endHour), parseInt(endMinute));
 
-      setDate(updatedStartDate);
-      setEndTime(
-        updatedEndDate.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
-      );
-    }
-  }, [startTime, endTime]);
+  //     setDate(updatedStartDate);
+  //     setEndTime(
+  //       updatedEndDate.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
+  //     );
+  //   }
+  // }, [startTime, endTime]);
 
   const confirmCancel = () => {
     setName(eventDetails ? eventDetails.name : "");
     setDescription(eventDetails ? eventDetails.description : "");
     setDescription_short(eventDetails ? eventDetails.description_short : "");
     setDate(eventDetails ? new Date(eventDetails.date) : new Date());
-    setStartTime(
-      eventDetails
-        ? new Date(eventDetails.date).toLocaleTimeString("en-US", {
-            hour: "2-digit",
-            minute: "2-digit",
-          })
-        : "",
-    );
-    setEndTime(
-      eventDetails
-        ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString(
-            "en-US",
-            { hour: "2-digit", minute: "2-digit" },
-          )
-        : "",
-    );
+    setStartTime(eventDetails ? eventDetails.startTime : "");
+    setEndTime(eventDetails ? eventDetails.endTime : "");
     setLocation(eventDetails ? eventDetails.location : "");
     setGuidelines(eventDetails ? eventDetails.guidelines : "");
     setIsEditing(false);
@@ -114,11 +89,14 @@ const EventSidebar = ({
   };
 
   const handleCancel = () => {
+    const defaultDate = new Date();
     if (
       name !== (eventDetails ? eventDetails.name : "") ||
       description !== (eventDetails ? eventDetails.description : "") ||
       description_short !== (eventDetails ? eventDetails.description_short : "") ||
-      date !== (eventDetails ? new Date(eventDetails.date) : new Date()) ||
+      date !== (eventDetails ? new Date(eventDetails.date) : defaultDate) ||
+      startTime !== (eventDetails ? eventDetails.startTime : "") ||
+      endTime !== (eventDetails ? eventDetails.endTime : "") ||
       location !== (eventDetails ? eventDetails.location : "") ||
       guidelines !== (eventDetails ? eventDetails.guidelines : "")
     ) {
@@ -129,11 +107,14 @@ const EventSidebar = ({
   };
 
   const handleCloseSidebar = () => {
+    const defaultDate = new Date();
     if (
       name !== (eventDetails ? eventDetails.name : "") ||
       description !== (eventDetails ? eventDetails.description : "") ||
       description_short !== (eventDetails ? eventDetails.description_short : "") ||
-      date !== (eventDetails ? new Date(eventDetails.date) : new Date()) ||
+      date !== (eventDetails ? new Date(eventDetails.date) : defaultDate) ||
+      startTime !== (eventDetails ? eventDetails.startTime : "") ||
+      endTime !== (eventDetails ? eventDetails.endTime : "") ||
       location !== (eventDetails ? eventDetails.location : "") ||
       guidelines !== (eventDetails ? eventDetails.guidelines : "")
     ) {
@@ -146,12 +127,15 @@ const EventSidebar = ({
 
   const handleSave = () => {
     setWarningOpen(false);
+    console.log("handleSave");
 
     if (
       name === "" ||
       description === "" ||
       description_short === "" ||
       !date ||
+      startTime === "" ||
+      endTime === "" ||
       location === "" ||
       guidelines === ""
     ) {
@@ -160,37 +144,49 @@ const EventSidebar = ({
         description: description === "",
         description_short: description_short === "",
         date: !date,
+        startTime: startTime === "",
+        endTime: endTime === "",
         location: location === "",
         guidelines: guidelines === "",
       });
     } else {
       setIsEditing(false);
       if (eventDetails) {
+        console.log("eventDetails exist");
         updateEvent({
           _id: eventDetails._id,
           name,
           description,
           guidelines,
           date: date.toISOString(),
+          startTime,
+          endTime,
           location,
           imageURI: eventDetails.imageURI,
           description_short,
         });
+        console.log("after updating event");
       } else {
         createEvent({
           name,
           description,
           guidelines,
           date: date.toISOString(),
+          startTime,
+          endTime,
           location,
-          imageURI: "https://tse.ucsd.edu/assets/images/icons__tse-bulb__128.png",
+          imageURI:
+            "https://images.unsplash.com/photo-1559027615-cd4628902d4a?q=80&w=2674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
           description_short,
         });
+        console.log("after creating event");
       }
+
       setIsEditing(false);
       setErrors({});
       setShowAlert(true);
       window.location.reload();
+      console.log("last line in save");
     }
   };
 
@@ -260,7 +256,7 @@ const EventSidebar = ({
           <h2>Event Description (long)</h2>
           <pre className={styles.textAreaContent}>{description}</pre>
           <h2>Date & Time</h2>
-          <p>{date.toLocaleString()}</p>
+          <p>{`${date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}, ${startTime} - ${endTime}`}</p>
           <h2>Location</h2>
           <p>{location}</p>
           <h2>Guidelines</h2>
@@ -345,8 +341,8 @@ const EventSidebar = ({
               <div className={styles.textField}>
                 <DatePicker
                   selected={date}
-                  onChange={(date: Date) => {
-                    setDate(date);
+                  onChange={(dateObj: Date) => {
+                    setDate(dateObj);
                   }}
                   dateFormat="MMMM d, yyyy"
                   customInput={
@@ -375,7 +371,6 @@ const EventSidebar = ({
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                       setStartTime(event.target.value);
                     }}
-                    error={errors.date}
                   />
                 </div>
                 <p
@@ -398,7 +393,6 @@ const EventSidebar = ({
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                       setEndTime(event.target.value);
                     }}
-                    error={errors.date}
                   />
                 </div>
               </div>
@@ -494,7 +488,7 @@ const EventSidebar = ({
           <h2>Event Description (long)</h2>
           <pre className={styles.textAreaContent}>{description}</pre>
           <h2>Date & Time</h2>
-          <p>{date.toLocaleString()}</p>
+          <p>{`${date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}, ${startTime} - ${endTime}`}</p>
           <h2>Location</h2>
           <p>{location}</p>
           <h2>Guidelines</h2>
diff --git a/frontend/src/components/TextField.tsx b/frontend/src/components/TextField.tsx
index 7c258b79..c097e462 100644
--- a/frontend/src/components/TextField.tsx
+++ b/frontend/src/components/TextField.tsx
@@ -19,7 +19,7 @@ export type TextFieldProps = {
  * See `src/components/Button.tsx` for an explanation of `React.forwardRef`.
  */
 export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
-  { label, error = false, className, placeholder,...props },
+  { label, error = false, className, placeholder, ...props },
   ref,
 ) {
   let wrapperClass = styles.wrapper;
@@ -34,7 +34,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(func
     <div className={wrapperClass}>
       <label className={styles.label}>
         <p>{label}</p>
-        <input ref={ref} type="text" className={inputClass} {...props} placeholder= {placeholder}/>
+        <input ref={ref} type="text" className={inputClass} {...props} placeholder={placeholder} />
       </label>
     </div>
   );
diff --git a/frontend/src/components/TextFieldSmall.module.css b/frontend/src/components/TextFieldSmall.module.css
index 010af24c..fe4d3ffc 100644
--- a/frontend/src/components/TextFieldSmall.module.css
+++ b/frontend/src/components/TextFieldSmall.module.css
@@ -1,48 +1,47 @@
 .wrapper {
-    padding-top: 24px;
-    width: 20rem;
-    height: auto;
-  }
-  
-  .label {
-    font: var(--font-body);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-    color: #909090;
-  }
-  
-  .input {
-    width: 50%;
-    line-height: 20px;
-    padding: 6px 12px;
-    border: 1px solid #d8d8d8;
-    border-radius: 4px;
-    font: var(--font-body);
-    color: var(--Neutral-Black, #000);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-  }
-  
-  .inputcontent {
-    width: 100%;
-    height: 300px;
-    line-height: 20px;
-    padding: 6px 12px;
-    border: 1px solid #d8d8d8;
-    border-radius: 4px;
-    font: var(--font-body);
-    color: var(--Neutral-Black, #000);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-  }
-  
-  .input.error {
-    border-color: #b93b3b;
-  }
-  
\ No newline at end of file
+  padding-top: 24px;
+  width: 20rem;
+  height: auto;
+}
+
+.label {
+  font: var(--font-body);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+  color: #909090;
+}
+
+.input {
+  width: 50%;
+  line-height: 20px;
+  padding: 6px 12px;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  font: var(--font-body);
+  color: var(--Neutral-Black, #000);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+
+.inputcontent {
+  width: 100%;
+  height: 300px;
+  line-height: 20px;
+  padding: 6px 12px;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  font: var(--font-body);
+  color: var(--Neutral-Black, #000);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+
+.input.error {
+  border-color: #b93b3b;
+}
diff --git a/frontend/src/components/TextFieldSmall.tsx b/frontend/src/components/TextFieldSmall.tsx
index 6ec7a88d..817cab28 100644
--- a/frontend/src/components/TextFieldSmall.tsx
+++ b/frontend/src/components/TextFieldSmall.tsx
@@ -18,24 +18,29 @@ export type TextFieldSmallProps = {
 /**
  * See `src/components/Button.tsx` for an explanation of `React.forwardRef`.
  */
-export const TextFieldSmall = React.forwardRef<HTMLInputElement, TextFieldSmallProps>(function TextFieldSmall(
-  { label, error = false, className, placeholder,...props },
-  ref,
-) {
-  let wrapperClass = styles.wrapper;
-  if (className) {
-    wrapperClass += ` ${className}`;
-  }
-  let inputClass = styles.input;
-  if (error) {
-    inputClass += ` ${styles.error}`;
-  }
-  return (
-    <div className={wrapperClass}>
-      <label className={styles.label}>
-        <p>{label}</p>
-        <input ref={ref} type="text" className={inputClass} {...props} placeholder= {placeholder}/>
-      </label>
-    </div>
-  );
-});
+export const TextFieldSmall = React.forwardRef<HTMLInputElement, TextFieldSmallProps>(
+  function TextFieldSmall({ label, error = false, className, placeholder, ...props }, ref) {
+    let wrapperClass = styles.wrapper;
+    if (className) {
+      wrapperClass += ` ${className}`;
+    }
+    let inputClass = styles.input;
+    if (error) {
+      inputClass += ` ${styles.error}`;
+    }
+    return (
+      <div className={wrapperClass}>
+        <label className={styles.label}>
+          <p>{label}</p>
+          <input
+            ref={ref}
+            type="text"
+            className={inputClass}
+            {...props}
+            placeholder={placeholder}
+          />
+        </label>
+      </div>
+    );
+  },
+);
diff --git a/frontend/src/components/TextFieldSmallest.module.css b/frontend/src/components/TextFieldSmallest.module.css
index b4540584..59006125 100644
--- a/frontend/src/components/TextFieldSmallest.module.css
+++ b/frontend/src/components/TextFieldSmallest.module.css
@@ -1,55 +1,49 @@
 .wrapper {
-  
-    padding-top: 24px;
-    width: 20rem;
-    height: auto;
-  }
-  
-  .label {
-    
-    font: var(--font-body);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-    color: #909090;
-  }
-  
-  .input {
-    
-    width: 40%;
-    line-height: 20px;
-    padding: 6px 12px;
-    border: 1px solid #d8d8d8;
-    border-radius: 4px;
-    font: var(--font-body);
-    color: var(--Neutral-Black, #000);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
+  padding-top: 24px;
+  width: 20rem;
+  height: auto;
+}
 
-  }
-  
-  .inputcontent {
-        margin-right: 1px;
+.label {
+  font: var(--font-body);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+  color: #909090;
+}
 
-    width: 100%;
-    height: 300px;
-    line-height: 20px;
-    padding: 6px 12px;
-    border: 1px solid #d8d8d8;
-    border-radius: 4px;
-    font: var(--font-body);
-    color: var(--Neutral-Black, #000);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
+.input {
+  width: 40%;
+  line-height: 20px;
+  padding: 6px 12px;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  font: var(--font-body);
+  color: var(--Neutral-Black, #000);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
 
-  }
-  
-  .input.error {
-    border-color: #b93b3b;
-  }
-  
\ No newline at end of file
+.inputcontent {
+  margin-right: 1px;
+
+  width: 100%;
+  height: 300px;
+  line-height: 20px;
+  padding: 6px 12px;
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+  font: var(--font-body);
+  color: var(--Neutral-Black, #000);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+
+.input.error {
+  border-color: #b93b3b;
+}
diff --git a/frontend/src/components/TextFieldSmallest.tsx b/frontend/src/components/TextFieldSmallest.tsx
index 3fd669c5..6e9cf439 100644
--- a/frontend/src/components/TextFieldSmallest.tsx
+++ b/frontend/src/components/TextFieldSmallest.tsx
@@ -18,24 +18,29 @@ export type TextFieldSmallProps = {
 /**
  * See `src/components/Button.tsx` for an explanation of `React.forwardRef`.
  */
-export const TextFieldSmallest = React.forwardRef<HTMLInputElement, TextFieldSmallProps>(function TextFieldSmallest(
-  { label, error = false, className, placeholder,...props },
-  ref,
-) {
-  let wrapperClass = styles.wrapper;
-  if (className) {
-    wrapperClass += ` ${className}`;
-  }
-  let inputClass = styles.input;
-  if (error) {
-    inputClass += ` ${styles.error}`;
-  }
-  return (
-    <div className={wrapperClass}>
-      <label className={styles.label}>
-        <p>{label}</p>
-        <input ref={ref} type="text" className={inputClass} {...props} placeholder= {placeholder}/>
-      </label>
-    </div>
-  );
-});
+export const TextFieldSmallest = React.forwardRef<HTMLInputElement, TextFieldSmallProps>(
+  function TextFieldSmallest({ label, error = false, className, placeholder, ...props }, ref) {
+    let wrapperClass = styles.wrapper;
+    if (className) {
+      wrapperClass += ` ${className}`;
+    }
+    let inputClass = styles.input;
+    if (error) {
+      inputClass += ` ${styles.error}`;
+    }
+    return (
+      <div className={wrapperClass}>
+        <label className={styles.label}>
+          <p>{label}</p>
+          <input
+            ref={ref}
+            type="text"
+            className={inputClass}
+            {...props}
+            placeholder={placeholder}
+          />
+        </label>
+      </div>
+    );
+  },
+);
diff --git a/frontend/src/components/TextFieldWrapper.module.css b/frontend/src/components/TextFieldWrapper.module.css
index fbe9f9dc..59760eac 100644
--- a/frontend/src/components/TextFieldWrapper.module.css
+++ b/frontend/src/components/TextFieldWrapper.module.css
@@ -1,10 +1,10 @@
 .wrapper {
-    display: flex;
-    align-items: center;
-  }
-  
-  .toText {
-    margin: 0 10px;
-    font-size: 16px;
-    color: #000; /* You can adjust the color and other styles as needed */
-  }
\ No newline at end of file
+  display: flex;
+  align-items: center;
+}
+
+.toText {
+  margin: 0 10px;
+  font-size: 16px;
+  color: #000; /* You can adjust the color and other styles as needed */
+}

From 9632e11544e6bb61c96089bbf1e8b0e6b3152324 Mon Sep 17 00:00:00 2001
From: jennymar <jenmar528@gmail.com>
Date: Sat, 1 Jun 2024 22:29:53 -0700
Subject: [PATCH 14/17] Backend changes built

---
 backend/dist/controllers/emails.js       |  1 -
 backend/dist/controllers/eventDetails.js | 23 ++++++++++++++++++++---
 backend/dist/controllers/newsletter.js   |  1 -
 backend/dist/models/eventDetails.js      |  3 +++
 backend/dist/routes/eventDetails.js      |  1 +
 backend/dist/validators/eventDetails.js  | 10 +++++++++-
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/backend/dist/controllers/emails.js b/backend/dist/controllers/emails.js
index 25cb6c37..9e827e48 100644
--- a/backend/dist/controllers/emails.js
+++ b/backend/dist/controllers/emails.js
@@ -25,7 +25,6 @@ const createEmail = (req, res, next) => __awaiter(void 0, void 0, void 0, functi
             questionType = "Other message";
         }
         else {
-            console.log("question: " + question);
             questionType = question.split(" ").slice(3).join(" ");
             questionType = questionType[0].toUpperCase() + questionType.slice(1);
         }
diff --git a/backend/dist/controllers/eventDetails.js b/backend/dist/controllers/eventDetails.js
index 387bfb61..abf3812a 100644
--- a/backend/dist/controllers/eventDetails.js
+++ b/backend/dist/controllers/eventDetails.js
@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateEventDetails = exports.createEventDetails = exports.getEventDetails = exports.getAllEventDetails = void 0;
+exports.deleteEventDetails = exports.updateEventDetails = exports.createEventDetails = exports.getEventDetails = exports.getAllEventDetails = void 0;
 const express_validator_1 = require("express-validator");
 const http_errors_1 = __importDefault(require("http-errors"));
 const eventDetails_1 = __importDefault(require("../models/eventDetails"));
@@ -46,7 +46,7 @@ const getEventDetails = (req, res, next) => __awaiter(void 0, void 0, void 0, fu
 exports.getEventDetails = getEventDetails;
 const createEventDetails = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
     const errors = (0, express_validator_1.validationResult)(req);
-    const { name, description, guidelines, date, location, imageURI } = req.body;
+    const { name, description, guidelines, date, startTime, endTime, location, imageURI, description_short, } = req.body;
     try {
         (0, validationErrorParser_1.default)(errors);
         const eventDetails = yield eventDetails_1.default.create({
@@ -54,8 +54,11 @@ const createEventDetails = (req, res, next) => __awaiter(void 0, void 0, void 0,
             description,
             guidelines,
             date,
+            startTime,
+            endTime,
             location,
             imageURI,
+            description_short,
         });
         res.status(201).json(eventDetails);
     }
@@ -68,7 +71,6 @@ const updateEventDetails = (req, res, next) => __awaiter(void 0, void 0, void 0,
     const errors = (0, express_validator_1.validationResult)(req);
     const { id } = req.params;
     if (id !== req.body._id) {
-        // If the _id in the URL does not match the _id in the body, bad request
         res.status(400);
     }
     try {
@@ -81,6 +83,7 @@ const updateEventDetails = (req, res, next) => __awaiter(void 0, void 0, void 0,
         const updatedEventDetails = yield eventDetails_1.default.findById(id);
         if (updatedEventDetails === null) {
             // No event found, something went wrong
+            console.log("updatedEventDetails is null");
             res.status(404);
         }
         res.status(200).json(updatedEventDetails);
@@ -90,3 +93,17 @@ const updateEventDetails = (req, res, next) => __awaiter(void 0, void 0, void 0,
     }
 });
 exports.updateEventDetails = updateEventDetails;
+const deleteEventDetails = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    const { id } = req.params;
+    try {
+        const eventDetails = yield eventDetails_1.default.findByIdAndDelete(id);
+        if (!eventDetails) {
+            throw (0, http_errors_1.default)(404, "event not found");
+        }
+        res.status(200).json(eventDetails);
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.deleteEventDetails = deleteEventDetails;
diff --git a/backend/dist/controllers/newsletter.js b/backend/dist/controllers/newsletter.js
index a4b33747..0ea0df2c 100644
--- a/backend/dist/controllers/newsletter.js
+++ b/backend/dist/controllers/newsletter.js
@@ -56,7 +56,6 @@ const createNewsletter = (req, res, next) => __awaiter(void 0, void 0, void 0, f
             date,
             content,
         });
-        console.log("newsletter: ", newsletter);
         res.status(201).json(newsletter);
     }
     catch (error) {
diff --git a/backend/dist/models/eventDetails.js b/backend/dist/models/eventDetails.js
index 8a0986ce..bd33a4a1 100644
--- a/backend/dist/models/eventDetails.js
+++ b/backend/dist/models/eventDetails.js
@@ -6,7 +6,10 @@ const eventDetailsSchema = new mongoose_1.Schema({
     description: { type: String, required: true },
     guidelines: { type: String, required: true },
     date: { type: String, required: true },
+    startTime: { type: String, required: true },
+    endTime: { type: String, required: true },
     location: { type: String, required: true },
     imageURI: { type: String, required: true },
+    description_short: { type: String, required: true },
 });
 exports.default = (0, mongoose_1.model)("EventDetails", eventDetailsSchema);
diff --git a/backend/dist/routes/eventDetails.js b/backend/dist/routes/eventDetails.js
index a23b698f..feef8a4b 100644
--- a/backend/dist/routes/eventDetails.js
+++ b/backend/dist/routes/eventDetails.js
@@ -35,4 +35,5 @@ router.get("/:id", EventDetailsValidator.getEventDetails, EventDetailsController
 router.put("/:id", // getEventDetails validator works to just check ID
 EventDetailsValidator.getEventDetails, EventDetailsController.updateEventDetails);
 router.post("/", EventDetailsValidator.createEventDetails, EventDetailsController.createEventDetails);
+router.delete("/:id", EventDetailsValidator.deleteEventDetails, EventDetailsController.deleteEventDetails);
 exports.default = router;
diff --git a/backend/dist/validators/eventDetails.js b/backend/dist/validators/eventDetails.js
index 4c5a5336..04a26eea 100644
--- a/backend/dist/validators/eventDetails.js
+++ b/backend/dist/validators/eventDetails.js
@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEventDetails = exports.createEventDetails = void 0;
+exports.deleteEventDetails = exports.getEventDetails = exports.createEventDetails = void 0;
 const express_validator_1 = require("express-validator");
 const makeIDValidator = () => (0, express_validator_1.body)("_id")
     .exists()
@@ -47,6 +47,12 @@ const makeImageURIValidator = () => (0, express_validator_1.body)("imageURI")
     .bail()
     .isURL()
     .withMessage("imageURI must be a URL");
+const makeDescriptionShortValidator = () => (0, express_validator_1.body)("description_short")
+    .exists()
+    .withMessage("description_short is required")
+    .bail()
+    .isString()
+    .withMessage("description_short must be a string");
 exports.createEventDetails = [
     makeNameValidator(),
     makeDescriptionValidator(),
@@ -54,5 +60,7 @@ exports.createEventDetails = [
     makeDateValidator(),
     makeLocationValidator(),
     makeImageURIValidator(),
+    makeDescriptionShortValidator(),
 ];
 exports.getEventDetails = [makeIDValidator()];
+exports.deleteEventDetails = [makeIDValidator()];

From 33a96c6957c17728e591499d8fddd137d12c39fc Mon Sep 17 00:00:00 2001
From: jennymar <jenmar528@gmail.com>
Date: Mon, 3 Jun 2024 20:36:17 -0700
Subject: [PATCH 15/17] Fixed fetch error with event and newsletter creators

---
 backend/src/controllers/eventDetails.ts       |  2 +
 backend/src/services/paypal.ts                |  5 +++
 frontend/src/api/eventDetails.ts              |  4 +-
 frontend/src/api/requests.ts                  |  1 +
 frontend/src/app/admin/event-creator/page.tsx | 43 ++++++-------------
 .../src/app/admin/newsletter-creator/page.tsx | 38 ++++++----------
 frontend/src/components/EventSidebar.tsx      | 10 ++---
 frontend/src/components/NewsletterSidebar.tsx | 10 ++---
 8 files changed, 45 insertions(+), 68 deletions(-)

diff --git a/backend/src/controllers/eventDetails.ts b/backend/src/controllers/eventDetails.ts
index 481d9de6..ea0b5805 100644
--- a/backend/src/controllers/eventDetails.ts
+++ b/backend/src/controllers/eventDetails.ts
@@ -34,6 +34,7 @@ export const getEventDetails: RequestHandler = async (req, res, next) => {
 };
 
 export const createEventDetails: RequestHandler = async (req, res, next) => {
+  console.log("backend createEventDetails. req.body: ", req.body);
   const errors = validationResult(req);
   const {
     name,
@@ -62,6 +63,7 @@ export const createEventDetails: RequestHandler = async (req, res, next) => {
       description_short,
     });
 
+    // console.log("added eventDetails: ", eventDetails);
     res.status(201).json(eventDetails);
   } catch (error) {
     next(error);
diff --git a/backend/src/services/paypal.ts b/backend/src/services/paypal.ts
index e86cc026..b1e0f00e 100644
--- a/backend/src/services/paypal.ts
+++ b/backend/src/services/paypal.ts
@@ -1,6 +1,8 @@
 const PAYPAL_CLIENT_ID = process.env.PAYPAL_CLIENT_ID;
 const PAYPAL_CLIENT_SECRET = process.env.PAYPAL_CLIENT_SECRET;
 
+console.log("CLIENT ID: ", PAYPAL_CLIENT_ID, " SECRET: ", PAYPAL_CLIENT_SECRET);
+
 const base = "https://api-m.sandbox.paypal.com";
 
 /**
@@ -24,6 +26,7 @@ const generateAccessToken = async () => {
       throw new Error("MISSING_PAYPAL_API_CREDENTIALS");
     }
     const auth = Buffer.from(PAYPAL_CLIENT_ID + ":" + PAYPAL_CLIENT_SECRET).toString("base64");
+    console.log("auth: ", auth);
     const response = await fetch(`${base}/v1/oauth2/token`, {
       method: "POST",
       body: "grant_type=client_credentials",
@@ -33,6 +36,7 @@ const generateAccessToken = async () => {
     });
 
     const data = await response.json();
+    console.log("ACCESS TOKEN RESPONSE: ", data);
     return data.access_token;
   } catch (error) {
     console.error("Failed to generate PayPal Access Token: ", error);
@@ -54,6 +58,7 @@ async function handleResponse(response: Response) {
 
 export async function createOrder(cart: Cart) {
   const accessToken = await generateAccessToken();
+  console.log("creating order with ", accessToken);
   const url = `${base}/v2/checkout/orders`;
   console.log("shopping cart info", cart);
 
diff --git a/frontend/src/api/eventDetails.ts b/frontend/src/api/eventDetails.ts
index 30ff98cb..b2b9dbfd 100644
--- a/frontend/src/api/eventDetails.ts
+++ b/frontend/src/api/eventDetails.ts
@@ -51,12 +51,11 @@ export async function createEventDetails(
   eventDetails: CreateEventDetailsRequest,
 ): Promise<APIResult<EventDetails>> {
   try {
-    console.log("eventDetails", eventDetails);
     const response = await post("/api/eventDetails", eventDetails);
     const json = (await response.json()) as EventDetails;
     return { success: true, data: json };
   } catch (error) {
-    console.log(error);
+    console.log("error: ", error);
     return handleAPIError(error);
   }
 }
@@ -83,7 +82,6 @@ export async function updateEventDetails(
       "Content-Type": "application/json",
     });
     const json = (await response.json()) as EventDetails;
-    console.log("updateEventDetails json: ", json);
     return { success: true, data: json };
   } catch (error) {
     console.log("updateEventDetails error: ", error);
diff --git a/frontend/src/api/requests.ts b/frontend/src/api/requests.ts
index 247cb256..c4ae06bc 100644
--- a/frontend/src/api/requests.ts
+++ b/frontend/src/api/requests.ts
@@ -108,6 +108,7 @@ export async function post(
   headers: Record<string, string> = {},
 ): Promise<Response> {
   const response = await fetchRequest("POST", API_BASE_URL + url, body, headers);
+  console.log("fetch response: ", response);
   await assertOk(response);
   return response;
 }
diff --git a/frontend/src/app/admin/event-creator/page.tsx b/frontend/src/app/admin/event-creator/page.tsx
index 0da0a65f..d5dd077e 100644
--- a/frontend/src/app/admin/event-creator/page.tsx
+++ b/frontend/src/app/admin/event-creator/page.tsx
@@ -117,8 +117,6 @@ export default function EventCreator() {
 
             const utcDateitem = dateObj.getTime();
 
-            console.log(utcDateitem);
-
             if (utcDateitem >= utcDateCurrent.getTime()) {
               return true;
             }
@@ -136,8 +134,6 @@ export default function EventCreator() {
             const dateObj = new Date(item.date);
             const utcDateitem = dateObj.getTime();
 
-            console.log(utcDateitem);
-
             if (utcDateitem < utcDateCurrent.getTime()) {
               return true;
             }
@@ -221,34 +217,21 @@ export default function EventCreator() {
     }
     setSidebarOpen(open);
   };
-  const handleUpdateEvent = (eventData: EventDetails) => {
-    console.log("page.tsx handleUpdateEvent");
-    updateEventDetails(eventData)
-      .then((result) => {
-        if (!result.success) {
-          console.log("result was not a success");
-          alert(result.error);
-          console.error("ERROR:", result.error);
-        }
-      })
-      .catch((error) => {
-        console.log("catching error after updateEventDetails");
-        alert(error);
-      });
+  const handleUpdateEvent = async (eventData: EventDetails) => {
+    const result = await updateEventDetails(eventData);
+    if (!result.success) {
+      console.log("result was not a success");
+      alert(result.error);
+      console.error("ERROR:", result.error);
+    }
   };
 
-  const handleCreateEvent = (eventData: CreateEventDetailsRequest) => {
-    console.log("page.tsx eventData ", eventData);
-    createEventDetails(eventData)
-      .then((result) => {
-        if (!result.success) {
-          alert(result.error);
-          console.error("ERROR:", result.error);
-        }
-      })
-      .catch((error) => {
-        alert(error);
-      });
+  const handleCreateEvent = async (eventData: CreateEventDetailsRequest) => {
+    const result = await createEventDetails(eventData);
+    if (!result.success) {
+      console.error("ERROR:", result.error);
+      alert(result.error);
+    }
   };
 
   const handlePreviousPage = () => {
diff --git a/frontend/src/app/admin/newsletter-creator/page.tsx b/frontend/src/app/admin/newsletter-creator/page.tsx
index 74a938e4..6fc98570 100644
--- a/frontend/src/app/admin/newsletter-creator/page.tsx
+++ b/frontend/src/app/admin/newsletter-creator/page.tsx
@@ -170,33 +170,21 @@ export default function NewsletterCreator() {
   const handleSetSidebarOpen = (open: boolean) => {
     setSidebarOpen(open);
   };
-  const handleUpdateNewsletter = (newsletterData: Newsletter) => {
-    updateNewsletter(newsletterData)
-      .then((result) => {
-        if (result.success) {
-          // TODO: add success message, update table
-        } else {
-          console.error("ERROR:", result.error);
-        }
-      })
-      .catch((error) => {
-        alert(error);
-      });
+  const handleUpdateNewsletter = async (newsletterData: Newsletter) => {
+    const result = await updateNewsletter(newsletterData);
+    if (!result.success) {
+      console.log("result was not a success");
+      alert(result.error);
+      console.error("ERROR:", result.error);
+    }
   };
 
-  const handleCreateNewsletter = (newsletterData: CreateNewsletterRequest) => {
-    console.log(newsletterData);
-    createNewsletter(newsletterData)
-      .then((result) => {
-        if (result.success) {
-          //TODO: add success message, update table
-        } else {
-          console.error("ERROR:", result.error);
-        }
-      })
-      .catch((error) => {
-        alert(error);
-      });
+  const handleCreateNewsletter = async (newsletterData: CreateNewsletterRequest) => {
+    const result = await createNewsletter(newsletterData);
+    if (!result.success) {
+      console.error("ERROR:", result.error);
+      alert(result.error);
+    }
   };
 
   const handlePreviousPage = () => {
diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index 74c3dfb4..f4ffc698 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -17,8 +17,8 @@ import { WarningModule } from "@/components/WarningModule";
 type eventSidebarProps = {
   eventDetails: null | EventDetails;
   setSidebarOpen: (open: boolean) => void;
-  updateEvent: (eventData: EventDetails) => void;
-  createEvent: (eventData: CreateEventDetailsRequest) => void;
+  updateEvent: (eventData: EventDetails) => Promise<void>;
+  createEvent: (eventData: CreateEventDetailsRequest) => Promise<void>;
 };
 
 type formErrors = {
@@ -125,7 +125,7 @@ const EventSidebar = ({
     }
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
     setWarningOpen(false);
     console.log("handleSave");
 
@@ -153,7 +153,7 @@ const EventSidebar = ({
       setIsEditing(false);
       if (eventDetails) {
         console.log("eventDetails exist");
-        updateEvent({
+        await updateEvent({
           _id: eventDetails._id,
           name,
           description,
@@ -167,7 +167,7 @@ const EventSidebar = ({
         });
         console.log("after updating event");
       } else {
-        createEvent({
+        await createEvent({
           name,
           description,
           guidelines,
diff --git a/frontend/src/components/NewsletterSidebar.tsx b/frontend/src/components/NewsletterSidebar.tsx
index 3dbf5017..3563af90 100644
--- a/frontend/src/components/NewsletterSidebar.tsx
+++ b/frontend/src/components/NewsletterSidebar.tsx
@@ -13,8 +13,8 @@ import { WarningModule } from "@/components/WarningModule";
 type newsletterSidebarProps = {
   newsletter: null | Newsletter;
   setSidebarOpen: (open: boolean) => void;
-  updateNewsletter: (newsletterData: Newsletter) => void;
-  createNewsletter: (newsletterData: CreateNewsletterRequest) => void;
+  updateNewsletter: (newsletterData: Newsletter) => Promise<void>;
+  createNewsletter: (newsletterData: CreateNewsletterRequest) => Promise<void>;
 };
 
 type formErrors = {
@@ -79,7 +79,7 @@ const NewsletterSidebar = ({
     }
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
     setWarningOpen(false);
     if (title === "" || description === "" || date === "" || content.length === 0) {
       setErrors({
@@ -91,7 +91,7 @@ const NewsletterSidebar = ({
     } else {
       setIsEditing(false);
       if (newsletter) {
-        updateNewsletter({
+        await updateNewsletter({
           _id: newsletter._id,
           image: newsletter.image,
           title,
@@ -100,7 +100,7 @@ const NewsletterSidebar = ({
           content,
         });
       } else {
-        createNewsletter({
+        await createNewsletter({
           image: "/newsletter2.png",
           title,
           description,

From 0a24933c61f82dcae6308187bcf6303552ed437b Mon Sep 17 00:00:00 2001
From: jennymar <jenmar528@gmail.com>
Date: Sat, 29 Jun 2024 11:29:44 -0700
Subject: [PATCH 16/17] multiple page fix creators

---
 frontend/src/app/admin/event-creator/page.tsx      | 12 ++++++++++--
 frontend/src/app/admin/newsletter-creator/page.tsx |  4 ++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/admin/event-creator/page.tsx b/frontend/src/app/admin/event-creator/page.tsx
index d5dd077e..a6c00664 100644
--- a/frontend/src/app/admin/event-creator/page.tsx
+++ b/frontend/src/app/admin/event-creator/page.tsx
@@ -109,6 +109,7 @@ export default function EventCreator() {
     getAllEventDetails()
       .then((result) => {
         if (result.success) {
+          console.log(result.data);
           const now = new Date();
           const utcDateCurrent = now;
 
@@ -128,6 +129,7 @@ export default function EventCreator() {
             id: item._id.toString(),
           }));
 
+          console.log("current: ", formattedCurrentRows);
           setCurrentEvents(formattedCurrentRows);
 
           const filteredPast = result.data.filter((item) => {
@@ -145,6 +147,7 @@ export default function EventCreator() {
             id: item._id.toString(),
           }));
 
+          console.log("past: ", formattedPastRows);
           setPastEvents(formattedPastRows);
 
           setRow(formattedCurrentRows);
@@ -185,9 +188,13 @@ export default function EventCreator() {
 
   const handleTogglePage = (index: number) => {
     if (index === 0) {
+      setCurrentPage(1);
       setRowsCurrent(currentEvents);
+      setTotalPages(Math.ceil(currentEvents.length / 14));
     } else if (index === 1) {
+      setCurrentPage(1);
       setRowsCurrent(pastEvents);
+      setTotalPages(Math.ceil(pastEvents.length / 14));
     }
     setPageToggle(index);
   };
@@ -202,6 +209,7 @@ export default function EventCreator() {
   useEffect(() => {
     // Update total pages when rows change
     setTotalPages(Math.ceil(rows.length / 14));
+    console.log("rows.length: ", rows.length);
   }, [rows]);
 
   const handleCellClick: GridEventListener<"rowClick"> = (params) => {
@@ -307,7 +315,7 @@ export default function EventCreator() {
               alignItems: "center",
             }}
           >
-            {pageToggle === 0 && (
+            {
               <button
                 onClick={() => {
                   openEvent(true);
@@ -336,7 +344,7 @@ export default function EventCreator() {
                 />
                 Add Event
               </button>
-            )}
+            }
           </Box>
         </Box>
 
diff --git a/frontend/src/app/admin/newsletter-creator/page.tsx b/frontend/src/app/admin/newsletter-creator/page.tsx
index 6fc98570..9eaa295d 100644
--- a/frontend/src/app/admin/newsletter-creator/page.tsx
+++ b/frontend/src/app/admin/newsletter-creator/page.tsx
@@ -141,9 +141,13 @@ export default function NewsletterCreator() {
 
   const handleTogglePage = (index: number) => {
     if (index === 0) {
+      setCurrentPage(1);
       setRowsCurrent(currentNewsletters);
+      setTotalPages(Math.ceil(currentNewsletters.length / 14));
     } else if (index === 1) {
+      setCurrentPage(1);
       setRowsCurrent(archiveNewsletters);
+      setTotalPages(Math.ceil(archiveNewsletters.length / 14));
     }
     setPageToggle(index);
   };

From e6564fe72e98b970cb2b80956908ff2275ec1ec6 Mon Sep 17 00:00:00 2001
From: jennymar <jenmar528@gmail.com>
Date: Sat, 29 Jun 2024 14:58:05 -0700
Subject: [PATCH 17/17] frontend linting fix

---
 frontend/src/components/EventSidebar.tsx      | 28 ++++++-------------
 frontend/src/components/NewsletterSidebar.tsx | 11 ++++++--
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/EventSidebar.tsx b/frontend/src/components/EventSidebar.tsx
index f4ffc698..08913760 100644
--- a/frontend/src/components/EventSidebar.tsx
+++ b/frontend/src/components/EventSidebar.tsx
@@ -55,23 +55,6 @@ const EventSidebar = ({
   const [warningOpen, setWarningOpen] = useState(false);
   const [showAlert, setShowAlert] = useState(false);
 
-  // useEffect(() => {
-  //   if (date && startTime && endTime) {
-  //     const [startHour, startMinute] = startTime.split(":");
-  //     const [endHour, endMinute] = endTime.split(":");
-  //     const updatedStartDate = new Date(date);
-  //     const updatedEndDate = new Date(date);
-
-  //     updatedStartDate.setHours(parseInt(startHour), parseInt(startMinute));
-  //     updatedEndDate.setHours(parseInt(endHour), parseInt(endMinute));
-
-  //     setDate(updatedStartDate);
-  //     setEndTime(
-  //       updatedEndDate.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
-  //     );
-  //   }
-  // }, [startTime, endTime]);
-
   const confirmCancel = () => {
     setName(eventDetails ? eventDetails.name : "");
     setDescription(eventDetails ? eventDetails.description : "");
@@ -427,7 +410,12 @@ const EventSidebar = ({
             <p>Cancel</p>
           </button>
           {/* Save button */}
-          <button onClick={handleSave} className={styles.saveButton}>
+          <button
+            onClick={() => {
+              void handleSave();
+            }}
+            className={styles.saveButton}
+          >
             <p>Save</p>
           </button>
         </div>
@@ -441,7 +429,9 @@ const EventSidebar = ({
                 cancelText="Discard changes"
                 actionText="Save changes"
                 cancel={confirmCancel}
-                action={handleSave}
+                action={() => {
+                  void handleSave();
+                }}
                 onClose={() => {
                   setWarningOpen(false);
                 }}
diff --git a/frontend/src/components/NewsletterSidebar.tsx b/frontend/src/components/NewsletterSidebar.tsx
index 3563af90..94cb5360 100644
--- a/frontend/src/components/NewsletterSidebar.tsx
+++ b/frontend/src/components/NewsletterSidebar.tsx
@@ -219,7 +219,9 @@ const NewsletterSidebar = ({
             cancelText="Discard changes"
             actionText="Save changes"
             cancel={confirmCancel}
-            action={handleSave}
+            action={() => {
+              void handleSave();
+            }}
             onClose={() => {
               setWarningOpen(false);
             }}
@@ -288,7 +290,12 @@ const NewsletterSidebar = ({
             <p>Cancel</p>
           </button>
           {/* Save button */}
-          <button onClick={handleSave} className={styles.saveButton}>
+          <button
+            onClick={() => {
+              setIsEditing(true);
+            }}
+            className={styles.saveButton}
+          >
             <p>Save</p>
           </button>
         </div>