feat: add RandomFact general view

src/app/(public)/about/free-time/page.tsx

@@ -14,6 +14,7 @@ import { booksQuery } from '@/queries/books';
 import { podcastsQuery } from '@/queries/podcasts';
 import {
   falseRandomFactsQuery,
+  selectedTrueRandomFactsQuery,
   trueRandomFactsQuery,
 } from '@/queries/random-facts';
 import { tvSeriesQuery } from '@/queries/tv-series';
@@ -32,13 +33,6 @@ export const metadata = {
   description: 'About page',
 };
 
-export enum Option {
-  A = 'a',
-  B = 'b',
-  C = 'c',
-  D = 'd',
-}
-
 const getData = async () => {
   const books: Book[] = await sanityClient.fetch(booksQuery);
 
@@ -63,12 +57,18 @@ const loadRandomFactsForQuiz = async () => {
   const falseFacts: RandomFact[] = await sanityClient.fetch(
     falseRandomFactsQuery
   );
+  const selectedTrueFacts: RandomFact[] = await sanityClient.fetch(
+    selectedTrueRandomFactsQuery
+  );
   const trueFacts: RandomFact[] = await sanityClient.fetch(
     trueRandomFactsQuery
   );
 
   const oneFalseFact: RandomFact = shuffleArray(falseFacts)[0];
-  const threeTrueFacts: RandomFact[] = shuffleArray(trueFacts).slice(0, 3);
+  const threeTrueFacts: RandomFact[] = shuffleArray(selectedTrueFacts).slice(
+    0,
+    3
+  );
 
   const options: QuizOption[] = threeTrueFacts.map((fact) => ({
     headline: fact.headline,
@@ -99,6 +99,7 @@ const loadRandomFactsForQuiz = async () => {
   return {
     options: preparedOptions,
     falseOption: falseOptionKey,
+    trueFacts,
   };
 };
 
@@ -134,6 +135,7 @@ const AboutFreeTimePage = async () => {
           <RandomFacts
             options={randomFacts.options}
             falseOption={randomFacts.falseOption}
+            trueFacts={randomFacts.trueFacts}
           />
         </div>
       </section>

src/components/molecules/RandomFacts/GeneralView.tsx

@@ -2,33 +2,43 @@
 
 import { PortableText } from '@portabletext/react';
 import * as React from 'react';
-
-import { shuffleArray } from '@/lib/helper';
+import { useState } from 'react';
 
 import Button from '@/components/buttons/Button';
 
 import { RandomFact } from '@/types/RandomFact';
 
-export interface QuizAnswer {
-  headline: string;
-  key?: string;
-}
-
 export interface GeneralViewProps {
-  facts: RandomFact[];
+  randomFacts: RandomFact[];
 }
 
-const GeneralView = ({ facts }: GeneralViewProps) => {
-  const randomFact = shuffleArray(facts)[0];
+const GeneralView = ({ randomFacts }: GeneralViewProps) => {
+  const [factIndex, setFactIndex] = useState<number>(0);
+
+  const loadNewFact = () => {
+    if (factIndex < randomFacts.length) {
+      setFactIndex(factIndex + 1);
+    }
+  };
 
   return (
-    <div className='p4 rounded dark:bg-slate-900'>
-      <div className='mb-5'>
-        <PortableText value={randomFact.description} />
+    <div className=''>
+      <div className='mb-5 min-h-fit rounded bg-sky-200 p-6 dark:bg-slate-800'>
+        {factIndex < randomFacts.length && (
+          <PortableText value={randomFacts[factIndex].description} />
+        )}
+        {factIndex === randomFacts.length && (
+          <div className='text-center'>
+            That was the last cool fact I could think of... come back in some
+            time for more :)
+          </div>
+        )}
       </div>
 
       <div className='flex justify-center'>
-        <Button>Load another random fact</Button>
+        {factIndex < randomFacts.length && (
+          <Button onClick={loadNewFact}>Load another random fact</Button>
+        )}
       </div>
     </div>
   );

src/components/molecules/RandomFacts/Quiz.tsx

@@ -10,6 +10,8 @@ import { useState } from 'react';
 
 import Button from '@/components/buttons/Button';
 
+import { RandomFact } from '@/types/RandomFact';
+
 const localStorageKey = 'alreadyPlayed';
 
 export interface QuizOption {
@@ -21,6 +23,7 @@ export interface QuizOption {
 export interface QuizData {
   options: QuizOption[];
   falseOption?: string;
+  trueFacts: RandomFact[];
 }
 
 export interface QuizProps {

src/components/molecules/RandomFacts/__stories__/GeneralView.stories.tsx

@@ -1,9 +1,16 @@
 import { Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+import { shuffleArray } from '@/lib/helper';
 
 import GeneralView, {
   GeneralViewProps,
 } from '@/components/molecules/RandomFacts/GeneralView';
 
+import { trueRandomFactsQuery } from '@/queries/random-facts';
+
+import { sanityClient } from '../../../../../sanity/lib/client';
+
 import { RandomFact } from '@/types/RandomFact';
 
 const meta: Meta<typeof GeneralView> = {
@@ -14,21 +21,29 @@ const meta: Meta<typeof GeneralView> = {
 
 export default meta;
 
-const facts: RandomFact[] = [
-  {
-    _id: 'a',
-    name: 'name',
-    headline: '',
-    description:
-      'I have been officially excommunicated by the Roman Catholic Church ⛪',
-    trueFact: true,
-    explanation: '',
-  },
-];
-
-export const SampleStory = (args: GeneralViewProps) => (
-  <GeneralView {...args} />
-);
-SampleStory.args = {
-  facts,
+export const SampleStory = (args: GeneralViewProps) => {
+  const [randomFacts, setRandomFacts] = useState<RandomFact[]>([]);
+
+  useEffect(() => {
+    const fetchFacts = async () => {
+      try {
+        const randomFactsData = await sanityClient.fetch(trueRandomFactsQuery);
+
+        setRandomFacts(shuffleArray(randomFactsData));
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching randomFacts:', error);
+      }
+    };
+
+    fetchFacts();
+  }, []);
+
+  return (
+    <>
+      {randomFacts.length > 0 && (
+        <GeneralView {...args} randomFacts={randomFacts} />
+      )}
+    </>
+  );
 };

src/components/molecules/RandomFacts/__stories__/QuizAnswer.stories.tsx

@@ -18,34 +18,19 @@ const answers: QuizOption[] = [
     key: 'a',
     headline:
       'I have been officially excommunicated by the Roman Catholic Church ⛪',
-    explanation:
-      'That is accurate!\n\nAt a certain point in my life I realised that I no longer agreed with the ' +
-      'dictates of the religion I had grown up in, so I decided to declare it to the Church, and was excommunicated ' +
-      "as a consequence... I don't brag about it, but it feels good to be consistent :)",
   },
   {
     key: 'b',
     headline: 'I studied oboe at the music school for more than 12 years 🎶',
-    explanation:
-      "That's correct!\n\nWhen I studied at the music school, I occasionally played for some illustrious " +
-      'people - notably, the ex Italian President Giorgio Napolitano, the Nobel prize Dario Fo, the bishop of my hometown, ' +
-      'and the singer Luciano Ligabue 🎵 🎸 🎶 🎻. Not so oddly enough, it was usually me who asked them for an autograph, ' +
-      "although I was technically the 'star' and they were the audience...",
   },
   {
     key: 'c',
     headline: 'I know flags and capitals of all 195 countries in the world 🇰🇲',
-    explanation:
-      "Haha, nope... not yet at least, but I'm working on it ;) \n\nI know all 50 States by heart " +
-      '(alphabetically and geographically) though, and can probably name most of the 110 Italian towns along with their codes.',
   },
   {
     key: 'd',
     headline:
       'I was an extra-actor in a movie once: "Correspondence" by Giuseppe Tornatore 🎬',
-    explanation:
-      'Correct! \nI was part of the university students who sat in the conference hall and walked around ' +
-      "the uni campus. If you manage to spot me, I promise I'll autograph your t-shirt 😉",
   },
 ];
 

src/components/organisms/about-free-time/RandomFacts.tsx

@@ -3,12 +3,13 @@
 import * as React from 'react';
 import { useState } from 'react';
 
+import GeneralView from '@/components/molecules/RandomFacts/GeneralView';
 import Quiz, { QuizData } from '@/components/molecules/RandomFacts/Quiz';
 import QuizAnswers from '@/components/molecules/RandomFacts/QuizAnswers';
 
 const localStorageKey = 'alreadyPlayed';
 
-const RandomFacts = ({ options, falseOption }: QuizData) => {
+const RandomFacts = ({ options, falseOption, trueFacts }: QuizData) => {
   const [submitted, setSubmitted] = useState(false);
   const [answerCorrect, setAnswerCorrect] = useState(false);
 
@@ -55,7 +56,7 @@ const RandomFacts = ({ options, falseOption }: QuizData) => {
           answeredCorrectly={answerCorrect}
         />
       )}
-      {!submitted && alreadyPlayed && <div>Already played :)</div>}
+      {!submitted && alreadyPlayed && <GeneralView randomFacts={trueFacts} />}
     </div>
   );
 };

src/pages/api/random-facts.ts

@@ -4,7 +4,7 @@ import { shuffleArray } from '@/lib/helper';
 
 import {
   falseRandomFactsQuery,
-  trueRandomFactsQuery,
+  selectedTrueRandomFactsQuery,
 } from '@/queries/random-facts';
 
 import { sanityClient } from '../../../sanity/lib/client';
@@ -13,7 +13,7 @@ import { RandomFact } from '@/types/RandomFact';
 
 const randomFactsApi = async (req: NextApiRequest, res: NextApiResponse) => {
   const trueFacts: RandomFact[] = await sanityClient.fetch(
-    trueRandomFactsQuery
+    selectedTrueRandomFactsQuery
   );
 
   const falseFacts: RandomFact[] = await sanityClient.fetch(

src/pages/api/true-random-facts.ts

@@ -0,0 +1,17 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { selectedTrueRandomFactsQuery } from '@/queries/random-facts';
+
+import { sanityClient } from '../../../sanity/lib/client';
+
+import { RandomFact } from '@/types/RandomFact';
+
+const trueFactsApi = async (req: NextApiRequest, res: NextApiResponse) => {
+  const trueFacts: RandomFact[] = await sanityClient.fetch(
+    selectedTrueRandomFactsQuery
+  );
+
+  res.status(200).json(trueFacts);
+};
+
+export default trueFactsApi;

src/queries/random-facts.ts

@@ -1,6 +1,16 @@
 import { groq } from 'next-sanity';
 
 export const trueRandomFactsQuery = groq`
+*[_type == "randomFact" && isFactTrue == true] 
+{
+  _id,
+  name,
+  headline,
+  description,
+  explanation,
+}`;
+
+export const selectedTrueRandomFactsQuery = groq`
 *[_type == "randomFact" && isFactTrue == true && name != "Correspondence"] 
 {
   _id,