Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 9512 | Rev 9517 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

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

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(prev => prev.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>

              </Card.Body>
              <Card.Footer>
                <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 ${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>
              </Card.Footer>
            </Card>
          </div>
        </div >
      </div >
    </section >
  )
}
export default MainView