Create initial TimerPage component

Show last 5 results

3 files changed, 80 insertions, 10 deletions

diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
index 4712265..69cd30b 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/Timer/Timer.js
@@ -1,10 +1,19 @@
 import React, { useState, useEffect } from 'react';
 
-import { post } from '../../requests';
+import { Paper, Typography } from '@material-ui/core';
+import { makeStyles } from "@material-ui/core/styles";
 
-import { Typography } from '@material-ui/core';
+const useStyles = makeStyles(theme => ({
+  root: {
+    textAlign: 'center',
+    padding: theme.spacing(5),
+    background: theme.palette.primary.main,
+  },
+}));
+
+const Timer = ({ registerResult }) => {
+  const classes = useStyles();
 
-const Timer = () => {
   const SPACE = 32;
   const maxCountdown = 15000;
   const [time, setTime] = useState('00:00:00');
@@ -14,6 +23,7 @@ const Timer = () => {
   let startingTime;
 
   const handleKeyPress = event => {
+    event.preventDefault();
     if (event.keyCode === SPACE && !isRunning ) {
       if (!isCountdown) {
         startingTime = Date.now();
@@ -44,7 +54,7 @@ const Timer = () => {
         setIsRunning(false);
         setIsCountdown(false);
         startingTime = 0;
-        post('solutions/', {result: time});
+        registerResult(time);
         return false;
       }
     }
@@ -61,12 +71,12 @@ const Timer = () => {
   });
 
   return (
-    <Typography variant="h2"> {time} </Typography>
+    <Paper elevation={3} className={classes.root}>
+      <Typography variant="h1"> {time} </Typography>
+    </Paper>
   );
 };
 
-
-
 const convertTimeToString = timeDiff => {
   let resultTime = '';
 
@@ -86,5 +96,5 @@ const convertTimeToString = timeDiff => {
   return resultTime;
 };
 
-export default Timer;
 
+export default Timer;
diff --git a/src/components/TimerPage/TimerPage.js b/src/components/TimerPage/TimerPage.js
new file mode 100644
index 0000000..968faab
--- /dev/null
+++ b/src/components/TimerPage/TimerPage.js
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { Grid, Box } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Timer from "../Timer/Timer";
+import SolutionCard from "../SolutionCard/SolutionCard";
+
+import { post } from '../../requests';
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: theme.spacing(5, 4, 4, 4),
+  },
+}));
+
+const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
+  const classes = useStyles();
+
+  const user = {
+    id: null,
+    username: 'anonymous',
+  };
+
+  const registerResult = result => {
+    const solution = { author_id: user.id, result };
+    post('solutions/', solution).then(response => {
+      setRecentSolutions([response.data].concat(recentSolutions));
+    });
+  };
+
+  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={6}>
+          {recentSolutions.slice(0, 5).map(solution => (
+            <Grid item key={solution.id}>
+              <SolutionCard data={solution} />
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+
+export default TimerPage;
diff --git a/src/index.js b/src/index.js
index 5268b1e..07c50bc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,7 +7,7 @@ import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 
 import theme from "./theme";
 import Header from './components/Header/Header';
-import Timer from './components/Timer/Timer';
+import TimerPage from "./components/TimerPage/TimerPage";
 import Scoreboard from "./components/Scoreboard/Scoreboard";
 
 
@@ -21,13 +21,19 @@ const useStyles = makeStyles(theme => ({
 const App = () => {
 
   const [page, setPage] = useState('app');
+  const [recentSolutions, setRecentSolutions] = useState([]);
 
   const classes = useStyles();
 
   const getPageComponent = page => {
     switch (page) {
       case 'app':
-        return (<Timer/>);
+        return (
+          <TimerPage
+            recentSolutions={recentSolutions}
+            setRecentSolutions={setRecentSolutions}
+          />
+        );
       case 'scoreboard':
         return (<Scoreboard/>);
       default: