refactor: modular

cv-project/src/App.jsx

@@ -1,15 +1,42 @@
-import GeneralInfo from "./components/generalInfo";
-import EducationInfo from "./components/educationInfo";
-import Experience from "./components/experience";
+import GeneralInfoForm from "./components/generalInfoForm";
+import GeneralInfoDisplay from "./components/generalInfoDisplay";
+import EducationInfoDisplay from "./components/educationInfoDisplay";
+import EducationInfoForm from "./components/educationInfoForm";
+import ExperienceForm from "./components/experienceForm";
 import "./App.css";
+import { useState } from "react";
 
 function App() {
+  const [basicInfo, setBasicInfo] = useState({
+    firstName: "",
+    lastName: "",
+    phone: "",
+    email: "",
+  });
+  const [educationInfo, setEducationInfo] = useState([]);
+  const [editEducation, setEditEducation] = useState(null);
+
   return (
-    <>
-      <GeneralInfo />
-      <EducationInfo />
-      <Experience />
-    </>
+    <div className="container">
+      <div className="form">
+        <GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} />
+        <EducationInfoForm
+          educationInfo={educationInfo}
+          setEducationInfo={setEducationInfo}
+          setEditEducation={setEditEducation}
+          editEducation={editEducation}
+        />
+        <ExperienceForm />
+      </div>
+      <div className="resume">
+        <GeneralInfoDisplay basicInfo={basicInfo} />
+        <EducationInfoDisplay
+          educationInfo={educationInfo}
+          setEditEducation={setEditEducation}
+          setEducationInfo={setEducationInfo}
+        />
+      </div>
+    </div>
   );
 }
 

cv-project/src/components/educationInfoDisplay.jsx

