From 7da6ade53f34a822760aa3eb83519c50fa47578e Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Mon, 20 May 2024 16:18:21 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20update=20data=20on=20mount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../availability/PersonalAvailability.svelte  |  5 ++++-
 src/lib/stores/availabilityStores.ts          |  2 +-
 .../availability/[slug]/+page.server.ts       |  2 ++
 src/routes/availability/[slug]/+page.svelte   | 19 +++++++++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/availability/PersonalAvailability.svelte b/src/lib/components/availability/PersonalAvailability.svelte
index d24733c2..c037bf0a 100644
--- a/src/lib/components/availability/PersonalAvailability.svelte
+++ b/src/lib/components/availability/PersonalAvailability.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;
@@ -164,6 +165,8 @@
       generalAvailability && generalAvailability.length > 0
         ? generalAvailability
         : defaultMeetingDates;
+
+    lastPage = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
   });
 </script>
 
diff --git a/src/lib/stores/availabilityStores.ts b/src/lib/stores/availabilityStores.ts
index 206adba5..12e64457 100644
--- a/src/lib/stores/availabilityStores.ts
+++ b/src/lib/stores/availabilityStores.ts
@@ -8,7 +8,7 @@ import { ZotDate } from "$lib/utils/ZotDate";
 
 export const BLOCK_LENGTH: number = 15;
 
-const getTimeFromHourMinuteString = (hourMinuteString: HourMinuteString): number => {
+export const getTimeFromHourMinuteString = (hourMinuteString: HourMinuteString): number => {
   const [hours, minutes] = hourMinuteString.split(":");
 
   return Number(hours) * TimeConstants.MINUTES_PER_HOUR + Number(minutes);
diff --git a/src/routes/availability/[slug]/+page.server.ts b/src/routes/availability/[slug]/+page.server.ts
index 1adcf630..068889d1 100644
--- a/src/routes/availability/[slug]/+page.server.ts
+++ b/src/routes/availability/[slug]/+page.server.ts
@@ -27,6 +27,8 @@ export const load: PageServerLoad = (async ({ locals, params }) => {
     availability: user ? await getAvailability(user, params?.slug) : null,
     meetingId: params?.slug as string | undefined,
     defaultDates: (await getMeetingDates(params?.slug)) ?? [],
+    startTime: (await getExistingMeeting(params?.slug)).from_time,
+    endTime: (await getExistingMeeting(params?.slug)).to_time,
   };
 }) satisfies PageServerLoad;
 
diff --git a/src/routes/availability/[slug]/+page.svelte b/src/routes/availability/[slug]/+page.svelte
index 9dcc7bf2..a94f7daf 100644
--- a/src/routes/availability/[slug]/+page.svelte
+++ b/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,6 +55,18 @@
   $: mobileView = innerWidth < 768;
 
   let form: HTMLFormElement;
+
+  onMount(async () => {
+    $startTime = data.startTime as HourMinuteString;
+    $endTime = data.endTime as HourMinuteString;
+  });
+
+  $: availabilityTimeBlocks.set(
+    generateTimeBlocks(
+      getTimeFromHourMinuteString($startTime),
+      getTimeFromHourMinuteString($endTime),
+    ),
+  );
 </script>
 
 <svelte:window bind:innerWidth />