Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Card } from "react-bootstrap";
import {
  LengthFilter,
  SearchInput,
  TablePagination,
} from "../../components/TableComponents";
import { addNotification } from "../../../redux/notification/notification.actions";
import { useDispatch } from "react-redux";
import DeleteModal from "../../../shared/DeleteModal";
import Table from "../../../shared/content-table/Table";
import TableRow from "../../../shared/content-table/TableRow";

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 dispatch = useDispatch();
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deleteLink, setDeleteLink] = useState("");
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);
  const [search, setSearch] = useState("");
  const [startItem, setStartItem] = useState(1);
  const [lastItem, setLastItem] = useState(10);
  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: "danger",
              msg: "Ha ocurrido un error",
            })
          );
        }

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

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

  useEffect(() => {
    if (pages.current > 1) {
      setStartItem(dataLength * (pages.current - 1) + 1);
    } else {
      setStartItem(1);
    }
  }, [pages.current]);

  useEffect(() => {
    if (items) {
      if (startItem > 1) {
        setLastItem(startItem + (items.length - 1));
      } else {
        setLastItem(items.length);
      }
    }
  }, [items]);

  const handleSort = (result) => setItems(result);

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

  const handleDelete = (url) => {
    setDeleteLink(url);
    setShowDeleteModal(true);
  };

  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={() =>
                        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>
                  <div className="table-responsive">
                    <Table data={items} headers={headers} setData={handleSort}>
                      {() =>
                        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={() =>
                        setPages({ ...pages, current: pages.current - 1 })
                      }
                      onIncrement={() =>
                        setPages({ ...pages, current: pages.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="¿Está seguro de borrar esta vacante?"
        onComplete={() =>
          setItems(
            items.filter((item) => item.actions.link_delete !== deleteLink)
          )
        }
        message="Vacante eliminada"
      />
    </>
  );
};
export default MainView;