Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Card } from 'react-bootstrap'
import { LengthFilter, SearchInput, Table, TablePagination } from '../../components/TableComponents'
import { useHistory } from 'react-router-dom'
import { addNotification } from '../../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'
import DeleteModal from '../../../shared/DeleteModal'

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, setActionLink, permisions, add_link }) => {

  const history = useHistory()
  const dispatch = useDispatch()
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [deleteLink, setDeleteLink] = useState('')
  const [data, setData] = useState({})
  const [search, setSearch] = 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) {
          dispatch(addNotification({
            style: "error",
            msg: "Ha ocurrido un error"
          }))
        }

        setData(data.data)
        setPages({ ...pages, last: Math.ceil(data.data.total / dataLength) })
      })
      .catch((err) => dispatch(addNotification({
        style: "error",
        msg: "Ha ocurrido un error"
      })))
  }

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

  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)
                          history.push('/recruitment-and-selection/vacancies/add')
                        }}
                        style={{ cursor: 'pointer' }}
                      >
                        <i className="fa fa-plus mr-2" />
                        Agregar
                      </label>
                    }
                    <label
                      className='d-flex align-items-center'
                      onClick={() => getData({
                        url: table_link,
                        params: {
                          search: search,
                          length: dataLength,
                          page: pages.current
                        }
                      })}
                      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>
                  <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 className='d-flex' style={{ gap: '10px' }}>
                            {
                              permisions.allowEdit
                              &&
                              <i
                                className='fa fa-pencil'
                                onClick={() => {
                                  setActionLink(item.actions.link_edit)
                                  history.push('/recruitment-and-selection/vacancies/edit')
                                }}
                                style={{ cursor: 'pointer' }}
                              />
                            }
                            {
                              permisions.allowDelete
                              &&
                              <i
                                className='fa fa-trash'
                                onClick={() => {
                                  setShowDeleteModal(true)
                                  setDeleteLink(item.actions.link_delete)
                                }}
                                style={{ cursor: 'pointer' }}
                              />
                            }
                          </td>
                        </tr>
                      ))
                    }
                  </Table>
                  <div className='row justify-content-between align-items-center'>
                    <p className='mb-0'>
                      {`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`}
                    </p>
                    <TablePagination
                      onDecrement={(e) => setPages(prev => prev.current -= 1)}
                      onIncrement={(e) => setPages(prev => prev.current += 1)}
                      totalPages={pages.last}
                      currentPage={pages.current}
                    />
                  </div>
                </Card.Body>
              </Card>
            </div>
          </div >
        </div >
      </section >
      <DeleteModal
        url={deleteLink}
        isOpen={showDeleteModal}
        closeModal={() => setShowDeleteModal(false)}
        title="Esta seguro de borrar esta vacante?"
        onComplete={() => setData({ ...data, items: data.items.filter((item) => item.actions.link_delete !== deleteLink) })}
        message="Vacante eliminada"
      />
    </>
  )
}
export default MainView