From 0c6b33817ee31371a3495a31cd2f440fe9a149f6 Mon Sep 17 00:00:00 2001
From: Mohamed Daahir <sharaf.13@hotmail.com>
Date: Mon, 1 Jan 2024 20:04:05 +0000
Subject: [PATCH] don't call append with empty object

---
 .../generator/form/sections/AwardsSection.tsx   | 16 +++++++++++++++-
 .../form/sections/EducationSection.tsx          | 17 ++++++++++++++++-
 .../generator/form/sections/SkillsSection.tsx   | 13 ++++++++++++-
 .../generator/form/sections/WorkSection.tsx     | 17 ++++++++++++++++-
 .../generator/form/sections/projectsSection.tsx | 15 ++++++++++++++-
 src/types.ts                                    | 13 +++++++------
 6 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/src/components/generator/form/sections/AwardsSection.tsx b/src/components/generator/form/sections/AwardsSection.tsx
index 0b7c5b01..b5c27be2 100644
--- a/src/components/generator/form/sections/AwardsSection.tsx
+++ b/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>
diff --git a/src/components/generator/form/sections/EducationSection.tsx b/src/components/generator/form/sections/EducationSection.tsx
index e6891141..64f9c473 100644
--- a/src/components/generator/form/sections/EducationSection.tsx
+++ b/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>
diff --git a/src/components/generator/form/sections/SkillsSection.tsx b/src/components/generator/form/sections/SkillsSection.tsx
index db20bec1..08915c0c 100644
--- a/src/components/generator/form/sections/SkillsSection.tsx
+++ b/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>
diff --git a/src/components/generator/form/sections/WorkSection.tsx b/src/components/generator/form/sections/WorkSection.tsx
index 891bd2a1..cb35fcb8 100644
--- a/src/components/generator/form/sections/WorkSection.tsx
+++ b/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>
diff --git a/src/components/generator/form/sections/projectsSection.tsx b/src/components/generator/form/sections/projectsSection.tsx
index d38fd175..ebea5d3c 100644
--- a/src/components/generator/form/sections/projectsSection.tsx
+++ b/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>
diff --git a/src/types.ts b/src/types.ts
index 854e2d46..cbad7c71 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -17,13 +17,14 @@ 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
@@ -31,8 +32,8 @@ export type Work = {
   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 = {