feat: move type School

src/app/(public)/about/work/page.tsx

@@ -12,12 +12,11 @@ import WorkExperience from '@/components/organisms/about-work/WorkExperience';
 import { jobsQueryQL } from '@/queries/jobs';
 import { languagesQueryQL } from '@/queries/languages';
 import { publicationQuery } from '@/queries/publications';
-import { schoolsQuery } from '@/queries/schools';
+import { schoolsQuery, schoolsQueryQL } from '@/queries/schools';
 import { shortTextQuery } from '@/queries/short-texts';
 import { skillQuery } from '@/queries/skills';
 import { Icon } from '@/sanityTypes/Icon';
 import { Publication } from '@/sanityTypes/Publication';
-import { School } from '@/sanityTypes/School';
 import { ShortText } from '@/sanityTypes/ShortText';
 import { Skill } from '@/sanityTypes/Skill';
 
@@ -26,6 +25,7 @@ import { sanityClient } from '../../../../../sanity/lib/client';
 
 import { Job } from '@/types/Job';
 import { Language } from '@/types/Language';
+import { School } from '@/types/School';
 
 export const metadata = {
   title: 'About my Work | MartaCodes.it',
@@ -59,6 +59,14 @@ async function queryJobs() {
   return flattenToArray<Job>(data.jobs);
 }
 
+async function querySchools() {
+  const { data } = await apolloClient.query({
+    query: schoolsQueryQL,
+  });
+
+  return flattenToArray<School>(data.schools);
+}
+
 async function queryLanguages() {
   const { data } = await apolloClient.query({
     query: languagesQueryQL,
@@ -70,17 +78,19 @@ async function queryLanguages() {
 const queryData = async () => {
   const jobs = await queryJobs();
   const languages = await queryLanguages();
+  const schools = await querySchools();
 
   return {
     jobs,
     languages,
+    schools,
   };
 };
 
 const AboutPage = async () => {
-  const { publications, schools, shortTexts, skills } = await getData();
+  const { publications, shortTexts, skills } = await getData();
 
-  const { jobs, languages } = await queryData();
+  const { jobs, languages, schools } = await queryData();
 
   const softwareDevelopment: ShortText | undefined = shortTexts.find(
     (item) => item.name === 'software-development'

src/components/organisms/about-work/Education.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { PortableText } from '@portabletext/react';
 import Image from 'next/image';
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 
-import { School } from '@/sanityTypes/School';
+import { School } from '@/types/School';
 
 export interface EducationProps {
   schools: School[];
@@ -20,14 +20,14 @@ const Education = ({ schools }: EducationProps) => {
       <div>
         {schools.map((school) => (
           <div
-            key={school._id}
+            key={school.id}
             className='mb-4 rounded-md p-4 shadow-md dark:bg-slate-900'
           >
             {/* Start School Header - Desktop */}
             <div className='hidden border-b-2 border-slate-200 pb-2 md:flex'>
               <Image
                 className='me-3 rounded-sm'
-                src={school.schoolIcon}
+                src={school.icon.url}
                 alt={school.schoolName}
                 width={60}
                 height={60}
@@ -41,7 +41,7 @@ const Education = ({ schools }: EducationProps) => {
                     </h4>
 
                     <Image
-                      src={school.flagUrl}
+                      src={school.flag.url}
                       alt={school.schoolName}
                       width={28}
                       height={28}
@@ -60,7 +60,7 @@ const Education = ({ schools }: EducationProps) => {
 
                   <div className='flex flex-col justify-center'>
                     <span className='text-lg font-semibold'>
-                      {school.startYear}&nbsp; — &nbsp;{school.endYear}
+                      {format(school.start)}&nbsp; — &nbsp;{format(school.end)}
                     </span>
                   </div>
                 </div>
@@ -73,7 +73,7 @@ const Education = ({ schools }: EducationProps) => {
               <div className='flex'>
                 <Image
                   className='me-3 rounded-sm'
-                  src={school.schoolIcon}
+                  src={school.icon.url}
                   alt={school.schoolName}
                   width={60}
                   height={60}
@@ -87,7 +87,7 @@ const Education = ({ schools }: EducationProps) => {
                       </h4>
 
                       <Image
-                        src={school.flagUrl}
+                        src={school.flag.url}
                         alt={school.schoolName}
                         width={20}
                         height={20}
@@ -103,7 +103,7 @@ const Education = ({ schools }: EducationProps) => {
                 <span className='me-8 text-sm font-normal'>{school.grade}</span>
 
                 <span className='text-sm font-normal'>
-                  {school.startYear}&nbsp; — &nbsp;{school.endYear}
+                  {format(school.start)}&nbsp; — &nbsp;{format(school.end)}
                 </span>
               </div>
             </div>
@@ -112,7 +112,7 @@ const Education = ({ schools }: EducationProps) => {
             {/* Start School Content */}
             <div className='job-content pt-4'>
               <div className='sm-skill-description md:skill-description pb-2 text-justify font-light'>
-                <PortableText value={school.description} />
+                <ReactMarkdown>{school.description}</ReactMarkdown>
               </div>
             </div>
             {/* End School Content */}
@@ -123,4 +123,9 @@ const Education = ({ schools }: EducationProps) => {
   );
 };
 
+function format(inputDate: string): string {
+  const date = new Date(inputDate);
+  return date.getFullYear();
+}
+
 export default Education;

src/queries/schools.ts

@@ -1,3 +1,4 @@
+import { gql } from '@apollo/client';
 import { groq } from 'next-sanity';
 
 export const schoolsQuery = groq`
@@ -14,3 +15,42 @@ export const schoolsQuery = groq`
   endYear,
   description,
 }`;
+
+export const schoolsQueryQL = gql`
+  query {
+    schools(locale: "en", sort: "start:DESC") {
+      data {
+        id
+        attributes {
+          schoolName
+          degreeName
+          degreeUrl
+          grade
+          start
+          end
+          description
+          flag {
+            data {
+              id
+              attributes {
+                name
+                url
+                alternativeText
+              }
+            }
+          }
+          icon {
+            data {
+              id
+              attributes {
+                name
+                url
+                alternativeText
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

src/types/School.ts

@@ -0,0 +1,15 @@
+import { Icon } from '@/types/Icon';
+
+export interface School {
+  id: string;
+  name: string;
+  schoolName: string;
+  icon: Icon;
+  flag: Icon;
+  degreeName: string;
+  degreeUrl: string;
+  grade: string;
+  start: string;
+  end: string;
+  description: string;
+}