Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useEffect, useState } from 'react'

const CompanySizesView = ({ urlsVar }) => {

    const { linkTable, linkAdd, linkEdit, linkDelete } = urlsVar
    const [companyData, setCompanyData] = useState({});
    const [search, setSearch] = useState('');
    const [dataLength, setDataLength] = useState(10);
    const [page, setPage] = useState(1);
    const lengthValues = ["10", "25", "50", "100"]

    const getData = () => {
        axios.get(
            linkTable,
            {
                params: {
                    page: page,
                    length: dataLength
                }
            })
            .then(({ data }) => {
                if (data.success) {
                    setCompanyData(data.data)

                    return data.data
                }
            })
            .catch((err) => console.log(err))
    }

    useEffect(() => {
        getData()
        console.log(companyData)
    }, [search, dataLength, page]);

    return (
        <section className="content">
            <section className="content-header">
                <div className="container-fluid">
                    <div className="row mb-2">
                        <div className="col-sm-12">
                            <h1>Tamaños de empresa</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section className="content">
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-12">
                            <div className="card">
                                <div className="card-body">
                                    <div className="dataTables_wrapper dt-bootstrap4 no-footer">
                                        <div className="row">
                                            <div className="col-sm-12 col-md-6">
                                                <div className="dataTables_length" id="gridTable_length">
                                                    <label>
                                                        Mostrar
                                                        <select
                                                            className="custom-select custom-select-sm form-control form-control-sm"
                                                            onChange={(e) => setDataLength(e.target.value)}
                                                        >
                                                            {
                                                                lengthValues.map((value, index) => (
                                                                    <option key={index} value={value}>{value}</option>
                                                                ))
                                                            }
                                                        </select>
                                                        registros
                                                    </label>
                                                </div>
                                            </div>
                                            <div className="col-sm-12 col-md-6">
                                                <div className="dataTables_filter">
                                                    <label>
                                                        Buscar
                                                        <input
                                                            type="search"
                                                            className="form-control form-control-sm" placeholder=""
                                                            onChange={(e) => setSearch(e.target.value)}
                                                        />
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="row">
                                            <div className="col-sm-12">
                                                <table
                                                    className="table table-hover dataTable no-footer dtr-inline" role="grid"
                                                    aria-describedby="gridTable_info"
                                                >
                                                    <thead>
                                                        <tr role="row">
                                                            <th
                                                                className="text-vertical-middle sorting sorting_asc"
                                                                aria-sort="ascending"
                                                            >
                                                                Nombre
                                                            </th>
                                                            <th
                                                                className="text-right text-vertical-middle sorting"
                                                                aria-sort="ascending"
                                                            >
                                                                Mínimo
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {
                                                            companyData.items
                                                            &&
                                                            companyData.items.map((item, index) => (
                                                                <tr key={item.id}>
                                                                    <td
                                                                        className="text-vertical-middle sorting_1 dtr-control">
                                                                        {item.name}
                                                                    </td>
                                                                    <td
                                                                        className="text-vertical-middle sorting_1 dtr-control">
                                                                        {item.minimum_no_of_employee}
                                                                    </td>
                                                                    <td className=" text-right text-vertical-middle">
                                                                        {item.maximum_no_of_employee}
                                                                    </td>
                                                                    <td className=" text-center">
                                                                        {
                                                                            item.status === 'a'
                                                                                ? <i className='fa fa-check' />
                                                                                : <i className='fa fa-xmark' />
                                                                        }
                                                                    </td>
                                                                    <td>
                                                                        <button className="btn btn-primary btn-edit">
                                                                            <a href={item.actions.link_delete}>
                                                                                <i className="fa fa-pencil" />
                                                                                Editar
                                                                            </a>
                                                                        </button>
                                                                        <button className="btn btn-danger btn-delete">
                                                                            <a href={item.actions.link_edit}>
                                                                                <i className="fa fa-trash" />
                                                                                Borrar
                                                                            </a>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            ))
                                                        }
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    )
}

export default CompanySizesView