Results page + availability editing tweaks

app/[event-code]/edit/page.tsx

@@ -0,0 +1,26 @@
+import { fetchEventDetails } from "@/app/_utils/fetch-data";
+import { processEventData } from "@/app/_utils/process-event-data";
+import EventEditor from "../../ui/layout/event-editor";
+import notFound from "../not-found";
+
+export default async function Page({
+  params,
+}: {
+  params: { "event-code": string };
+}) {
+  const { "event-code": eventCode } = await params;
+
+  if (!eventCode) {
+    notFound();
+  }
+
+  const eventData = await fetchEventDetails(eventCode);
+  const { eventName, eventRange } = processEventData(eventData);
+
+  return (
+    <EventEditor
+      type="edit"
+      initialData={{ title: eventName, code: eventCode, eventRange }}
+    />
+  );
+}

app/[event-code]/page.tsx

@@ -1,28 +1,34 @@
 import { notFound } from "next/navigation";
-import { fetchEventDetails } from "../_utils/fetch-data";
+import { fetchEventDetails, fetchSelfAvailability } from "../_utils/fetch-data";
 import { processEventData } from "../_utils/process-event-data";
 
 import AvailabilityClientPage from "@/app/ui/layout/availability-page";
+import { getAuthCookieString } from "../_utils/cookie-utils";
 
 export default async function Page({
   params,
 }: {
   params: { "event-code": string };
 }) {
   const { "event-code": eventCode } = await params;
+  const authCookies = await getAuthCookieString();
 
   if (!eventCode) {
     notFound();
   }
 
-  const eventData = await fetchEventDetails(eventCode);
+  const [eventData, initialAvailabilityData] = await Promise.all([
+    fetchEventDetails(eventCode),
+    fetchSelfAvailability(eventCode, authCookies),
+  ]);
   const { eventName, eventRange } = processEventData(eventData);
 
   return (
     <AvailabilityClientPage
       eventCode={eventCode}
       eventName={eventName}
       eventRange={eventRange}
+      initialData={initialAvailabilityData}
     />
   );
 }

app/[event-code]/results/page.tsx

@@ -6,21 +6,23 @@ import {
 import { processEventData } from "@/app/_utils/process-event-data";
 
 import ResultsPage from "@/app/ui/layout/results-page";
+import { getAuthCookieString } from "@/app/_utils/cookie-utils";
 
 export default async function Page({
   params,
 }: {
   params: { "event-code": string };
 }) {
   const { "event-code": eventCode } = await params;
+  const authCookies = await getAuthCookieString();
 
   if (!eventCode) {
     notFound();
   }
 
   const [initialEventData, availabilityData] = await Promise.all([
-    fetchEventDetails(eventCode),
-    fetchAvailabilityData(eventCode),
+    fetchEventDetails(eventCode, authCookies),
+    fetchAvailabilityData(eventCode, authCookies),
   ]);
 
   // Process the data here, on the server!

app/_lib/availability/use-availability.tsx

@@ -1,15 +1,20 @@
 import { useReducer, useCallback } from "react";
 import { availabilityReducer, AvailabilityState } from "./availability-reducer";
-import { createEmptyUserAvailability } from "./utils";
+import { createUserAvailability } from "./utils";
+
+export function useAvailability(initialData: any = 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());
+    }
+  }
 
