improve leaderboard functionalities

client/components/portfolio/leaderboard-table/leaderboard-table.js

@@ -14,6 +14,8 @@ import FirstPageIcon from '@material-ui/icons/FirstPage';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 import LastPageIcon from '@material-ui/icons/LastPage';
+import { TableHead } from '@material-ui/core';
+import { useRouter } from 'next/router';
 
 const useStyles1 = makeStyles((theme) => ({
   root: {
@@ -80,11 +82,13 @@ TablePaginationActions.propTypes = {
   rowsPerPage: PropTypes.number.isRequired,
 };
 
-function createData(name, calories, fat) {
-  return { name, calories, fat };
+function createData(name, username, points) {
+  return { name, username, points };
 }
 
-const rows = [
+
+
+/* const rows = [
   createData('Cupcake', 305, 3.7),
   createData('Donut', 452, 25.0),
   createData('Eclair', 262, 16.0),
@@ -98,7 +102,7 @@ const rows = [
   createData('Marshmallow', 318, 0),
   createData('Nougat', 360, 19.0),
   createData('Oreo', 437, 18.0),
-].sort((a, b) => (a.calories < b.calories ? -1 : 1));
+].sort((a, b) => (a.calories < b.calories ? -1 : 1)); */
 
 const useStyles2 = makeStyles({
   table: {
@@ -106,10 +110,12 @@ const useStyles2 = makeStyles({
   },
 });
 
-export default function LeaderBoardTable() {
+export default function LeaderBoardTable(props) {
+  const router = useRouter()
+  const rows =props.data.map((user)=>createData(user.name,user.username,user.coding.points.toFixed(3)))
   const classes = useStyles2();
   const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [rowsPerPage, setRowsPerPage] = React.useState(15);
 
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
 
@@ -122,23 +128,41 @@ export default function LeaderBoardTable() {
     setPage(0);
   };
 
+  const handleClick = (e,uname) => {
+    e.preventDefault()
+    router.push(`/portfolio/${uname}`);
+  }
+
+  console.log('inside TABLE',props.data)
+
   return (
     <TableContainer component={Paper}>
       <Table className={classes.table} aria-label="custom pagination table">
+      <TableHead>
+          <TableRow>
+            <TableCell>Rank</TableCell>
+            <TableCell align="right">Name</TableCell>
+            <TableCell align="right">Username</TableCell>
+            <TableCell align="right">Score</TableCell>
+          </TableRow>
+        </TableHead>
         <TableBody>
           {(rowsPerPage > 0
             ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             : rows
-          ).map((row) => (
-            <TableRow key={row.name}>
+          ).map((row,id) => (
+            <TableRow onClick={(e)=>handleClick(e,row.username)} hover role="checkbox" key={row.username}>
               <TableCell component="th" scope="row">
+                {id+1}
+              </TableCell>
+              <TableCell style={{ width: 160 }} align="right">
                 {row.name}
               </TableCell>
               <TableCell style={{ width: 160 }} align="right">
-                {row.calories}
+                {row.username}
               </TableCell>
               <TableCell style={{ width: 160 }} align="right">
-                {row.fat}
+                {row.points}
               </TableCell>
             </TableRow>
           ))}
@@ -152,7 +176,7 @@ export default function LeaderBoardTable() {
         <TableFooter>
           <TableRow>
             <TablePagination
-              rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+              rowsPerPageOptions={[5, 10,15, 25, { label: 'All', value: -1 }]}
               colSpan={3}
               count={rows.length}
               rowsPerPage={rowsPerPage}