feat: move type RandomFact

martapanc · Aug 23, 2023 · 6ecec28 · 6ecec28
1 parent 15e27d2
commit 6ecec28
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 27 deletions.
diff --git a/src/app/(public)/about/free-time/page.tsx b/src/app/(public)/about/free-time/page.tsx
@@ -1,3 +1,4 @@
+import { DocumentNode } from 'graphql/language';
 import * as React from 'react';
 
 import { flattenToArray } from '@/lib/graphqlUtils';
@@ -14,19 +15,18 @@ import VideoGames from '@/components/organisms/about-free-time/VideoGames';
 import { booksQueryQL } from '@/queries/books';
 import { podcastsQueryQL } from '@/queries/podcasts';
 import {
-  falseRandomFactsQuery,
-  selectedTrueRandomFactsQuery,
-  trueRandomFactsQuery,
+  falseRandomFactsQueryQL,
+  selectedTrueRandomFactsQueryQL,
+  trueRandomFactsQueryQL,
 } from '@/queries/random-facts';
 import { tvShowsQueryQL } from '@/queries/tv-shows';
 import { videoGamesQueryQL } from '@/queries/video-games';
-import { RandomFact } from '@/sanityTypes/RandomFact';
 
 import apolloClient from '../../../../../apollo/apollo-client';
-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/TvShow';
 import { VideoGame } from '@/types/VideoGame';
 
@@ -59,6 +59,12 @@ async function queryVideoGames() {
   return flattenToArray<VideoGame>(data.videoGames);
 }
 
