feature: fetch random testimony

src/app/worship/[id]/page.tsx

@@ -7,7 +7,7 @@ import { Container } from '@/components/Container/Container'
 import { Card } from '@/components/Card/Card'
 import styles from './styles.module.css'
 import { MassTitle } from '@/components/MassTitle/MassTitle'
-import { useCompactDate, useDate } from '@/hooks/useCompactDate'
+import { useDate } from '@/hooks/useCompactDate'
 import { useTime } from '@/hooks/useTime'
 import { Pill } from '@/components/Pill/Pill'
 import { useMassType } from '@/hooks/useMassType'
@@ -17,6 +17,7 @@ import locationIcon from './location.svg'
 import question from './question.svg'
 import { LocationMap } from '@/components/Map/Map'
 import { Testimony } from '@/components/Testimony/Testimony'
+import { randomTestimony } from '@/utils/randomTestimony'
 
 export default async function Page({ params }: { params: { id: string } }) {
   const payload = await getPayloadHMR({ config: configPromise })
@@ -24,6 +25,7 @@ export default async function Page({ params }: { params: { id: string } }) {
     id: params.id,
     collection: 'worship',
   })
+  const testimony = await randomTestimony('EUCHARIST')
   const location = useLocation(worship.location)
   const title = useLiturgyCalendarTitle(worship.date)
   const date = useDate(worship.date)
@@ -92,10 +94,9 @@ export default async function Page({ params }: { params: { id: string } }) {
 
       <LocationMap />
       <Testimony
-        name={'Johan Shafer'}
+        name={testimony.name}
-        testimony={
+        testimony={testimony.testimony}
-          '"Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen."'
+        occupation={testimony.occupation || undefined}
-        }
       />
     </>
   )

src/collections/Testimony.ts

@@ -50,4 +50,7 @@ export const Testimony: CollectionConfig = {
       required: true,
     },
   ],
+  access: {
+    read: () => true,
+  },
 }

src/components/Menu/styles.module.css

@@ -1,6 +1,6 @@
 .nav {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 20px;
   color: #1f1f1f;
   padding: 15px;

src/utils/randomTestimony.ts

@@ -0,0 +1,35 @@
+import { getPayloadHMR } from '@payloadcms/next/utilities'
+import configPromise from '@payload-config'
+import { unstable_cache } from 'next/cache'
+
+type Category = 'EUCHARIST'
+
+/**
+ * Fetch testimonials from database
+ */
+const fetchTestimonies = async (type: Category) => {
+  const payload = await getPayloadHMR({ config: configPromise })
+  return await payload.find({
+    collection: 'testimony',
+    sort: 'createdAt',
+    where: {
+      category: {
+        equals: type,
+      },
+    },
+  })
+}
+
+/**
+ * Fetch a random cached testimony
+ */
+export const randomTestimony = async (type: Category) => {
+  const testimonials = await unstable_cache(
+    () => fetchTestimonies(type),
+    ['testimony', type],
+    { revalidate: 3600 },
+  )()
+  const length = testimonials.docs.length
+  const randomIndex = Math.floor(Math.random() * length)
+  return testimonials.docs[randomIndex]
+}