Add timer input type

FRC2713 · Nov 27, 2024 · 1fbf97e · 1fbf97e
1 parent 7ca6d19
commit 1fbf97e
Showing 1 changed file with 28 additions and 15 deletions.
diff --git a/src/components/inputs/TimerInput.tsx b/src/components/inputs/TimerInput.tsx
@@ -1,4 +1,4 @@
-import { Pause, Play, X } from 'lucide-react';
+import { Pause, Play, TimerReset, Undo } from 'lucide-react';
 import BaseInputProps from './BaseInputProps';
 import { useState, useEffect, useMemo } from 'react';
 export interface TimerInputProps extends BaseInputProps {
@@ -8,6 +8,9 @@ export interface TimerInputProps extends BaseInputProps {
   defaultValue?: number;
 }
 function getAvg(array: any[]) {
+  if (array.length === 0) {
+    return 0;
+  }
   let avg = 0;
   array.forEach((num) => {
     avg += num;
@@ -19,39 +22,42 @@ export default function TimerInput(data: TimerInputProps) {
   const [isRunning, toggleTimer] = useState(false);
   const [times, setTimes] = useState<number[]>([]);
 
-  console.log(data.value);
+  useEffect(() => {
+    if (data.value === data.defaultValue && times.length > 0) {
+      clearTimer();
+      setTimes([]);
+    }
+  }, [data.value, data.defaultValue, times]);
 
   function startStop() {
     toggleTimer(!isRunning);
   }
-  function clearTimer() {
+
+  function clearTimer(update: boolean = false) {
+    if (update) {
+      updateTimes(time / 100);
+    }
     setTime(0);
     toggleTimer(false);
   }
+
   function updateTimes(newValue: number) {
+    data.onChange(getAvg([...times, newValue]))
     setTimes((old) => ([...old, newValue]));
   }
+
   useEffect(() => {
     let intervalId: number;
     if (isRunning) {
       intervalId = setInterval(() => setTime(time + (data.step || 1)), 10);
     }
-    if (!isRunning && time !== 0) {
-      updateTimes(time / 100)
-    }
     return () => clearInterval(intervalId);
   }, [isRunning, time]);
 
-  const avg = useMemo(() => {
-    const avg2 = getAvg(times);
-    data.onChange(avg2);
-    return avg2;
-  }, [times]);
 
   return (
     <div className="my-2 flex flex-col items-center justify-center">
-      <p className='font-mono text-wrap'>{times.map((t) => { return `${t}` }).join(',')}</p>
-      <p className='font-bold'>{avg.toFixed(3)}</p>
+      <p className='font-bold'>{`${data.value.toFixed(3)} (${times.length})`}</p>
       <h2 className="px-4 text-2xl dark:text-white">{(time / 100).toFixed(2)}</h2>
       <div className="my-2 flex flex-row items-center justify-center gap-4">
         <button
@@ -64,9 +70,16 @@ export default function TimerInput(data: TimerInputProps) {
         <button
           className="focus:shadow-outline rounded bg-gray-500 text-white hover:bg-red-700 focus:outline-none dark:bg-gray-700 p-2"
           type="button"
-          onClick={() => clearTimer()}
+          onClick={() => clearTimer(true)}
+        >
+          <TimerReset className="size-4" />
+        </button>
+        <button
+          className="focus:shadow-outline rounded bg-gray-500 text-white hover:bg-red-700 focus:outline-none dark:bg-gray-700 p-2"
+          type="button"
+          onClick={() => clearTimer(false)}
         >
-          <X className="size-4" />
+          <Undo className="size-4" />
         </button>
       </div>
     </div>