smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 22:30:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(feat): added button, renamed variables

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

119
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,54 +62,70 @@ 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">
<input <form action="">
type="text" <input
placeholder="School Name" type="text"
value={schoolName} placeholder="School Name"
onChange={(e) => setSchoolName(e.target.value)} value={schoolName}
/> onChange={(e) => setSchoolName(e.target.value)}
<input />
type="text" <input
placeholder="Graduation Date" type="text"
value={graduationDate} placeholder="Graduation Date"
onChange={(e) => setGraduationDate(e.target.value)} value={graduationDate}
/> onChange={(e) => setGraduationDate(e.target.value)}
<input />
type="text" <input
placeholder="Field of Study" type="text"
value={fieldOfStudy} placeholder="Field of Study"
onChange={(e) => setFieldOfStudy(e.target.value)} value={fieldOfStudy}
/> onChange={(e) => setFieldOfStudy(e.target.value)}
<button />
type="submit" <button
onClick={(e) => { type="submit"
e.preventDefault(); onClick={(e) => {
setSchools([ e.preventDefault();
...schools, setSchools([
{ ...schools,
school: schoolName, {
concentration: fieldOfStudy, schoolName: schoolName,
graduation: graduationDate, fieldOfStudy: fieldOfStudy,
}, graduationDate: graduationDate,
]); },
setGraduationDate(""); ]);
setSchoolName(""); setGraduationDate("");
setFieldOfStudy(""); setSchoolName("");
}} setFieldOfStudy("");
> }}
Submit >
</button> Submit
</button>
</form>
</div> </div>
) : null} ) : null}
</div> </div>
); );
} }
function deleteEducationItem(schools, item, setSchools) {
const filteredSchools = schools.filter(
(school) => school.schoolName !== item,
);
setSchools(filteredSchools);
}