+export async function queryRandomFacts(query: DocumentNode) {
+  const { data } = await apolloClient.query({ query });
+
+  return flattenToArray<RandomFact>(data.randomFacts);
+}
+
 const getData = async () => {
   const randomFacts: QuizData = await loadRandomFactsForQuiz();
 
@@ -82,14 +88,16 @@ const queryData = async () => {
 };
 
 const loadRandomFactsForQuiz = async () => {
-  const falseFacts: RandomFact[] = await sanityClient.fetch(
-    falseRandomFactsQuery
+  const falseFacts: RandomFact[] = await queryRandomFacts(
+    falseRandomFactsQueryQL
   );
-  const selectedTrueFacts: RandomFact[] = await sanityClient.fetch(
-    selectedTrueRandomFactsQuery
+
+  const selectedTrueFacts: RandomFact[] = await queryRandomFacts(
+    selectedTrueRandomFactsQueryQL
   );
-  const trueFacts: RandomFact[] = await sanityClient.fetch(
-    trueRandomFactsQuery
+
+  const trueFacts: RandomFact[] = await queryRandomFacts(
+    trueRandomFactsQueryQL
   );
 
   const oneFalseFact: RandomFact = shuffleArray(falseFacts)[0];

diff --git a/src/components/molecules/RandomFacts/GeneralView.tsx b/src/components/molecules/RandomFacts/GeneralView.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { PortableText } from '@portabletext/react';
 import * as React from 'react';
 import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 
 import Button from '@/components/buttons/Button';
 
-import { RandomFact } from '@/sanityTypes/RandomFact';
+import { RandomFact } from '@/types/RandomFact';
 
 export interface GeneralViewProps {
   randomFacts: RandomFact[];
@@ -25,7 +25,7 @@ const GeneralView = ({ randomFacts }: GeneralViewProps) => {
     <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} />
+          <ReactMarkdown>{randomFacts[factIndex].description}</ReactMarkdown>
         )}
         {factIndex === randomFacts.length && (
           <div className='text-center'>

diff --git a/src/components/molecules/RandomFacts/Quiz.tsx b/src/components/molecules/RandomFacts/Quiz.tsx
@@ -13,7 +13,7 @@ import { saveToLocalStorage } from '@/lib/helper';
 import Button from '@/components/buttons/Button';
 import { localStorageKey } from '@/components/organisms/about-free-time/RandomFacts';
 
-import { RandomFact } from '@/sanityTypes/RandomFact';
+import { RandomFact } from '@/types/RandomFact';
 
 export interface QuizOption {
   headline: string;

diff --git a/src/components/molecules/RandomFacts/QuizAnswers.tsx b/src/components/molecules/RandomFacts/QuizAnswers.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { PortableText } from '@portabletext/react';
 import * as React from 'react';
 import { BsFillCheckCircleFill, BsFillXSquareFill } from 'react-icons/bs';
+import ReactMarkdown from 'react-markdown';
 
 import { QuizOption } from '@/components/molecules/RandomFacts/Quiz';
 
@@ -41,9 +41,7 @@ const QuizAnswers = ({
               <span>{answer.headline}</span>
             </div>
             <div className='rounded bg-blue-100 px-3 py-2 text-xs dark:bg-blue-950'>
-              {answer.explanation && (
-                <PortableText value={answer.explanation} />
-              )}
+              <ReactMarkdown>{answer.explanation}</ReactMarkdown>
             </div>
           </li>
         ))}

diff --git a/src/pages/api/random-facts.ts b/src/pages/api/random-facts.ts
@@ -2,21 +2,21 @@ import { NextApiRequest, NextApiResponse } from 'next';
 
 import { shuffleArray } from '@/lib/helper';
 
+import { queryRandomFacts } from '@/app/(public)/about/free-time/page';
 import {
-  falseRandomFactsQuery,
-  selectedTrueRandomFactsQuery,
+  falseRandomFactsQueryQL,
+  selectedTrueRandomFactsQueryQL,
 } from '@/queries/random-facts';
-import { RandomFact } from '@/sanityTypes/RandomFact';
 
-import { sanityClient } from '../../../sanity/lib/client';
+import { RandomFact } from '@/types/RandomFact';
 
 const randomFactsApi = async (req: NextApiRequest, res: NextApiResponse) => {
-  const trueFacts: RandomFact[] = await sanityClient.fetch(
-    selectedTrueRandomFactsQuery
+  const trueFacts: RandomFact[] = await queryRandomFacts(
+    selectedTrueRandomFactsQueryQL
   );
 
-  const falseFacts: RandomFact[] = await sanityClient.fetch(
-    falseRandomFactsQuery
+  const falseFacts: RandomFact[] = await queryRandomFacts(
+    falseRandomFactsQueryQL
   );
 
   const oneFalseRandomFact: RandomFact = shuffleArray(falseFacts)[0];

diff --git a/src/queries/random-facts.ts b/src/queries/random-facts.ts
@@ -1,3 +1,4 @@
+import { gql } from '@apollo/client';
 import { groq } from 'next-sanity';
 
 export const trueRandomFactsQuery = groq`
@@ -10,6 +11,23 @@ export const trueRandomFactsQuery = groq`
   explanation,
 }`;
 
+export const trueRandomFactsQueryQL = gql`
+  query {
+    randomFacts(locale: "en", filters: { isFactTrue: { eq: true } }) {
+      data {
+        id
+        attributes {
+          name
+          isFactTrue
+          headline
+          description
+          explanation
+        }
+      }
+    }
+  }
+`;
+
 export const selectedTrueRandomFactsQuery = groq`
 *[_type == "randomFact" && isFactTrue == true && name != "Correspondence"] 
 {
@@ -20,6 +38,26 @@ export const selectedTrueRandomFactsQuery = groq`
   explanation,
 }`;
 
+export const selectedTrueRandomFactsQueryQL = gql`
+  query {
+    randomFacts(
+      locale: "en"
+      filters: { isFactTrue: { eq: true }, name: { notContains: "(True)" } }
+    ) {
+      data {
+        id
+        attributes {
+          name
+          isFactTrue
+          headline
+          description
+          explanation
+        }
+      }
+    }
+  }
+`;
+
 export const falseRandomFactsQuery = groq`
 *[_type == "randomFact" && isFactTrue == false] 
 {
@@ -30,6 +68,23 @@ export const falseRandomFactsQuery = groq`
   explanation,
 }`;
 
+export const falseRandomFactsQueryQL = gql`
+  query {
+    randomFacts(locale: "en", filters: { isFactTrue: { eq: false } }) {
+      data {
+        id
+        attributes {
+          name
+          isFactTrue
+          headline
+          description
+          explanation
+        }
+      }
+    }
+  }
+`;
+
 export const randomFactsQuery = groq`
 *[_type == "randomFact"] {
   _id,

diff --git a/src/types/RandomFact.ts b/src/types/RandomFact.ts
@@ -0,0 +1,8 @@
+export interface RandomFact {
+  id: string;
+  name: string;
+  headline: string;
+  description: TypedObject;
+  isFactTrue: boolean;
+  explanation: TypedObject;
+}