Merge pull request #32 from Eug-VS/window

Create Window component and refactor existing pages to use it

7 files changed, 193 insertions, 52 deletions

diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js
new file mode 100644
index 0000000..d5b9340
--- /dev/null
+++ b/src/components/ContentSection/ContentSection.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  Typography,
+  Divider,
+  makeStyles
+} from "@material-ui/core";
+
+
+const useStyles = makeStyles(theme => ({
+  content: {
+    padding: theme.spacing(2),
+  }
+}));
+
+const ContentSection = ({ sectionName, children }) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <Typography variant="h4">{sectionName}</Typography>
+      <Divider variant="middle"/>
+      <div className={classes.content}>
+        {children}
+      </div>
+    </>
+  );
+
+};
+
+
+export default ContentSection;
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index a101a5b..2d9bb80 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -7,6 +7,7 @@ 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 => ({
@@ -49,17 +50,20 @@ const Scoreboard = () => {
     )
   };
 
-
-  return (solutions.length === 0) ?
-    <div className={classes.cell}>
-      <Loading/>
-    </div>
-    :
-    <SmartList
-      cellHeight={300}
-      itemCount={solutions.length}
-      renderItem={renderItem}
-    />
+  return (
+    <Window type="mono">
+      { solutions.length === 0 &&
+      <div className={classes.cell}>
+        <Loading/>
+      </div>
+      }
+      <SmartList
+        itemSize={300}
+        itemCount={solutions.length}
+        renderItem={renderItem}
+      />
+    </Window>
+  )
 };
 
 
diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js
index 6cd774b..975cbbd 100644
--- a/src/components/SmartList/SmartList.js
+++ b/src/components/SmartList/SmartList.js
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { FixedSizeList } from "react-window";
+import { FixedSizeList } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core';
 
 
 const useStyles = makeStyles(theme => ({
@@ -12,25 +13,25 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const SmartList = ({ height, width, cellHeight, itemCount, renderItem }) => {
+const SmartList = ({ itemSize, 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>
+    <div style={{ flex: '1 1 auto'}}>
+      <AutoSizer>
+        {({ width, height }) => (
+          <FixedSizeList
+            height={height}
+            width={width}
+            itemSize={itemSize}
+            itemCount={itemCount}
+            className={classes.root}
+          >
+            {renderItem}
+          </FixedSizeList>
+        )}
+      </AutoSizer>
+    </div>
   );
 };
 
diff --git a/src/components/Timer/Timer.js b/src/components/TimerPage/Timer/Timer.js
index 99356a5..92b153d 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/TimerPage/Timer/Timer.js
@@ -8,7 +8,7 @@ const useStyles = makeStyles(theme => ({
     textAlign: 'center',
     padding: theme.spacing(5),
     background: theme.palette.primary.main,
-    marginTop: theme.spacing(25),
+    marginTop: theme.spacing(20),
   },
 }));
 
diff --git a/src/components/TimerPage/TimerPage.js b/src/components/TimerPage/TimerPage.js
index f304b46..22781bc 100644
--- a/src/components/TimerPage/TimerPage.js
+++ b/src/components/TimerPage/TimerPage.js
@@ -1,19 +1,22 @@
 import React from 'react';
 
-import { Grid, Box } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { post } from '../../requests';
 
-import Timer from "../Timer/Timer";
+import Window from "../Window/Window";
+import ContentSection from "../ContentSection/ContentSection";
+import Timer from "./Timer/Timer";
+import SmartList from "../SmartList/SmartList";
 import SolutionCard from "../SolutionCard/SolutionCard";
 
-import { post } from '../../requests';
+import { Typography, makeStyles } from "@material-ui/core";
 
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: theme.spacing(5, 4, 4, 4),
+  primary: {
+    padding: theme.spacing(4),
+  },
+  cell: {
+    padding: theme.spacing(5),
   },
 }));
 
@@ -36,21 +39,36 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
     setRecentSolutions(recentSolutions.filter((solution => solution.id !== id)));
   };
 
+  const renderItem = ({ index, style }) => {
+    const solution = recentSolutions[index];
+    return (
+      <div style={style} className={classes.cell}>
+        <SolutionCard data={solution} removeThisCard={removeSolution} />
+      </div>
+    );
+  };
+
   return (
-    <Box className={classes.root}>
-      <Grid container direction="row" justify="space-around" spacing={8}>
-        <Grid item xs={6}>
-          <Timer registerResult={registerResult} style={{ position: 'fixed' }}/>
-        </Grid>
-        <Grid item xs={4} container direction="column" spacing={5}>
-          {recentSolutions.slice(0, 3).map(solution => (
-            <Grid item key={solution.id}>
-              <SolutionCard data={solution} removeThisCard={removeSolution}/>
-            </Grid>
-          ))}
-        </Grid>
-      </Grid>
-    </Box>
+    <>
+      <Window type="primary">
+        <div className={classes.primary}>
+          <ContentSection sectionName="Welcome to ChronoCube!">
+            <Typography>
+              Here is some text about how cool this application is, why you should use it
+              and how to make it better!
+            </Typography>
+          </ContentSection>
+          <Timer registerResult={registerResult} />
+        </div>
+      </Window>
+      <Window type="secondary" name="Recent solutions">
+        <SmartList
+          itemSize={270}
+          itemCount={recentSolutions.length}
+          renderItem={renderItem}
+        />
+      </Window>
+    </>
   );
 };
 
diff --git a/src/components/Window/Window.js b/src/components/Window/Window.js
new file mode 100644
index 0000000..63bd6ba
--- /dev/null
+++ b/src/components/Window/Window.js
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Typography, Divider, makeStyles } from "@material-ui/core";
+
+import WindowSurface from "./WindowSurface/WindowSurface";
+
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    padding: theme.spacing(1, 0, 1, 2),
+    background: theme.palette.background.elevation,
+  },
+}));
+
+
+const Window = ({ type, name, children }) => {
+  const classes = useStyles();
+
+  const size = {
+    height: '85vh',
+  };
+
+  const position = {
+    bottom: '3vh',
+  };
+
+  if (type === 'primary') {
+    size.width = '63vw';
+    position.left = '2vw';
+  } else if (type === 'secondary') {
+    size.width = '31vw';
+    position.right = '2vw';
+  } else if (type === 'mono') {
+    position.left = '2vw';
+    position.right = '2vw';
+  }
+
+  return (
+    <WindowSurface
+      size={size}
+      position={position}
+    >
+      {name &&
+      <div>
+        <Typography variant="h5" className={classes.header}>{name}</Typography>
+        <Divider />
+      </div>
+      }
+      {children}
+    </WindowSurface>
+  );
+};
+
+
+export default Window;
diff --git a/src/components/Window/WindowSurface/WindowSurface.js b/src/components/Window/WindowSurface/WindowSurface.js
new file mode 100644
index 0000000..d1d1510
--- /dev/null
+++ b/src/components/Window/WindowSurface/WindowSurface.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Paper, makeStyles } from "@material-ui/core";
+
+
+const useStyles = makeStyles(theme => ({
+  surface: {
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    background: theme.palette.background.elevation,
+  }
+}));
+
+
+const WindowSurface = ({ size, position, children }) => {
+  const classes = useStyles();
+
+  return (
+    <Paper
+      elevation={3}
+      style={{...size, ...position}}
+      className={classes.surface}
+    >
+      {children}
+    </Paper>
+  )
+};
+
+
+export default WindowSurface;
\ No newline at end of file