smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-06-28 04:45:36 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(feat): added button, renamed variables

Browse source
This commit is contained in:
Smigz 2024-06-17 22:27:02 -04:00
parent 5596492721
commit 9e13dd6c36
1 changed files with 74 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

51
cv-project/src/components/educationInfo.jsx
View file

@ -11,7 +11,7 @@ export default function EducationInfo() {
<p>Add your Education info</p> <p>Add your Education info</p>
</> </>
) : ( ) : (
<EducationDisplay schools={education} /> <EducationDisplay schools={education} setSchools={setEducation} />
)} )}
<button <button
onClick={() => { onClick={() => {
@ -20,6 +20,7 @@ export default function EducationInfo() {
> >
Add Education Info Add Education Info
</button> </button>
<EducationItem <EducationItem
isActive={educationItemActive} isActive={educationItemActive}
schools={education} schools={education}
@ -34,13 +35,25 @@ function EducationDisplay(props) {
<div> <div>
{props.schools.map((item) => { {props.schools.map((item) => {
return ( return (
<div key={item.school} className="education-info"> <div key={item.schoolName} className="education-info">
<h2>School: {item.school}</h2> <h2>School: {item.schoolName}</h2>
<p> <p>
Graduation Date: {item.graduation + " "} Graduation Date: {item.graduationDate + " "}
Field of Study: {item.concentration} Field of Study: {item.fieldOfStudy}
<button>edit</button> <button onClick={() => EducationItem({ editActive: item })}>
<button>remove</button> edit
</button>
<button
onClick={() =>
deleteEducationItem(
props.schools,
item.schoolName,
props.setSchools,
)
}
>
remove
</button>
</p> </p>
</div> </div>
); );
@ -49,15 +62,23 @@ function EducationDisplay(props) {
); );
} }
function EducationItem({ isActive, schools, setSchools }) { function EducationItem({ isActive, schools, setSchools, editActive }) {
const [graduationDate, setGraduationDate] = useState(""); const [graduationDate, setGraduationDate] = useState("");
const [schoolName, setSchoolName] = useState(""); const [schoolName, setSchoolName] = useState("");
const [fieldOfStudy, setFieldOfStudy] = useState(""); const [fieldOfStudy, setFieldOfStudy] = useState("");
if (editActive) {
setGraduationDate(editActive.graduationDate);
setSchoolName(editActive.schoolName);
setFieldOfStudy(editActive.fieldOfStudy);
isActive === true;
}
return ( return (
<div> <div>
{isActive ? ( {isActive ? (
<div className="education-info-form"> <div className="education-info-form">
<form action="">
<input <input
type="text" type="text"
placeholder="School Name" placeholder="School Name"
@ -83,9 +104,9 @@ function EducationItem({ isActive, schools, setSchools }) {
setSchools([ setSchools([
...schools, ...schools,
{ {
school: schoolName, schoolName: schoolName,
concentration: fieldOfStudy, fieldOfStudy: fieldOfStudy,
graduation: graduationDate, graduationDate: graduationDate,
}, },
]); ]);
setGraduationDate(""); setGraduationDate("");
@ -95,8 +116,16 @@ function EducationItem({ isActive, schools, setSchools }) {
> >
Submit Submit
</button> </button>
</form>
</div> </div>
) : null} ) : null}
</div> </div>
); );
} }
function deleteEducationItem(schools, item, setSchools) {
const filteredSchools = schools.filter(
(school) => school.schoolName !== item,
);
setSchools(filteredSchools);
}