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, allowUsersWhoApplied, onEdit, handleUserWhoApplied, labels }) => {

        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 w-100">
                        <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) => {
                                        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>{labels.STATUS}: {element[1]['status']}</li>
                                                                                                                <li>{labels.EMPLOYMENT_TYPE}: {element[1]['employment_type']}</li>
                                                                                                                <li>{labels.QTY_USERS_WHO_APPLIED}: {element[1]['users_who_applied']}</li>
                                                                                                        </ul>
                                                                                                </td>
                                                                                        )
                                                                                }

                                                                                if (element[0] === 'actions') {
                                                                                        return (
                                                                                                <td
                                                                                                        className='d-flex flex-column py-2 px-15'
                                                                                                        style={{ gap: '5px' }}>
                                                                                                        {
                                                                                                                (allowEdit === '1')
                                                                                                                &&
                                                                                                                <Link
                                                                                                                        to="/jobs/edit"
                                                                                                                        style={{ textDecoration: 'none' }}
                                                                                                                        onClick={() => onEdit(element[1]['link_edit'])}
                                                                                                                >
                                                                                                                        <button
                                                                                                                                className="btn btn-sm btn-block btn-primary btn-edit"
                                                                                                                        >
                                                                                                                                <i className="fa fa-pencil" />
                                                                                                                                {labels.EDIT}
                                                                                                                        </button>
                                                                                                                </Link>
                                                                                                        }
                                                                                                        {
                                                                                                                (allowDelete === '1')
                                                                                                                &&
                                                                                                                <button
                                                                                                                        className="btn btn-sm btn-danger btn-delete"
                                                                                                                        onClick={() => onDelete(item)}
                                                                                                                >
                                                                                                                        <i className="fa fa-trash" />
                                                                                                                        {labels.DELETE}
                                                                                                                </button>
                                                                                                        }
                                                                                                        {
                                                                                                                (allowUsersWhoApplied === '1' && element[1]['link_users_who_applied'])
                                                                                                                &&
                                                                                                                <button
                                                                                                                        className="btn btn-sm btn-primary btn-users-who-applied"
                                                                                                                        onClick={() => handleUserWhoApplied(element[1]['link_users_who_applied'])}
                                                                                                                >
                                                                                                                        <i className="fa fa-users" />
                                                                                                                        {labels.USERS_WHO_APPLIED}
                                                                                                                </button>
                                                                                                        }
                                                                                                </td>
                                                                                        )
                                                                                }

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

export default Table