[Feature] - Add Timer

.eslintrc.js

@@ -32,10 +32,7 @@ module.exports = {
             'error',
             2
         ],
-        'linebreak-style': [
-            'error',
-            'unix'
-        ],
+        'linebreak-style': 0,
         'quotes': [
             'error',
             'single',
@@ -45,6 +42,10 @@ module.exports = {
             'error',
             'always'
         ],
+        "prettier/prettier": ["error", {
+           "endOfLine":"auto"
+         }],
+         'no-console': 'off',
         'react/prop-types': 0,
         '@typescript-eslint/explicit-module-boundary-types': 0,
         '@typescript-eslint/no-explicit-any': 0

env.development

@@ -0,0 +1 @@
+PORT=3001

package.json

@@ -75,7 +75,7 @@
     "workbox-webpack-plugin": "4.3.1"
   },
   "scripts": {
-    "start": "PORT=3001 node scripts/start.js",
+    "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "lint": "eslint --ext .ts,.tsx src/",

src/components/Timer/Timer.tsx

@@ -1,5 +1,66 @@
 import React from 'react';
+import { makeStyles } from '@material-ui/core';
 
-const Timer: React.FC = () => <h1>Timer</h1>;
+const useStyles = makeStyles(() => ({
+  timer: {
+    position: 'fixed',
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    margin: 0,
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+}));
+
+const Timer = () => {
+  const classes = useStyles();
+  const [minutes, setMintues] = React.useState(0);
+  const [seconds, setSeconds] = React.useState(-5);
+  const ref = React.useRef<any>();
+
+  const stopTimer = () => {
+    clearInterval(ref.current);
+    ref.current = null;
+  };
+
+  const startTimer = () => {
+    ref.current = setInterval(() => {
+      setSeconds((s) => {
+        if (s + 1 === 60) {
+          setMintues((m) => m + 1);
+          return 0;
+        }
+        return s + 1;
+      });
+    }, 1000);
+  };
+
+  const toggleTimer = () => {
+    if (ref.current != null) {
+      stopTimer();
+    } else {
+      startTimer();
+    }
+  };
+
+  return (
+    <div
+      className={classes.timer}
+      tabIndex={0}
+      role="button"
+      onClick={toggleTimer}
+      onKeyDown={toggleTimer}
+    >
+      <h1>
+        {minutes < 10 ? 0 : ''}
+        {minutes}:{seconds < 10 ? 0 : ''}
+        {seconds < 0 ? Math.abs(seconds) : seconds}
+      </h1>
+    </div>
+  );
+};
 
 export default Timer;