Untitled

import { useNavigate, Link } from 'react-router-dom';
import React, {useState,useEffect} from 'react';
import EmployeeService from "../services/EmployeeService";

function ListEmployeeComponent() {

    let navigate = useNavigate();
    const [employees, setEmployees] = useState([]);

    useEffect(() => {
        EmployeeService.getEmployees().then((response) => {
            setEmployees(response.data)
        })
    }, []);

    const handleClick = () => {
        navigate('/add-employee/-1')
    }

    function deleteEmployee(id) {
     
        EmployeeService.deleteEmployee(id)
        navigate('/employees')
    }

    return (
        <div>
            <div className='container-fluid'>
                    <h2 className='text-center'>Employees List</h2>
                    <div className='row'>
                        <div className='col-4'>
                            <button className='btn btn-primary mb-2' onClick={handleClick}>Add Employee</button>
                        </div>
                    </div>
                    <div className='row'>
                        <div className="col-12">
                        <table className='table table-striped table-bordered'>
                            <thead>
                                <tr>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            {
                                  employees.map(employee => (
                                  <tr key={employee.id}>
                                    <td>{employee.firstName}</td>
                                    <td>{employee.lastName}</td>
                                    <td>{employee.email}</td>
                                    <td>
                                        <Link to={`/add-employee/${employee.id}`} 
                                            className="btn btn-info btn-sm me-2">Update</Link>
                                        <button onClick={deleteEmployee(employee.id)} 
                                            className="btn btn-danger btn-sm me-2">Delete</button></td>
                                    </tr>))
                            }   
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>
        </div>
    );
}

export default ListEmployeeComponent;