feat: move types Book and Podcast

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { flattenToArray } from '@/lib/graphqlUtils';
 import { shuffleArray } from '@/lib/helper';
 
 import { QuizData, QuizOption } from '@/components/molecules/RandomFacts/Quiz';
@@ -10,48 +11,66 @@ import RandomFacts from '@/components/organisms/about-free-time/RandomFacts';
 import TvSeries from '@/components/organisms/about-free-time/TvSeries';
 import VideoGames from '@/components/organisms/about-free-time/VideoGames';
 
-import { booksQuery } from '@/queries/books';
-import { podcastsQuery } from '@/queries/podcasts';
+import { booksQueryQL } from '@/queries/books';
+import { podcastsQueryQL } from '@/queries/podcasts';
 import {
   falseRandomFactsQuery,
   selectedTrueRandomFactsQuery,
   trueRandomFactsQuery,
 } from '@/queries/random-facts';
 import { tvSeriesQuery } from '@/queries/tv-series';
 import { videoGamesQuery } from '@/queries/video-games';
-import { Book } from '@/sanityTypes/Book';
-import { Podcast } from '@/sanityTypes/Podcast';
 import { RandomFact } from '@/sanityTypes/RandomFact';
 import { TvShow } from '@/sanityTypes/TvSeries';
 import { VideoGame } from '@/sanityTypes/VideoGame';
 
+import apolloClient from '../../../../../apollo/apollo-client';
 import { sanityClient } from '../../../../../sanity/lib/client';
 
+import { Book } from '@/types/Book';
+import { Podcast } from '@/types/Podcast';
+
 export const metadata = {
   title: 'About my Free Time | MartaCodes.it',
   description: 'About page',
 };
 
