From c5fd0a9f050749563e7d7bf22ae89b023f6af4e9 Mon Sep 17 00:00:00 2001
From: Tran Duc <ducl6337@gmail.com>
Date: Wed, 2 Nov 2022 16:55:35 +0700
Subject: [PATCH] Update Version

---
 src/App.js        | 14 +++++---------
 src/formatTime.js |  8 ++++----
 src/index.css     |  1 +
 src/useTimer.js   | 24 +++++++++++++++++-------
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7392c49..b158fdb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import "Your code here";
+import { formatTime } from "./formatTime";
 import useTimer from "./useTimer";
 
 function App() {
@@ -9,20 +9,16 @@ function App() {
       <h1>Coder Timer</h1>
       <div className="timer__wrapper">
         <div className="timer__display">
-          <p>{"Your code here"}</p>
+          <p>{formatTime(time)}</p>
         </div>
         <div className="button__wrapper">
-          <button className="button" onClick={"Your code here"}>
+          <button className="button" onClick={stopTimer}>
             Stop
           </button>
-          <button
-            className="button"
-            ref={"Your code here"}
-            onClick={"Your code here"}
-          >
+          <button className="button" ref={active} onClick={startTimer}>
             Start
           </button>
-          <button className="button" onClick={"Your code here"}>
+          <button className="button" onClick={resetTimer}>
             Reset
           </button>
         </div>
diff --git a/src/formatTime.js b/src/formatTime.js
index 7007315..3778c7d 100644
--- a/src/formatTime.js
+++ b/src/formatTime.js
@@ -1,8 +1,8 @@
 export const formatTime = (time) => {
-  const getSeconds = "Your code here";
-  const minutes = "Your code here";
-  const getMinutes = "Your code here";
-  const getHours = "Your code here";
+  const getSeconds = `0${time % 60}`.slice(-2);
+  const minutes = `${Math.floor(time / 60)}`;
+  const getMinutes = `0${minutes % 60}`.slice(-2);
+  const getHours = `0${Math.floor(time / 3600)}`.slice(-2);
 
   return `${getHours} : ${getMinutes} : ${getSeconds}`;
 };
diff --git a/src/index.css b/src/index.css
index daf0b31..5a4c87b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,7 @@
 }
 
 body {
+  background-color: rgb(255, 192, 237);
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "", "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
diff --git a/src/useTimer.js b/src/useTimer.js
index 92517e8..7ee711f 100644
--- a/src/useTimer.js
+++ b/src/useTimer.js
@@ -1,21 +1,31 @@
 import { useState, useRef } from "react";
 
 const useTimer = (ini = 0) => {
-  const [time, setTime] = "Your code here";
+  const [time, setTime] = useState(0);
 
-  const isStart = "Your code here";
-  const active = "Your code here";
-  const refInterval = "Your code here";
+  const isStart = useRef(true);
+  const active = useRef();
+  const refInterval = useRef(0);
 
   const startTimer = () => {
-    "Your code here";
     active.current.disabled = true;
+    isStart.current = true;
+    refInterval.current = setInterval(() => {
+      if (isStart.current) {
+        setTime((time) => time + 1);
+      }
+    }, 1000);
   };
+
   const stopTimer = () => {
-    "Your code here";
+    isStart.current = false;
+    clearInterval(refInterval.current);
+    active.current.disabled = false;
   };
+
   const resetTimer = () => {
-    "Your code here";
+    setTime(0);
+    clearInterval(refInterval.current);
     active.current.disabled = false;
   };