fix: Query optimizations and suspense

src/app/_components/FairDates.tsx

@@ -0,0 +1,26 @@
+import { fetchDates } from "@/components/shared/hooks/api/useDates"
+import { DateTime } from "luxon"
+
+export async function FairDates() {
+	const dates = await fetchDates()
+
+	return (
+		<div className="mt-5 flex gap-4 font-bebas-neue">
+			<p className="text-2xl uppercase text-stone-400">Fair:</p>
+			<div className="flex">
+				{[
+					// Pick first and last day (ASSUMPTION: days are sorted and continuous)
+					dates.fair.days[0],
+					dates.fair.days[dates.fair.days.length - 1]
+				].map((date, index, list) => (
+					<p key={date} className="text-2xl text-stone-400">
+						{DateTime.fromISO(date).toFormat(
+							// Only add month and year to last
+							`d${index == list.length - 1 ? " MMM" : "-"}${DateTime.fromISO(date).year !== DateTime.now().year ? " YYYY" : ""}`
+						)}
+					</p>
+				))}
+			</div>
+		</div>
+	)
+}

src/app/_components/Recruitment.tsx

@@ -0,0 +1,24 @@
+import { fetchRecruitment } from "@/components/shared/hooks/api/useRecruitment"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { UserRoundIcon } from "lucide-react"
+import Link from "next/link"
+
+export async function RecruitmentBanner() {
+	const recruitment = await fetchRecruitment({
+		cache: "no-cache"
+	})
+
+	if (recruitment == null) return null
+
+	return (
+		<Link href="/student/recruitment">
+			<Alert className="mt-0 cursor-pointer dark:hover:border-melon-700 dark:hover:border-opacity-50">
+				<UserRoundIcon className="h-4 w-4" />
+				<AlertTitle>Recruitment open!</AlertTitle>
+				<AlertDescription>
+					Apply to become a part of Armada 2024
+				</AlertDescription>
+			</Alert>
+		</Link>
+	)
+}

src/app/page.tsx

@@ -1,17 +1,13 @@
+import { FairDates } from "@/app/_components/FairDates"
+import { RecruitmentBanner } from "@/app/_components/Recruitment"
 import { NavigationMenu } from "@/components/shared/NavigationMenu"
 import { Page } from "@/components/shared/Page"
-import { fetchDates } from "@/components/shared/hooks/api/useDates"
-import { fetchRecruitment } from "@/components/shared/hooks/api/useRecruitment"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
-import { ArrowRightIcon, UserRoundIcon } from "lucide-react"
-import { DateTime } from "luxon"
+import { ArrowRightIcon } from "lucide-react"
 import Link from "next/link"
