feat: add trivia page

src/components/title/DidYouKnow.tsx

@@ -1,12 +1,13 @@
 import Link from 'next/link';
-import { DidYouKnow } from 'src/interfaces/shared/title';
+import type { DidYouKnow as DidYouKnowType } from 'src/interfaces/shared/title';
 import styles from 'src/styles/modules/components/title/did-you-know.module.scss';
 
 type Props = {
-  data: DidYouKnow;
+  data: DidYouKnowType;
+  titleId: string;
 };
 
-const DidYouKnow = ({ data }: Props) => {
+const DidYouKnow = ({ data, titleId }: Props) => {
   if (!Object.keys(data).length)
     return (
       <section className={styles.didYouKnow}>
@@ -20,7 +21,16 @@ const DidYouKnow = ({ data }: Props) => {
       <div className={styles.container}>
         {data.trivia && (
           <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Trivia</h3>
+            <h3 className='heading heading__tertiary'>
+              Trivia
+              {data.trivia.total > 1 && (
+                <Link href={`/title/${titleId}/trivia`}>
+                  <a className='link' style={{ fontSize: '0.9rem', marginLeft: '1rem' }}>
+                    See all {data.trivia.total} trivia »
+                  </a>
+                </Link>
+              )}
+            </h3>
             <div
               className={styles.item__desc}
               dangerouslySetInnerHTML={{ __html: data.trivia.html }}

src/interfaces/shared/trivia.ts

@@ -0,0 +1,7 @@
+import trivia from 'src/utils/fetchers/titleTrivia';
+
+type Trivia = Awaited<ReturnType<typeof trivia>>;
+export type { Trivia as default };
+
+export type TriviaItem = Trivia['items'][0];
+export type TriviaMeta = Trivia['meta'];

src/pages/api/title/[titleId]/trivia.ts

@@ -0,0 +1,34 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import trivia from 'src/utils/fetchers/titleTrivia';
+import { getErrorProperties } from 'src/utils/helpers';
+import getOrSetApiCache from 'src/utils/getOrSetApiCache';
+import { titleTriviaKey } from 'src/utils/constants/keys';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { titleId, page } = req.query;
+
+  if (typeof titleId !== 'string') {
+    return res.status(400).json({ error: 'Invalid title ID' });
+  }
+
+  const pageNum = typeof page === 'string' ? parseInt(page, 10) : 1;
+
+  if (isNaN(pageNum) || pageNum < 1) {
+    return res.status(400).json({ error: 'Invalid page number' });
+  }
+
+  try {
+    // Cache each page separately
+    const cacheKey = `${titleTriviaKey(titleId)}:page:${pageNum}`;
+    const data = await getOrSetApiCache(cacheKey, trivia, titleId, pageNum);
+
+    return res.status(200).json(data);
+  } catch (e) {
+    const err = getErrorProperties(e);
+    console.error('Error fetching trivia:', err);
+    return res.status(err.statusCode).json({
+      error: err.message,
+      statusCode: err.statusCode,
+    });
+  }
+}

src/pages/title/[titleId]/index.tsx

@@ -39,7 +39,7 @@ const TitleInfo = ({ data, error, originalPath }: Props) => {
         <Media className={styles.media} media={data.media} />
         <Cast className={styles.cast} cast={data.cast} />
         <div className={styles.textarea}>
-          <DidYouKnow data={data.didYouKnow} />
+          <DidYouKnow data={data.didYouKnow} titleId={data.titleId} />
           <Reviews reviews={data.reviews} />
         </div>
         <Info className={styles.infoarea} info={info} />