smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-27 06:40:42 -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>
</>
) : (
<EducationDisplay schools={education} />
<EducationDisplay schools={education} setSchools={setEducation} />
)}
<button
onClick={() => {
@ -20,6 +20,7 @@ export default function EducationInfo() {
>
Add Education Info
</button>
<EducationItem
isActive={educationItemActive}
schools={education}
@ -34,13 +35,25 @@ function EducationDisplay(props) {
<div>
{props.schools.map((item) => {
return (
<div key={item.school} className="education-info">
<h2>School: {item.school}</h2>
<div key={item.schoolName} className="education-info">
<h2>School: {item.schoolName}</h2>
<p>
Graduation Date: {item.graduation + " "}
Field of Study: {item.concentration}
<button>edit</button>
<button>remove</button>
Graduation Date: {item.graduationDate + " "}
Field of Study: {item.fieldOfStudy}
<button onClick={() => EducationItem({ editActive: item })}>
edit
</button>
<button
onClick={() =>
deleteEducationItem(
props.schools,
item.schoolName,
props.setSchools,
)
}
>
remove
</button>
</p>
</div>
);
@ -49,54 +62,70 @@ function EducationDisplay(props) {
);
}
function EducationItem({ isActive, schools, setSchools }) {
function EducationItem({ isActive, schools, setSchools, editActive }) {
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;
}
return (
<div>
{isActive ? (
<div className="education-info-form">
<input
type="text"
placeholder="School Name"
value={schoolName}
onChange={(e) => setSchoolName(e.target.value)}
/>
<input
type="text"
placeholder="Graduation Date"
value={graduationDate}
onChange={(e) => setGraduationDate(e.target.value)}
/>
<input
type="text"
placeholder="Field of Study"
value={fieldOfStudy}
onChange={(e) => setFieldOfStudy(e.target.value)}
/>
<button
type="submit"
onClick={(e) => {
e.preventDefault();
setSchools([
...schools,
{
school: schoolName,
concentration: fieldOfStudy,
graduation: graduationDate,
},
]);
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
}}
>
Submit
</button>
<form action="">
<input
type="text"
placeholder="School Name"
value={schoolName}
onChange={(e) => setSchoolName(e.target.value)}
/>
<input
type="text"
placeholder="Graduation Date"
value={graduationDate}
onChange={(e) => setGraduationDate(e.target.value)}
/>
<input
type="text"
placeholder="Field of Study"
value={fieldOfStudy}
onChange={(e) => setFieldOfStudy(e.target.value)}
/>
<button
type="submit"
onClick={(e) => {
e.preventDefault();
setSchools([
...schools,
{
schoolName: schoolName,
fieldOfStudy: fieldOfStudy,
graduationDate: graduationDate,
},
]);
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
}}
>
Submit
</button>
</form>
</div>
) : null}
</div>
);
}
function deleteEducationItem(schools, item, setSchools) {
const filteredSchools = schools.filter(
(school) => school.schoolName !== item,
);
setSchools(filteredSchools);
}