Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */
import React from 'react'
import { useEffect } from 'react'
import { useCallback } from 'react'
import { useState } from 'react'

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

        if (!sortKey) return tableData

        tableData
        sortedData = tableData.sort((a, b) => {
                if (typeof a[sortKey] === 'string') {
                        return a[sortKey].toLowerCase() < b[sortKey].toLowerCase() && -1
                }

                return a[sortKey] - b[sortKey]
        })


        if (reverse) return sortedData.reverse()

        return sortedData
}

const SortButton = ({ reverse, columnKey, sortKey, onClick }) => {
        return (
                <button onClick={onClick} className="btn p-0">
                        {
                                (sortKey === columnKey) && reverse
                                        ? <i className='fa fa-angle-up ml-2' />
                                        : <i className='fa fa-angle-down ml-2' />
                        }
                </button>
        )
}

const Table = ({ data = [], headers, setData, children }) => {

        const [sortKey, setSortKey] = useState('name')
        const [reverse, setReverse] = useState(false)

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

        const changeSort = (key) => {
                setReverse(!reverse)
                setSortKey(key)
        }

        useEffect(() => {
                setData(sortedData())
        }, [sortKey, reverse])

        return (
                <table className="table table-hover my-table w-100">
                        <thead>
                                <tr>
                                        {headers.map((row) =>
                                                <th key={row.key} className="text-vertical-middle">
                                                        {row.label}
                                                        {row.isSorteable &&
                                <SortButton
                                        columnKey={row.key}
                                        onClick={() => changeSort(row.key)}
                                        sortKey={sortKey}
                                        reverse={reverse}
                                />
                                                        }
                                                </th>
                                        )}
                                </tr>
                        </thead>
                        <tbody>
                                {children()}
                        </tbody>
                </table >
        )
}

export default Table