feat: add School component

martapanc · Jul 22, 2023 · c576c14 · c576c14
1 parent 9d5e2ae
commit c576c14
Show file tree

Hide file tree

Showing 11 changed files with 221 additions and 73 deletions.
diff --git a/sanity/schema.ts b/sanity/schema.ts
@@ -1,10 +1,11 @@
 import { type SchemaTypeDefinition } from 'sanity';
 
 import job from '../src/schemas/job';
+import school from '../src/schemas/school';
 import shortText from '../src/schemas/shortText';
 import skill from '../src/schemas/skill';
 import skillIcon from '../src/schemas/skillIcon';
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [job, shortText, skill, skillIcon],
+  types: [job, school, shortText, skill, skillIcon],
 };
diff --git a/src/app/(public)/about/page.tsx b/src/app/(public)/about/page.tsx
@@ -2,15 +2,18 @@ import { PortableText } from '@portabletext/react';
 import Image from 'next/image';
 import * as React from 'react';
 
+import Education from '@/components/organisms/Education/Education';
 import WorkExperience from '@/components/organisms/WorkExperience/WorkExperience';
 
 import { jobsQuery } from '@/queries/jobs';
+import { schoolsQuery } from '@/queries/schools';
 import { shortTextQuery } from '@/queries/short-texts';
 import { skillQuery } from '@/queries/skills';
 
 import { sanityClient } from '../../../../sanity/lib/client';
 
 import { Job } from '@/types/Job';
+import { School } from '@/types/School';
 import { ShortText } from '@/types/ShortText';
 import { Skill } from '@/types/Skill';
 import { SkillIcon } from '@/types/SkillIcon';
