timer not fully working

src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx

@@ -54,7 +54,7 @@ function startOrResumeRec() {
     audioChunks.length = 0;
     _mediaRecorder.start();
   }
-  timer.start();
+  timer.resume();
 }
 function restartRec() {
   if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
@@ -68,6 +68,7 @@ function restartRec() {
 // TODO: Handle turning off the recorder to remove the browser indicator
 function VoiceMailRecorder({ fnRequestResult, fnHowToSubmit }) {
   const [state, setState] = React.useState('unknown');
+  const [timeRecording, setTimeRecording] = React.useState(null);
 
   async function initiateInitiation() {
     if (!_mediaRecorder) {
@@ -102,22 +103,26 @@ function VoiceMailRecorder({ fnRequestResult, fnHowToSubmit }) {
     }
   }
 
-  // Cleanup after components unmount
-  useEffect(() => () => {
-    console.log('VoiceMailRecorder unmount');
+  useEffect(() => {
+    const timerUpdater = setInterval(() => {
+      setTimeRecording(timer.getTimeStr);
+    }, 500); // .5 seconds
 
-    if (_mediaRecorder) {
-      _mediaRecorder = null;
-    }
-    if (_stream) {
-      _stream.getTracks().forEach((track) => track.stop());
-      _stream = null;
-    }
-    // stopAndSubmit(true);
+    // Cleanup after components unmount
+    return () => {
+      clearInterval(timerUpdater);
+      if (_mediaRecorder) {
+        _mediaRecorder = null;
+      }
+      if (_stream) {
+        // To remove the browser's recording indicator
+        _stream.getTracks().forEach((track) => track.stop());
+        _stream = null;
+      }
+    };
   }, []);
-  // fnCancel(() => console.log('meh'));
-  fnRequestResult(stopAndSubmit);
 
+  fnRequestResult(stopAndSubmit);
   initiateInitiation();
 
   return (
@@ -130,7 +135,7 @@ function VoiceMailRecorder({ fnRequestResult, fnHowToSubmit }) {
           <Text variant="b1">
             {state}
           </Text>
-          <Text variant="b3">for some time maybe?</Text>
+          <Text variant="b3">{`for ${timeRecording}`}</Text>
         </div>
         {(_mediaRecorder && _mediaRecorder.state === 'recording')
           ? (<IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton>)

src/util/Timer.js

@@ -1,3 +1,7 @@
+function nToStr(num) {
+  return num.toString().padStart(2, '0');
+}
+
 class Timer {
   constructor() {
     this.savedTime = 0;
@@ -11,12 +15,41 @@ class Timer {
 
   pause() {
     if (!this.timeStarted) return;
-    this.savedTime += this.timeStarted - new Date().getTime();
+    this.savedTime += new Date().getTime() - this.timeStarted;
     this.timeStarted = null;
   }
 
-  get gett() {
-    return this.savedTime + (this.timeStarted - new Date().getTime());
+  get getTimeMs() {
+    let time = this.savedTime;
+    if (this.timeStarted) time += new Date().getTime() - this.timeStarted;
+    return time;
+  }
+
+  get getTimeStr() {
+    let time = this.getTimeMs;
+    let hours = 0;
+    let minutes = 0;
+    let seconds = 0;
+
+    // Hours
+    while (time >= 3600000) {
+      hours += 1;
+      time -= 3600000;
+    }
+    // Minutes
+    while (time >= 60000) {
+      minutes += 1;
+      time -= 60000;
+    }
+    // Seconds
+    while (time >= 1000) {
+      seconds += 1;
+      time -= 1000;
+    }
+
+    return hours === 0
+      ? `${nToStr(minutes)}:${nToStr(seconds)}`
+      : `${nToStr(hours)}:${nToStr(minutes)}:${nToStr(seconds)}`;
   }
 
   stop() {