Launch day fixes

app/[event-code]/loading.tsx

@@ -8,20 +8,18 @@ export default function Loading() {
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
         <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
 
-        <div className="h-10 w-40 rounded-full bg-gray-200 dark:bg-[#343249]" />
+        <div className="h-10 w-50 rounded-full bg-gray-200 dark:bg-[#343249]" />
       </div>
 
       <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
-        <div className="h-fit w-full shrink-0 space-y-6 overflow-y-auto md:w-80">
-          <div className="space-y-3">
-            <div className="h-8 w-3/4 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
-            <div className="h-8 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
-          </div>
+        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+
+        <div className="h-fit w-full shrink-0 space-y-4 overflow-y-auto md:w-80">
+          <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+
           <div className="hidden h-70 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
           <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
         </div>
-
-        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
       </div>
     </div>
   );

app/[event-code]/page.tsx

@@ -1,10 +1,13 @@
 import { notFound } from "next/navigation";
-import { fetchEventDetails, fetchSelfAvailability } from "../_utils/fetch-data";
-import { processEventData } from "../_utils/process-event-data";
+import {
+  fetchEventDetails,
+  fetchAvailabilityData,
+} from "@/app/_utils/fetch-data";
+import { processEventData } from "@/app/_utils/process-event-data";
 
