chore: update use cache logic

sanity-io · Nov 21, 2024 · 611f49c · 611f49c
1 parent 9febf13
commit 611f49c
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 120 deletions.
diff --git a/next-canary/src/app/TimeSince.tsx b/next-canary/src/app/TimeSince.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import {useLayoutEffect, useState} from 'react'
+
+export function TimeSince({label, since}: {label: string; since: string}) {
+  const [from, setFrom] = useState<null | Date>(null)
+  const [now, setNow] = useState<null | Date>(null)
+  useLayoutEffect(() => {
+    setFrom(new Date(since))
+    const interval = setInterval(() => setNow(new Date()), 1000)
+    return () => clearInterval(interval)
+  }, [since])
+
+  let timeSince = '…'
+  if (from && now) {
+    timeSince = formatTimeSince(from, now)
+  }
+
+  return (
+    <div className="bg-theme-button text-theme-button absolute left-2 top-2 block rounded text-xs">
+      <span className="inline-block py-1 pl-2 pr-0.5">{label}:</span>
+      <span className="bg-theme text-theme mr-0.5 inline-block rounded-r-sm px-1 py-0.5 tabular-nums">
+        rendered {timeSince}
+      </span>
+    </div>
+  )
+}
+
+const rtf = new Intl.RelativeTimeFormat('en', {style: 'short'})
+export function formatTimeSince(from: Date, to: Date): string {
+  const seconds = Math.floor((from.getTime() - to.getTime()) / 1000)
+  if (seconds > -60) {
+    return rtf.format(Math.min(seconds, -1), 'second')
+  }
+  const minutes = Math.ceil(seconds / 60)
+  if (minutes > -60) {
+    return rtf.format(minutes, 'minute')
+  }
+  const hours = Math.ceil(minutes / 60)
+  if (hours > -24) {
+    return rtf.format(hours, 'hour')
+  }
+  const days = Math.ceil(hours / 24)
+  return rtf.format(days, 'day')
+}
diff --git a/next-canary/src/app/layout.tsx b/next-canary/src/app/layout.tsx
@@ -2,8 +2,10 @@ import type {Viewport} from 'next'
 import './globals.css'
 import {sanityFetch} from '@/sanity/fetch'
 import {defineQuery} from 'groq'
+import {Suspense} from 'react'
 import {SanityLive} from './SanityLive'
 import {ThemeButton} from './ThemeButton'
+import {TimeSince} from './TimeSince'
 
 const THEME_QUERY = defineQuery(`*[_id == "theme"][0]{background,text}`)
 
@@ -19,7 +21,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const {data, tags} = await sanityFetch({query: THEME_QUERY})
+  const {data, tags, fetchedAt} = await sanityFetch({query: THEME_QUERY})
 
   return (
     <html
@@ -31,11 +33,18 @@ export default async function RootLayout({
       }}
     >
       <body>
-        <div className="flex min-h-screen flex-col items-center justify-evenly overflow-auto">
+        <div className="relative flex min-h-screen flex-col items-center justify-evenly overflow-auto">
+          <Suspense>
+            <TimeSince label="layout.tsx" since={fetchedAt} />
+          </Suspense>
           {children}
-          <ThemeButton tags={tags!} />
+          <Suspense>
+            <ThemeButton tags={tags!} />
+          </Suspense>
         </div>
-        <SanityLive />
+        <Suspense>
+          <SanityLive />
+        </Suspense>
       </body>
     </html>
   )

diff --git a/next-canary/src/app/page.tsx b/next-canary/src/app/page.tsx
@@ -2,6 +2,8 @@ import {sanityFetch} from '@/sanity/fetch'
 import './globals.css'
 import {defineQuery} from 'groq'
 import type {Metadata} from 'next'
+import {Suspense} from 'react'
+import {TimeSince} from './TimeSince'
 
 const DEMO_QUERY = defineQuery(`*[_type == "demo" && slug.current == $slug][0].title`)
 const slug = 'next-canary'
@@ -14,11 +16,16 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function Home() {
-  const {data} = await sanityFetch({query: DEMO_QUERY, params: {slug}})
+  const {data, fetchedAt} = await sanityFetch({query: DEMO_QUERY, params: {slug}})
 
   return (
-    <h1 className="text-balance text-4xl font-bold leading-tight tracking-tighter md:text-6xl lg:pr-8 lg:text-8xl">
-      {data || 'Next Canary'}
-    </h1>
+    <div className="ring-theme relative rounded-lg px-2 pb-1 pt-8 ring-1">
+      <h1 className="min-w-64 text-balance text-4xl font-bold leading-tight tracking-tighter md:text-6xl lg:pr-8 lg:text-8xl">
+        {data || 'Next Canary'}
+      </h1>
+      <Suspense>
+        <TimeSince label="page.tsx" since={fetchedAt} />
+      </Suspense>
+    </div>
   )
 }
diff --git a/next-canary/src/sanity/fetch.ts b/next-canary/src/sanity/fetch.ts
@@ -15,5 +15,5 @@ export async function sanityFetch<const QueryString extends string>({
   })
   cacheTag(...(syncTags as string[]))
 
-  return {data: result, tags: syncTags}
+  return {data: result, tags: syncTags, fetchedAt: new Date().toJSON()}
 }
diff --git a/package.json b/package.json
@@ -23,6 +23,10 @@
         "react",
         "react-dom"
       ]
-    }
+    },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
+  }
   }
 }