twitchsingstools/build/react-frontend/src/Components/TopTenSongs/TopTenSongs.js

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 = "/topsongs/"+ channelName + "/" + adminToken

const headCells = [
  { id: 'songName', numeric: false, disablePadding: true, label: 'Song 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 TopTenSongs() {
  const useStyles = makeStyles({
    table: {
      minWidth: 650,
    },
  });

  const [order, setOrder] = React.useState('asc');
  const [orderBy, setOrderBy] = React.useState('calories');
  const [songState, setSongState] = 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 (songState.loading) {
      fetch(dataURL).then((res) => res.json().then((data)=>{
        setSongState({duetData: data, loading: false })
      }));
    }
  }, [setSongState]);

  if (songState.loading) {
    return <p>Sorry, still loading...</p>
  }
  
  let dd = songState.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.songName} >
                      <TableCell component="th" id={labelId} scope="row" padding="none">
                        {row.songName}
                      </TableCell>
                      <TableCell align="right">{row.singCount}</TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
  );
}

export default TopTenSongs;