refactor resume components

src/pages/resume/ResumeItem.jsx

@@ -13,51 +13,20 @@ const markdownOutput = (text) =>
     .use(html)
     .use(breaks)
     .use(remark2react)
-    .processSync(text).contents
+    .processSync(text).result
 
-function normalizeData(workPlace, eduPlace, award) {
+function normalizeData(content) {
-  const title = workPlace
+  const title = content.company || content.title || content.institution
-    ? workPlace.company
+  const subTitle = content.position || content.awarder || content.area
-    : award
+  const text = content.summary || content.studyType
-    ? award.title
+  const startDate = content.date || content.startDate
-    : eduPlace
+  const endDate = content.endDate
-    ? eduPlace.institution
-    : null
-
-  const subTitle = workPlace
-    ? workPlace.position
-    : award
-    ? award.awarder
-    : eduPlace
-    ? eduPlace.area
-    : null
-
-  const text = workPlace
-    ? workPlace.summary
-    : award && award.summary
-    ? award.summary
-    : eduPlace
-    ? eduPlace.studyType
-    : null
-
-  const startDate = award
-    ? award.date
-    : (workPlace && workPlace.startDate) || (eduPlace && eduPlace.startDate)
-
-  const endDate = award
-    ? null
-    : (workPlace && workPlace.endDate) || (eduPlace && eduPlace.endDate)
 
   return { title, subTitle, text, startDate, endDate }
 }
 
-export default function ResumeItem({ workPlace, eduPlace, award }) {
+export default function ResumeItem({ content }) {
-  const { title, subTitle, text, startDate, endDate } = normalizeData(
+  const { title, subTitle, text, startDate, endDate } = normalizeData(content)
-    workPlace,
-    eduPlace,
-    award
-  )
-
   const dateStart = new Date(startDate).getFullYear()
   const dateEnd = endDate && new Date(endDate).getFullYear()
   const isSameYear = dateStart === dateEnd
@@ -75,25 +44,29 @@ export default function ResumeItem({ workPlace, eduPlace, award }) {
   )
 }
 
-ResumeItem.propTypes = {
+export const ResumeItemContentProps = PropTypes.oneOfType([
-  workPlace: PropTypes.shape({
+  PropTypes.shape({
     startDate: PropTypes.string.isRequired,
     endDate: PropTypes.string,
     company: PropTypes.string.isRequired,
     position: PropTypes.string.isRequired,
     summary: PropTypes.string
   }),
-  eduPlace: PropTypes.shape({
+  PropTypes.shape({
     startDate: PropTypes.string.isRequired,
     endDate: PropTypes.string,
     institution: PropTypes.string.isRequired,
     area: PropTypes.string.isRequired,
     studyType: PropTypes.string
   }),
-  award: PropTypes.shape({
+  PropTypes.shape({
     date: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     awarder: PropTypes.string.isRequired,
     summary: PropTypes.string
   })
+])
+
+ResumeItem.propTypes = {
+  content: ResumeItemContentProps
 }

src/pages/resume/ResumeSection.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import shortid from 'shortid'
+import Icon from '../../components/atoms/Icon'
+import ResumeItem, { ResumeItemContentProps } from './ResumeItem'
+import styles from './ResumeSection.module.css'
+
+export default function ResumeSection({ section }) {
+  return (
+    <>
+      <h3 className={styles.subTitle}>
+        <Icon name={section.icon} />
+        {section.name}
+      </h3>
+      <div>
+        {section.content.map((content) => (
+          <ResumeItem key={shortid.generate()} content={content} />
+        ))}
+      </div>
+    </>
+  )
+}
+
+ResumeSection.propTypes = {
+  section: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    content: PropTypes.arrayOf(ResumeItemContentProps).isRequired
+  }).isRequired
+}

src/pages/resume/ResumeSection.module.css

@@ -0,0 +1,12 @@
+.subTitle {
+  font-size: var(--font-size-h3);
+  margin-bottom: 0;
+  margin-top: -(calc(var(--spacer) / 3));
+}
+
+.subTitle svg {
+  width: var(--font-size-large);
+  height: var(--font-size-large);
+  margin-right: calc(var(--spacer) / 4);
+  stroke: var(--brand-grey-light);
+}

src/pages/resume/index.jsx

@@ -1,14 +1,18 @@
 import React from 'react'
 import shortid from 'shortid'
 import SEO from '../../components/atoms/SEO'
-import Icon from '../../components/atoms/Icon'
 import { useResume } from '../../hooks/use-resume'
 import styles from './index.module.css'
 import Header from './Header'
-import ResumeItem from './ResumeItem'
+import ResumeSection from './ResumeSection'
 
 export default function Resume() {
   const { education, work, awards } = useResume()
+  const items = [
+    { content: work, name: 'Work', icon: 'Briefcase' },
+    { content: awards, name: 'Awards', icon: 'Award' },
+    { content: education, name: 'Education', icon: 'BookOpen' }
+  ]
 
   return (
     <>
@@ -17,42 +21,10 @@ export default function Resume() {
       <div className={styles.resume}>
         <Header />
 
-        <div>
+        {items.map((item) => (
-          <h3 className={styles.subTitle}>
+          <ResumeSection key={shortid.generate()} section={item} />
-            <Icon name="Briefcase" />
-            Work
-          </h3>
-        </div>
-        <div>
-          {work.map((workPlace) => (
-            <ResumeItem key={shortid.generate()} workPlace={workPlace} />
         ))}
       </div>
-
-        <div>
-          <h3 className={styles.subTitle}>
-            <Icon name="Award" />
-            Awards
-          </h3>
-        </div>
-        <div>
-          {awards.map((award) => (
-            <ResumeItem key={shortid.generate()} award={award} />
-          ))}
-        </div>
-
-        <div>
-          <h3 className={styles.subTitle}>
-            <Icon name="BookOpen" />
-            Education
-          </h3>
-        </div>
-        <div>
-          {education.map((eduPlace) => (
-            <ResumeItem key={shortid.generate()} eduPlace={eduPlace} />
-          ))}
-        </div>
-      </div>
     </>
   )
 }

src/pages/resume/index.module.css

@@ -14,19 +14,6 @@
   }
 }
 
-.subTitle {
-  font-size: var(--font-size-h3);
-  margin-bottom: 0;
-  margin-top: -(calc(var(--spacer) / 3));
-}
-
-.subTitle svg {
-  width: var(--font-size-large);
-  height: var(--font-size-large);
-  margin-right: calc(var(--spacer) / 4);
-  stroke: var(--brand-grey-light);
-}
-
 @media print {
   :global(html) {
     font-size: 8pt;