feat: add 'fetch options for quiz' method

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

@@ -1,5 +1,8 @@
 import * as React from 'react';
 
+import { shuffleArray } from '@/lib/helper';
+
+import { QuizOption, QuizProps } from '@/components/molecules/RandomFacts/Quiz';
 import Books from '@/components/organisms/about-free-time/Books';
 import Music from '@/components/organisms/about-free-time/Music';
 import Podcasts from '@/components/organisms/about-free-time/Podcasts';
@@ -9,13 +12,18 @@ import VideoGames from '@/components/organisms/about-free-time/VideoGames';
 
 import { booksQuery } from '@/queries/books';
 import { podcastsQuery } from '@/queries/podcasts';
+import {
+  falseRandomFactsQuery,
+  trueRandomFactsQuery,
+} from '@/queries/random-facts';
 import { tvSeriesQuery } from '@/queries/tv-series';
 import { videoGamesQuery } from '@/queries/video-games';
 
 import { sanityClient } from '../../../../../sanity/lib/client';
 
 import { Book } from '@/types/Book';
 import { Podcast } from '@/types/Podcast';
+import { RandomFact } from '@/types/RandomFact';
 import { TvShow } from '@/types/TvSeries';
 import { VideoGame } from '@/types/VideoGame';
 
@@ -24,6 +32,13 @@ 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);
 