-const getData = async () => {
-  const books: Book[] = await sanityClient.fetch(booksQuery);
+async function queryBooks() {
+  const { data } = await apolloClient.query({ query: booksQueryQL });
+
+  return flattenToArray<Book>(data.books);
+}
+
+async function queryPodcasts() {
+  const { data } = await apolloClient.query({ query: podcastsQueryQL });
 
-  const podcasts: Podcast[] = await sanityClient.fetch(podcastsQuery);
+  return flattenToArray<Podcast>(data.podcasts);
+}
 
+const getData = async () => {
   const tvSeries: TvShow[] = await sanityClient.fetch(tvSeriesQuery);
 
   const videoGames: VideoGame[] = await sanityClient.fetch(videoGamesQuery);
 
   const randomFacts: QuizData = await loadRandomFactsForQuiz();
 
   return {
-    books,
-    podcasts,
     tvSeries,
     videoGames,
     randomFacts,
   };
 };
 
+const queryData = async () => {
+  const books = await queryBooks();
+  const podcasts = await queryPodcasts();
+
+  return {
+    books,
+    podcasts,
+  };
+};
+
 const loadRandomFactsForQuiz = async () => {
   const falseFacts: RandomFact[] = await sanityClient.fetch(
     falseRandomFactsQuery
@@ -103,8 +122,9 @@ const loadRandomFactsForQuiz = async () => {
 };
 
 const AboutFreeTimePage = async () => {
-  const { books, podcasts, tvSeries, videoGames, randomFacts } =
-    await getData();
+  const { tvSeries, videoGames, randomFacts } = await getData();
+
+  const { books, podcasts } = await queryData();
 
   return (
     <main className='min-h-main'>

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

@@ -3,7 +3,7 @@
 import Image from 'next/image';
 import * as React from 'react';
 
-import { Book } from '@/sanityTypes/Book';
+import { Book } from '@/types/Book';
 
 export interface BookProps {
   books: Book[];
@@ -19,7 +19,7 @@ const Books = ({ books }: BookProps) => {
       <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 dark:bg-slate-900 md:mx-0 md:w-full md:px-0'>
         {books.map((book) => (
           <li
-            key={book._id}
+            key={book.id}
             className='mt-2 h-[168px] w-[120px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-blue-300 hover:to-blue-600'
           >
             <a
@@ -30,7 +30,7 @@ const Books = ({ books }: BookProps) => {
               <Image
                 className='rounded-md'
                 alt={book.title}
-                src={book.cover}
+                src={book.cover.url}
                 width={114}
                 height={114}
               />

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

@@ -3,7 +3,7 @@
 import Image from 'next/image';
 import * as React from 'react';
 
-import { Podcast } from '@/sanityTypes/Podcast';
+import { Podcast } from '@/types/Podcast';
 
 export interface PodcastProps {
   podcasts: Podcast[];
@@ -19,7 +19,7 @@ const Podcasts = ({ podcasts }: PodcastProps) => {
       <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 dark:bg-slate-900 md:mx-0 md:w-full md:px-0'>
         {podcasts.map((podcast) => (
           <li
-            key={podcast._id}
+            key={podcast.id}
             className='mt-2 h-[136px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-orange-400 hover:to-orange-700'
           >
             <a
@@ -30,7 +30,7 @@ const Podcasts = ({ podcasts }: PodcastProps) => {
               <Image
                 className='rounded-md'
                 alt={podcast.name}
-                src={podcast.cover}
+                src={podcast.cover.url}
                 width={130}
                 height={130}
               />

src/lib/graphqlUtils.ts

@@ -5,16 +5,12 @@ import {
   StrapiEntityResponseCollection,
 } from 'strapi-flatten-graphql';
 
-// export function toCollection<T extends object>(entityResponse: unknown): T[] {
-//   // @ts-ignore
-//   const collection: FlattenArray<StrapiEntityResponseCollection<T>> = flattenEntityResponseCollection(entityResponse);
-//   return collection;
-// }
-
 export function flattenToArray<T extends object>(
-  entityResponse: StrapiEntityResponseCollection<T>
+  entityResponseCollection: StrapiEntityResponseCollection<T>
 ): T[] {
-  const flattenedData = flattenEntityResponseCollection(entityResponse);
+  const flattenedData = flattenEntityResponseCollection(
+    entityResponseCollection
+  );
   return flattenedData as T[];
 }
 

src/queries/books.ts

@@ -1,3 +1,4 @@
+import { gql } from '@apollo/client';
 import { groq } from 'next-sanity';
 
 export const booksQuery = groq`
@@ -9,3 +10,29 @@ export const booksQuery = groq`
   "cover": cover.asset->url,
   goodreadsLink,
 }`;
+
+export const booksQueryQL = gql`
+  query {
+    books(locale: "en", sort: "author:ASC") {
+      data {
+        id
+        attributes {
+          title
+          author
+          cover {
+            data {
+              id
+              attributes {
+                name
+                url
+                alternativeText
+              }
+            }
+          }
+          goodreadsLink
+          genre
+        }
+      }
+    }
+  }
+`;

src/queries/podcasts.ts

@@ -1,3 +1,4 @@
+import { gql } from '@apollo/client';
 import { groq } from 'next-sanity';
 
 export const podcastsQuery = groq`
@@ -9,3 +10,29 @@ export const podcastsQuery = groq`
   "cover": cover.asset->url,
   mediaLink,
 }`;
+
+export const podcastsQueryQL = gql`
+  query {
+    podcasts(sort: "author:ASC") {
+      data {
+        id
+        attributes {
+          name
+          author
+          cover {
+            data {
+              id
+              attributes {
+                name
+                url
+                alternativeText
+              }
+            }
+          }
+          mediaLink
+          language
+        }
+      }
+    }
+  }
+`;

src/types/Book.ts

@@ -0,0 +1,10 @@
+import { Icon } from '@/types/Icon';
+
+export interface Book {
+  id: string;
+  title: string;
+  author: string;
+  genre: string;
+  cover: Icon;
+  goodreadsLink: string;
+}

src/types/Podcast.ts

@@ -0,0 +1,10 @@
+import { Icon } from '@/types/Icon';
+
+export interface Podcast {
+  id: string;
+  name: string;
+  author: string;
+  language: string;
+  cover: Icon;
+  mediaLink: string;
+}