Update for timeslot handling + api changes

src/app/(event)/[event-code]/edit/page.tsx

@@ -12,12 +12,17 @@ export default async function Page({ params }: EventCodePageProps) {
   }
 
   const eventData = await fetchEventDetails(eventCode);
-  const { eventName, eventRange } = processEventData(eventData);
+  const { eventName, eventRange, timeslots } = processEventData(eventData);
 
   return (
     <EventEditor
       type="edit"
-      initialData={{ title: eventName, customCode: eventCode, eventRange }}
+      initialData={{
+        title: eventName,
+        customCode: eventCode,
+        eventRange,
+        timeslots,
+      }}
     />
   );
 }

src/app/(event)/[event-code]/page-client.tsx

@@ -19,17 +19,20 @@ export default function ClientPage({
   eventCode,
   eventName,
   eventRange,
+  timeslots,
   initialAvailabilityData,
+  isCreator,
 }: {
   eventCode: string;
   eventName: string;
   eventRange: EventRange;
+  timeslots: Date[];
   initialAvailabilityData: AvailabilityDataResponse;
+  isCreator: boolean;
 }) {
   /* PARTICIPANT INFO */
   const participated: boolean =
     initialAvailabilityData.user_display_name != null;
-  const isCreator: boolean = initialAvailabilityData.is_creator || false;
   const participants: string[] = initialAvailabilityData.participants || [];
   const availabilities: ResultsAvailabilityMap =
     initialAvailabilityData.availability || {};
@@ -95,6 +98,7 @@ export default function ClientPage({
           setHoveredSlot={handleHoveredSlot}
           availabilities={availabilities}
           numParticipants={participants.length}
+          timeslots={timeslots}
         />
 
         <div className="h-25" />

src/app/(event)/[event-code]/page.tsx

@@ -5,6 +5,7 @@ import { fetchAvailabilityData } from "@/features/event/availability/fetch-data"
 import { EventCodePageProps } from "@/features/event/code-page-props";
 import { fetchEventDetails } from "@/features/event/editor/fetch-data";
 import { getAuthCookieString } from "@/lib/utils/api/cookie-utils";
+import { processAvailabilityData } from "@/lib/utils/api/process-availability-data";
 import { processEventData } from "@/lib/utils/api/process-event-data";
 
 export default async function Page({ params }: EventCodePageProps) {
@@ -15,20 +16,24 @@ export default async function Page({ params }: EventCodePageProps) {
     notFound();
   }
 
-  const [initialEventData, availabilityData] = await Promise.all([
+  const [initialEventData, initialAvailabilityData] = await Promise.all([
     fetchEventDetails(eventCode, authCookies),
     fetchAvailabilityData(eventCode, authCookies),
   ]);
 
-  // Process the data here, on the server!
-  const { eventName, eventRange } = processEventData(initialEventData);
+  const { eventName, eventRange, timeslots, isCreator } =
+    processEventData(initialEventData);
+
+  const availabilityData = processAvailabilityData(initialAvailabilityData);
 
   return (
     <ClientPage
       eventCode={eventCode}
-      eventName={eventName} // Pass the processed name
-      eventRange={eventRange} // Pass the processed range
+      eventName={eventName}
+      eventRange={eventRange}
+      timeslots={timeslots}
       initialAvailabilityData={availabilityData}
+      isCreator={isCreator}
     />
   );
 }

src/app/(event)/[event-code]/painting/page-client.tsx

@@ -9,7 +9,6 @@ import RateLimitBanner from "@/components/banner/rate-limit";
 import HeaderSpacer from "@/components/header-spacer";
 import MobileFooterTray from "@/components/mobile-footer-tray";
 import { useAvailability } from "@/core/availability/use-availability";
-import { convertAvailabilityToGrid } from "@/core/availability/utils";
 import { EventRange } from "@/core/event/types";
 import ActionButton from "@/features/button/components/action";
 import LinkButton from "@/features/button/components/link";
@@ -26,11 +25,13 @@ export default function ClientPage({
   eventCode,
   eventName,
   eventRange,
+  timeslots,
   initialData,
 }: {
   eventCode: string;
   eventName: string;
   eventRange: EventRange;
+  timeslots: Date[];
   initialData: SelfAvailabilityResponse | null;
 }) {
   const router = useRouter();
@@ -93,15 +94,10 @@ export default function ClientPage({
         return false;
       }
 
-      const availabilityGrid = convertAvailabilityToGrid(
-        userAvailability,
-        eventRange,
-      );
-
       const payload = {
         event_code: eventCode,
         display_name: displayName,
-        availability: availabilityGrid,
+        availability: Array.from(userAvailability),
         time_zone: timeZone,
       };
 
@@ -139,14 +135,18 @@ export default function ClientPage({
   const cancelButton = (
     <LinkButton
       buttonStyle="transparent"
-      label={initialData ? "Cancel Edits" : "Cancel"}
+      label={initialData?.display_name ? "Cancel Edits" : "Cancel"}
       href={`/${eventCode}`}
     />
   );
   const submitButton = (
     <ActionButton
       buttonStyle="primary"
-      label={initialData ? "Update Availability" : "Submit Availability"}
+      label={
+        initialData?.display_name
+          ? "Update Availability"
+          : "Submit Availability"
+      }
       onClick={handleSubmitAvailability}
       loadOnSuccess
     />
@@ -227,6 +227,7 @@ export default function ClientPage({
           timezone={timeZone}
           onToggleSlot={toggleSlot}
           userAvailability={userAvailability}
+          timeslots={timeslots}
         />
       </div>
 

src/app/(event)/[event-code]/painting/page.tsx

@@ -19,13 +19,14 @@ export default async function Page({ params }: EventCodePageProps) {
     fetchEventDetails(eventCode),
     fetchSelfAvailability(eventCode, authCookies),
   ]);
-  const { eventName, eventRange } = processEventData(eventData);
+  const { eventName, eventRange, timeslots } = processEventData(eventData);
 
   return (
     <ClientPage
       eventCode={eventCode}
       eventName={eventName}
       eventRange={eventRange}
+      timeslots={timeslots}
       initialData={initialAvailabilityData}
     />
   );

src/core/availability/use-availability.ts

@@ -6,13 +6,14 @@ import {
 } from "@/core/availability/reducers/reducer";
 import { createUserAvailability } from "@/core/availability/utils";
 import { SelfAvailabilityResponse } from "@/features/event/availability/fetch-data";
+import { formatDateTime } from "@/lib/utils/date-time-format";
 
 export function useAvailability(initialData: SelfAvailabilityResponse | null) {
   const initialTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const isoStrings = [];
   if (initialData && initialData.available_dates) {
     for (const dateStr of initialData.available_dates) {
-      isoStrings.push(new Date(dateStr).toISOString());
+      isoStrings.push(formatDateTime(dateStr));
     }
   }
 

src/core/availability/utils.ts

@@ -1,15 +1,4 @@
-import { eachDayOfInterval, parseISO } from "date-fns";
-
 import { AvailabilitySet } from "@/core/availability/types";
-import {
-  EventRange,
-  SpecificDateRange,
-  WeekdayRange,
-} from "@/core/event/types";
-import {
-  getAbsoluteDateRangeInUTC,
-  getSelectedWeekdaysInTimezone,
-} from "@/features/event/grid/lib/expand-event-range";
 
 // Creates an empty UserAvailability object
 export const createEmptyUserAvailability = (): AvailabilitySet => {
@@ -45,71 +34,6 @@ export function isSlotSelected(
   return availability.has(timeSlot.toISOString());
 }
 
-// converts set to grid for api
-export function convertAvailabilityToGrid(
-  availability: AvailabilitySet,
-  eventRange: EventRange,
-): boolean[][] {
-  if (eventRange.type === "specific") {
-    return convertAvailabilityToGridForSpecificRange(availability, eventRange);
-  } else {
-    return convertAvailabilityToGridForWeekdayRange(availability, eventRange);
-  }
-}
-
-function convertAvailabilityToGridForSpecificRange(
-  availability: AvailabilitySet,
-  eventRange: SpecificDateRange,
-): boolean[][] {
-  const { eventStartUTC, eventEndUTC } = getAbsoluteDateRangeInUTC(eventRange);
-  const startTime = eventStartUTC.getHours();
-  const endTime =
-    eventEndUTC.getMinutes() === 59
-      ? eventEndUTC.getHours() + 1
-      : eventEndUTC.getHours();
-
-  const days = eachDayOfInterval({
-    start: parseISO(eventStartUTC.toISOString()),
-    end: parseISO(eventEndUTC.toISOString()),
-  });
-
-  const grid: boolean[][] = days.map((day) => {
-    const daySlots: boolean[] = [];
-
-    for (let hour = startTime; hour < endTime; hour++) {
-      for (let minute = 0; minute < 60; minute += 15) {
-        const slot = new Date(day);
-        slot.setHours(hour, minute);
-        daySlots.push(isSlotSelected(availability, slot));
-      }
-    }
-
-    return daySlots;
-  });
-  return grid;
-}
-
-function convertAvailabilityToGridForWeekdayRange(
-  availability: AvailabilitySet,
-  eventRange: WeekdayRange,
-): boolean[][] {
-  const selectedDays = getSelectedWeekdaysInTimezone(eventRange);
-
-  const grid: boolean[][] = selectedDays.map((day) => {
-    const daySlots: boolean[] = [];
-    const { slotTimeUTC, dayEndUTC } = day;
-
-    while (slotTimeUTC < dayEndUTC) {
-      daySlots.push(isSlotSelected(availability, slotTimeUTC));
-      slotTimeUTC.setUTCMinutes(slotTimeUTC.getUTCMinutes() + 15);
-    }
-
-    return daySlots;
-  });
-
-  return grid;
-}
-
 function sortDateRange(start: Date, end: Date): [Date, Date] {
   // given a start date and end date, it separately sorts the time and date components
   // and returns two new dates, such that the first has both the earlier date and time

src/core/event/lib/default-range.ts

@@ -0,0 +1,22 @@
+import { SpecificDateRange, WeekdayRange } from "@/core/event/types";
+
+const defaultTimeRange = { from: "09:00", to: "17:00" };
+
+export const DEFAULT_RANGE_SPECIFIC: SpecificDateRange = {
+  type: "specific" as const,
+  duration: 60,
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  dateRange: {
+    from: new Date().toISOString(),
+    to: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
+  },
+  timeRange: defaultTimeRange,
+};
+
+export const DEFAULT_RANGE_WEEKDAY: WeekdayRange = {
+  type: "weekday" as const,
+  duration: 30,
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  weekdays: { Sun: 0, Mon: 1, Tue: 1, Wed: 1, Thu: 0, Fri: 0, Sat: 0 },
+  timeRange: defaultTimeRange,
+};