@@ -23,19 +26,22 @@ export const metadata = {
 const getData = async () => {
   const jobs: Job[] = await sanityClient.fetch(jobsQuery);
 
+  const schools: School[] = await sanityClient.fetch(schoolsQuery);
+
   const skills: Skill[] = await sanityClient.fetch(skillQuery);
 
   const shortTexts: ShortText[] = await sanityClient.fetch(shortTextQuery);
 
   return {
     jobs,
+    schools,
     shortTexts,
     skills,
   };
 };
 
 const AboutPage = async () => {
-  const { jobs, shortTexts, skills } = await getData();
+  const { jobs, schools, shortTexts, skills } = await getData();
 
   const softwareDevelopment: ShortText | undefined = shortTexts.find(
     (item) => item.name === 'software-development'
@@ -107,6 +113,8 @@ const AboutPage = async () => {
           </div>
 
           <WorkExperience jobs={jobs} />
+
+          <Education schools={schools} />
         </div>
       </section>
     </main>

diff --git a/src/components/organisms/Education/Education.tsx b/src/components/organisms/Education/Education.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-// import { PortableText } from '@portabletext/react';
-// import Image from 'next/image';
+import { PortableText } from '@portabletext/react';
+import Image from 'next/image';
 // import {useTheme} from "next-themes";
 import * as React from 'react';
 
-import { Job } from '@/types/Job';
+import { School } from '@/types/School';
 
 export interface EducationProps {
-  schools: Job[];
+  schools: School[];
 }
 
 const Education = ({ schools }: EducationProps) => {
@@ -20,60 +20,67 @@ const Education = ({ schools }: EducationProps) => {
         <h2>Education</h2>
       </div>
 
-      {schools[0].isCurrentJob}
+      <div>
+        {schools.map((school) => (
+          <div
+            key={school._id}
+            className='mb-4 rounded-md p-4 shadow-md dark:bg-slate-900'
+          >
+            {/* Start School Header */}
+            <div className='flex border-b-2 border-slate-200 pb-2'>
+              <Image
+                className='me-3 rounded-sm'
+                src={school.schoolIcon}
+                alt={school.schoolName}
+                width={60}
+                height={60}
+              />
 
-      {/*<div>*/}
-      {/*  {jobs.map((job) => (*/}
-      {/*    <div key={job._id} className='rounded-md p-4 mb-4 shadow-md dark:bg-slate-900'>*/}
-      {/*      /!* Start Job Header *!/*/}
-      {/*      <div className='flex border-b-2 border-slate-200 pb-2'>*/}
-      {/*        <Image*/}
-      {/*          className='me-3 rounded-sm'*/}
-      {/*          src={job.iconUrl}*/}
-      {/*          alt={job.company}*/}
-      {/*          width={60}*/}
-      {/*          height={60}*/}
-      {/*        />*/}
+              <div className='flex w-full justify-between'>
+                <div className='flex flex-col'>
+                  <div className='flex flex-row'>
+                    <h4 className='me-4'>
+                      <a href={school.degreeUrl}>{school.schoolName}</a>
+                    </h4>
 
-      {/*        <div className='flex w-full justify-between'>*/}
-      {/*          <div className='flex flex-col'>*/}
-      {/*            <h4>*/}
-      {/*              {job.company} ~ {job.location}*/}
-      {/*            </h4>*/}
-      {/*            <h5 className='font-medium'>{job.jobTitle}</h5>*/}
-      {/*          </div>*/}
+                    <Image
+                      src={school.flagUrl}
+                      alt={school.schoolName}
+                      width={28}
+                      height={28}
+                    />
+                  </div>
 
-      {/*          <div className='flex flex-col justify-center'>*/}
-      {/*            <h4>*/}
-      {/*              {job.startYear} – {job.isCurrentJob ? ` present` : job.endYear}*/}
-      {/*            </h4>*/}
-      {/*          </div>*/}
-      {/*        </div>*/}
-      {/*      </div>*/}
-      {/*      /!* End Job Header *!/*/}
+                  <h5 className='font-medium'>{school.degreeName}</h5>
+                </div>
 
-      {/*      /!* Start Job Content *!/*/}
-      {/*      <div className='job-content pt-4'>*/}
-      {/*        <div className='skill-description pb-2 text-justify font-light'>*/}
-      {/*          <PortableText value={job.description} />*/}
-      {/*        </div>*/}
+                <div className='flex'>
+                  <div className='me-20 flex flex-col justify-center'>
+                    <span className='text-lg font-semibold'>
+                      {school.grade}
+                    </span>
+                  </div>
 
-      {/*        <div className='mb-2 flex justify-end'>*/}
-      {/*          {job.technologies.map((tech) => (*/}
-      {/*            <div*/}
-      {/*              key={tech}*/}
-      {/*              style={{backgroundColor: theme === 'dark' ? job.darkColor : job.mainColor}}*/}
-      {/*              className='ms-2 rounded-md px-2 py-0.5 text-white dark:text-black'*/}
-      {/*            >*/}
-      {/*              {tech}*/}
-      {/*            </div>*/}
-      {/*          ))}*/}
-      {/*        </div>*/}
-      {/*      </div>*/}
-      {/*      /!* End Job Content *!/*/}
-      {/*    </div>*/}
-      {/*  ))}*/}
-      {/*</div>*/}
+                  <div className='flex flex-col justify-center'>
+                    <span className='text-lg font-semibold'>
+                      {school.startYear}&nbsp; — &nbsp;{school.endYear}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End School Header */}
+
+            {/* Start School Content */}
+            <div className='job-content pt-4'>
+              <div className='skill-description pb-2 text-justify font-light'>
+                <PortableText value={school.description} />
+              </div>
+            </div>
+            {/* End School Content */}
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

diff --git a/src/components/organisms/WorkExperience/WorkExperience.tsx b/src/components/organisms/WorkExperience/WorkExperience.tsx
@@ -39,16 +39,19 @@ const WorkExperience = ({ jobs }: WorkExperienceProps) => {
               <div className='flex w-full justify-between'>
                 <div className='flex flex-col'>
                   <h4>
-                    {job.company} ~ {job.location}
+                    {job.company} {job.location && `~`} {job.location}
                   </h4>
                   <h5 className='font-medium'>{job.jobTitle}</h5>
                 </div>
 
                 <div className='flex flex-col justify-center'>
-                  <h4>
-                    {job.startYear} –{' '}
-                    {job.isCurrentJob ? ` present` : job.endYear}
-                  </h4>
+                  <span className='text-lg font-semibold'>
+                    <>
+                      {format(job.startDate)}
+                      &nbsp; — &nbsp;
+                      {job.isCurrentJob ? `present` : format(job.endDate)}
+                    </>
+                  </span>
                 </div>
               </div>
             </div>
@@ -83,4 +86,12 @@ const WorkExperience = ({ jobs }: WorkExperienceProps) => {
   );
 };
 
+function format(inputDate: string): string {
+  const date = new Date(inputDate);
+  return Intl.DateTimeFormat('en', {
+    year: 'numeric',
+    month: 'short',
+  }).format(date);
+}
+
 export default WorkExperience;
diff --git a/src/pages/api/schools.ts b/src/pages/api/schools.ts
@@ -0,0 +1,15 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { schoolsQuery } from '@/queries/schools';
+
+import { sanityClient } from '../../../sanity/lib/client';
+
+import { School } from '@/types/School';
+
+const schoolsApi = async (req: NextApiRequest, res: NextApiResponse) => {
+  const schools: School[] = await sanityClient.fetch(schoolsQuery);
+
+  res.status(200).json(schools);
+};
+
+export default schoolsApi;
diff --git a/src/queries/jobs.ts b/src/queries/jobs.ts
@@ -1,14 +1,14 @@
 import { groq } from 'next-sanity';
 
 export const jobsQuery = groq`
-*[_type == "job"] | order(endYear desc) {
+*[_type == "job"] | order(endDate desc) {
   _id,
   company,
   "iconUrl": icon.asset->url,
   location,
   jobTitle,
-  startYear,
-  endYear,
+  startDate,
+  endDate,
   isCurrentJob,
   description,
   technologies,

diff --git a/src/queries/schools.ts b/src/queries/schools.ts
@@ -0,0 +1,16 @@
+import { groq } from 'next-sanity';
+
+export const schoolsQuery = groq`
+*[_type == "school"] | order(endYear desc) {
+  _id,
+  name,
+  schoolName,
+  "schoolIcon": schoolIcon.asset->url,
+  "flagUrl": countryFlag.asset->url,
+  degreeName,
+  degreeUrl,
+  grade,
+  startYear,
+  endYear,
+  description,
+}`;
diff --git a/src/schemas/job.ts b/src/schemas/job.ts
@@ -31,16 +31,22 @@ export default defineType({
       type: 'string',
     }),
     defineField({
-      name: 'startYear',
-      title: 'Start Year',
-      type: 'number',
-      initialValue: new Date().getFullYear() - 3,
+      name: 'startDate',
+      title: 'Start Date',
+      type: 'date',
+      options: {
+        dateFormat: 'MMM YYYY',
+      },
+      initialValue: 'Mar 2020',
     }),
     defineField({
-      name: 'endYear',
+      name: 'endDate',
       title: 'End Year',
-      type: 'number',
-      initialValue: new Date().getFullYear() - 1,
+      type: 'date',
+      options: {
+        dateFormat: 'MMM YYYY',
+      },
+      initialValue: 'Mar 2022',
     }),
     defineField({
       name: 'isCurrentJob',
@@ -81,7 +87,7 @@ export default defineType({
     {
       title: 'Most Recent',
       name: 'jobDateDesc',
-      by: [{ field: 'endYear', direction: 'desc' }],
+      by: [{ field: 'startDate', direction: 'desc' }],
     },
   ],
 });
diff --git a/src/schemas/school.ts b/src/schemas/school.ts
@@ -0,0 +1,69 @@
+import { defineField, defineType } from 'sanity';
+
+export default defineType({
+  name: 'school',
+  title: 'School',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'name',
+      title: 'Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'schoolName',
+      title: 'School Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'schoolIcon',
+      title: 'School Icon',
+      type: 'image',
+    }),
+    defineField({
+      name: 'countryFlag',
+      title: 'Country Flag',
+      type: 'image',
+    }),
+    defineField({
+      name: 'degreeName',
+      title: 'Degree Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'degreeUrl',
+      title: 'Degree Url',
+      type: 'string',
+    }),
+    defineField({
+      name: 'grade',
+      title: 'Grade',
+      type: 'string',
+    }),
+    defineField({
+      name: 'startYear',
+      title: 'Start Year',
+      type: 'number',
+      initialValue: new Date().getFullYear() - 5,
+    }),
+    defineField({
+      name: 'endYear',
+      title: 'End Year',
+      type: 'number',
+      initialValue: new Date().getFullYear() - 3,
+    }),
+    defineField({
+      name: 'description',
+      title: 'Description',
+      type: 'array',
+      of: [{ type: 'block' }],
+    }),
+  ],
+  orderings: [
+    {
+      title: 'Most Recent',
+      name: 'schoolDateDesc',
+      by: [{ field: 'endYear', direction: 'desc' }],
+    },
+  ],
+});