@@ -0,0 +1,54 @@
+export default function EducationInfoDisplay(props) {
+  return (
+    <div>
+      {props.educationInfo.length <= 0 ? (
+        <>
+          <p>Add your Education info</p>
+        </>
+      ) : (
+        <EducationDisplay
+          educationInfo={props.educationInfo}
+          setEducationInfo={props.setEducationInfo}
+          setEditEducation={props.setEditEducation}
+        />
+      )}
+    </div>
+  );
+}
+
+function EducationDisplay(props) {
+  return (
+    <div>
+      {props.educationInfo.map((item) => {
+        return (
+          <div key={item.schoolName} className="education-info">
+            <h2>School: {item.schoolName}</h2>
+            <p>
+              Graduation Date: {item.graduationDate + " "}
+              Field of Study: {item.fieldOfStudy}
+              <button onClick={() => props.setEditEducation(item)}>edit</button>
+              <button
+                onClick={() =>
+                  deleteEducationItem(
+                    props.educationInfo,
+                    item.schoolName,
+                    props.setEducationInfo,
+                  )
+                }
+              >
+                remove
+              </button>
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function deleteEducationItem(educationInfo, item, setEducationInfo) {
+  const filteredSchools = educationInfo.filter(
+    (school) => school.schoolName !== item,
+  );
+  setEducationInfo(filteredSchools);
+}

cv-project/src/components/educationInfoForm.jsx

@@ -1,29 +1,12 @@
 import { useState, useEffect } from "react";
 
-export default function EducationInfo() {
-  const [schools, setSchools] = useState([]);
+export default function EducationInfoForm(props) {
+  // const [schools, setSchools] = useState([]);
   const [educationItemActive, setEducationItemActive] = useState(false);
-  const [editSchool, setEditSchool] = useState(null);
-
-  const mainDivStyle = {
-    display: "flex",
-    justifyContent: "space-between",
-    flexDirection: "row-reverse",
-  };
+  // const [editSchool, setEditSchool] = useState(null);
 
   return (
-    <div className="education-info section" style={mainDivStyle}>
-      {schools.length <= 0 ? (
-        <>
-          <p>Add your Education info</p>
-        </>
-      ) : (
-        <EducationDisplay
-          schools={schools}
-          setSchools={setSchools}
-          setEditSchool={setEditSchool}
-        />
-      )}
+    <div className="education-info section">
       <div>
         <button
           onClick={() => {
@@ -35,46 +18,21 @@ export default function EducationInfo() {
 
         <EducationForm
           isActive={educationItemActive}
-          schools={schools}
-          setSchools={setSchools}
-          editSchool={editSchool}
+          educationInfo={props.educationInfo}
+          setEducationInfo={props.setEducationInfo}
+          editSchool={props.editEducation}
         />
       </div>
     </div>
   );
 }
 
-function EducationDisplay(props) {
-  return (
-    <div>
-      {props.schools.map((item) => {
-        return (
-          <div key={item.schoolName} className="education-info">
-            <h2>School: {item.schoolName}</h2>
-            <p>
-              Graduation Date: {item.graduationDate + " "}
-              Field of Study: {item.fieldOfStudy}
-              <button onClick={() => props.setEditSchool(item)}>edit</button>
-              <button
-                onClick={() =>
-                  deleteEducationItem(
-                    props.schools,
-                    item.schoolName,
-                    props.setSchools,
-                  )
-                }
-              >
-                remove
-              </button>
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function EducationForm({ isActive, schools, setSchools, editSchool }) {
+function EducationForm({
+  isActive,
+  educationInfo,
+  setEducationInfo,
+  editSchool,
+}) {
   const [graduationDate, setGraduationDate] = useState("");
   const [schoolName, setSchoolName] = useState("");
   const [fieldOfStudy, setFieldOfStudy] = useState("");
@@ -92,7 +50,9 @@ function EducationForm({ isActive, schools, setSchools, editSchool }) {
   }, [editSchool]);
 
   let schoolId = editSchool
-    ? schools.findIndex((school) => school.schoolName === editSchool.schoolName)
+    ? educationInfo.findIndex(
+        (school) => school.schoolName === editSchool.schoolName,
+      )
     : null;
 
   const contactFormStyle = {
@@ -128,17 +88,17 @@ function EducationForm({ isActive, schools, setSchools, editSchool }) {
               type="submit"
               onClick={(e) => {
                 e.preventDefault();
-                const updatedSchools = [...schools];
+                const updatedSchools = [...educationInfo];
                 if (schoolId !== -1 && schoolId !== null) {
                   updatedSchools[schoolId] = {
                     schoolName: schoolName,
                     graduationDate: graduationDate,
                     fieldOfStudy: fieldOfStudy,
                   };
-                  setSchools(updatedSchools);
+                  setEducationInfo(updatedSchools);
                 } else {
-                  setSchools([
-                    ...schools,
+                  setEducationInfo([
+                    ...educationInfo,
                     {
                       schoolName: schoolName,
                       fieldOfStudy: fieldOfStudy,
@@ -170,10 +130,3 @@ function EducationForm({ isActive, schools, setSchools, editSchool }) {
     </div>
   );
 }
-
-function deleteEducationItem(schools, item, setSchools) {
-  const filteredSchools = schools.filter(
-    (school) => school.schoolName !== item,
-  );
-  setSchools(filteredSchools);
-}

cv-project/src/components/experienceForm.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function Experience() {
+export default function ExperienceForm() {
   const [jobs, setJobs] = useState([]);
   const [showJobForm, setShowJobForm] = useState(false);
 

cv-project/src/components/generalInfoDisplay.jsx

@@ -0,0 +1,18 @@
+export default function GeneralInfoDisplay(props) {
+  const basicInfo = props.basicInfo;
+  return (
+    <>
+      {
+        basicInfo ?
+          (
+            <div className="basic-info" >
+              <h1>{basicInfo.firstName + " " + basicInfo.lastName}</h1>
+              <p>{basicInfo.email}</p>
+              <p>{basicInfo.phone}</p>
+            </div>
+          ) : null
+      }
+    </>
+
+  )
+}

cv-project/src/components/generalInfoForm.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function GeneralInfo() {
+export default function GeneralInfoForm(props) {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [phone, setPhone] = useState("");
@@ -26,35 +26,43 @@ export default function GeneralInfo() {
               type="text"
               placeholder="First Name"
               value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
+              onChange={(e) => {
+                setFirstName(e.target.value)
+                props.setBasicInfo({ ...props.basicInfo, firstName: e.target.value })
+              }
+              }
             />
             <input
               type="text"
               placeholder="Last Name"
               value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-            />
+              onChange={(e) => {
+                setLastName(e.target.value)
+                props.setBasicInfo({ ...props.basicInfo, lastName: e.target.value })
+              }} />
             <input
               type="email"
               placeholder="Email"
               value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              onChange={(e) => {
+                setEmail(e.target.value)
+                props.setBasicInfo({ ...props.basicInfo, email: e.target.value })
+              }
+              }
             />
             <input
               type="text"
               placeholder="Phone Number"
               value={phone}
-              onChange={(e) => setPhone(e.target.value)}
+              onChange={(e) => {
+                setPhone(e.target.value)
+                props.setBasicInfo({ ...props.basicInfo, phone: e.target.value })
+              }}
             />
           </div>
         </form>
       </div>
 
-      <div className="contact-info">
-        <h1>{firstName + " " + lastName}</h1>
-        <p>{email}</p>
-        <p>{phone}</p>
-      </div>
     </div>
   );
 }