+import { Suspense } from "react"
 
 export default async function HomePage() {
-	const recruitment = await fetchRecruitment()
-	const dates = await fetchDates()
-
 	return (
 		<>
 			<NavigationMenu
@@ -24,17 +20,9 @@ export default async function HomePage() {
 			<Page.Background className="">
 				<div className="mb-5 flex w-full flex-1 justify-center ">
 					<div className="mx-5 w-full max-w-[800px] pt-3 md:mx-10 md:pt-6">
-						{recruitment != null && (
-							<Link href="/student/recruitment">
-								<Alert className="mt-0 cursor-pointer dark:hover:border-melon-700 dark:hover:border-opacity-50">
-									<UserRoundIcon className="h-4 w-4" />
-									<AlertTitle>Recruitment open!</AlertTitle>
-									<AlertDescription>
-										Apply to become a part of Armada 2024
-									</AlertDescription>
-								</Alert>
-							</Link>
-						)}
+						<Suspense>
+							<RecruitmentBanner />
+						</Suspense>
 					</div>
 				</div>
 				<div className="flex w-full flex-1 flex-col gap-y-10 pb-32 md:flex-row">
@@ -61,23 +49,9 @@ export default async function HomePage() {
 										</Button>
 									</a>
 								</div>
-								<div className="mt-5 flex gap-4 font-bebas-neue">
-									<p className="text-2xl uppercase text-stone-400">Fair:</p>
-									<div className="flex">
-										{[
-											// Pick first and last day (ASSUMPTION: days are sorted and continuous)
-											dates.fair.days[0],
-											dates.fair.days[dates.fair.days.length - 1]
-										].map((date, index, list) => (
-											<p key={date} className="text-2xl text-stone-400">
-												{DateTime.fromISO(date).toFormat(
-													// Only add month and year to last
-													`d${index == list.length - 1 ? " MMM" : "-"}${DateTime.fromISO(date).year !== DateTime.now().year ? " YYYY" : ""}`
-												)}
-											</p>
-										))}
-									</div>
-								</div>
+								<Suspense>
+									<FairDates />
+								</Suspense>
 							</div>
 						</div>
 					</div>

src/app/student/recruitment/RecruitmentList.tsx

@@ -13,7 +13,9 @@ import { env } from "@/env"
 import { DateTime } from "luxon"
 
 export function RecruitmentList() {
-	const { data, isLoading } = useRecruitment()
+	const { data, isLoading } = useRecruitment({
+		cache: "no-cache"
+	})
 	if (isLoading) return <p>Loading...</p>
 
 	if (data == null) {

src/app/team/page.tsx

@@ -12,7 +12,9 @@ export const metadata: Metadata = {
 }
 
 export default async function TeamPage() {
-	const organization = await fetchOrganization()
+	const organization = await fetchOrganization({
+		cache: "no-cache"
+	})
 
 	return (
 		<Page.Background withIndents className="justify-start">

src/components/shared/hooks/api/useExhibitors.tsx

@@ -58,6 +58,7 @@ export async function fetchExhibitors(options?: { year?: number }) {
 		`${env.NEXT_PUBLIC_API_URL}/api/exhibitors?year=${options?.year ?? defaultYear}`,
 		{
 			next: {
+				revalidate: 3600 * 24, // 24 cache hours
 				tags: [
 					"exhibitors",
 					options?.year?.toString() ?? defaultYear.toString()

src/components/shared/hooks/api/useOrganization.tsx

@@ -16,15 +16,18 @@ export interface Person {
 	role: string
 }
 
-export async function fetchOrganization() {
-	const res = await fetch(`${env.NEXT_PUBLIC_API_URL}/api/organization/v2`, {})
+export async function fetchOrganization(options?: RequestInit) {
+	const res = await fetch(
+		`${env.NEXT_PUBLIC_API_URL}/api/organization/v2`,
+		options ?? {}
+	)
 	const result = await res.json()
 	return result as Organization[]
 }
 
-export function useOrganization() {
+export function useOrganization(options?: RequestInit) {
 	return useQuery({
 		queryKey: ["recruitment"],
-		queryFn: fetchOrganization
+		queryFn: () => fetchOrganization(options)
 	})
 }

src/components/shared/hooks/api/useRecruitment.tsx

@@ -15,19 +15,22 @@ interface RecruitmentGroup {
 	description: string
 }
 
-export async function fetchRecruitment() {
-	const res = await fetch(`${env.NEXT_PUBLIC_API_URL}/api/recruitment`, {
-		cache: "no-cache"
-	})
+export async function fetchRecruitment(options?: RequestInit) {
+	const res = await fetch(
+		`${env.NEXT_PUBLIC_API_URL}/api/recruitment`,
+		options ?? {
+			cache: "no-cache"
+		}
+	)
 	const result = await res.json()
 	if (result == null || !Array.isArray(result) || result.length <= 0)
 		return null
 	return result[0] as Recruitment
 }
 
-export function useRecruitment() {
+export function useRecruitment(options?: RequestInit) {
 	return useQuery({
 		queryKey: ["recruitment"],
-		queryFn: fetchRecruitment
+		queryFn: () => fetchRecruitment(options)
 	})
 }