Proyectos de Subversion LeadersLinked - Backend

import React, { useCallback, useState } from 'react'
import { Link } from 'react-router-dom';

const sortData = ({ tableData, sortKey, reverse }) => {
    let sortedData

    if (!sortKey) return tableData;

    if (sortKey !== "name") {
        sortedData = tableData.sort((a, b) => {
            return a[sortKey] - b[sortKey];
        });
    } else {
        sortedData = tableData.sort((a, b) => {
            return a[sortKey] > b[sortKey] ? 1 : -1;
        });
    }


    if (reverse) {
        return sortedData.reverse();
    }

    return sortedData;
}

const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
    return (
        <button onClick={onClick} className="btn">
            {
                (sortKey === columnKey) && (sortOrder === "desc")
                    ? <i className='fa fa-angle-up' />
                    : <i className='fa fa-angle-down' />
            }
        </button>
    );
}

const Table = ({ data, headers, onDelete, allowEdit, allowDelete, onEdit }) => {

    const initialSortKey = Object.values(headers)[0]
    const [sortKey, setSortKey] = useState(initialSortKey);
    const [sortOrder, setSortOrder] = useState("ascn");

    const sortedData = useCallback(
        () => sortData({ tableData: data, sortKey, reverse: sortOrder === "desc" }),
        [data, sortKey, sortOrder]
    );

    const changeSort = (key) => {
        setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");

        setSortKey(key);
    }

    return (
        <table className="table table-hover dataTable no-footer dtr-inline">
            <thead>
                <tr>
                    {headers.map((row) => {
                        return (
                            <th
                                key={row.key}
                                className="text-vertical-middle"
                            >
                                {row.label}
                                {
                                    row.isSorteable
                                    &&
                                    <SortButton
                                        columnKey={row.key}
                                        onClick={() => changeSort(row.key)}
                                        {...{
                                            sortOrder,
                                            sortKey,
                                        }}
                                    />
                                }
                            </th>
                        );
                    })}
                </tr>
            </thead>

            <tbody>
                {sortedData().map((item, index) => {
                    const entries = Object.entries(item)

                    return (
                        < tr key={item.id} >
                            {
                                entries.map((element) => {

                                    if (element[0] !== "id") {

                                        if (element[0] === "details") {
                                            return (
                                                <td>
                                                    <ul style={{ listStyle: 'none' }}>
                                                        <li>Estatus: {element[1]["status"]}</li>
                                                        <li>Tipo de empleo: {element[1]["employment_type"]}</li>
                                                        <li>Aplicantes: {element[1]["users_who_applied"]}</li>
                                                    </ul>
                                                </td>
                                            )
                                        }

                                        if (element[0] === "actions") {
                                            return (
                                                <td style={{ display: 'flex', gap: '5px' }}>
                                                    {
                                                        (allowEdit === "1")
                                                        &&
                                                        <Link
                                                            to="/jobs/edit"
                                                            style={{ textDecoration: 'none' }}
                                                            onClick={() => onEdit(element[1]['link_edit'])}
                                                        >
                                                            <button
                                                                className="btn btn-primary btn-edit"
                                                            >
                                                                <i className="fa fa-pencil" />
                                                                Editar
                                                            </button>
                                                        </Link>
                                                    }
                                                    {
                                                        (allowDelete === "1")
                                                        &&
                                                        <button
                                                            className="btn btn-danger btn-delete"
                                                            onClick={() => onDelete(item)}
                                                        >
                                                            <i className="fa fa-trash" />
                                                            Borrar
                                                        </button>
                                                    }
                                                </td>
                                            )
                                        }

                                        return (
                                            <td
                                                className="text-vertical-middle sorting_1 dtr-control">
                                                {element[1]}
                                            </td>
                                        )
                                    }
                                })
                            }
                        </tr>
                    );
                })}
            </tbody>
        </table >
    );
}

export default Table;