database: change datetime into start and end time strings

src/app/actions/events/create/route.jsx

@@ -6,7 +6,6 @@ import { CREATE_EVENT } from "gql/mutations/events";
 export async function POST(request) {
   const response = { ok: false, data: null, error: null };
   const { details } = await request.json();
-
   const {
     data: { createEvent },
     error,

src/app/actions/events/venues/route.jsx

@@ -11,7 +11,8 @@ export async function POST(request) {
     data: { availableRooms },
     error,
   } = await getClient().query(GET_AVAILABLE_LOCATIONS, {
-    timeslot: [startDate, endDate],
+    startTime: startDate,
+    endTime: endDate,
     eventid: eventid,
   });
   if (error) {

src/app/events/page.jsx

@@ -2,6 +2,7 @@ import { Box, Divider, Typography } from "@mui/material";
 import EventsFilter from "components/events/EventsFilter";
 
 import EventsGrid from "components/events/EventsGrid";
+import {getDateObj} from "utils/formatTime";
 
 export const metadata = {
   title: "Events",
@@ -44,7 +45,7 @@ export default async function Events({ searchParams }) {
               if (!targetState) selectedState = true;
               else {
                 const isUpcoming =
-                  new Date(event?.datetimeperiod[1]) > new Date();
+                  new getDateObj(event?.endTime) > new Date();
                 selectedState = isUpcoming;
               }
 
@@ -84,7 +85,7 @@ export default async function Events({ searchParams }) {
               if (!targetState) selectedState = true;
               else {
                 const isUpcoming =
-                  new Date(event?.datetimeperiod[1]) > new Date();
+                  new getDateObj(event?.endTime) > new Date();
                 selectedState = !isUpcoming;
               }
 

src/app/manage/events/[id]/copy/page.jsx

@@ -25,10 +25,11 @@ function transformDateTime(datetimeperiod) {
 }
 
 function transformEvent(event) {
+  let newDatetime = transformDateTime([event?.startTime, event?.endTime]);
   return {
     ...event,
-    // parse datetime strings to date objects
-    datetimeperiod: transformDateTime(event?.datetimeperiod),
+    startTime: newDatetime[0],
+    endTime: newDatetime[1],
     budget: [],
     location: [],
     // parse population as int

src/app/manage/events/[id]/edit/page.jsx

@@ -7,18 +7,17 @@ import { Container, Typography } from "@mui/material";
 
 import EventForm from "components/events/EventForm";
 
+import {getDateObj} from "utils/formatTime";
+
 export const metadata = {
   title: "Edit Event",
 };
 
 function transformEvent(event) {
   return {
     ...event,
-    // parse datetime strings to date objects
-    datetimeperiod: [
-      new Date(event?.datetimeperiod[0]),
-      new Date(event?.datetimeperiod[1]),
-    ],
+    startTime: getDateObj(event?.startTime),
+    endTime: getDateObj(event?.endTime),
     // add mandatory ID field for DataGrid
     budget:
       event?.budget?.map((budget, key) => ({

src/app/manage/events/[id]/page.jsx

@@ -32,6 +32,8 @@ import {
 import { locationLabel } from "utils/formatEvent";
 import MemberListItem from "components/members/MemberListItem";
 
+import {getDateObj} from "utils/formatTime"
+
 export async function generateMetadata({ params }, parent) {
   const { id } = params;
 
@@ -221,7 +223,8 @@ export default async function ManageEvent({ params }) {
 
 // set conditional actions based on event datetime, current status and user role
 function getActions(event, user) {
-  const upcoming = new Date(event?.datetimeperiod[0]) >= new Date();
+  const upcoming = getDateObj(event?.startTime) >= new Date();
+
   /*
    * Deleted Event
    * CC/Club - copy

src/app/manage/events/new/page.jsx

@@ -11,7 +11,8 @@ export default function NewEvent() {
   const defaultValues = {
     clubid: "",
     name: "",
-    datetimeperiod: [null, null],
+    startTime: "",
+    endTime: "",
     description: "",
     audience: [],
     poster: "",

src/components/Calendar.jsx

@@ -11,8 +11,8 @@ function eventDataTransform(event, role, uid) {
     return {
       id: event._id,
       title: event.name,
-      start: new Date(event.datetimeperiod[0]),
-      end: new Date(event.datetimeperiod[1]),
+      start: event.startTime,
+      end: event.endTime,
       backgroundColor: stc(event.clubid),
       url: `/events/${event._id}`,
       display: "block",
@@ -22,8 +22,8 @@ function eventDataTransform(event, role, uid) {
       return {
         id: event._id,
         title: event.name,
-        start: new Date(event.datetimeperiod[0]),
-        end: new Date(event.datetimeperiod[1]),
+        start: event.startTime,
+        end: event.endTime,
         backgroundColor: stc(event.clubid),
         url: `/manage/events/${event._id}`,
         display: "block",
@@ -32,8 +32,8 @@ function eventDataTransform(event, role, uid) {
       return {
         id: event._id,
         title: event.name,
-        start: new Date(event.datetimeperiod[0]),
-        end: new Date(event.datetimeperiod[1]),
+        start: event.startTime,
+        end: event.endTime,
         backgroundColor: stc(event.clubid),
         display: "block",
       };

src/components/events/EventCard.jsx

@@ -5,13 +5,13 @@ import { Box, Card, CardActionArea, Typography, Stack } from "@mui/material";
 
 import EventPoster from "components/events/EventPoster";
 import EventFallbackPoster from "components/events/EventFallbackPoster";
-
-const DateTime = dynamic(() => import("components/DateTime"), { ssr: false });
+import {appendWeekday} from "utils/formatTime"
 
 export default function EventCard({
   _id,
   name,
-  datetimeperiod,
+  startTime,
+  endTime,
   poster,
   clubid,
 }) {
@@ -31,7 +31,7 @@ export default function EventCard({
             {name}
           </Typography>
           <Typography variant="caption" noWrap>
-            <DateTime dt={datetimeperiod?.[0]} showWeekDay={true} />
+	    {appendWeekday(startTime)}
           </Typography>
         </Stack>
       </CardActionArea>

src/components/events/EventDetails.jsx

@@ -3,6 +3,7 @@ import dynamic from "next/dynamic";
 import { Divider, Card, Stack, Box, Grid, Typography } from "@mui/material";
 
 import { locationLabel } from "utils/formatEvent";
+import { shortDateStr  } from "utils/formatTime";
 
 import ClubButton from "components/clubs/ClubButton";
 import EventPoster from "components/events/EventPoster";
@@ -11,8 +12,6 @@ import EventFallbackPoster from "components/events/EventFallbackPoster";
 
 import Icon from "components/Icon";
 
-const DateTime = dynamic(() => import("components/DateTime"), { ssr: false });
-
 export default function EventDetails({ event, showCode = false }) {
   return (
     <Grid container spacing={2}>
@@ -43,11 +42,11 @@ export default function EventDetails({ event, showCode = false }) {
           <Box display="flex" alignItems="center">
             <Icon variant="calendar-today" sx={{ mr: 2, width: 16 }} />
             <Typography variant="body2">
-              <DateTime dt={event.datetimeperiod[0]} />
+              {shortDateStr(event?.startTime)}
             </Typography>
             <Box mx={1}>-</Box>
             <Typography variant="body2">
-              <DateTime dt={event.datetimeperiod[1]} />
+              {shortDateStr(event?.endTime)} (IST)
             </Typography>
           </Box>
 

src/components/events/EventForm.jsx

@@ -42,6 +42,7 @@ import MemberListItem from "components/members/MemberListItem";
 
 import { uploadFile } from "utils/files";
 import { audienceMap } from "constants/events";
+import { getDuration, getDateStr } from "utils/formatTime";
 import { locationLabel } from "utils/formatEvent";
 import { useAuth } from "components/AuthProvider";
 
@@ -230,9 +231,11 @@ export default function EventForm({
           : null;
 
     // convert dates to ISO strings
-    data.datetimeperiod = formData.datetimeperiod.map((d) =>
-      new Date(d).toISOString(),
-    );
+    data.startTime = getDateStr(formData.startTime)
+    data.endTime = getDateStr(formData.endTime)
+
+    // get duration from startTime and endTime
+    data.duration = getDuration(formData.startTime, formData.endTime)
 
     // convert budget to array of objects with only required attributes
     // remove budget items without a description (they're invalid)
@@ -330,8 +333,8 @@ export default function EventForm({
                     setHasPhone={setHasPhone}
                     disabled={
                       defaultValues?.status?.state == "approved" &&
-                      defaultValues?.datetimeperiod[0] &&
-                      new Date(defaultValues?.datetimeperiod[0]) < new Date()
+                      defaultValues?.startTime &&
+                      new Date(defaultValues?.startTime) < new Date()
                     }
                   />
                 </Grid>
@@ -605,7 +608,7 @@ function EventDatetimeInput({
   disabled = true,
   role = "public",
 }) {
-  const startDateInput = watch("datetimeperiod.0");
+  const startDateInput = watch("startTime");
   const [error, setError] = useState(null);
 
   const errorMessage = useMemo(() => {
@@ -626,7 +629,7 @@ function EventDatetimeInput({
     <Grid container spacing={2}>
       <Grid item xs={6} xl={4}>
         <Controller
-          name="datetimeperiod.0"
+          name="startTime"
           control={control}
           rules={{
             required: "Start date is required!",
@@ -661,7 +664,7 @@ function EventDatetimeInput({
       </Grid>
       <Grid item xs xl={4}>
         <Controller
-          name="datetimeperiod.1"
+          name="endTime"
           control={control}
           rules={{
             required: "End date is required!",
@@ -683,10 +686,7 @@ function EventDatetimeInput({
               disabled={!startDateInput || disabled}
               minDateTime={
                 startDateInput
-                  ? (startDateInput instanceof Date && !isDayjs(startDateInput)
-                      ? dayjs(startDateInput)
-                      : startDateInput
-                    ).add(1, "minute")
+                  ? dayjs(startDateInput).add(1,"minute")
                   : null
               }
               disablePast={!allowed_roles.includes(role)}
@@ -819,8 +819,8 @@ function EventVenueInput({
 }) {
   const modeInput = watch("mode");
   const locationInput = watch("location");
-  const startDateInput = watch("datetimeperiod.0");
-  const endDateInput = watch("datetimeperiod.1");
+  const startDateInput = watch("startTime");
+  const endDateInput = watch("endTime");
 
   // reset location if datetime changes
   useEffect(() => resetField("location"), [startDateInput, endDateInput]);

src/components/events/EventsGrid.jsx

@@ -25,7 +25,8 @@ export default async function EventsGrid({
               <EventCard
                 _id={event._id}
                 name={event.name}
-                datetimeperiod={event.datetimeperiod}
+		startTime={event.startTime}
+		endTime={event.endTime}
                 poster={event.poster}
                 clubid={event.clubid}
               />

src/components/events/EventsTable.jsx

@@ -7,7 +7,7 @@ import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { DataGrid, GridLogicOperator } from "@mui/x-data-grid";
 
-import { ISOtoHuman } from "utils/formatTime";
+import { shortDateStr } from "utils/formatTime";
 import { stateLabel } from "utils/formatEvent";
 
 import Tag from "components/Tag";
@@ -78,8 +78,8 @@ export default function EventsTable({
             flex: 3,
             align: "center",
             headerAlign: "center",
-            valueGetter: ({ row }) => row.datetimeperiod[0],
-            valueFormatter: ({ value }) => ISOtoHuman(value),
+            valueGetter: ({ row }) => row.startTime,
+            valueFormatter: ({ value }) => shortDateStr(value),
           },
         ]),
     // {
@@ -148,7 +148,7 @@ export default function EventsTable({
       headerAlign: "center",
       valueGetter: ({ row }) => ({
         state: row.status.state,
-        start: row.datetimeperiod[0],
+        start: row.startTime,
       }),
       renderCell: ({ value }) => {
         // change state to 'completed' if it has been approved and is in the past

src/gql/queries/events.jsx

@@ -17,7 +17,8 @@ export const GET_CLUB_EVENTS = gql`
       name
       code
       clubid
-      datetimeperiod
+      startTime
+      endTime
       poster
       status {
         state
@@ -36,7 +37,8 @@ export const GET_PENDING_EVENTS = gql`
       name
       code
       clubid
-      datetimeperiod
+      startTime
+      endTime
       status {
         state
         room
@@ -58,7 +60,8 @@ export const GET_ALL_EVENTS = gql`
       name
       code
       clubid
-      datetimeperiod
+      startTime
+      endTime
       status {
         state
         room
@@ -83,7 +86,8 @@ export const GET_EVENT = gql`
       location
       audience
       description
-      datetimeperiod
+      startTime
+      endTime
       link
       poster
       mode
@@ -105,7 +109,8 @@ export const GET_FULL_EVENT = gql`
         advance
       }
       clubid
-      datetimeperiod
+      startTime
+      endTime
       description
       equipment
       link
@@ -128,8 +133,8 @@ export const GET_FULL_EVENT = gql`
 `;
 
 export const GET_AVAILABLE_LOCATIONS = gql`
-  query AvailableRooms($timeslot: [DateTime!]!, $eventid: String) {
-    availableRooms(timeslot: $timeslot, eventid: $eventid) {
+  query AvailableRooms($startTime: String!, $endTime: String!, $eventid: String) {
+    availableRooms(inputStart: $startTime, inputEnd: $endTime, eventid: $eventid) {
       locations
     }
   }