Create initial TimerPage component

Show last 5 results

1 files changed, 18 insertions, 8 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;