Merge branch 'master' into theme

Also pefrorm extra cleanup

1 files changed, 75 insertions, 51 deletions

diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
index 1b7dec4..f840429 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/Timer/Timer.js
@@ -1,66 +1,90 @@
 import React, { useState, useEffect } from 'react';
 
-import { Typography } from "@material-ui/core";
+import { post } from '../../requests';
 
-import {post} from '../../requests';
+import { Typography } from '@material-ui/core';
 
 const Timer = () => {
-    const SPACE = 32
-    const [time, setTime] = useState("00:00:00")
-    const [running, setRunning] = useState(false);
-    const [timer, setTimer] = useState(0);
-    let startingTime;
-
-    
-    const handleKeyUp = event => {
-        if (event.keyCode === SPACE){
-            if (!running) {
-                startingTime = Date.now();
-                setRunning(true);
-                setTimer(setInterval(() => setTime(() => {
-                    const timeGap = Math.floor((Date.now() - startingTime) / 10);
-                    let resultTime = "";
-
-                    const minute = Math.floor(timeGap / 6000);
-                    if (minute < 10) resultTime += '0';
-                    resultTime += minute + ':';
-
-                    let second = Math.floor(timeGap / 100);
-                    if (second < 10) resultTime += '0';
-                    if (second > 59) second %= 60
-                    resultTime += second + ':';
-
-                    const mill = timeGap % 100;
-                    if (mill < 10) resultTime += '0';
-                    resultTime += mill;
-
-                    return resultTime;
-                }), 10))
-            } else {
-                clearInterval(timer);
-                setRunning(false);
-                startingTime = 0;
-                post('solutions/', {result: time});
-                return false;
-            }
-        }
+  const SPACE = 32;
+  const maxCountdown = 15000;
+  const [time, setTime] = useState('00:15:00');
+  const [isRunning, setIsRunning] = useState(false);
+  const [timer, setTimer] = useState(0);
+  const [isCountdown, setIsCountdown] = useState(false);
+  let startingTime;
+
+  const handleKeyPress = event => {
+    if (event.keyCode === SPACE && !isRunning ) {
+      if (!isCountdown) {
+        startingTime = Date.now();
+        setIsCountdown(true);
+        setTimer(setInterval(() => setTime(() => {
+          const timeDiff = maxCountdown - (Date.now() - startingTime);
+          if (timeDiff < 0) {
+            setIsRunning(true);
+            setTime('00:00:00');
+            clearInterval(timer);
+          }
+          return convertTimeToString(timeDiff);
+        }), 10));
+      }
     }
+  };
+
+  const handleKeyUp = event => {
+    clearInterval(timer);
+    if (event.keyCode === SPACE){
+      if (!isRunning) {
+        startingTime = Date.now();
+        setIsRunning(true);
+        setTimer(setInterval(() => setTime(convertTimeToString((Date.now() - startingTime))), 10));
+      } else {
+
+        clearInterval(timer);
+        setIsRunning(false);
+        setIsCountdown(false);
+        startingTime = 0;
+        post('solutions/', {result: time});
+        return false;
+      }
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('keypress', handleKeyPress);
+
+    return () => {
+      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('keypress', handleKeyPress);
+    };
+  });
 
+  return (
+    <Typography variant="h2"> {time} </Typography>
+  );
+};
 
-    useEffect(() => {
-        window.addEventListener("keyup", handleKeyUp);
 
-        return () => {
-            window.removeEventListener("keyup", handleKeyUp);
-        };
-    })
 
+const convertTimeToString = timeDiff => {
+  let resultTime = '';
 
-    return (
-      <Typography variant="h2"> {time} </Typography>
-    );
+  const minute = Math.floor(timeDiff / 60000);
+  if (minute < 10) resultTime += '0';
+  resultTime += minute + ':';
 
-}
+  let second = Math.floor(timeDiff / 1000);
+  if (second < 10) resultTime += '0';
+  if (second > 59) second %= 60;
+  resultTime += second + ':';
 
+  const mill = Math.floor((timeDiff % 1000) / 10);
+  if (mill < 10) resultTime += '0';
+  resultTime += mill;
+
+  return resultTime;
+};
 
 export default Timer;
+