From 744c97c1d5315cc9d5c938ae09917957db201c27 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Sun, 18 Jun 2023 12:14:13 +1000
Subject: [PATCH] Cache and suspend stats until loaded

---
 frontend/src/app/page.tsx  | 5 ++++-
 frontend/src/config/api.ts | 7 ++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f71e033..ced131b 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { Trans } from 'react-i18next/TransWithoutContext'
 import Link from 'next/link'
 
@@ -31,7 +32,9 @@ const Page = async () => {
       <Content>
         <h2>{t('about.name')}</h2>
 
-        <Stats />
+        <Suspense>
+          <Stats />
+        </Suspense>
 
         <P><Trans i18nKey="about.content.p1" t={t} i18n={i18n}>_<br /><Link href="/how-to" rel="help">_</Link>_</Trans></P>
 
diff --git a/frontend/src/config/api.ts b/frontend/src/config/api.ts
index 4c172ab..312b092 100644
--- a/frontend/src/config/api.ts
+++ b/frontend/src/config/api.ts
@@ -43,11 +43,12 @@ export const StatsResponse = z.object({
 })
 export type StatsResponse = z.infer<typeof StatsResponse>
 
-const get = async <S extends z.Schema>(url: string, schema: S, auth?: string): Promise<ReturnType<S['parse']>> => {
+const get = async <S extends z.Schema>(url: string, schema: S, auth?: string, nextOptions?: NextFetchRequestConfig): Promise<ReturnType<S['parse']>> => {
   const res = await fetch(new URL(url, API_BASE), {
     headers: {
       ...auth && { Authorization: `Bearer ${auth}` },
-    }
+    },
+    next: nextOptions,
   })
     .catch(console.warn)
   if (!res?.ok) throw res
@@ -69,7 +70,7 @@ const post = async <S extends z.Schema>(url: string, schema: S, input: unknown,
 }
 
 // Get
-export const getStats = () => get('/stats', StatsResponse)
+export const getStats = () => get('/stats', StatsResponse, undefined, { revalidate: 60 })
 export const getEvent = (eventId: string) => get(`/event/${eventId}`, EventResponse)
 export const getPeople = (eventId: string) => get(`/event/${eventId}/people`, PersonResponse.array())
 export const getPerson = (eventId: string, personName: string, password?: string) => get(`/event/${eventId}/people/${personName}`, PersonResponse, password && btoa(password))