Added last updated time for OH (#100)

* Added last updated time for OH

* Added lastUpdated field for OH

* Added formatting date function for last updated

Author: notkaramel

src/components/homepage/Sponsors.svelte

@@ -3,7 +3,10 @@
 	import Link from 'components/Link.svelte';
 	import Button from 'components/Button.svelte';
 
-	let { sponsors } = $props<{ sponsors: Sponsors[] }>();
+	let { sponsors, lastUpdated } = $props<{
+		sponsors: Sponsors[];
+		lastUpdated?: string | null;
+	}>();
 </script>
 
 <div class="container mx-auto px-4">
@@ -17,7 +20,7 @@
 			and our community.
 		</p>
 		<div
-			class="via-ecsess-150/40 mx-auto mt-6 h-px w-32 bg-linear-to-r from-transparent to-transparent"
+			class="via-ecsess-150/40 mx-auto mt-2 h-px w-32 bg-linear-to-r from-transparent to-transparent"
 			aria-hidden="true"
 		></div>
 		<div class="mt-6">

src/routes/+page.server.ts

@@ -15,13 +15,19 @@ const homepageQuery = `{
       "position": member->position
     }
   },
+  "ohLastUpdated": *[_type=="officeHours"] | order(_updatedAt desc)[0]._updatedAt,
   "sponsors": *[_type=="sponsors"]{
     name,
     url,
     "logo": logo.asset->url+"?h=100&fm=webp"
-  }
+  },
+  "sponsorsLastUpdated": *[_type=="sponsors"] | order(_updatedAt desc)[0]._updatedAt
 }`;
 
+function formattingDate(date: Date) {
+	return date.toISOString().slice(0, 10).replaceAll('-', '/');
+}
+
 export const load = async ({ url }) => {
 	/**
 	 * @description Response data type based on the combined query above.
@@ -36,6 +42,8 @@ export const load = async ({ url }) => {
 		councilPhoto: councilPhotoUrl,
 		allOHs: officeHourResp,
 		sponsors: sponsorsResp,
-		canonical: url.href
+		canonical: url.href,
+		ohLastUpdated: formattingDate(new Date(homePageResp.ohLastUpdated)),
+		sponsorsLastUpdated: formattingDate(new Date(homePageResp.sponsorsLastUpdated))
 	};
 };

src/routes/+page.svelte

@@ -69,17 +69,23 @@
 <Section from="from-ecsess-900" to="to-ecsess-700" via="via-ecsess-650">
 	<div class="w-full">
 		<h2 class="text-2xl font-bold" id="office-hours">Lounge Office Hours</h2>
-		<p class="text-ecsess-200 mb-8">
+		<p class="text-ecsess-200">
 			Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or
 			just chat about anything!
+			{#if data.ohLastUpdated}
+				<br />
+				<span class="text-ecsess-200/70 mb-4 inline-block italic">
+					Last updated: {data.ohLastUpdated}
+				</span>
+			{/if}
 		</p>
 		<OhSchedule allOhs={data.allOHs} />
 	</div>
 </Section>
 
 <!-- Sponsors -->
 <Section from="from-ecsess-700" to="to-ecsess-800" via="via-ecsess-750">
-	<Sponsors sponsors={data.sponsors} />
+	<Sponsors sponsors={data.sponsors} lastUpdated={data.sponsorsLastUpdated} />
 </Section>
 
 <!-- Affiliated Clubs -->