-import AvailabilityClientPage from "@/app/ui/layout/availability-page";
-import { EventCodePageProps } from "../_lib/types/event-code-page-props";
-import { getAuthCookieString } from "../_utils/cookie-utils";
+import ResultsPage from "@/app/ui/layout/results-page";
+import { getAuthCookieString } from "@/app/_utils/cookie-utils";
+import { EventCodePageProps } from "@/app/_lib/types/event-code-page-props";
 
 export default async function Page({ params }: EventCodePageProps) {
   const { "event-code": eventCode } = await params;
@@ -14,18 +17,20 @@ export default async function Page({ params }: EventCodePageProps) {
     notFound();
   }
 
-  const [eventData, initialAvailabilityData] = await Promise.all([
-    fetchEventDetails(eventCode),
-    fetchSelfAvailability(eventCode, authCookies),
+  const [initialEventData, availabilityData] = await Promise.all([
+    fetchEventDetails(eventCode, authCookies),
+    fetchAvailabilityData(eventCode, authCookies),
   ]);
-  const { eventName, eventRange } = processEventData(eventData);
+
+  // Process the data here, on the server!
+  const { eventName, eventRange } = processEventData(initialEventData);
 
   return (
-    <AvailabilityClientPage
+    <ResultsPage
       eventCode={eventCode}
-      eventName={eventName}
-      eventRange={eventRange}
-      initialData={initialAvailabilityData}
+      eventName={eventName} // Pass the processed name
+      eventRange={eventRange} // Pass the processed range
+      initialAvailabilityData={availabilityData}
     />
   );
 }

app/[event-code]/results/loading.tsx → app/[event-code]/painting/loading.tsx

@@ -8,18 +8,20 @@ export default function Loading() {
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
         <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
 
-        <div className="h-10 w-50 rounded-full bg-gray-200 dark:bg-[#343249]" />
+        <div className="h-10 w-40 rounded-full bg-gray-200 dark:bg-[#343249]" />
       </div>
 
       <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
-        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
-
-        <div className="h-fit w-full shrink-0 space-y-4 overflow-y-auto md:w-80">
-          <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
-
+        <div className="h-fit w-full shrink-0 space-y-6 overflow-y-auto md:w-80">
+          <div className="space-y-3">
+            <div className="h-8 w-3/4 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+            <div className="h-8 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+          </div>
           <div className="hidden h-70 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
           <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
         </div>
+
+        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
       </div>
     </div>
   );

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

@@ -1,13 +1,13 @@
 import { notFound } from "next/navigation";
 import {
   fetchEventDetails,
-  fetchAvailabilityData,
+  fetchSelfAvailability,
 } from "@/app/_utils/fetch-data";
 import { processEventData } from "@/app/_utils/process-event-data";
 
-import ResultsPage from "@/app/ui/layout/results-page";
-import { getAuthCookieString } from "@/app/_utils/cookie-utils";
+import AvailabilityClientPage from "@/app/ui/layout/availability-page";
 import { EventCodePageProps } from "@/app/_lib/types/event-code-page-props";
+import { getAuthCookieString } from "@/app/_utils/cookie-utils";
 
 export default async function Page({ params }: EventCodePageProps) {
   const { "event-code": eventCode } = await params;
@@ -17,20 +17,18 @@ export default async function Page({ params }: EventCodePageProps) {
     notFound();
   }
 
-  const [initialEventData, availabilityData] = await Promise.all([
-    fetchEventDetails(eventCode, authCookies),
-    fetchAvailabilityData(eventCode, authCookies),
+  const [eventData, initialAvailabilityData] = await Promise.all([
+    fetchEventDetails(eventCode),
+    fetchSelfAvailability(eventCode, authCookies),
   ]);
-
-  // Process the data here, on the server!
-  const { eventName, eventRange } = processEventData(initialEventData);
+  const { eventName, eventRange } = processEventData(eventData);
 
   return (
-    <ResultsPage
+    <AvailabilityClientPage
       eventCode={eventCode}
-      eventName={eventName} // Pass the processed name
-      eventRange={eventRange} // Pass the processed range
-      initialAvailabilityData={availabilityData}
+      eventName={eventName}
+      eventRange={eventRange}
+      initialData={initialAvailabilityData}
     />
   );
 }

app/ui/components/selectors/time-selector.tsx

@@ -19,7 +19,7 @@ export default function TimeSelector({
 }: TimeSelectorProps) {
   const isMobile = useCheckMobile();
 
-  let options = Array.from({ length: 24 }, (_, i) => {
+  const options = Array.from({ length: 24 }, (_, i) => {
     const hour = i % 12 === 0 ? 12 : i % 12;
     const period = i < 12 ? "am" : "pm";
     return { label: `${hour}:00 ${period}`, value: i };

app/ui/components/toasts/copy-toast.tsx

@@ -3,9 +3,10 @@
 import { CopyIcon } from "@radix-ui/react-icons";
 import { useToast } from "@/app/_lib/toast-context";
 
-export default function CopyToast() {
+export default function CopyToast({ code }: { code: string }) {
   const { addToast } = useToast();
-  const currentURL = typeof window !== "undefined" ? window.location.href : "";
+  const currentURL =
+    typeof window !== "undefined" ? `${window.location.origin}/${code}` : "";
 
   const copyToClipboard = async () => {
     try {

app/ui/components/weekday-calendar.tsx

@@ -14,7 +14,6 @@ type WeekdayCalendarProps = {
 export default function WeekdayCalendar({
   selectedDays,
   onChange,
-  inDrawer = false,
 }: WeekdayCalendarProps) {
   // const [startMonday, setStartMonday] = useState(false);
   // const reorderedDays = startMonday ? [...days.slice(1), days[0]] : days;

app/ui/layout/availability-page.tsx

@@ -88,7 +88,7 @@ export default function AvailabilityPage({
         body: JSON.stringify(payload),
       });
 
-      if (response.ok) router.push(`/${eventCode}/results`);
+      if (response.ok) router.push(`/${eventCode}`);
       else createErrorToast(formatApiError(await response.json()));
     } catch (error) {
       console.error("Error submitting availability:", error);
@@ -107,7 +107,17 @@ export default function AvailabilityPage({
         </div>
 
         <div className="flex items-center gap-2">
-          <CopyToast />
+          <CopyToast code={eventCode} />
+          {initialData && (
+            <button
+              onClick={() => {
+                router.push(`/${eventCode}`);
+              }}
+              className="hidden rounded-full border-2 border-blue bg-blue px-4 py-2 text-sm text-white transition-shadow hover:cursor-pointer hover:bg-blue-100 hover:text-violet md:flex dark:border-red dark:bg-red dark:hover:bg-red/25 dark:hover:text-white"
+            >
+              Cancel Edits
+            </button>
+          )}
           <button
             onClick={handleSubmitAvailability}
             className="hidden rounded-full border-2 border-blue bg-blue px-4 py-2 text-sm text-white transition-shadow hover:cursor-pointer hover:bg-blue-100 hover:text-violet md:flex dark:border-red dark:bg-red dark:hover:bg-red/25 dark:hover:text-white"

app/ui/layout/results-page.tsx

@@ -59,10 +59,10 @@ export default function ResultsPage({
               <span className="hidden md:block">Edit Event</span>
             </Link>
           )}
-          <CopyToast />
+          <CopyToast code={eventCode} />
           <Link
             className="flex flex-row items-center gap-2 rounded-full border-2 border-blue bg-blue p-2 text-sm text-white hover:bg-blue-100 hover:text-violet dark:border-red dark:bg-red dark:hover:bg-red/25"
-            href={`/${eventCode}`}
+            href={`/${eventCode}/painting`}
           >
             <Pencil2Icon className="h-5 w-5" />
             <span>{participated ? "Edit" : "Add"} Availability</span>