Creating a timer component

ui/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "pretty-ms": "^5.0.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-google-maps": "^9.4.5",

ui/src/components/round-timer.component.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import ms from "pretty-ms";
+
+class RoundTimer extends React.Component {
+  constructor(props) {
+    super(props);
+    const { seconds } = this.props;
+    this.state = {
+      running: false,
+      remaining: seconds,
+    }
+  }
+
+  componentDidMount() {
+    this.timer = setInterval(() => this.countDown(), 1000);
+  }
+
+  countDown() {
+    const { remaining } = this.state;
+    
+    this.setState({ remaining: remaining - 1 });
+
+    if (remaining <= 0) { 
+      const { onTimeout } = this.props;
+      clearInterval(this.timer);
+      onTimeout();
+    }
+  }
+  
+  render() {
+    const { remaining } = this.state;
+    return (
+      <div>
+        {remaining > 0 ? <p>Time: {ms(remaining * 1000)}</p> : <p>Time's up!</p>}
+      </div>
+    );
+  }
+}
+
+export default RoundTimer;

ui/yarn.lock

@@ -6831,6 +6831,11 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-ms@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-2.1.0.tgz#348565a753d4391fa524029956b172cb7753097d"
+  integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
+
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -7704,6 +7709,13 @@ pretty-format@^24.8.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty-ms@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-5.0.0.tgz#6133a8f55804b208e4728f6aa7bf01085e951e24"
+  integrity sha512-94VRYjL9k33RzfKiGokPBPpsmloBYSf5Ri+Pq19zlsEcUKFob+admeXr5eFDRuPjFmEOcjJvPGdillYOJyvZ7Q==
+  dependencies:
+    parse-ms "^2.1.0"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"