@@ -33,16 +48,60 @@ const getData = async () => {
 
   const videoGames: VideoGame[] = await sanityClient.fetch(videoGamesQuery);
 
+  const randomFacts: QuizProps = await loadRandomFactsForQuiz();
+
   return {
     books,
     podcasts,
     tvSeries,
     videoGames,
+    randomFacts,
+  };
+};
+
+const loadRandomFactsForQuiz = async () => {
+  const falseFacts: RandomFact[] = await sanityClient.fetch(
+    falseRandomFactsQuery
+  );
+  const trueFacts: RandomFact[] = await sanityClient.fetch(
+    trueRandomFactsQuery
+  );
+
+  const oneFalseFact: RandomFact = shuffleArray(falseFacts)[0];
+  const threeTrueFacts: RandomFact[] = shuffleArray(trueFacts).slice(0, 3);
+
+  const options: QuizOption[] = threeTrueFacts.map((fact) => ({
+    headline: fact.headline,
+  }));
+
+  options.push({
+    headline: oneFalseFact.headline,
+  });
+
+  const shuffledOptions = shuffleArray(options);
+
+  const keys = ['a', 'b', 'c', 'd'];
+  const preparedOptions: QuizOption[] = [];
+  for (let i = 0; i < 4; i++) {
+    preparedOptions.push({
+      headline: shuffledOptions[i].headline,
+      key: keys[i],
+    });
+  }
+
+  const falseOptionKey: string = preparedOptions.find(
+    (option) => option.headline === oneFalseFact.headline
+  )!.key!;
+
+  return {
+    options: preparedOptions,
+    falseOption: falseOptionKey,
   };
 };
 
 const AboutFreeTimePage = async () => {
-  const { books, podcasts, tvSeries, videoGames } = await getData();
+  const { books, podcasts, tvSeries, videoGames, randomFacts } =
+    await getData();
 
   return (
     <main className='min-h-main'>
@@ -69,7 +128,10 @@ const AboutFreeTimePage = async () => {
 
           <Music />
 
-          <RandomFacts />
+          <RandomFacts
+            options={randomFacts.options}
+            falseOption={randomFacts.falseOption}
+          />
         </div>
       </section>
     </main>

src/components/molecules/RandomFacts/Quiz.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
@@ -9,21 +11,14 @@ import Button from '@/components/buttons/Button';
 
 const localStorageKey = 'alreadyPlayed';
 
-export enum Option {
-  A = 'a',
-  B = 'b',
-  C = 'c',
-  D = 'd',
-}
-
 export interface QuizOption {
   headline: string;
-  key: Option;
+  key?: string;
 }
 
 export interface QuizProps {
   options: QuizOption[];
-  falseOption: Option;
+  falseOption?: string;
 }
 
 const Quiz = ({ options, falseOption }: QuizProps) => {
@@ -41,11 +36,12 @@ const Quiz = ({ options, falseOption }: QuizProps) => {
     localStorage.setItem(localStorageKey, 'true');
 
     setSubmitted(true);
-
     const answeredRight = falseOption === selectedAnswer;
 
     // eslint-disable-next-line no-console
-    console.log(submitted && answeredRight ? 'Correct!' : 'Wrong!');
+    console.log(submitted);
+    // eslint-disable-next-line no-console
+    console.log(answeredRight ? 'Correct!' : 'Wrong!');
   };
 
   return (

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

@@ -1,70 +1,28 @@
 'use client';
 
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import Button from '@/components/buttons/Button';
+import Quiz, { QuizProps } from '@/components/molecules/RandomFacts/Quiz';
 
 const localStorageKey = 'alreadyPlayed';
 
-const RandomFacts = () => {
-  const [selectedAnswer, setSelectedAnswer] = useState('');
+const RandomFacts = ({ options, falseOption }: QuizProps) => {
+  const [submitted] = useState(false);
 
-  const [submitted, setSubmitted] = useState(false);
-
-  const [alreadyPlayed, setAlreadyPlayed] = useState(() => {
+  const [alreadyPlayed] = useState(() => {
     const alreadyPlayed = localStorage.getItem(localStorageKey);
     return alreadyPlayed ? JSON.parse(alreadyPlayed) : false;
   });
 
-  const isButtonDisabled = selectedAnswer === '';
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedAnswer(event.target.value);
-  };
-
-  const submitAnswer = () => {
-    localStorage.setItem(localStorageKey, 'true');
-
-    setSubmitted(true);
-    setAlreadyPlayed(true);
-  };
-
   return (
     <div className='mb-6'>
       <div className='mb-6 mt-2 flex'>
         <h2>Random facts about me</h2>
       </div>
 
       {!submitted && !alreadyPlayed && (
-        <div className='rounded dark:bg-slate-900'>
-          <FormControl>
-            <RadioGroup
-              aria-labelledby='demo-radio-buttons-group-label'
-              name='radio-buttons-group'
-              value={selectedAnswer}
-              onChange={handleChange}
-            >
-              <FormControlLabel value='a' control={<Radio />} label='A' />
-              <FormControlLabel value='b' control={<Radio />} label='B' />
-              <FormControlLabel value='c' control={<Radio />} label='C' />
-              <FormControlLabel value='d' control={<Radio />} label='D' />
-            </RadioGroup>
-
-            <Button
-              className='shadow-md'
-              variant='primary'
-              onClick={submitAnswer}
-              disabled={isButtonDisabled}
-            >
-              Submit
-            </Button>
-          </FormControl>
-        </div>
+        <Quiz options={options} falseOption={falseOption} />
       )}
       {submitted && alreadyPlayed && (
         <div className='rounded bg-gray-200 p-4'>

src/lib/helper.ts

@@ -39,3 +39,12 @@ export function getFromSessionStorage(key: string): string | null {
   }
   return null;
 }
+
+export function shuffleArray<T>(array: T[]): T[] {
+  const shuffledArray = [...array];
+  for (let i = shuffledArray.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+  }
+  return shuffledArray;
+}

src/pages/api/random-facts.ts

@@ -1,5 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 
+import { shuffleArray } from '@/lib/helper';
+
 import {
   falseRandomFactsQuery,
   trueRandomFactsQuery,
@@ -18,9 +20,12 @@ const randomFactsApi = async (req: NextApiRequest, res: NextApiResponse) => {
     falseRandomFactsQuery
   );
 
+  const oneFalseRandomFact: RandomFact = shuffleArray(falseFacts)[0];
+
   res.status(200).json({
     true: trueFacts,
     false: falseFacts,
+    oneFalse: oneFalseRandomFact,
   });
 };
 

src/queries/random-facts.ts

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

src/types/RandomFact.ts

@@ -1,6 +1,7 @@
 export interface RandomFact {
   _id: string;
   name: string;
+  headline: string;
   description: string;
   trueFact: boolean;
   explanation: string;