Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Card } from 'react-bootstrap'
import { Table, TablePagination } from '../components/TableComponents'

const headers = [
  { key: "name", label: "Nombre", isSorteable: true },
  { key: "job_description", label: "Descripción de cargo", isSorteable: true },
  { key: "actions", label: "Acciones", isSorteable: false }
]

const MainView = ({ table_link }) => {

  const [data, setData] = useState({})
  const [dataLength, setDataLength] = useState(10);
  const [pages, setPages] = useState({
    current: 1,
    last: 1
  });

  const getData = ({ url = '', params = {} }) => {

    axios.get(url, { params: { ...params } })
      .then(({ data }) => {
        if (!data.success) {
          console.log('Ha ocurrido un error')
        }

        setData(data.data)
        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
      })
      .catch((err) => console.log(err))
  }

  useEffect(() => {
    getData({ url: table_link })
  }, [dataLength, pages.current])

  return (
    <section className="content">
      <div className="container-fluid">
        <div className="row">
          <div className="col-12">
            <Card>
              <Card.Header>

              </Card.Header>
              <Card.Body>
                <Table data={data.items} headers={headers} setData={setData}>
                  {
                    data.items?.map((item, index) => (
                      <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.job_description}</td>
                        <td>
                          <i className='fa fa-pencil' />
                          <i className='fa fa-trash' />
                        </td>
                      </tr>
                    ))
                  }
                </Table>
                <div className='row justify-content-between'>
                  <div className="col-sm-12 col-md-5">
                    <div className="d-flex justify-content-start" >
                      {`Mostrando registros del ${(dataLength * pages.current) - (dataLength - 1) || 0} al ${(dataLength * pages.current) - (dataLength - data.total) || 0} de un total de ${data.total || 0} registros`}
                    </div>
                  </div>
                  <div className="col-sm-12 col-md-5">
                    <div className="d-flex justify-content-end" >
                      <TablePagination
                        onDecrement={(e) => setPages(prev => prev.current -= 1)}
                        onIncrement={(e) => setPages(prev => prev.current += 1)}
                        totalPages={pages.last}
                        currentPage={pages.current}
                      />
                    </div>
                  </div>
                </div>
              </Card.Body>
            </Card>
          </div>
        </div >
      </div >
    </section >
  )
}
export default MainView