feat: read meeting data from db

src/lib/components/availability/LoginModal.svelte

@@ -2,7 +2,7 @@
   import type { ActionResult } from "@sveltejs/kit";
   import { superForm } from "sveltekit-superforms/client";
 
-  import type { PageData } from "../../../routes/availability/$types";
+  import type { PageData } from "../../../routes/availability/[slug]/$types";
 
   import { deserialize } from "$app/forms";
   import { userSchema } from "$lib/config/zod-schemas";
@@ -87,7 +87,7 @@
 
       $guestSession = {
         guestName: guestData.data?.username,
-        meetingId: data.meetingId,
+        meetingId: data.meetingId ?? "",
       };
 
       $isEditingAvailability = false;
@@ -182,7 +182,7 @@
           <form
             bind:this={guestForm}
             class="flex-center w-full grow flex-col items-center space-y-4 md:w-[250px]"
-            on:submit|preventDefault={() => handleGuestSubmit(data.meetingId)}
+            on:submit|preventDefault={() => handleGuestSubmit(data.meetingId ?? "")}
           >
             {#if formState === "failure"}
               <aside class="variant-filled-error alert">

src/lib/components/availability/PersonalAvailability.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  import type { PageData } from "../../../routes/availability/$types";
+  import type { PageData } from "../../../routes/availability/[slug]/$types";
 
   import LoginFlow from "./LoginModal.svelte";
 
@@ -26,7 +26,7 @@
     itemsPerPage = columns;
   }
 
-  const lastPage: number = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
+  let lastPage: number = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
   const numPaddingDates: number =
     $availabilityDates.length % itemsPerPage === 0
       ? 0
@@ -37,6 +37,7 @@
 
   let currentPage = 0;
 
+  console.log(currentPage, lastPage);
   let currentPageAvailability: (ZotDate | null)[];
 
   let selectionState: SelectionStateType | null = null;
@@ -154,7 +155,7 @@
   }
 
   onMount(async () => {
-    $guestSession.meetingId = data.meetingId;
+    $guestSession.meetingId = data.meetingId ?? "";
 
     const generalAvailability = await getGeneralAvailability(data, $guestSession);
     const defaultMeetingDates = data.defaultDates.map((item) => new ZotDate(item.date, false, []));
@@ -164,6 +165,8 @@
       generalAvailability && generalAvailability.length > 0
         ? generalAvailability
         : defaultMeetingDates;
+
+    lastPage = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
   });
 </script>
 

src/lib/stores/availabilityStores.ts

@@ -2,22 +2,28 @@ import { readable, writable } from "svelte/store";
 
 import type { GuestSession, MemberAvailability } from "./../types/availability";
 
-import { TimeConstants } from "$lib/types/chrono";
+import { startTime, endTime } from "$lib/stores/meetingSetupStores";
+import { TimeConstants, type HourMinuteString } from "$lib/types/chrono";
 import { ZotDate } from "$lib/utils/ZotDate";
 
 export const BLOCK_LENGTH: number = 15;
-export const getTimeFromHoursAndMinutes = (hours: number, minutes: number = 0): number => {
-  return hours * TimeConstants.MINUTES_PER_HOUR + minutes;
-};
-export const getTimeFromString = (timeString: string): number => {
-  const [hourString, minuteString] = timeString.split(":");
-  const hours = parseInt(hourString, 10);
-  const minutes = parseInt(minuteString, 10);
-  return getTimeFromHoursAndMinutes(hours, minutes);
+
+export const getTimeFromHourMinuteString = (hourMinuteString: HourMinuteString): number => {
+  const [hours, minutes] = hourMinuteString.split(":");
+
+  return Number(hours) * TimeConstants.MINUTES_PER_HOUR + Number(minutes);
 };
 
-const earliestTime: number = getTimeFromHoursAndMinutes(8);
-const latestTime: number = getTimeFromHoursAndMinutes(17, 30);
+let earliestTime: number = getTimeFromHourMinuteString("08:00");
+let latestTime: number = getTimeFromHourMinuteString("17:30");
+
+startTime.subscribe((value) => {
+  earliestTime = getTimeFromHourMinuteString(value ?? "08:00");
+});
+
+endTime.subscribe((value) => {
+  latestTime = getTimeFromHourMinuteString(value ?? "17:30");
+});
 
 const sampleMembers: MemberAvailability[] = [
   {

src/routes/availability/[slug]/+page.server.ts

@@ -6,7 +6,6 @@ import { superValidate } from "sveltekit-superforms/server";
 import type { PageServerLoad } from "../$types";
 import { _loginSchema } from "../../auth/login/+page.server";
 
-import { guestSchema } from "$lib/config/zod-schemas";
 import { getExistingGuest, getExistingMeeting } from "$lib/db/databaseUtils.server";
 import { db } from "$lib/db/drizzle";
 import {
@@ -18,16 +17,16 @@ import {
 } from "$lib/db/schema";
 import type { ZotDate } from "$lib/utils/ZotDate";
 
-const guestLoginSchema = guestSchema.pick({ username: true });
-
 export const load: PageServerLoad = (async ({ locals, params }) => {
   const user = locals.user;
 
+  // TODO: If no slug is in the URL (i.e. no meeting ID), we should redirect to an error page
+
   return {
     form: await superValidate(_loginSchema),
-    guestForm: await superValidate(guestLoginSchema),
     availability: user ? await getAvailability(user, params?.slug) : null,
     meetingId: params?.slug as string | undefined,
+    meetingData: await getExistingMeeting(params?.slug),
     defaultDates: (await getMeetingDates(params?.slug)) ?? [],
   };
 }) satisfies PageServerLoad;

src/routes/availability/[slug]/+page.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
   import type { PageData } from "./$types";
 
   import { enhance } from "$app/forms";
   import { GroupAvailability, PersonalAvailability } from "$lib/components/availability";
   import {
     availabilityDates,
+    availabilityTimeBlocks,
     generateSampleDates,
+    generateTimeBlocks,
+    getTimeFromHourMinuteString,
     guestSession,
     isEditingAvailability,
     isStateUnsaved,
   } from "$lib/stores/availabilityStores";
+  import { endTime, startTime } from "$lib/stores/meetingSetupStores";
+  import type { HourMinuteString } from "$lib/types/chrono";
   import { getGeneralAvailability } from "$lib/utils/availability";
   import { cn } from "$lib/utils/utils";
   import CancelCircleOutline from "~icons/mdi/cancel-circle-outline";
@@ -48,13 +55,25 @@
   $: mobileView = innerWidth < 768;
 
   let form: HTMLFormElement;
+
+  onMount(async () => {
+    $startTime = data.meetingData.from_time as HourMinuteString;
+    $endTime = data.meetingData.to_time as HourMinuteString;
+  });
+
+  $: availabilityTimeBlocks.set(
+    generateTimeBlocks(
+      getTimeFromHourMinuteString($startTime),
+      getTimeFromHourMinuteString($endTime),
+    ),
+  );
 </script>
 
 <svelte:window bind:innerWidth />
 
 <div class="flex-between px-2 pt-8 md:px-4 md:pt-10 lg:px-[60px]">
   <h1 class="line-clamp-1 h-8 pr-2 font-montserrat text-xl font-medium md:h-fit md:text-3xl">
-    Sample Meeting Winter 2024
+    {data.meetingData.title}
   </h1>
 
   {#if $isEditingAvailability}