From 17cb9289189577bc39e9410acbedafea60674ca0 Mon Sep 17 00:00:00 2001
From: Lucia <llcsaturnaliam@gmail.com>
Date: Sat, 15 Feb 2025 12:44:04 -0600
Subject: [PATCH] fixed up the timer some (#58)

* removed reset button (not really needed and way too close to the start/stop)

* lil bit of code cleanup

* time now synced w the data and is persistent

* fixed a bit of styling
---
 app/api/data.ts          |  7 +++++++
 app/api/data_types.ts    |  1 +
 app/components/Timer.tsx | 41 ++++++++++++++++++----------------------
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/app/api/data.ts b/app/api/data.ts
index 5faf1ad..36c389f 100644
--- a/app/api/data.ts
+++ b/app/api/data.ts
@@ -114,4 +114,11 @@ export function updateTags(tag: Tag, removeTag?: boolean): Promise<void> {
         data["tags"] = [...tags];
         return data;
     });
+}
+
+export function updateDefenseTime(time: number): Promise<void> {
+    return modifyMatchData((data) => {
+        data["teleop"]["defenseTime"] = time;
+        return data;
+    });
 }
\ No newline at end of file
diff --git a/app/api/data_types.ts b/app/api/data_types.ts
index 200fca0..542c03d 100644
--- a/app/api/data_types.ts
+++ b/app/api/data_types.ts
@@ -41,6 +41,7 @@ export class AutoData extends PhaseData {
 
 export class TeleopData extends PhaseData {
     climb: CLIMB_TYPE = CLIMB_TYPE.DEEP_CLIMB;
+    defenseTime: number = 0;
 }
 
 export class MatchData {
diff --git a/app/components/Timer.tsx b/app/components/Timer.tsx
index a868dcd..8e82467 100644
--- a/app/components/Timer.tsx
+++ b/app/components/Timer.tsx
@@ -1,15 +1,25 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';  
+import { getMatchData, updateDefenseTime } from '../api/data';
+import SectionTitle from './SectionTitle';
+import { BACKGROUND_COLOR, TEXT_COLOR } from '../consts';
 
 function Stopwatch() {
     const [time, setTime] = useState(0);
     const [isRunning, setIsRunning] = useState(false);
     const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
+    useEffect(() => {
+        getMatchData().then((data) => {
+            setTime(data["teleop"]["defenseTime"] ?? 0);
+        });
+    }, []);
+
     const startStop = () => {
-        if (isRunning) {
-            if (intervalRef.current) clearInterval(intervalRef.current);
+        if (isRunning && intervalRef.current) {
+            clearInterval(intervalRef.current);
+            updateDefenseTime(time + 10);
         } else {
             intervalRef.current = setInterval(() => {
                 setTime((prevTime: number) => prevTime + 10);
@@ -19,13 +29,6 @@ function Stopwatch() {
         setIsRunning(!isRunning);
     };
 
-
-    const reset = () => {
-        if (intervalRef.current) clearInterval(intervalRef.current);
-        setTime(0);
-        setIsRunning(false);
-    };
-
     
     const formatTime = (ms: number) => {
         const minutes = Math.floor(ms / 60000);
@@ -36,15 +39,11 @@ function Stopwatch() {
 
     return (
         <View style={styles.container}>
+            <SectionTitle>Defense Time</SectionTitle>
             <Text style={styles.time}>{formatTime(time)}</Text>
-            <View style={styles.buttons}>
-                <Button mode="contained" onPress={startStop}>
-                    {isRunning ? 'Stop' : 'Start'}
-                </Button>
-                <Button mode="outlined" onPress={reset}>
-                    Reset
-                </Button>
-            </View>
+            <Button mode="contained" onPress={startStop} textColor={TEXT_COLOR} buttonColor={BACKGROUND_COLOR}>
+                {isRunning ? 'Stop' : 'Start'}
+            </Button>
         </View>
     );
 };
@@ -58,11 +57,7 @@ const styles = StyleSheet.create({
   time: {
     fontSize: 15,
     marginBottom: 10,
-  },
-  buttons: {
-    flexDirection: 'row',
-    gap: 10,
-  },
+  }
 });
 
 export default Stopwatch;