feat: replace ShortText with Single type Intro

martapanc · Aug 22, 2023 · eec597a · eec597a
1 parent f1a4c59
commit eec597a
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 42 deletions.
diff --git a/src/app/(public)/about/work/page.tsx b/src/app/(public)/about/work/page.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import { flattenToArray } from '@/lib/graphqlUtils';
+import { flattenToArray, flattenToObject } from '@/lib/graphqlUtils';
 
 import Education from '@/components/organisms/about-work/Education';
 import Languages from '@/components/organisms/about-work/Languages';
@@ -13,32 +13,29 @@ import { jobsQueryQL } from '@/queries/jobs';
 import { languagesQueryQL } from '@/queries/languages';
 import { publicationQueryQL } from '@/queries/publications';
 import { schoolsQueryQL } from '@/queries/schools';
-import { shortTextQuery } from '@/queries/short-texts';
+import { softwareDevIntroQuery } from '@/queries/short-texts';
 import { skillQueryQL } from '@/queries/skills';
-import { ShortText } from '@/sanityTypes/ShortText';
 
 import apolloClient from '../../../../../apollo/apollo-client';
-import { sanityClient } from '../../../../../sanity/lib/client';
 
 import { Icon } from '@/types/Icon';
 import { Job } from '@/types/Job';
 import { Language } from '@/types/Language';
 import { Publication } from '@/types/Publication';
 import { School } from '@/types/School';
+import { SoftwareDevIntro } from '@/types/ShortText';
 import { Skill } from '@/types/Skill';
 
 export const metadata = {
   title: 'About my Work | MartaCodes.it',
   description: 'About page',
 };
 
-const getData = async () => {
-  const shortTexts: ShortText[] = await sanityClient.fetch(shortTextQuery);
+async function queryIntro() {
+  const { data } = await apolloClient.query({ query: softwareDevIntroQuery });
 
-  return {
-    shortTexts,
-  };
-};
+  return flattenToObject<SoftwareDevIntro>(data.softwareDevelopmentIntro);
+}
 
 async function queryJobs() {
   const { data } = await apolloClient.query({
@@ -81,13 +78,16 @@ async function queryLanguages() {
 }
 
 const queryData = async () => {
+  const intro = await queryIntro();
+
   const jobs = await queryJobs();
   const languages = await queryLanguages();
   const publications = await queryPublications();
   const schools = await querySchools();
   const skills = await querySkills();
 
   return {
+    intro,
     jobs,
     languages,
     publications,
@@ -97,13 +97,8 @@ const queryData = async () => {
 };
 
 const AboutPage = async () => {
-  const { shortTexts } = await getData();
-
-  const { jobs, languages, publications, schools, skills } = await queryData();
-
-  const softwareDevelopment: ShortText | undefined = shortTexts.find(
-    (item) => item.name === 'software-development'
-  );
+  const { intro, jobs, languages, publications, schools, skills } =
+    await queryData();
 
   const noOfYears = new Date().getFullYear() - 2015;
 
@@ -116,32 +111,25 @@ const AboutPage = async () => {
         <div className='layout relative flex flex-col py-12'>
           <h1 className='mb-5'>Work & Career</h1>
 
-          {softwareDevelopment && (
-            <div>
-              <div className='m-2 flex'>
-                <Image
-                  className='mr-2 h-auto'
-                  src={softwareDevelopment.iconUrl}
-                  alt={softwareDevelopment.title}
-                  width={titleIconDimension}
-                  height={titleIconDimension}
-                />
-
-                <h2>{softwareDevelopment.title}</h2>
-              </div>
+          <div>
+            <div className='m-2 flex'>
+              <Image
+                className='mr-2 h-auto'
+                src={intro.icon.url}
+                alt={intro.title}
+                width={titleIconDimension}
+                height={titleIconDimension}
+              />
+
+              <h2>{intro.title}</h2>
+            </div>
 
-              <div className='mb-5'>
-                <p>
-                  Software development has been both my passion and my work for{' '}
-                  {noOfYears} years. Below is a quick overview of my main
-                  technical skill sets and technologies I use. Want to find out
-                  more about my experience? Check out my{' '}
-                  <a href='/cv'>online CV</a> and{' '}
-                  <a href='/projects'>project portfolio</a>.
-                </p>
-              </div>
+            <div className='mb-5'>
+              <ReactMarkdown>
+                {intro.content.replace('8', noOfYears)}
+              </ReactMarkdown>
             </div>
-          )}
+          </div>
 
           <div className='mb-10 grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6'>
             {skills.map((skill: Skill) => (

diff --git a/src/components/organisms/about-work/Publications.tsx b/src/components/organisms/about-work/Publications.tsx
@@ -21,7 +21,7 @@ const Publications = ({ publications }: PublicationProps) => {
       <div className='grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-8'>
         {publications.map((publication) => (
           <div
-            key={publication._id}
+            key={publication.id}
             className='flex h-32 flex-col justify-between rounded-md p-4 shadow-md dark:bg-slate-900 md:h-40'
           >
             <span className='font-semibold'>{publication.title}</span>

diff --git a/src/lib/graphqlUtils.ts b/src/lib/graphqlUtils.ts
@@ -1,5 +1,7 @@
 import {
+  flattenEntityResponse,
   flattenEntityResponseCollection,
+  StrapiEntityResponse,
   StrapiEntityResponseCollection,
 } from 'strapi-flatten-graphql';
 
@@ -15,3 +17,10 @@ export function flattenToArray<T extends object>(
   const flattenedData = flattenEntityResponseCollection(entityResponse);
   return flattenedData as T[];
 }
+
+export function flattenToObject<T extends object>(
+  entityResponse: StrapiEntityResponse<T>
+): T {
+  const flattenedData = flattenEntityResponse(entityResponse);
+  return flattenedData as T;
+}
diff --git a/src/queries/codeSnippets.ts b/src/queries/codeSnippets.ts
@@ -1,3 +1,4 @@
+import { gql } from '@apollo/client';
 import { groq } from 'next-sanity';
 
 export const codeSnippetsQuery = groq`
@@ -7,3 +8,17 @@ export const codeSnippetsQuery = groq`
   "code": code.code,
   "language": code.language,
 }`;
+
+export const codeSnippetsQueryQL = gql`
+  query {
+    codeSnippets {
+      data {
+        id
+        attributes {
+          language
+          code
+        }
+      }
+    }
+  }
+`;
diff --git a/src/queries/short-texts.ts b/src/queries/short-texts.ts
@@ -1,3 +1,4 @@
+import { gql } from '@apollo/client';
 import { groq } from 'next-sanity';
 
 export const shortTextQuery = groq`
@@ -8,3 +9,27 @@ export const shortTextQuery = groq`
   content,
   "iconUrl": icon.asset->url
 }`;
+
+export const softwareDevIntroQuery = gql`
+  query {
+    softwareDevelopmentIntro {
+      data {
+        id
+        attributes {
+          title
+          content
+          icon {
+            data {
+              id
+              attributes {
+                name
+                url
+                alternativeText
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/src/types/ShortText.ts b/src/types/ShortText.ts
@@ -0,0 +1,7 @@
+import { Icon } from '@/types/Icon';
+
+export interface SoftwareDevIntro {
+  title: string;
+  content: string;
+  icon: Icon;
+}