Create layout, rework section components

caglarturali · Oct 17, 2024 · 96a154a · 96a154a
1 parent 6e21f52
commit 96a154a
Show file tree

Hide file tree

Showing 20 changed files with 285 additions and 194 deletions.
diff --git a/src/components/AwardsSection.tsx b/src/components/AwardsSection.tsx
@@ -1,16 +1,17 @@
-import { useContext } from 'react';
 import { faAward } from '@fortawesome/free-solid-svg-icons';
-import { ResumeContext } from 'contexts/ResumeContext';
 import { formatDate } from 'utils/date';
 import PrimarySectionWidget from 'widgets/PrimarySectionWidget';
 import type { PrimarySectionWidgetProps } from 'widgets/PrimarySectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeAward } from 'types/Resume';
 
-export default function AwardsSection() {
-  const { awards = [] } = useContext(ResumeContext);
-
-  const data: PrimarySectionWidgetProps = {
-    title: 'Awards',
-    items: awards.map(({ title, awarder, date, summary }) => {
+export default function AwardsSection({
+  title,
+  data = [],
+}: SectionProps<ResumeAward[]>) {
+  const props: PrimarySectionWidgetProps = {
+    title,
+    items: data.map(({ title, awarder, date, summary }) => {
       return {
         title,
         subtitles: [awarder],
@@ -21,5 +22,5 @@ export default function AwardsSection() {
     }),
   };
 
-  return <PrimarySectionWidget {...data} />;
+  return <PrimarySectionWidget {...props} />;
 }
diff --git a/src/components/BasicsSection.tsx b/src/components/BasicsSection.tsx
@@ -1,5 +1,3 @@
-import { useContext } from 'react';
-import { ResumeContext } from 'contexts/ResumeContext';
 import {
   faArrowPointer,
   faEnvelope,
@@ -9,16 +7,22 @@ import {
 import IconLinkWidget from 'widgets/IconLinkWidget';
 import type { IconLinkWidgetProps } from 'widgets/IconLinkWidget';
 import AudioPlayerWidget from 'widgets/AudioPlayerWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeBasics } from 'types/Resume';
+import { joinItems } from 'utils/text';
 
-export default function BasicsSection() {
+export default function BasicsSection({
+  data,
+}: SectionProps<{
+  basics: ResumeBasics;
+  isExternal: boolean;
+}>) {
   const {
     basics: { name, label, image, phone, email, url, location },
     isExternal,
-  } = useContext(ResumeContext);
+  } = data;
 
-  const locationStr = [location.city, location.countryCode]
-    .filter((loc) => !!loc)
-    .join(', ');
+  const locationStr = joinItems(', ', location.city, location.countryCode);
   const locationUrl = `https://maps.google.com/?q=${encodeURIComponent(locationStr)}`;
 
   const contactItems: IconLinkWidgetProps[] = [

diff --git a/src/components/CertificatesSection.tsx b/src/components/CertificatesSection.tsx
@@ -1,16 +1,17 @@
 import { faCertificate } from '@fortawesome/free-solid-svg-icons';
-import { useContext } from 'react';
-import { ResumeContext } from 'contexts/ResumeContext';
 import { formatDate } from 'utils/date';
 import PrimarySectionWidget from 'widgets/PrimarySectionWidget';
 import type { PrimarySectionWidgetProps } from 'widgets/PrimarySectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeCertificate } from 'types/Resume';
 
-export default function CertificatesSection() {
-  const { certificates = [] } = useContext(ResumeContext);
-
-  const data: PrimarySectionWidgetProps = {
-    title: 'Certificates',
-    items: certificates.map(({ name, url, issuer, date }) => {
+export default function CertificatesSection({
+  title,
+  data = [],
+}: SectionProps<ResumeCertificate[]>) {
+  const props: PrimarySectionWidgetProps = {
+    title,
+    items: data.map(({ name, url, issuer, date }) => {
       return {
         title: { text: name, href: url },
         subtitles: [issuer],
@@ -20,5 +21,5 @@ export default function CertificatesSection() {
     }),
   };
 
-  return <PrimarySectionWidget {...data} />;
+  return <PrimarySectionWidget {...props} />;
 }
diff --git a/src/components/EducationSection.tsx b/src/components/EducationSection.tsx
@@ -1,38 +1,36 @@
-import { useContext } from 'react';
 import { faUserGraduate } from '@fortawesome/free-solid-svg-icons';
-import { ResumeContext } from 'contexts/ResumeContext';
 import { formatDateRange } from 'utils/date';
 import PrimarySectionWidget from 'widgets/PrimarySectionWidget';
 import type { PrimarySectionWidgetProps } from 'widgets/PrimarySectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeEducation } from 'types/Resume';
+import { joinItems } from 'utils/text';
 
-export default function EducationSection() {
-  const { education = [] } = useContext(ResumeContext);
-
-  function formatStudyMeta(studyType: string, score: string) {
-    const parts = [studyType, score];
-    return parts.filter((p) => !!p).join(' / ');
-  }
-
-  const data: PrimarySectionWidgetProps = {
-    title: 'Education',
-    items: education.map(
+export default function EducationSection({
+  title,
+  subtitle,
+  data = [],
+}: SectionProps<ResumeEducation[]>) {
+  const props: PrimarySectionWidgetProps = {
+    title,
+    items: data.map(
       ({ area, studyType, institution, url, courses, score, ...dates }) => {
         return {
           title: area,
           subtitles: [
-            formatStudyMeta(studyType, score),
+            joinItems(' / ', studyType, score),
             { text: institution, href: url },
           ],
           textRight: formatDateRange(dates.startDate, dates.endDate),
           icon: faUserGraduate,
           sublist: {
-            title: 'Notable Courses',
+            title: subtitle,
             items: courses,
           },
         };
       },
     ),
   };
 
-  return <PrimarySectionWidget {...data} />;
+  return <PrimarySectionWidget {...props} />;
 }
diff --git a/src/components/InterestsSection.tsx b/src/components/InterestsSection.tsx
@@ -1,14 +1,15 @@
-import { useContext } from 'react';
-import { ResumeContext } from 'contexts/ResumeContext';
-import type { SideSectionWidgetProps } from 'widgets/SideSectionWidget';
 import SideSectionWidget from 'widgets/SideSectionWidget';
+import type { SideSectionWidgetProps } from 'widgets/SideSectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeInterest } from 'types/Resume';
 
-export default function InterestsSection() {
-  const { interests = [] } = useContext(ResumeContext);
-
-  const data: SideSectionWidgetProps = {
-    title: 'Interests',
-    items: interests.map(({ name, keywords }) => {
+export default function InterestsSection({
+  title,
+  data = [],
+}: SectionProps<ResumeInterest[]>) {
+  const props: SideSectionWidgetProps = {
+    title,
+    items: data.map(({ name, keywords }) => {
       return {
         title: name,
         keywords: {
@@ -19,5 +20,5 @@ export default function InterestsSection() {
     }),
   };
 
-  return <SideSectionWidget {...data} />;
+  return <SideSectionWidget {...props} />;
 }
diff --git a/src/components/LanguagesSection.tsx b/src/components/LanguagesSection.tsx
@@ -1,20 +1,21 @@
-import { useContext } from 'react';
-import { ResumeContext } from 'contexts/ResumeContext';
-import type { SideSectionWidgetProps } from 'widgets/SideSectionWidget';
 import SideSectionWidget from 'widgets/SideSectionWidget';
+import type { SideSectionWidgetProps } from 'widgets/SideSectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeLanguage } from 'types/Resume';
 
-export default function LanguagesSection() {
-  const { languages = [] } = useContext(ResumeContext);
-
-  const data: SideSectionWidgetProps = {
-    title: 'Languages',
-    items: languages.map(({ language, fluency }) => {
+export default function LanguagesSection({
+  title,
+  data = [],
+}: SectionProps<ResumeLanguage[]>) {
+  const props: SideSectionWidgetProps = {
+    title,
+    items: data.map(({ language, fluency }) => {
       return {
         title: language,
         subtitle: fluency,
       };
     }),
   };
 
-  return <SideSectionWidget {...data} />;
+  return <SideSectionWidget {...props} />;
 }
diff --git a/src/components/ProfilesSection.tsx b/src/components/ProfilesSection.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
-import { ResumeContext } from 'contexts/ResumeContext';
 import IconLinkWidget from 'widgets/IconLinkWidget';
 import { getBrandIcon } from 'utils/icons';
+import type { SectionProps } from 'types/Props';
+import type { ResumeBasics } from 'types/Resume';
 
-export default function ProfilesSection() {
-  const {
-    basics: { profiles },
-  } = useContext(ResumeContext);
+export default function ProfilesSection({ data }: SectionProps<ResumeBasics>) {
+  const { profiles = [] } = data;
 
   return (
     <section>

diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
@@ -1,16 +1,18 @@
-import { useContext } from 'react';
 import { faTools } from '@fortawesome/free-solid-svg-icons';
-import { ResumeContext } from 'contexts/ResumeContext';
 import { formatDateRange } from 'utils/date';
 import PrimarySectionWidget from 'widgets/PrimarySectionWidget';
 import type { PrimarySectionWidgetProps } from 'widgets/PrimarySectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeProject } from 'types/Resume';
 
-export default function ProjectsSection() {
-  const { projects = [] } = useContext(ResumeContext);
-
-  const data: PrimarySectionWidgetProps = {
-    title: 'Projects',
-    items: projects.map(
+export default function ProjectsSection({
+  title,
+  subtitle,
+  data = [],
+}: SectionProps<ResumeProject[]>) {
+  const props: PrimarySectionWidgetProps = {
+    title,
+    items: data.map(
       ({
         name,
         description,
@@ -28,7 +30,7 @@ export default function ProjectsSection() {
           icon: faTools,
           content: description,
           sublist: {
-            title: 'Highlights',
+            title: subtitle,
             items: highlights,
           },
           keywords: {
@@ -40,5 +42,5 @@ export default function ProjectsSection() {
     ),
   };
 
-  return <PrimarySectionWidget {...data} />;
+  return <PrimarySectionWidget {...props} />;
 }
diff --git a/src/components/PublicationsSection.tsx b/src/components/PublicationsSection.tsx
@@ -1,27 +1,26 @@
-import { useContext } from 'react';
 import { faFileLines } from '@fortawesome/free-solid-svg-icons';
-import { ResumeContext } from 'contexts/ResumeContext';
 import { formatDate } from 'utils/date';
 import PrimarySectionWidget from 'widgets/PrimarySectionWidget';
 import type { PrimarySectionWidgetProps } from 'widgets/PrimarySectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumePublication } from 'types/Resume';
 
-export default function PublicationsSection() {
-  const { publications = [] } = useContext(ResumeContext);
-
-  const data: PrimarySectionWidgetProps = {
-    title: 'Publications',
-    items: publications.map(
-      ({ name, publisher, url, summary, releaseDate }) => {
-        return {
-          title: { text: name, href: url },
-          subtitles: [publisher],
-          textRight: formatDate(releaseDate),
-          icon: faFileLines,
-          content: summary,
-        };
-      },
-    ),
+export default function PublicationsSection({
+  title,
+  data = [],
+}: SectionProps<ResumePublication[]>) {
+  const props: PrimarySectionWidgetProps = {
+    title,
+    items: data.map(({ name, publisher, url, summary, releaseDate }) => {
+      return {
+        title: { text: name, href: url },
+        subtitles: [publisher],
+        textRight: formatDate(releaseDate),
+        icon: faFileLines,
+        content: summary,
+      };
+    }),
   };
 
-  return <PrimarySectionWidget {...data} />;
+  return <PrimarySectionWidget {...props} />;
 }
diff --git a/src/components/ReferencesSection.tsx b/src/components/ReferencesSection.tsx
@@ -1,15 +1,16 @@
 import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons';
-import { useContext } from 'react';
-import { ResumeContext } from 'contexts/ResumeContext';
-import type { PrimarySectionWidgetProps } from 'widgets/PrimarySectionWidget';
 import PrimarySectionWidget from 'widgets/PrimarySectionWidget';
+import type { PrimarySectionWidgetProps } from 'widgets/PrimarySectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeReference } from 'types/Resume';
 
-export default function ReferencesSection() {
-  const { references = [] } = useContext(ResumeContext);
-
-  const data: PrimarySectionWidgetProps = {
-    title: 'References',
-    items: references.map(({ name, reference }) => {
+export default function ReferencesSection({
+  title,
+  data = [],
+}: SectionProps<ResumeReference[]>) {
+  const props: PrimarySectionWidgetProps = {
+    title,
+    items: data.map(({ name, reference }) => {
       return {
         title: name,
         icon: faQuoteLeft,
@@ -18,5 +19,5 @@ export default function ReferencesSection() {
     }),
   };
 
-  return <PrimarySectionWidget {...data} />;
+  return <PrimarySectionWidget {...props} />;
 }
diff --git a/src/components/SkillsSection.tsx b/src/components/SkillsSection.tsx
@@ -1,14 +1,15 @@
-import { useContext } from 'react';
-import { ResumeContext } from 'contexts/ResumeContext';
-import type { SideSectionWidgetProps } from 'widgets/SideSectionWidget';
 import SideSectionWidget from 'widgets/SideSectionWidget';
+import type { SideSectionWidgetProps } from 'widgets/SideSectionWidget';
+import type { SectionProps } from 'types/Props';
+import type { ResumeSkill } from 'types/Resume';
 
-export default function SkillsSection() {
-  const { skills = [] } = useContext(ResumeContext);
-
-  const data: SideSectionWidgetProps = {
-    title: 'Skills',
-    items: skills.map(({ name, level, keywords }) => {
+export default function SkillsSection({
+  title,
+  data = [],
+}: SectionProps<ResumeSkill[]>) {
+  const props: SideSectionWidgetProps = {
+    title,
+    items: data.map(({ name, level, keywords }) => {
       return {
         title: name,
         subtitle: level,
@@ -20,5 +21,5 @@ export default function SkillsSection() {
     }),
   };
 
-  return <SideSectionWidget {...data} />;
+  return <SideSectionWidget {...props} />;
 }