Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useState, lazy } from 'react'
import DeleteModal from '../../../shared/DeleteModal'
import Table from '../../../shared/table/Table'
import TableFilters from '../../../shared/table/TableFilters'
const EditModal = lazy(import('../../groups-types/view/EditModal'))

const SkillsView = ({ linkTable, addUrl, allowAdd, allowEdit, allowDelete }) => {
        const [skills, setSkills] = useState({})
        const [selectItem, setSelectItem] = useState(null)
        const [actionLink, setActionLink] = useState(addUrl)
        const [showModal, setShowModal] = useState(false)
        const [showDeleteModal, setShowDeleteModal] = useState(false)

        const headers = [
                { key: 'name', label: 'Nombre', isSorteable: true },
                { key: 'status', label: 'Activo', isSorteable: false },
                { key: 'actions', label: 'Acciones', isSorteable: false }
        ]

        const getData = (params) => {
                axios.get(linkTable, { params: params })
                        .then(({ data }) => {
                                if (data.success) setSkills(data.data)
                        })
                        .catch((err) => console.log(err))
        }

        const closeModal = () => {
                setShowModal(false)
        }

        const closeDeleteModal = () => {
                setShowDeleteModal(false)
        }

        const editItem = (item) => {
                setSelectItem(item)
                setActionLink(item.actions.link_edit)
                setShowModal(true)
        }

        const deleteItem = (item) => {
                setActionLink(item.actions.link_delete)
                setShowDeleteModal(true)
        }

        const addItem = () => {
                setActionLink(addUrl)
                setShowModal(true)
        }

        return (
                <>
                        <section className="content">
                                <section className="content-header">
                                        <h1>Habilidades</h1>
                                </section>
                                <section className="container-fluid">
                                        <TableFilters data={skills} getData={getData} onAdd={addItem} allowAdd={allowAdd}>
                                                {skills.items &&
                                                        function () {
                                                                return (
                                                                        <Table
                                                                                data={skills.items}
                                                                                onEdit={editItem}
                                                                                onDelete={deleteItem}
                                                                                headers={headers}
                                                                                allowEdit={allowEdit}
                                                                                allowDelete={allowDelete}
                                                                        />
                                                                )
                                                        }()}
                                        </TableFilters>
                                </section>
                        </section>
                        {showModal &&
                                <EditModal
                                        title='Habilidades'
                                        isOpen={showModal}
                                        currentItem={selectItem}
                                        url={actionLink}
                                        onComplete={() => getData()}
                                        onClose={() => {
                                                if (selectItem) setSelectItem(null)
                                                closeModal()
                                        }}
                                />}
                        <DeleteModal
                                isOpen={showDeleteModal}
                                closeModal={closeDeleteModal}
                                url={actionLink}
                                onComplete={getData}
                        />
                </>
        )
}

export default SkillsView