Untitled

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

function EmployeeTableComponent() {

    const [employees, setEmployees] = useState([]);
    let currentPage = 1;
    //const [totalPages, setTotalPages] = useState(0)
    const [totalElements, setTotalElements] = useState(0)
    const [sortField, setSortField] = useState('firstName')
    const [sortDir, setSortDir] = useState('asc')

    useEffect(() => {
        EmployeeService.getEmployees().then(res => {
            //console.log(res)
            setEmployees(res.data.content)
            //setTotalPages(res.data.totalPages)
            //setTotalElements(res.data.totalElements)
        })
    }, []);

    function deleteEmployee(id) {
        EmployeeService.deleteEmployee(id).then(res => {
            window.location.reload()
        })
    }

    const updateSort = () => {

        if (sortDir === 'desc') {
            setSortDir('asc')
        } 

        EmployeeService.getEmployeesPageAndSort(currentPage, sortField, sortDir).then(res => {
            setEmployees(res.data.content)
        })
    }

    const nextPage = () => {
        console.log('in nextPage:');
        currentPage = currentPage + 1;
        console.log(currentPage)
        EmployeeService.getEmployeesPageAndSort(currentPage, sortField, sortDir).then(res => {
            setEmployees(res.data.content)
        })
    }

    const lastPage = () => {
        console.log('in lastPage:');
        currentPage = currentPage - 1;
        console.log(currentPage)
        EmployeeService.getEmployeesPageAndSort(currentPage, sortField, sortDir).then(res => {
            setEmployees(res.data.content)
        })
    }

    return (
        <div className="col">
            <div className="card shadow-sm">
                <div className="card-header">
                    Employees
                </div>
                <div className="card-body">
                    <table className="table">
                        <thead>
                            <tr>
                                <th scope="col"><span className='sub' onClick={updateSort}>Name</span></th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                employees.map(employee => (
                                    <tr key={employee.id}>
                                        <td>{employee.firstName} {employee.lastName}</td>
                                        <td>
                                            <Link to={`/view-employee/${employee.id}`}
                                                className="btn btn-success btn-sm me-2">View</Link>
                                            <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">Delete</button></td>
                                    </tr>))
                            }
                        </tbody>
                    </table>
                    <span className='sub' onClick={nextPage}>Next Page / </span> 
                    <span className='sub' onClick={lastPage}>Last Page</span>
                </div>
            </div>
        </div>
    )
}

export default EmployeeTableComponent