feat: updated education info component

cv-project/src/components/educationInfo.jsx

@@ -1,31 +1,45 @@
-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>
+    <div className="education-info section" style={mainDivStyle}>
-      {education.length <= 0 ? (
+      {schools.length <= 0 ? (
         <>
           <p>Add your Education info</p>
         </>
       ) : (
-        <EducationDisplay schools={education} setSchools={setEducation} />
+        <EducationDisplay
+          schools={schools}
+          setSchools={setSchools}
+          setEditSchool={setEditSchool}
+        />
       )}
-      <button
+      <div>
-        onClick={() => {
+        <button
-          setEducationItemActive(!educationItemActive);
+          onClick={() => {
-        }}
+            setEducationItemActive(!educationItemActive);
-      >
+          }}
-        Add Education Info
+        >
-      </button>
+          Add Education Info
+        </button>
 
-      <EducationItem
+        <EducationForm
-        isActive={educationItemActive}
+          isActive={educationItemActive}
-        schools={education}
+          schools={schools}
-        setSchools={setEducation}
+          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 })}>
+              <button onClick={() => props.setEditSchool(item)}>edit</button>
-                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) {
+  useEffect(() => {
-    setGraduationDate(editActive.graduationDate);
+    if (editSchool) {
-    setSchoolName(editActive.schoolName);
+      setGraduationDate(editSchool.graduationDate);
-    setFieldOfStudy(editActive.fieldOfStudy);
+      setSchoolName(editSchool.schoolName);
-    isActive === true;
+      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,14 +128,25 @@ function EducationItem({ isActive, schools, setSchools, editActive }) {
               type="submit"
               onClick={(e) => {
                 e.preventDefault();
-                setSchools([
+                const updatedSchools = [...schools];
-                  ...schools,
+                if (schoolId !== -1 && schoolId !== null) {
-                  {
+                  updatedSchools[schoolId] = {
                     schoolName: schoolName,
-                    fieldOfStudy: fieldOfStudy,
                     graduationDate: graduationDate,
-                  },
+                    fieldOfStudy: fieldOfStudy,
-                ]);
+                  };
+                  setSchools(updatedSchools);
+                } else {
+                  setSchools([
+                    ...schools,
+                    {
+                      schoolName: schoolName,
+                      fieldOfStudy: fieldOfStudy,
+                      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,34 +6,50 @@ 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="general-info section" style={mainStyle}>
-      <div className="contact-form">
+      <div className="contact-info-form">
-        <input
+        <form action="">
-          type="text"
+          <div style={contactFormStyle}>
-          placeholder="First Name"
+            <input
-          value={firstName}
+              type="text"
-          onChange={(e) => setFirstName(e.target.value)}
+              placeholder="First Name"
-        />
+              value={firstName}
-        <input
+              onChange={(e) => setFirstName(e.target.value)}
-          type="text"
+            />
-          placeholder="Last Name"
+            <input
-          value={lastName}
+              type="text"
-          onChange={(e) => setLastName(e.target.value)}
+              placeholder="Last Name"
-        />
+              value={lastName}
-        <input
+              onChange={(e) => setLastName(e.target.value)}
-          type="email"
+            />
-          placeholder="Email"
+            <input
-          value={email}
+              type="email"
-          onChange={(e) => setEmail(e.target.value)}
+              placeholder="Email"
-        />
+              value={email}
-        <input
+              onChange={(e) => setEmail(e.target.value)}
-          type="text"
+            />
-          placeholder="Phone Number"
+            <input
-          value={phone}
+              type="text"
-          onChange={(e) => setPhone(e.target.value)}
+              placeholder="Phone Number"
-        />
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+            />
+          </div>
+        </form>
       </div>
+
       <div className="contact-info">
         <h1>{firstName + " " + lastName}</h1>
         <p>{email}</p>