import React, { useState, useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom';
import EmployeeService from '../services/EmployeeService';
function UpdateEmployeeComponent() {
const [employee, setEmployee] = useState([]);
let { id } = useParams();
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const navigate = useNavigate();
useEffect(() => {
EmployeeService.getEmployeesById(id).then(response => {setEmployee(response.data)})
setFirstName(employee.firstName)
setLastName(employee.lastName)
setEmail(employee.email)
},[id,employee.firstName, employee.lastName, employee.email])
console.log(employee)
console.log(firstName + " " + lastName + " " + email)
const handleFirstNameChange = (e) => {
setFirstName(e.target.value);
}
const handleLastNameChange = (e) => {
setLastName(e.target.value);
}
const handleEmailChange = (e) => {
setEmail(e.target.value);
}
const updateEmployee = (e) => {
e.preventDefault();
console.log('employee =>' + JSON.stringify(employee));
//EmployeeService.addEmployee(employee).then(res =>{
// navigate('/employees');
//})
}
function cancel() {
navigate('/employees')
}
return (
<div>
<div className="container mt-2">
<div className="row">
<div className="card col-md-6 offset-md-3 offset-md-3">
<h3 className="text-center">Update Employee {id}</h3>
<div className="card-body">
<form action="">
<div className="form-group mb-1">
<label>First Name:</label>
<input placeholder='First Name' name="firstName" className='form-control'
value={firstName} onChange={handleFirstNameChange}/>
</div>
<div className="form-group mb-1">
<label>Last Name:</label>
<input placeholder='Last Name' name="lastName" className='form-control'
value={lastName} onChange={handleLastNameChange}/>
</div>
<div className="form-group mb-3">
<label>Email:</label>
<input placeholder='Email' name="email" className='form-control'
value={email} onChange={handleEmailChange}/>
</div>
<button className="btn btn-success" onClick={updateEmployee}>Save</button>
<button className="btn btn-danger"
onClick={cancel} style={{marginLeft: "10px"}}>Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
export default UpdateEmployeeComponent;