From d66419438a83e564583e1e8c28ed6c80d89f5648 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Tue, 7 Jan 2020 22:34:49 +0300
Subject: Implement SmartList component, hide body overflow

---
 src/components/SmartList/SmartList.js | 38 +++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/SmartList/SmartList.js

(limited to 'src/components')

diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js
new file mode 100644
index 0000000..6cd774b
--- /dev/null
+++ b/src/components/SmartList/SmartList.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { FixedSizeList } from "react-window";
+
+import { makeStyles } from "@material-ui/core";
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`,
+  }
+}));
+
+
+const SmartList = ({ height, width, cellHeight, itemCount, renderItem }) => {
+  const classes = useStyles();
+
+  if (!height) {
+    const windowHeight = window.innerHeight;
+    const headerHeight = document.getElementsByClassName("MuiAppBar-root")[0].clientHeight;
+    height = windowHeight - headerHeight
+  }
+
+  return (
+    <FixedSizeList
+      height={height}
+      width={width}
+      itemSize={cellHeight}
+      itemCount={itemCount}
+      className={classes.root}
+    >
+      {renderItem}
+    </FixedSizeList>
+  );
+};
+
+
+export default SmartList;
-- 
cgit v1.2.3


From 20cb625343f4f46bcbea0f654f933f94de074ec1 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Tue, 7 Jan 2020 22:37:41 +0300
Subject: Use full-page SmartList on Scoreboard page

---
 src/components/Scoreboard/Scoreboard.js | 56 ++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 25 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index c7bc6d8..a101a5b 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,23 +1,24 @@
 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";
 
 
 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 = () => {
@@ -40,21 +41,26 @@ const Scoreboard = () => {
     updateSolutions();
   }, []);
 
-  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>
-  );
+  const renderItem = ({ index, style }) => {
+    return (
+      <div style={style} className={classes.cell}>
+        <SolutionCard data={solutions[index]} removeThisCard={removeSolution}/>
+      </div>
+    )
+  };
+
+
+  return (solutions.length === 0) ?
+    <div className={classes.cell}>
+      <Loading/>
+    </div>
+    :
+    <SmartList
+      cellHeight={300}
+      itemCount={solutions.length}
+      renderItem={renderItem}
+    />
 };
 
+
 export default Scoreboard;
-- 
cgit v1.2.3