Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'
import { Card } from 'react-bootstrap'
import { LengthFilter, SearchInput, TablePagination } from '../../components/TableComponents'
import DeleteModal from '../../../shared/DeleteModal'
import Table from '../../../shared/content-table/Table'
import TableRow from '../../../shared/content-table/TableRow'
import useGetDataTable from '../../../shared/hooks/useGetDataTable'

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

const MainView = ({
        table_link,
        setActionLink,
        permisions,
        add_link,
        setAction }) => {

        const [linkDelete, setLinkDelete] = useState('')
        const [search, setSearch] = useState('')
        const [dataLength, setDataLength] = useState(10)
        const [currentPage, setCurrentPage] = useState(1)

        const { items: data, total, lastPage, startItem, lastItem } = useGetDataTable({ url: table_link, params: { search, length: dataLength, start: currentPage } })

        const [items, setItems] = useState(data)

        console.log('render')

        const handleEdit = (url) => {
                setActionLink(url)
                setAction('edit')
        }

        const handleDelete = (url) => setLinkDelete(url)

        return (
                <>
                        <section className="content">
                                <div className="container-fluid">
                                        <div className="row">
                                                <div className="col-12">
                                                        <Card>
                                                                <Card.Header>
                                                                        <div className="row justify-content-end" style={{ gap: '10px' }}>
                                                                                {permisions.allowAdd &&
                                                                                        <label
                                                                                                className='d-flex align-items-center'
                                                                                                onClick={() => {
                                                                                                        setActionLink(add_link)
                                                                                                        setAction('add')
                                                                                                }}
                                                                                                style={{ cursor: 'pointer' }}
                                                                                        >
                                                                                                <i className="fa fa-plus mr-2" />
                                                                                                Agregar
                                                                                        </label>
                                                                                }
                                                                                <label
                                                                                        className='d-flex align-items-center'
                                                                                        onClick={() => window.location.reload()}
                                                                                        style={{ cursor: 'pointer' }}
                                                                                >
                                                                                        <i className='fa fa-refresh mr-2' />
                                                                                        Actualizar
                                                                                </label>
                                                                        </div>
                                                                        <div className="row justify-content-between align-items-center">
                                                                                <LengthFilter onChange={(e) => setDataLength(e.target.value)} />
                                                                                <SearchInput onChange={(e) => setSearch(e.target.value)} />
                                                                        </div>
                                                                </Card.Header>
                                                                <Card.Body>
                                                                        <div className="table-responsive">
                                                                                <Table headers={headers}>
                                                                                        {() => items.map((item, index) =>
                                                                                                <TableRow
                                                                                                        key={index}
                                                                                                        item={item}
                                                                                                        editOptions={{
                                                                                                                permission: permisions.allowEdit,
                                                                                                                icon: (value) => <i className='fa fa-pencil cursor-pointer' onClick={() => handleEdit(value)} />
                                                                                                        }}
                                                                                                        deleteOptions={{
                                                                                                                permission: permisions.allowDelete,
                                                                                                                icon: (value) => <i className='fa fa-trash  cursor-pointer' onClick={() => handleDelete(value)} />
                                                                                                        }}
                                                                                                />)}
                                                                                </Table>
                                                                        </div>
                                                                        <div className='row justify-content-between align-items-center'>
                                                                                <p className='mb-0'>
                                                                                        {`Mostrando registros del ${startItem} al ${lastItem} de un total de ${total} registros`}
                                                                                </p>
                                                                                <TablePagination
                                                                                        onDecrement={() => setCurrentPage(prev => prev - 1)}
                                                                                        onIncrement={() => setCurrentPage(prev => prev + 1)}
                                                                                        totalPages={lastPage}
                                                                                        currentPage={currentPage}
                                                                                />
                                                                        </div>
                                                                </Card.Body>
                                                        </Card>
                                                </div>
                                        </div >
                                </div >
                        </section >
                        <DeleteModal
                                url={linkDelete}
                                isOpen={linkDelete}
                                closeModal={() => setLinkDelete('')}
                                title="Esta seguro de borrar esta vacante?"
                                onComplete={() => setItems(items.filter((item) => item.actions.link_delete !== linkDelete))}
                                message="Vacante eliminada"
                        />
                </>
        )
}
export default MainView