-export function useAvailability(
-  initialDisplayName = "",
-  initialTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
-) {
   const initialState: AvailabilityState = {
-    displayName: initialDisplayName,
-    timeZone: initialTimeZone,
-    userAvailability: createEmptyUserAvailability(),
+    displayName: initialData?.display_name || "",
+    timeZone: initialData?.time_zone || initialTimeZone,
+    userAvailability: createUserAvailability(isoStrings),
   };
 
   const [state, dispatch] = useReducer(availabilityReducer, initialState);

app/_lib/availability/utils.tsx

@@ -11,6 +11,12 @@ export const createEmptyUserAvailability = (): AvailabilitySet => {
   return new Set<string>();
 };
 
+export const createUserAvailability = (
+  data: Array<string>,
+): AvailabilitySet => {
+  return new Set<string>(data);
+};
+
 // Toggles a single time slot in the user's availability
 export function toggleUtcSlot(
   prev: AvailabilitySet,

app/_lib/schedule/use-event-info.tsx

@@ -3,13 +3,13 @@ import { EventInfoReducer } from "./event-info-reducer";
 import { EventInformation, EventRange, WeekdayMap } from "./types";
 import { DateRange } from "react-day-picker";
 
-export function useEventInfo() {
-  const initalState: EventInformation = {
-    title: "",
-    customCode: "",
-    eventRange: {
+export function useEventInfo(initialData?: any) {
+  const initialState: EventInformation = {
+    title: initialData?.title || "",
+    customCode: initialData?.code || "",
+    eventRange: initialData?.eventRange || {
       type: "specific",
-      duration: 60,
+      duration: 0,
       timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       dateRange: {
         from: new Date().toISOString(),
@@ -22,7 +22,11 @@ export function useEventInfo() {
     },
   };
 
-  const [state, dispatch] = useReducer(EventInfoReducer, initalState);
+  if (!initialData?.eventRange?.duration) {
+    initialState.eventRange.duration = 0;
+  }
+
+  const [state, dispatch] = useReducer(EventInfoReducer, initialState);
 
   // DISPATCHERS
   const setTitle = useCallback((title: string) => {

app/_lib/schedule/utils.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/app/_lib/schedule/types";
 import { formatInTimeZone, fromZonedTime, toZonedTime } from "date-fns-tz";
 import { getHours, getMinutes, startOfDay } from "date-fns";
+import { DateRange } from "react-day-picker";
 
 /* WEEKDAY SPECIFIC UTILITIES */
 
@@ -116,9 +117,7 @@ export function getSelectedWeekdaysInTimezone(
   const selectedDatesUTC: WeekdayTimeRange[] = [];
   for (let i = 0; i < 7; i++) {
     const currentDay = new Date(startOfWeekInViewerTz);
-    // console.log({ currentDay });
     currentDay.setDate(startOfWeekInViewerTz.getDate() + i);
-    // console.log({ currentDay });
     if (selectedDayIndexes.has(currentDay.getDay())) {
       const dateString = formatInTimeZone(
         currentDay,
@@ -216,3 +215,13 @@ function generateSlotsForWeekdayRange(range: WeekdayRange): Date[] {
 
   return slots;
 }
+
+export function checkInvalidDateRangeLength(
+  range: DateRange | undefined,
+): boolean {
+  if (range?.from && range?.to) {
+    const diffTime = range.to.getTime() - range.from.getTime();
+    return diffTime > 30 * 24 * 60 * 60 * 1000; // more than 30 days
+  }
+  return false;
+}

app/_lib/types/date-range-props.tsx

@@ -2,7 +2,10 @@ import { EventRange, WeekdayMap } from "@/app/_lib/schedule/types";
 import { DateRange } from "react-day-picker";
 
 export type DateRangeProps = {
+  earliestDate?: Date;
   eventRange: EventRange;
+  tooManyDays?: boolean;
+  editing?: boolean;
 
   // update functions
   setTitle?: (title: string) => void;

app/_utils/cookie-utils.tsx

@@ -0,0 +1,14 @@
+import { cookies } from "next/headers";
+
+export async function getAuthCookieString(): Promise<string> {
+  const cookieStore = await cookies();
+  let cookieHeader = "";
+  const authCookieNames = ["auth_sess_token", "guest_sess_token"];
+  authCookieNames.forEach((name) => {
+    const cookie = cookieStore.get(name);
+    if (cookie) {
+      cookieHeader += `${name}=${cookie.value}; `;
+    }
+  });
+  return cookieHeader.trim();
+}

app/_utils/fetch-data.tsx

@@ -1,12 +1,18 @@
 import formatApiError from "@/app/_utils/format-api-error";
 
-export async function fetchEventDetails(eventCode: string): Promise<any> {
+export async function fetchEventDetails(
+  eventCode: string,
+  cookieHeader?: string,
+): Promise<any> {
   const baseUrl = process.env.NEXT_PUBLIC_API_URL;
   const res = await fetch(
     `${baseUrl}/event/get-details/?event_code=${eventCode}`,
     {
       method: "GET",
-      headers: { "Content-Type": "application/json" },
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: cookieHeader ? cookieHeader : "",
+      },
       cache: "no-store",
     },
   );
@@ -19,13 +25,19 @@ export async function fetchEventDetails(eventCode: string): Promise<any> {
   return res.json();
 }
 
-export async function fetchAvailabilityData(eventCode: string): Promise<any> {
+export async function fetchAvailabilityData(
+  eventCode: string,
+  cookieHeader: string,
+): Promise<any> {
   const baseUrl = process.env.NEXT_PUBLIC_API_URL;
   const res = await fetch(
     `${baseUrl}/availability/get-all/?event_code=${eventCode}`,
     {
       method: "GET",
-      headers: { "Content-Type": "application/json" },
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: cookieHeader,
+      },
       cache: "no-store",
     },
   );
@@ -37,3 +49,27 @@ export async function fetchAvailabilityData(eventCode: string): Promise<any> {
 
   return res.json();
 }
+
+export async function fetchSelfAvailability(
+  eventCode: string,
+  cookieHeader: string,
+): Promise<any> {
+  const baseUrl = process.env.NEXT_PUBLIC_API_URL;
+  const res = await fetch(
+    `${baseUrl}/availability/get-self/?event_code=${eventCode}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: cookieHeader,
+      },
+      cache: "no-store",
+    },
+  );
+
+  if (!res.ok) {
+    return null;
+  }
+
+  return res.json();
+}