diff options
Diffstat (limited to 'src/components/Scoreboard')
-rw-r--r-- | src/components/Scoreboard/Scoreboard.js | 58 |
1 files changed, 34 insertions, 24 deletions
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js index f231f55..5c83735 100644 --- a/src/components/Scoreboard/Scoreboard.js +++ b/src/components/Scoreboard/Scoreboard.js @@ -1,23 +1,25 @@ import React, { useEffect, useState } from 'react'; -import { - Container, - Typography, - Grid, -} from "@material-ui/core"; - import { makeStyles } from "@material-ui/core/styles"; import { get } from "../../requests"; + +import SmartList from "../SmartList/SmartList"; import SolutionCard from "../SolutionCard/SolutionCard"; import Loading from "../Loading/Loading"; +import Window from "../Window/Window"; const useStyles = makeStyles(theme => ({ - pageHeader: { - textAlign: 'center', - margin: theme.spacing(2), - }, + cell: { + display: 'flex', + justifyContent: 'center', + padding: theme.spacing(4), + + '& .MuiCard-root': { + width: '30%', + } + } })); const Scoreboard = () => { @@ -38,21 +40,29 @@ const Scoreboard = () => { setTimeout(updateSolutions, 300); }, []); + const renderItem = ({ index, style }) => { + return ( + <div style={style} className={classes.cell}> + <SolutionCard data={solutions[index]} removeThisCard={removeSolution}/> + </div> + ) + }; + return ( - <Container maxWidth="xs"> - <Typography variant="h3" className={classes.pageHeader}> - Scoreboard - </Typography> - {(solutions.length === 0) && <Loading />} - <Grid container justify="center" direction="column" spacing={3}> - {solutions.slice(0, 30).map(solution => ( - <Grid item key={solution.id}> - <SolutionCard data={solution} removeThisCard={removeSolution}/> - </Grid> - ))} - </Grid> - </Container> - ); + <Window type="mono"> + { solutions.length === 0 && + <div className={classes.cell}> + <Loading/> + </div> + } + <SmartList + itemSize={300} + itemCount={solutions.length} + renderItem={renderItem} + /> + </Window> + ) }; + export default Scoreboard; |