150 lines
4.7 KiB
JavaScript
150 lines
4.7 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Paper } from '@material-ui/core';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const channelName = window.location.href.split("/")[4]
|
|
const adminToken = window.location.href.split("/")[5]
|
|
const dataURL = "/topsingers/"+ channelName + "/" + adminToken
|
|
const headCells = [
|
|
{ id: 'singerName', numeric: false, disablePadding: true, label: 'Singer Name' },
|
|
{ id: 'singCount', numeric: true, disablePadding: false, label: 'Count' },
|
|
];
|
|
|
|
function descendingComparator(a, b, orderBy) {
|
|
if (b[orderBy] < a[orderBy]) {
|
|
return -1;
|
|
}
|
|
if (b[orderBy] > a[orderBy]) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function stableSort(array, comparator) {
|
|
const stabilizedThis = array.map((el, index) => [el, index]);
|
|
stabilizedThis.sort((a, b) => {
|
|
const order = comparator(a[0], b[0]);
|
|
if (order !== 0) return order;
|
|
return a[1] - b[1];
|
|
});
|
|
return stabilizedThis.map((el) => el[0]);
|
|
}
|
|
|
|
function getComparator(order, orderBy) {
|
|
return order === 'desc'
|
|
? (a, b) => descendingComparator(a, b, orderBy)
|
|
: (a, b) => -descendingComparator(a, b, orderBy);
|
|
}
|
|
|
|
function EnhancedTableHead(props) {
|
|
const { classes, order, orderBy, onRequestSort } = props;
|
|
const createSortHandler = (property) => (event) => {
|
|
onRequestSort(event, property);
|
|
};
|
|
|
|
return (
|
|
<TableHead>
|
|
<TableRow>
|
|
{headCells.map((headCell) => (
|
|
<TableCell
|
|
key={headCell.id}
|
|
align={headCell.numeric ? 'right' : 'left'}
|
|
padding={headCell.disablePadding ? 'none' : 'default'}
|
|
sortDirection={orderBy === headCell.id ? order : false}
|
|
>
|
|
<TableSortLabel
|
|
active={orderBy === headCell.id}
|
|
direction={orderBy === headCell.id ? order : 'asc'}
|
|
onClick={createSortHandler(headCell.id)}
|
|
>
|
|
{headCell.label}
|
|
{orderBy === headCell.id ? (
|
|
<span className={classes.visuallyHidden}>
|
|
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
|
</span>
|
|
) : null}
|
|
</TableSortLabel>
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
</TableHead>
|
|
);
|
|
}
|
|
|
|
EnhancedTableHead.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
numSelected: PropTypes.number.isRequired,
|
|
onRequestSort: PropTypes.func.isRequired,
|
|
onSelectAllClick: PropTypes.func.isRequired,
|
|
order: PropTypes.oneOf(['asc', 'desc']).isRequired,
|
|
orderBy: PropTypes.string.isRequired,
|
|
rowCount: PropTypes.number.isRequired,
|
|
};
|
|
|
|
function TopTenSingers() {
|
|
const useStyles = makeStyles({
|
|
table: {
|
|
minWidth: 650,
|
|
},
|
|
});
|
|
|
|
const [order, setOrder] = React.useState('asc');
|
|
const [orderBy, setOrderBy] = React.useState('calories');
|
|
const [singerState, setSingerState] = React.useState({loading: true, duetData: []})
|
|
const classes = useStyles();
|
|
|
|
const handleRequestSort = (event, property) => {
|
|
const isAsc = orderBy === property && order === 'asc';
|
|
setOrder(isAsc ? 'desc' : 'asc');
|
|
setOrderBy(property);
|
|
};
|
|
useEffect(() => {
|
|
// We should only fetch once!
|
|
if (singerState.loading) {
|
|
fetch(dataURL).then((res) => res.json().then((data)=>{
|
|
setSingerState({duetData: data, loading: false })
|
|
}));
|
|
}
|
|
}, [setSingerState]);
|
|
|
|
if (singerState.loading) {
|
|
return <p>Sorry, still loading...</p>
|
|
}
|
|
|
|
let dd = singerState.duetData
|
|
|
|
return (
|
|
<TableContainer component={Paper}
|
|
order={order}
|
|
orderBy={orderBy}
|
|
onRequestSort={handleRequestSort}>
|
|
<Table className={classes.table} size="small" aria-label="simple table">
|
|
<EnhancedTableHead onRequestSort={handleRequestSort}>
|
|
<TableRow>
|
|
<TableCell>Song Name</TableCell>
|
|
<TableCell align="right">Sings</TableCell>
|
|
</TableRow>
|
|
</EnhancedTableHead>
|
|
<TableBody>
|
|
{stableSort(dd, getComparator(order, orderBy))
|
|
.map((row, index) => {
|
|
const labelId = `enhanced-table-${index}`;
|
|
|
|
return (
|
|
<TableRow key={row.singerName} >
|
|
<TableCell component="th" id={labelId} scope="row" padding="none">
|
|
{row.singerName}
|
|
</TableCell>
|
|
<TableCell align="right">{row.singCount}</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
}
|
|
|
|
export default TopTenSingers;
|