don't call append with empty object

src/components/generator/form/sections/AwardsSection.tsx

@@ -1,13 +1,27 @@
 import { Fragment } from 'react'
 import { useFieldArray } from 'react-hook-form'
+
 import { FormSection } from './FormSection'
 import { LabeledInput } from '../../../core/LabeledInput'
 import { AddButton } from '../../../core/Button'
 import { Divider } from '../../../core/Divider'
 
+import { Award } from '../../../../types'
+
 export function AwardSection() {
   const { fields, append } = useFieldArray({ name: 'awards' })
 
+  const handleAdd = () => {
+    const defaultAward: Award = {
+      title: '',
+      date: '',
+      awarder: '',
+      summary: ''
+    }
+
+    append(defaultAward)
+  }
+
   return (
     <FormSection title="Honors & Awards">
       {fields.length > 0 && (
@@ -45,7 +59,7 @@ export function AwardSection() {
           <Divider />
         </Fragment>
       ))}
-      <AddButton type="button" onClick={() => append({})}>
+      <AddButton type="button" onClick={handleAdd}>
         + Add Award
       </AddButton>
     </FormSection>

src/components/generator/form/sections/EducationSection.tsx

@@ -1,13 +1,28 @@
 import { Fragment } from 'react'
 import { useFieldArray } from 'react-hook-form'
+
 import { FormSection } from './FormSection'
 import { LabeledInput } from '../../../core/LabeledInput'
 import { AddButton } from '../../../core/Button'
 import { Divider } from '../../../core/Divider'
 
+import { Education } from '../../../../types'
+
 export function EducationSection() {
   const { fields, append } = useFieldArray({ name: 'education' })
 
+  const handleAdd = () => {
+    const defaultEducation: Education = {
+      institution: '',
+      studyType: '',
+      area: '',
+      startDate: '',
+      endDate: ''
+    }
+
+    append(defaultEducation)
+  }
+
   return (
     <FormSection title="Your Educational Background">
       {fields.length > 0 && (
@@ -50,7 +65,7 @@ export function EducationSection() {
           <Divider />
         </Fragment>
       ))}
-      <AddButton type="button" onClick={() => append({})}>
+      <AddButton type="button" onClick={handleAdd}>
         + Add School
       </AddButton>
     </FormSection>

src/components/generator/form/sections/SkillsSection.tsx

@@ -7,9 +7,20 @@ import { Divider } from '../../../core/Divider'
 import { FormSection } from './FormSection'
 import Keywords from '../Keywords'
 
+import { Skill } from '../../../../types'
+
 export function SkillsSection() {
   const { fields, append } = useFieldArray({ name: 'skills' })
 
+  const handleAdd = () => {
+    const defaultSkill: Skill = {
+      name: '',
+      keywords: []
+    }
+
+    append(defaultSkill)
+  }
+
   return (
     <FormSection title="Your Skills">
       {fields.length > 0 && (
@@ -37,7 +48,7 @@ export function SkillsSection() {
           <Divider />
         </Fragment>
       ))}
-      <AddButton type="button" onClick={() => append({})}>
+      <AddButton type="button" onClick={handleAdd}>
         + Add Skill
       </AddButton>
     </FormSection>

src/components/generator/form/sections/WorkSection.tsx

@@ -7,9 +7,24 @@ import { Divider } from '../../../core/Divider'
 import { FormSection } from './FormSection'
 import Highlights from '../Highlights'
 
+import { Work } from '../../../../types'
+
 export function WorkSection() {
   const { fields, append } = useFieldArray({ name: 'work' })
 
+  const handleAdd = () => {
+    const defaultWork: Work = {
+      company: '',
+      position: '',
+      summary: '',
+      startDate: '',
+      endDate: '',
+      highlights: []
+    }
+
+    append(defaultWork)
+  }
+
   return (
     <FormSection title="Your Work Experience">
       {fields.length > 0 && (
@@ -57,7 +72,7 @@ export function WorkSection() {
           <Divider />
         </Fragment>
       ))}
-      <AddButton type="button" onClick={() => append({})}>
+      <AddButton type="button" onClick={handleAdd}>
         + Add Work Experience
       </AddButton>
     </FormSection>

src/components/generator/form/sections/projectsSection.tsx

@@ -7,9 +7,22 @@ import { Divider } from '../../../core/Divider'
 import { FormSection } from './FormSection'
 import Keywords from '../Keywords'
 
+import { Project } from '../../../../types'
+
 export function ProjectsSection() {
   const { fields, append } = useFieldArray({ name: 'projects' })
 
+  const handleAdd = () => {
+    const defaultProject: Project = {
+      name: '',
+      description: '',
+      url: '',
+      keywords: []
+    }
+
+    append(defaultProject)
+  }
+
   return (
     <FormSection title="Your Projects">
       {fields.length > 0 && (
@@ -47,7 +60,7 @@ export function ProjectsSection() {
           <Divider />
         </Fragment>
       ))}
-      <AddButton type="button" onClick={() => append({})}>
+      <AddButton type="button" onClick={handleAdd}>
         + Add Project
       </AddButton>
     </FormSection>

src/types.ts

@@ -17,22 +17,23 @@ export type Basics = {
   location?: Location
   profiles?: Profile[] // TODO: revisit how profiles gets rendered
 
-  // non-standard attributes
+  // non-standard attribute
   website?: string
 }
 
 export type Work = {
   name?: string
-  company?: string // non-standard
+  // non-standard attribute
+  company?: string
 
   position?: string
   startDate?: string
   endDate?: string
   summary?: string
   highlights: string[]
 
-  // non-standard attributes
-  location: string
+  // non-standard attribute
+  location?: string
 }
 
 export type Volunteer = {
@@ -52,8 +53,8 @@ export type Education = {
   endDate?: string
   score?: string
 
-  // non-standard attributes
-  location: string
+  // non-standard attribute
+  location?: string
 }
 
 export type Award = {