aboutsummaryrefslogtreecommitdiff
path: root/src/components/Scoreboard
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Scoreboard')
-rw-r--r--src/components/Scoreboard/Scoreboard.js58
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;