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