Merge pull request #1 from m-dimmitt-pr/move-logic-to-hooks

add useCrudExperience hook
cvfavano · Sep 11, 2024 · 2abeb28 · 2abeb28
2 parents f868fe3 + 6dcf09b
commit 2abeb28
Showing 1 changed file with 60 additions and 60 deletions.
diff --git a/repos/cvapp/src/App.jsx b/repos/cvapp/src/App.jsx
@@ -9,48 +9,38 @@ import EducationForm from './components/EducationForm.jsx'
 import EducationDetails from './components/EducationDetails.jsx' 
 import Data from './Data.jsx'
 
-function App() {
-
-  //TODO, toggle edit mode
-  //const [showButtons, setButtons] = useState(true);
 
-
-  const [personalInfo, setPersonalInfo] = useState(Data.personalInfo)
+function useCrudExperience () {
   const [experience, setExperience] = useState([Data.experience])
   const [workForm, setWorkForm] = useState(Data.experience)
-  const [education, setEducation] = useState([Data.education])
-  const [educationForm, setEducationForm] = useState(Data.education)
-
-  const updatePersonalInfo = (event) => {
-
-    const {name, value} = event.target;
-
-    setPersonalInfo(previousState => ({
-      ...previousState,
-      [name]: value
-    }))
-  }
-
-  const deleteExperience = (id) => {
-
-    let filteredExperience = experience.filter((job => job.id !== id ));
-
-    setExperience(filteredExperience)  
-    setWorkForm(filteredExperience.at(-1))
-  }
-
-  if(experience.length === 0 ){
-    const newExperience = {
-      id: uuid(),
-      company:'Add Company',
+  const createWorkExperience = () => {
+
+    const newId = uuid()
+    const newWorkHistory=  {
+      id: newId,
+      company:'New Company',
       startDate: '',
       endDate: '',
       title: 'Add Title',
-      details: 'Add Description'
+      details:'Add Details'
     }
+
+    setExperience(previousState => ([
+      ...previousState,
+      newWorkHistory
+    ]))
+    setWorkForm(newWorkHistory)
+
+  }
+
+  const readExperience = (id) => {
 
-    setExperience([newExperience])  
-    setWorkForm(newExperience)
+    let jobToUpdate = experience.filter(job => {
+      if(job.id === id) 
+        return job
+
+    })
+    setWorkForm(jobToUpdate[0])
   }
 
   const updateWorkExperience = (event, id) => {
@@ -73,39 +63,49 @@ function App() {
       )         
     }
 
-
-
-
-  const createWorkExperience = () => {
-
-    const newId = uuid()
-    const newWorkHistory=  {
-      id: newId,
-      company:'New Company',
+  const deleteExperience = (id) => {
+
+    let filteredExperience = experience.filter((job => job.id !== id ));
+
+    setExperience(filteredExperience)  
+    setWorkForm(filteredExperience.at(-1))
+  }
+
+  if(experience.length === 0 ){
+    const newExperience = {
+      id: uuid(),
+      company:'Add Company',
       startDate: '',
       endDate: '',
       title: 'Add Title',
-      details:'Add Details'
+      details: 'Add Description'
     }
-
-    setExperience(previousState => ([
-      ...previousState,
-      newWorkHistory
-    ]))
-    setWorkForm(newWorkHistory)
-
-  }
-
-  const readExperience = (id) => {
 
-    let jobToUpdate = experience.filter(job => {
-      if(job.id === id) 
-        return job
-
-    })
-    setWorkForm(jobToUpdate[0])
+    setExperience([newExperience])  
+    setWorkForm(newExperience)
   }
+  return { experience, workForm, createWorkExperience, readExperience, updateWorkExperience, deleteExperience }
+}
+
 
+function App() {
+  const { experience, workForm, createWorkExperience, readExperience, updateWorkExperience, deleteExperience} =  useCrudExperience()
+  //TODO, toggle edit mode
+  //const [showButtons, setButtons] = useState(true);
+  const [personalInfo, setPersonalInfo] = useState(Data.personalInfo)
+  const [education, setEducation] = useState([Data.education])
+  const [educationForm, setEducationForm] = useState(Data.education)
+
+  const updatePersonalInfo = (event) => {
+
+    const {name, value} = event.target;
+
+    setPersonalInfo(previousState => ({
+      ...previousState,
+      [name]: value
+    }))
+  }
+
 const createEducation = () => {
   const newId = uuid();
   const newEducation =  {