feat: updated education info component

cv-project/src/components/educationInfo.jsx

@@ -1,18 +1,30 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export default function EducationInfo() {
-  const [education, setEducation] = useState([]);
+  const [schools, setSchools] = useState([]);
   const [educationItemActive, setEducationItemActive] = useState(false);
+  const [editSchool, setEditSchool] = useState(null);
+
+  const mainDivStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    flexDirection: "row-reverse",
+  };
 
   return (
-    <div>
-      {education.length <= 0 ? (
+    <div className="education-info section" style={mainDivStyle}>
+      {schools.length <= 0 ? (
         <>
           <p>Add your Education info</p>
         </>
       ) : (
-        <EducationDisplay schools={education} setSchools={setEducation} />
+        <EducationDisplay
+          schools={schools}
+          setSchools={setSchools}
+          setEditSchool={setEditSchool}
+        />
       )}
+      <div>
         <button
           onClick={() => {
             setEducationItemActive(!educationItemActive);
@@ -21,12 +33,14 @@ export default function EducationInfo() {
           Add Education Info
         </button>
 
-      <EducationItem
+        <EducationForm
           isActive={educationItemActive}
-        schools={education}
-        setSchools={setEducation}
+          schools={schools}
+          setSchools={setSchools}
+          editSchool={editSchool}
         />
       </div>
+    </div>
   );
 }
 
@@ -40,9 +54,7 @@ function EducationDisplay(props) {
             <p>
               Graduation Date: {item.graduationDate + " "}
               Field of Study: {item.fieldOfStudy}
-              <button onClick={() => EducationItem({ editActive: item })}>
-                edit
-              </button>
+              <button onClick={() => props.setEditSchool(item)}>edit</button>
               <button
                 onClick={() =>
                   deleteEducationItem(
@@ -62,23 +74,38 @@ function EducationDisplay(props) {
   );
 }
 
-function EducationItem({ isActive, schools, setSchools, editActive }) {
+function EducationForm({ isActive, schools, setSchools, editSchool }) {
   const [graduationDate, setGraduationDate] = useState("");
   const [schoolName, setSchoolName] = useState("");
   const [fieldOfStudy, setFieldOfStudy] = useState("");
 
-  if (editActive) {
-    setGraduationDate(editActive.graduationDate);
-    setSchoolName(editActive.schoolName);
-    setFieldOfStudy(editActive.fieldOfStudy);
-    isActive === true;
+  useEffect(() => {
+    if (editSchool) {
+      setGraduationDate(editSchool.graduationDate);
+      setSchoolName(editSchool.schoolName);
+      setFieldOfStudy(editSchool.fieldOfStudy);
+    } else {
+      setGraduationDate("");
+      setSchoolName("");
+      setFieldOfStudy("");
     }
+  }, [editSchool]);
+
+  let schoolId = editSchool
+    ? schools.findIndex((school) => school.schoolName === editSchool.schoolName)
+    : null;
+
+  const contactFormStyle = {
+    display: "flex",
+    flexDirection: "column",
+    width: "30vw",
+  };
 
   return (
     <div>
       {isActive ? (
         <div className="education-info-form">
-          <form action="">
+          <form action="" style={contactFormStyle}>
             <input
               type="text"
               placeholder="School Name"
@@ -101,6 +128,15 @@ function EducationItem({ isActive, schools, setSchools, editActive }) {
               type="submit"
               onClick={(e) => {
                 e.preventDefault();
+                const updatedSchools = [...schools];
+                if (schoolId !== -1 && schoolId !== null) {
+                  updatedSchools[schoolId] = {
+                    schoolName: schoolName,
+                    graduationDate: graduationDate,
+                    fieldOfStudy: fieldOfStudy,
+                  };
+                  setSchools(updatedSchools);
+                } else {
                   setSchools([
                     ...schools,
                     {
@@ -109,6 +145,8 @@ function EducationItem({ isActive, schools, setSchools, editActive }) {
                       graduationDate: graduationDate,
                     },
                   ]);
+                }
+
                 setGraduationDate("");
                 setSchoolName("");
                 setFieldOfStudy("");
@@ -116,6 +154,16 @@ function EducationItem({ isActive, schools, setSchools, editActive }) {
             >
               Submit
             </button>
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                setGraduationDate("");
+                setSchoolName("");
+                setFieldOfStudy("");
+              }}
+            >
+              Clear
+            </button>
           </form>
         </div>
       ) : null}

cv-project/src/components/generalInfo.jsx

@@ -6,9 +6,22 @@ export default function GeneralInfo() {
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
 
+  const contactFormStyle = {
+    display: "flex",
+    flexDirection: "column",
+    width: "30vw",
+  };
+
+  const mainStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+  };
+
   return (
-    <div>
-      <div className="contact-form">
+    <div className="general-info section" style={mainStyle}>
+      <div className="contact-info-form">
+        <form action="">
+          <div style={contactFormStyle}>
             <input
               type="text"
               placeholder="First Name"
@@ -34,6 +47,9 @@ export default function GeneralInfo() {
               onChange={(e) => setPhone(e.target.value)}
             />
           </div>
+        </form>
+      </div>
+
       <div className="contact-info">
         <h1>{firstName + " " + lastName}</h1>
         <p>{email}</p>