feat: move types TvShow and VideoGame

martapanc · Aug 23, 2023 · 9d9e0c3 · 9d9e0c3
1 parent a58ab34
commit 9d9e0c3
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 38 deletions.
diff --git a/src/app/(public)/about/free-time/page.tsx b/src/app/(public)/about/free-time/page.tsx
@@ -18,17 +18,17 @@ import {
   selectedTrueRandomFactsQuery,
   trueRandomFactsQuery,
 } from '@/queries/random-facts';
-import { tvSeriesQuery } from '@/queries/tv-series';
-import { videoGamesQuery } from '@/queries/video-games';
+import { tvShowsQueryQL } from '@/queries/tv-shows';
+import { videoGamesQueryQL } from '@/queries/video-games';
 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';
+import { TvShow } from '@/types/TvSeries';
+import { VideoGame } from '@/types/VideoGame';
 
 export const metadata = {
   title: 'About my Free Time | MartaCodes.it',
@@ -47,27 +47,37 @@ async function queryPodcasts() {
   return flattenToArray<Podcast>(data.podcasts);
 }
 
-const getData = async () => {
-  const tvSeries: TvShow[] = await sanityClient.fetch(tvSeriesQuery);
+async function queryTvShows() {
+  const { data } = await apolloClient.query({ query: tvShowsQueryQL });
+
+  return flattenToArray<TvShow>(data.tvShows);
+}
+
+async function queryVideoGames() {
+  const { data } = await apolloClient.query({ query: videoGamesQueryQL });
 
-  const videoGames: VideoGame[] = await sanityClient.fetch(videoGamesQuery);
+  return flattenToArray<VideoGame>(data.videoGames);
+}
 
+const getData = async () => {
   const randomFacts: QuizData = await loadRandomFactsForQuiz();
 
   return {
-    tvSeries,
-    videoGames,
     randomFacts,
   };
 };
 
 const queryData = async () => {
   const books = await queryBooks();
   const podcasts = await queryPodcasts();
+  const tvShows = await queryTvShows();
+  const videoGames = await queryVideoGames();
 
   return {
     books,
     podcasts,
+    tvShows,
+    videoGames,
   };
 };
 
@@ -122,9 +132,9 @@ const loadRandomFactsForQuiz = async () => {
 };
 
 const AboutFreeTimePage = async () => {
-  const { tvSeries, videoGames, randomFacts } = await getData();
+  const { randomFacts } = await getData();
 
-  const { books, podcasts } = await queryData();
+  const { books, podcasts, tvShows, videoGames } = await queryData();
 
   return (
     <main className='min-h-main'>
@@ -147,7 +157,7 @@ const AboutFreeTimePage = async () => {
 
           <VideoGames videoGames={videoGames} />
 
-          <TvSeries tvSeries={tvSeries} />
+          <TvSeries tvShows={tvShows} />
 
           <Music />
 

diff --git a/src/components/organisms/about-free-time/TvSeries.tsx b/src/components/organisms/about-free-time/TvSeries.tsx
@@ -3,34 +3,30 @@
 import Image from 'next/image';
 import * as React from 'react';
 
-import { TvShow } from '@/sanityTypes/TvSeries';
+import { TvShow } from '@/types/TvShow';
 
 export interface TvSeriesProps {
-  tvSeries: TvShow[];
+  tvShows: TvShow[];
 }
 
-const TvSeries = ({ tvSeries }: TvSeriesProps) => {
+const TvSeries = ({ tvShows }: TvSeriesProps) => {
   return (
     <div className='mb-6'>
       <div className='my-2 flex'>
         <h2>Favourite TV Series</h2>
       </div>
 
       <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'>
-        {tvSeries.map((tvSeries) => (
+        {tvShows.map((tvShow) => (
           <li
-            key={tvSeries._id}
+            key={tvShow.id}
             className='mt-2 h-[200px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-yellow-300 hover:to-yellow-700'
           >
-            <a
-              href={tvSeries.mediaLink}
-              target='_blank'
-              rel='noopener noreferrer'
-            >
+            <a href={tvShow.link} target='_blank' rel='noopener noreferrer'>
               <Image
                 className='rounded-md'
-                alt={tvSeries.title}
-                src={tvSeries.poster}
+                alt={tvShow.title}
+                src={tvShow.poster.url}
                 width={130}
                 height={130}
               />

diff --git a/src/components/organisms/about-free-time/VideoGames.tsx b/src/components/organisms/about-free-time/VideoGames.tsx
@@ -3,7 +3,7 @@
 import Image from 'next/image';
 import * as React from 'react';
 
-import { VideoGame } from '@/sanityTypes/VideoGame';
+import { VideoGame } from '@/types/VideoGame';
 
 export interface VideoGameProps {
   videoGames: VideoGame[];
@@ -19,14 +19,14 @@ const VideoGames = ({ videoGames }: VideoGameProps) => {
       <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'>
         {videoGames.map((game) => (
           <li
-            key={game._id}
+            key={game.id}
             className='mt-2 h-[180px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-purple-300 hover:to-purple-700'
           >
-            <a href={game.mediaLink} target='_blank' rel='noopener noreferrer'>
+            <a href={game.link} target='_blank' rel='noopener noreferrer'>
               <Image
                 className='rounded-md'
                 alt={game.title}
-                src={game.cover}
+                src={game.cover.url}
                 width={130}
                 height={130}
               />

diff --git a/src/queries/tv-series.ts b/src/queries/tv-series.ts
diff --git a/src/queries/tv-shows.ts b/src/queries/tv-shows.ts
@@ -0,0 +1,36 @@
+import { gql } from '@apollo/client';
+import { groq } from 'next-sanity';
+
+export const tvSeriesQuery = groq`
+*[_type == "tvSeries"] | order(year desc) {
+  _id,
+  title,
+  year,
+  "poster": poster.asset->url,
+  mediaLink,
+}`;
+
+export const tvShowsQueryQL = gql`
+  query {
+    tvShows(sort: "year:DESC") {
+      data {
+        id
+        attributes {
+          title
+          year
+          poster {
+            data {
+              id
+              attributes {
+                name
+                url
+                alternativeText
+              }
+            }
+          }
+          link
+        }
+      }
+    }
+  }
+`;
diff --git a/src/queries/video-games.ts b/src/queries/video-games.ts
@@ -1,3 +1,4 @@
+import { gql } from '@apollo/client';
 import { groq } from 'next-sanity';
 
 export const videoGamesQuery = groq`
@@ -8,3 +9,28 @@ export const videoGamesQuery = groq`
   "cover": cover.asset->url,
   mediaLink,
 }`;
+
+export const videoGamesQueryQL = gql`
+  query {
+    videoGames(sort: "year:DESC") {
+      data {
+        id
+        attributes {
+          title
+          year
+          cover {
+            data {
+              id
+              attributes {
+                name
+                url
+                alternativeText
+              }
+            }
+          }
+          link
+        }
+      }
+    }
+  }
+`;
diff --git a/src/types/TvShow.ts b/src/types/TvShow.ts
@@ -0,0 +1,9 @@
+import { Icon } from '@/types/Icon';
+
+export interface TvShow {
+  id: string;
+  title: string;
+  year: string;
+  poster: Icon;
+  link: string;
+}
diff --git a/src/types/VideoGame.ts b/src/types/VideoGame.ts
@@ -0,0 +1,9 @@
+import { Icon } from '@/types/Icon';
+
+export interface VideoGame {
+  id: string;
+  title: string;
+  year: string;
+  cover: Icon;
+  link: string;
+}