QkoSad
116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { useDispatch } from "react-redux";
|
|
import { addEducation } from "../../actions/profile";
|
|
|
|
const AddEducation = () => {
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const [formData, setFormData] = useState({
|
|
school: "",
|
|
degree: "",
|
|
fieldofstudy: "",
|
|
from: "",
|
|
to: "",
|
|
current: false,
|
|
description: "",
|
|
});
|
|
|
|
const { school, degree, fieldofstudy, from, to, description, current } =
|
|
formData;
|
|
|
|
const onChange = (e) =>
|
|
setFormData({ ...formData, [e.target.name]: e.target.value });
|
|
|
|
return (
|
|
<section className="container">
|
|
<h1 className="large text-primary">Add Your Education</h1>
|
|
<p className="lead">
|
|
<i className="fas fa-code-branch" /> Add any school or bootcamp that you
|
|
have attended
|
|
</p>
|
|
<small>* = required field</small>
|
|
<form
|
|
className="form"
|
|
onSubmit={async (e) => {
|
|
e.preventDefault();
|
|
await dispatch(addEducation(formData)).then(() => navigate("/dashboard"));
|
|
// i have no idea how this works used to work, i removed the navigate function from the addEducation and it does now
|
|
}}
|
|
>
|
|
<div className="form-group">
|
|
<input
|
|
type="text"
|
|
placeholder="* School or Bootcamp"
|
|
name="school"
|
|
value={school}
|
|
onChange={onChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<input
|
|
type="text"
|
|
placeholder="* Degree or Certificate"
|
|
name="degree"
|
|
value={degree}
|
|
onChange={onChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<input
|
|
type="text"
|
|
placeholder="Field of Study"
|
|
name="fieldofstudy"
|
|
value={fieldofstudy}
|
|
onChange={onChange}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<h4>From Date</h4>
|
|
<input type="date" name="from" value={from} onChange={onChange} />
|
|
</div>
|
|
<div className="form-group">
|
|
<p>
|
|
<input
|
|
type="checkbox"
|
|
name="current"
|
|
checked={current}
|
|
value={current}
|
|
onChange={() => setFormData({ ...formData, current: !current })}
|
|
/>{" "}
|
|
Current School
|
|
</p>
|
|
</div>
|
|
<div className="form-group">
|
|
<h4>To Date</h4>
|
|
<input
|
|
type="date"
|
|
name="to"
|
|
value={to}
|
|
onChange={onChange}
|
|
disabled={current}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<textarea
|
|
name="description"
|
|
cols="30"
|
|
rows="5"
|
|
placeholder="Program Description"
|
|
value={description}
|
|
onChange={onChange}
|
|
/>
|
|
</div>
|
|
<input type="submit" className="btn btn-primary my-1" />
|
|
<Link className="btn btn-light my-1" to="/dashboard">
|
|
Go Back
|
|
</Link>
|
|
</form>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
|
|
export default AddEducation; |