From 6eea30bf1a5cc2b3330f69d2cde0bb6c1536095e Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 14:17:24 -0500
Subject: [PATCH 01/21] Added useStopwatch hook

---
 src/hooks/useStopWatch.tsx | 73 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/hooks/useStopWatch.tsx

diff --git a/src/hooks/useStopWatch.tsx b/src/hooks/useStopWatch.tsx
new file mode 100644
index 0000000..140220c
--- /dev/null
+++ b/src/hooks/useStopWatch.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export interface Stopwatch {
+  milliseconds: number;
+  laps: number[];
+  minLapTime: number | null;
+  maxLapTime: number | null;
+  isPaused: boolean;
+  resume: () => void;
+  pause: () => void;
+  reset: () => void;
+  lap: () => void;
+}
+
+export function useStopwatch(): Stopwatch {
+  const [milliseconds, setMilliseconds] = useState(0);
+  const [isPaused, setIsPaused] = useState(true);
+  const [laps, setLaps] = useState<number[]>([]);
+
+  const lastTime = useRef(Date.now());
+  const accumulatedTime = useRef(0);
+
+  function resume() {
+    if (!isPaused) return;
+    setIsPaused(false);
+    lastTime.current = Date.now();
+  }
+
+  function pause() {
+    if (isPaused) return;
+    setIsPaused(true);
+    const currentTime = Date.now();
+    accumulatedTime.current += currentTime - lastTime.current;
+    lastTime.current = currentTime;
+  }
+
+  function reset() {
+    setIsPaused(true);
+    lastTime.current = Date.now();
+    setMilliseconds(0);
+    setLaps([]);
+    accumulatedTime.current = 0;
+  }
+
+  function lap() {
+    const lapTime = milliseconds - accumulatedTime.current;
+    setLaps((laps) => {
+      return [...laps, lapTime];
+    });
+  }
+
+  useEffect(() => {
+    if (isPaused) return;
+
+    const interval = setInterval(() => {
+      const currentTime = Date.now();
+      const timePassed = currentTime - lastTime.current;
+      setMilliseconds(timePassed+accumulatedTime.current);
+    }, 10);
+
+    return () => clearInterval(interval);
+  }, [isPaused]);
+
+  return {
+    milliseconds,
+    laps,
+    isPaused,
+    resume,
+    pause,
+    reset,
+    lap,
+  };
+}

From cff975f343c65132cf2c3354bf3dbaf83276f885 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 14:42:16 -0500
Subject: [PATCH 02/21] Created simple stopwatch button with new hook

---
 src/StopWatchButton.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx
index 8768555..2b23033 100644
--- a/src/StopWatchButton.tsx
+++ b/src/StopWatchButton.tsx
@@ -1,8 +1,22 @@
-import { View } from 'react-native';
 
-export default function StopWatchButton() {
+import React from 'react';
+import { Button, View } from 'react-native';
+
+export default function StopwatchButton({ onResume, onReset, onLap, onPause, isPaused }: { 
+  onReset: () => void; 
+  onLap: () => void; 
+  onPause: () => void;
+  onResume: () => void;
+  isPaused: boolean;
+}) {
+
   return (
-    <View >
+    <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+      <Button title="Start" onPress={onResume} disabled={!isPaused} />
+      <Button title="Stop" onPress={onPause} disabled={isPaused} />
+      <Button title="Reset" onPress={onReset} />
+      <Button title="Lap" onPress={onLap}  />
     </View>
   );
-}
\ No newline at end of file
+}
+

From 06c2d4247e0a17e124adba3be5c9f56885d53783 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 16:20:29 -0500
Subject: [PATCH 03/21] Created stopwatch component with stopwatchbutton and
 laps

---
 src/StopWatch.tsx | 71 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 67 insertions(+), 4 deletions(-)

diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
index 5c7eb74..7fdb0bc 100644
--- a/src/StopWatch.tsx
+++ b/src/StopWatch.tsx
@@ -1,8 +1,71 @@
-import { View } from 'react-native';
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import StopwatchButton from './StopWatchButton';
+import { useStopwatch } from './hooks/useStopWatch';
 
-export default function StopWatch() {
+function formatNumber(num: number) {
+  return String(num).padStart(2, '0');
+}
+
+const formatTime = (milliseconds: number) => {
+  const hours = formatNumber(Math.floor(milliseconds / 3600000));
+  const minutes = formatNumber(Math.floor((milliseconds % 3600000) / 60000));
+  const seconds = formatNumber(Math.floor((milliseconds % 60000) / 1000));
+  const centiseconds = formatNumber(Math.floor((milliseconds % 1000) / 10));
+
+  return `${hours}:${minutes}:${seconds}.${centiseconds}`;
+};
+
+export default function Stopwatch() {
+
+  const stopwatch = useStopwatch();
   return (
-    <View >
+    
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Text style={styles.time}>{formatTime(stopwatch.milliseconds)}</Text>
+        <StopwatchButton
+          onResume={stopwatch.resume}
+          onReset={stopwatch.reset}
+          onLap={stopwatch.lap}
+          onPause={stopwatch.pause}
+          isPaused={stopwatch.isPaused}
+        />
+       <ScrollView 
+          style={styles.lapScrollView}>
+            {stopwatch.laps.map((lap, index) => (
+              <Text key={index} style={styles.lap}>
+                Lap {index + 1}: {formatTime(lap)}
+              </Text>
+            ))}
+      </ScrollView> 
+      </View>
     </View>
   );
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  time: {
+    fontSize: 56,
+    fontWeight: '500',
+    marginBottom: 20,
+  },
+  lapScrollView: {
+    maxHeight: 210,
+    width: '100%',
+    marginTop:'10%',
+  },
+  lap: {
+    fontSize: 18,
+    marginTop: 12,
+  },
+});

From 49bd7016c2871b7394fc2fc2fa6005e97407acdb Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 17:12:05 -0500
Subject: [PATCH 04/21] Added min & max lap logic and UI

---
 src/StopWatch.tsx          | 57 ++++++++++++++++++++++++++++++++------
 src/hooks/useStopWatch.tsx | 17 ++++++++++++
 2 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
index 7fdb0bc..c486ede 100644
--- a/src/StopWatch.tsx
+++ b/src/StopWatch.tsx
@@ -31,15 +31,40 @@ export default function Stopwatch() {
           onPause={stopwatch.pause}
           isPaused={stopwatch.isPaused}
         />
-       <ScrollView 
-          style={styles.lapScrollView}>
-            {stopwatch.laps.map((lap, index) => (
-              <Text key={index} style={styles.lap}>
-                Lap {index + 1}: {formatTime(lap)}
-              </Text>
-            ))}
-      </ScrollView> 
-      </View>
+              
+          <ScrollView 
+            style={styles.lapScrollView}
+            contentContainerStyle={styles.lapScrollViewContent}
+          >
+
+          {stopwatch.laps.slice().reverse().map((lap, index) => {
+            let lapColor = 'black'; // Default lap color
+
+            if (stopwatch.laps.length >= 3) {
+              if (lap === stopwatch.minLapTime) {
+                lapColor = 'red'; // Set color to red for minimum lap time
+              }
+              else if (lap === stopwatch.maxLapTime) {
+                lapColor = 'limegreen'; // Set color to green for maximum lap time
+              }
+            }
+
+            return (
+              <React.Fragment key={index}>
+                <View style={styles.lapContentContainer}>
+                  <Text style={[styles.lap, { color: lapColor }]}>
+                    Lap {stopwatch.laps.length - index}
+                  </Text>
+                  <Text style={[styles.lap, { color: lapColor }]}>
+                    {formatTime(lap)}
+                  </Text>
+                </View>
+                <View style={styles.divider} />
+              </React.Fragment>
+            );
+  })}
+          </ScrollView>
+        </View>
     </View>
   );
 }
@@ -54,6 +79,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  lapContentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width:'75%',
+  },
   time: {
     fontSize: 56,
     fontWeight: '500',
@@ -64,8 +94,17 @@ const styles = StyleSheet.create({
     width: '100%',
     marginTop:'10%',
   },
+  lapScrollViewContent: {
+    alignItems: 'center',
+  },
   lap: {
     fontSize: 18,
     marginTop: 12,
   },
+  divider: {
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1,
+    width: '75%',
+    marginTop:6,
+  }
 });
diff --git a/src/hooks/useStopWatch.tsx b/src/hooks/useStopWatch.tsx
index 140220c..fa2e656 100644
--- a/src/hooks/useStopWatch.tsx
+++ b/src/hooks/useStopWatch.tsx
@@ -20,6 +20,18 @@ export function useStopwatch(): Stopwatch {
   const lastTime = useRef(Date.now());
   const accumulatedTime = useRef(0);
 
+  const minLapTime = useRef<number | null>(null);
+  const maxLapTime = useRef<number | null>(null);
+
+  function updateMinAndMaxLapTimes(newLap: number) {
+    if (minLapTime.current === null || newLap < minLapTime.current) {
+      minLapTime.current = newLap;
+    }
+    if (maxLapTime.current === null || newLap > maxLapTime.current) {
+      maxLapTime.current = newLap;
+    }
+  }
+
   function resume() {
     if (!isPaused) return;
     setIsPaused(false);
@@ -39,12 +51,15 @@ export function useStopwatch(): Stopwatch {
     lastTime.current = Date.now();
     setMilliseconds(0);
     setLaps([]);
+    minLapTime.current = null;
+    maxLapTime.current = null;
     accumulatedTime.current = 0;
   }
 
   function lap() {
     const lapTime = milliseconds - accumulatedTime.current;
     setLaps((laps) => {
+      updateMinAndMaxLapTimes(lapTime);
       return [...laps, lapTime];
     });
   }
@@ -65,6 +80,8 @@ export function useStopwatch(): Stopwatch {
     milliseconds,
     laps,
     isPaused,
+    minLapTime: minLapTime.current,
+    maxLapTime: maxLapTime.current,
     resume,
     pause,
     reset,

From f5d8f3c6933ebd2b6f2e41d3faea32b6b4f0b031 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 17:28:16 -0500
Subject: [PATCH 05/21] Put stopwatch component in app.tsx

---
 App.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/App.tsx b/App.tsx
index 0329d0c..dc01a8e 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,11 +1,11 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import StopWatch from './src/StopWatch'; 
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
+      <StopWatch />
     </View>
   );
 }

From 9fd92abe627730b4306089da322a9bbde2875a96 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 17:28:42 -0500
Subject: [PATCH 06/21] Fixed laps problem and optimized with useMemo

---
 src/hooks/useStopWatch.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useStopWatch.tsx b/src/hooks/useStopWatch.tsx
index fa2e656..1d28be9 100644
--- a/src/hooks/useStopWatch.tsx
+++ b/src/hooks/useStopWatch.tsx
@@ -23,6 +23,12 @@ export function useStopwatch(): Stopwatch {
   const minLapTime = useRef<number | null>(null);
   const maxLapTime = useRef<number | null>(null);
 
+  // just so we don't recompute this each time for no reason
+  const totalLaps = useMemo(
+    () => laps.reduce((total, lap) => total + lap, 0),
+    [laps],
+  );
+
   function updateMinAndMaxLapTimes(newLap: number) {
     if (minLapTime.current === null || newLap < minLapTime.current) {
       minLapTime.current = newLap;
@@ -57,7 +63,7 @@ export function useStopwatch(): Stopwatch {
   }
 
   function lap() {
-    const lapTime = milliseconds - accumulatedTime.current;
+    const lapTime = milliseconds - totalLaps;
     setLaps((laps) => {
       updateMinAndMaxLapTimes(lapTime);
       return [...laps, lapTime];

From e9292c0b14ebe96f45c5f6b813af94d5ab33a2e5 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 17:42:33 -0500
Subject: [PATCH 07/21] Changed stopwatch hook name to match other file names

---
 src/StopWatch.tsx          | 4 ++--
 src/hooks/useStopWatch.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
index c486ede..5d1e12f 100644
--- a/src/StopWatch.tsx
+++ b/src/StopWatch.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import StopwatchButton from './StopWatchButton';
-import { useStopwatch } from './hooks/useStopWatch';
+import { useStopWatch } from './hooks/useStopWatch';
 
 function formatNumber(num: number) {
   return String(num).padStart(2, '0');
@@ -18,7 +18,7 @@ const formatTime = (milliseconds: number) => {
 
 export default function Stopwatch() {
 
-  const stopwatch = useStopwatch();
+  const stopwatch = useStopWatch();
   return (
     
     <View style={styles.container}>
diff --git a/src/hooks/useStopWatch.tsx b/src/hooks/useStopWatch.tsx
index 1d28be9..341c506 100644
--- a/src/hooks/useStopWatch.tsx
+++ b/src/hooks/useStopWatch.tsx
@@ -12,7 +12,7 @@ export interface Stopwatch {
   lap: () => void;
 }
 
-export function useStopwatch(): Stopwatch {
+export function useStopWatch(): Stopwatch {
   const [milliseconds, setMilliseconds] = useState(0);
   const [isPaused, setIsPaused] = useState(true);
   const [laps, setLaps] = useState<number[]>([]);

From 329fec0f8e3a214b336e8fd1a607b08dca7e0df4 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 21:33:45 -0500
Subject: [PATCH 08/21] Modified tests to match design choices and added one
 for max/min laps

---
 src/StopWatch.tsx       |   6 ++-
 src/StopWatchButton.tsx |   8 +--
 tests/Stopwatch.test.js | 107 +++++++++++++++++++++++++++++++---------
 3 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
index 5d1e12f..00a072c 100644
--- a/src/StopWatch.tsx
+++ b/src/StopWatch.tsx
@@ -35,6 +35,7 @@ export default function Stopwatch() {
           <ScrollView 
             style={styles.lapScrollView}
             contentContainerStyle={styles.lapScrollViewContent}
+            testID='lap-list'
           >
 
           {stopwatch.laps.slice().reverse().map((lap, index) => {
@@ -52,10 +53,10 @@ export default function Stopwatch() {
             return (
               <React.Fragment key={index}>
                 <View style={styles.lapContentContainer}>
-                  <Text style={[styles.lap, { color: lapColor }]}>
+                  <Text style={[styles.lap, { color: lapColor }]} testID={`lap-${index}`}>
                     Lap {stopwatch.laps.length - index}
                   </Text>
-                  <Text style={[styles.lap, { color: lapColor }]}>
+                  <Text style={[styles.lap, { color: lapColor }]} testID={`time-${index}`}>
                     {formatTime(lap)}
                   </Text>
                 </View>
@@ -88,6 +89,7 @@ const styles = StyleSheet.create({
     fontSize: 56,
     fontWeight: '500',
     marginBottom: 20,
+    minWidth:320,
   },
   lapScrollView: {
     maxHeight: 210,
diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx
index 2b23033..d6a9a85 100644
--- a/src/StopWatchButton.tsx
+++ b/src/StopWatchButton.tsx
@@ -12,10 +12,10 @@ export default function StopwatchButton({ onResume, onReset, onLap, onPause, isP
 
   return (
     <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
-      <Button title="Start" onPress={onResume} disabled={!isPaused} />
-      <Button title="Stop" onPress={onPause} disabled={isPaused} />
-      <Button title="Reset" onPress={onReset} />
-      <Button title="Lap" onPress={onLap}  />
+      <Button testID='start-button' title="Start" onPress={onResume} disabled={!isPaused} />
+      <Button testID='stop-button' title="Stop" onPress={onPause} disabled={isPaused} />
+      <Button testID='reset-button' title="Reset" onPress={onReset} />
+      <Button testID='lap-button' title="Lap" onPress={onLap}  />
     </View>
   );
 }
diff --git a/tests/Stopwatch.test.js b/tests/Stopwatch.test.js
index d5e9f1f..83180aa 100644
--- a/tests/Stopwatch.test.js
+++ b/tests/Stopwatch.test.js
@@ -1,55 +1,114 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
+import { render, fireEvent, act, waitFor } from '@testing-library/react-native';
 import Stopwatch from '../src/Stopwatch';
 
+jest.useFakeTimers();
+
 describe('Stopwatch', () => {
   test('renders initial state correctly', () => {
     const { getByText, queryByTestId } = render(<Stopwatch />);
     
-    expect(getByText('00:00:00')).toBeTruthy();
-    expect(queryByTestId('lap-list')).toBeNull();
+    expect(getByText('00:00:00.00')).toBeTruthy();
+    const lapOneTime = queryByTestId('time-0');
+    expect(lapOneTime).toBeNull();
   });
 
   test('starts and stops the stopwatch', () => {
     const { getByText, queryByText } = render(<Stopwatch />);
     
     fireEvent.press(getByText('Start'));
-    expect(queryByText(/(\d{2}:){2}\d{2}/)).toBeTruthy();
+    expect(queryByText(/(\d{2}:){2}\d{2}\.\d{2}/)).toBeTruthy();
 
     fireEvent.press(getByText('Stop'));
-    expect(queryByText(/(\d{2}:){2}\d{2}/)).toBeNull();
+    expect(queryByText(/(\d{2}:){2}\d{2}\.\d{2}/)).toBeTruthy();
   });
 
-  test('pauses and resumes the stopwatch', () => {
+  test('pauses and resumes the stopwatch', async () => {
     const { getByText } = render(<Stopwatch />);
-    
-    fireEvent.press(getByText('Start'));
-    fireEvent.press(getByText('Pause'));
-    const pausedTime = getByText(/(\d{2}:){2}\d{2}/).textContent;
 
-    fireEvent.press(getByText('Resume'));
-    expect(getByText(/(\d{2}:){2}\d{2}/).textContent).not.toBe(pausedTime);
+    act(() => fireEvent.press(getByText('Start')));
+    act(() => jest.advanceTimersByTime(2000));
+    act(() => fireEvent.press(getByText('Stop')));
+
+    const pausedTime = getByText(/(\d{2}:){2}\d{2}\.\d{2}/).children.join();
+  
+    act(() => fireEvent.press(getByText('Start')));
+    act(() => jest.advanceTimersByTime(50));
+
+    const resumedTime = getByText(/(\d{2}:){2}\d{2}\.\d{2}/).children.join();
+  
+    expect(resumedTime).not.toBe(pausedTime);
   });
 
-  test('records and displays lap times', () => {
+  test('records and displays lap times', async () => {
     const { getByText, getByTestId } = render(<Stopwatch />);
+
+    const lapButton = getByTestId('lap-button')
     
     fireEvent.press(getByText('Start'));
-    fireEvent.press(getByText('Lap'));
-    expect(getByTestId('lap-list')).toContainElement(getByText(/(\d{2}:){2}\d{2}/));
 
-    fireEvent.press(getByText('Lap'));
-    expect(getByTestId('lap-list').children.length).toBe(2);
+    act(() => jest.advanceTimersByTime(2000));
+
+    act(() => fireEvent.press(lapButton));
+
+    act(() => jest.advanceTimersByTime(1000));
+
+    act(() => fireEvent.press(lapButton));
+
+    // should have both laps now
+    const lapOneTime = getByTestId('time-0');
+    const lapTwoTime = getByTestId('time-1');
+
+    // verify there are two laps
+    
+
+    // lap two should be 2 seconds and lap one should be 1 second
+    expect(lapTwoTime.children.join()).toBe('00:00:02.00');
+    expect(lapOneTime.children.join()).toBe('00:00:01.00');
   });
 
   test('resets the stopwatch', () => {
-    const { getByText, queryByTestId } = render(<Stopwatch />);
-    
-    fireEvent.press(getByText('Start'));
-    fireEvent.press(getByText('Lap'));
-    fireEvent.press(getByText('Reset'));
+    const { getByText, queryByTestId, getByTestId} = render(<Stopwatch />);
+
+    const startButton = getByTestId('start-button');
+    const lapButton = getByTestId('lap-button');
+    const resetButton = getByTestId('reset-button');
+
+    act(() => fireEvent.press(startButton));
+    act(() => fireEvent.press(lapButton));
+    act(() => fireEvent.press(resetButton));
+
+    expect(getByText('00:00:00.00')).toBeTruthy();
+
+    const lapOneTime = queryByTestId('time-0');
+    expect(lapOneTime).toBeNull();
+  });
+
+  test('minimum and maximum lap are shown appropiately with unique colors', () => {
+    const { getByText, queryByTestId, getByTestId} = render(<Stopwatch />);
+
+    const startButton = getByTestId('start-button');
+    const lapButton = getByTestId('lap-button');
+    const resetButton = getByTestId('reset-button');
+
+    act(() => fireEvent.press(startButton));
+    act(() => jest.advanceTimersByTime(1000));
+    act(() => fireEvent.press(lapButton));
+    act(() => jest.advanceTimersByTime(2000));
+    act(() => fireEvent.press(lapButton));
+    act(() => jest.advanceTimersByTime(5000));
+    act(() => fireEvent.press(lapButton));
+
+    // so min lap is 1 second and max lap is 5 seconds
+    const lapOneTime = getByTestId('time-0');
+    const lapTwoTime = getByTestId('time-1');
+    const lapThreeTime = getByTestId('time-2');
 
-    expect(getByText('00:00:00')).toBeTruthy();
-    expect(queryByTestId('lap-list')).toBeNull();
+    const lapOneColor = lapOneTime.props.style.find(s => s.color).color;
+    const lapThreeColor = lapThreeTime.props.style.find(s => s.color).color;
+    // lapOne is max with 5 seconds and lapThree is min with 1 second
+    // confirm that lapOneTime color is red and lapThreeTime color is green
+    expect(lapOneColor).toBe('limegreen');
+    expect(lapThreeColor).toBe('red');
   });
 });

From 2fbf679440e43dde405d08ea8859e6a2c41e8a06 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 21:41:50 -0500
Subject: [PATCH 09/21] Fixed glitch where you could add laps before starting

---
 src/hooks/useStopWatch.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/useStopWatch.tsx b/src/hooks/useStopWatch.tsx
index 341c506..fccea24 100644
--- a/src/hooks/useStopWatch.tsx
+++ b/src/hooks/useStopWatch.tsx
@@ -63,6 +63,7 @@ export function useStopWatch(): Stopwatch {
   }
 
   function lap() {
+    if(milliseconds === 0) return;
     const lapTime = milliseconds - totalLaps;
     setLaps((laps) => {
       updateMinAndMaxLapTimes(lapTime);

From 5c3e835f81a9a7e9ebd82fc7a073921be097e4ea Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 21:58:30 -0500
Subject: [PATCH 10/21] Fixed another lap glitch where you can add laps when
 paused

---
 src/hooks/useStopWatch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useStopWatch.tsx b/src/hooks/useStopWatch.tsx
index fccea24..cae4b9b 100644
--- a/src/hooks/useStopWatch.tsx
+++ b/src/hooks/useStopWatch.tsx
@@ -63,7 +63,7 @@ export function useStopWatch(): Stopwatch {
   }
 
   function lap() {
-    if(milliseconds === 0) return;
+    if(milliseconds === 0 || isPaused) return;
     const lapTime = milliseconds - totalLaps;
     setLaps((laps) => {
       updateMinAndMaxLapTimes(lapTime);

From bc95e299380c64b8abe0630b180ea7e1be596a6b Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 22:31:38 -0500
Subject: [PATCH 11/21] Cleaned up custom colors and added new test

---
 src/StopWatch.tsx       | 12 +++++++++---
 tests/Stopwatch.test.js | 25 ++++++++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
index 00a072c..4e7560f 100644
--- a/src/StopWatch.tsx
+++ b/src/StopWatch.tsx
@@ -16,6 +16,12 @@ const formatTime = (milliseconds: number) => {
   return `${hours}:${minutes}:${seconds}.${centiseconds}`;
 };
 
+export const lapColors = {
+  default: 'black',
+  minLap: 'red',
+  maxLap: '#5ab068'
+};
+
 export default function Stopwatch() {
 
   const stopwatch = useStopWatch();
@@ -39,14 +45,14 @@ export default function Stopwatch() {
           >
 
           {stopwatch.laps.slice().reverse().map((lap, index) => {
-            let lapColor = 'black'; // Default lap color
+            let lapColor = lapColors.default;
 
             if (stopwatch.laps.length >= 3) {
               if (lap === stopwatch.minLapTime) {
-                lapColor = 'red'; // Set color to red for minimum lap time
+                lapColor = lapColors.minLap;
               }
               else if (lap === stopwatch.maxLapTime) {
-                lapColor = 'limegreen'; // Set color to green for maximum lap time
+                lapColor = lapColors.maxLap;
               }
             }
 
diff --git a/tests/Stopwatch.test.js b/tests/Stopwatch.test.js
index 83180aa..c6d7fda 100644
--- a/tests/Stopwatch.test.js
+++ b/tests/Stopwatch.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, fireEvent, act, waitFor } from '@testing-library/react-native';
 import Stopwatch from '../src/Stopwatch';
+import { lapColors } from '../src/Stopwatch';
 
 jest.useFakeTimers();
 
@@ -89,7 +90,6 @@ describe('Stopwatch', () => {
 
     const startButton = getByTestId('start-button');
     const lapButton = getByTestId('lap-button');
-    const resetButton = getByTestId('reset-button');
 
     act(() => fireEvent.press(startButton));
     act(() => jest.advanceTimersByTime(1000));
@@ -108,7 +108,26 @@ describe('Stopwatch', () => {
     const lapThreeColor = lapThreeTime.props.style.find(s => s.color).color;
     // lapOne is max with 5 seconds and lapThree is min with 1 second
     // confirm that lapOneTime color is red and lapThreeTime color is green
-    expect(lapOneColor).toBe('limegreen');
-    expect(lapThreeColor).toBe('red');
+    expect(lapOneColor).toBe(lapColors.maxLap);
+    expect(lapThreeColor).toBe(lapColors.minLap);
+  });
+
+  test('disable adding laps when paused', () => {
+    const { getByText, queryByTestId, getByTestId} = render(<Stopwatch />);
+
+    const startButton = getByTestId('start-button');
+    const lapButton = getByTestId('lap-button');
+    const stopButton = getByTestId('stop-button');
+
+    act(() => fireEvent.press(startButton));
+    act(() => jest.advanceTimersByTime(1000));
+    act(() => fireEvent.press(stopButton));
+
+    act(() => fireEvent.press(lapButton));
+
+    // shouldn't have added the lap because the stopwatch is paused
+
+    const lapOneTime = queryByTestId('time-0');
+    expect(lapOneTime).toBeNull();
   });
 });

From 8b2f566e0f8ea310e9f012700443aa687d894b37 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 22:42:35 -0500
Subject: [PATCH 12/21] Update README.md

---
 README.md | 90 ++++++++-----------------------------------------------
 1 file changed, 12 insertions(+), 78 deletions(-)

diff --git a/README.md b/README.md
index 6b8b50e..d731803 100644
--- a/README.md
+++ b/README.md
@@ -1,84 +1,18 @@
-# Technical Instructions
-1. Fork this repo to your local Github account.
-2. Create a new branch to complete all your work in.
-3. Test your work using the provided tests
-4. Create a Pull Request against the Shopify Main branch when you're done and all tests are passing
+# Tom Miller's Stopwatch
 
-# Project Overview
-The goal of this project is to implement a stopwatch application using React Native and TypeScript. The stopwatch should have the following functionality:
+## Features
 
-- Start the stopwatch to begin counting time.
-- Stop the stopwatch to pause the timer.
-- Displays Laps when a button is pressed.
-- Reset the stopwatch to zero.
+My stopwatch app has the following features:
+- Start button to start/resume the timer and a stop button to pause it.
+- Reset button to reset the times and laps to 0.
+- Lap button to record the laps easily along with minimum and maximum laps colored to easily identifty your slowest and fastest times.
 
-You will be provided with a basic project structure that includes the necessary files and dependencies. Your task is to write the code to implement the stopwatch functionality and ensure that it works correctly.
+## Tests
 
-## Project Setup
-To get started with the project, follow these steps:
+I added a few extra tests along with the original ones, such as a test to see that the maximum and minimum laps are colored correctly
+and a test to see you can't add laps while paused.
 
-1. Clone the project repository to your local development environment.
+## Design Choices
 
-2. Install the required dependencies by running npm install in the project directory.
-
-3. Familiarize yourself with the project structure. The main files you will be working with are:
-    - /App.tsx: The main component that renders the stopwatch and handles its functionality.
-    - src/Stopwatch.tsx: A separate component that represents the stopwatch display.
-    - src/StopwatchButton.tsx: A separate component that represents the start, stop, and reset buttons.
-
-4. Review the existing code in the above files to understand the initial structure and component hierarchy.
-
-## Project Goals
-Your specific goals for this project are as follows:
-
-1. Implement the stopwatch functionality:
-    - The stopwatch should start counting when the user clicks the start button.
-    - The stopwatch should stop counting when the user clicks the stop button.
-    - The stopwatch should reset to zero when the user clicks the reset button.
-    - The stopwatch should record and display laps when user clicks the lap button.
-
-2. Ensure code quality:
-    - Write clean, well-structured, and maintainable code.
-    - Follow best practices and adhere to the React and TypeScript coding conventions.
-    - Pay attention to code readability, modularity, and performance.
-
-3. Test your code:
-    - Run the application and test the stopwatch functionality to ensure it works correctly.
-    - Verify that the stopwatch starts, stops, resets, and records laps as expected.
-
-4. Code documentation:
-    - Document your code by adding comments and explanatory notes where necessary.
-    - Provide clear explanations of the implemented functionality and any important details.
-
-5. Version control:
-    - Use Git for version control. Commit your changes regularly and push them to a branch in your forked repository.
-
- 6. Create a Pull Request:
-    - Once you have completed the project goals, create a pull request to merge your changes into the main repository.
-    - Provide a clear description of the changes made and any relevant information for the code review.
-
-## Getting Started
-To start working on the project, follow these steps:
-
-1. Clone the repository to your local development environment.
-
-2. Install the required dependencies by running npm install in the project directory.
-
-3. Open the project in your preferred code editor.
-
-4. Review the existing code in the src directory to understand the initial structure and component hierarchy.
-
-5. Implement the stopwatch functionality by modifying the necessary components (App.tsx, Stopwatch.tsx, StopwatchButton.tsx).
-
-6. Run the application using npm start and test the stopwatch functionality.
-
-7. Commit your changes regularly and push them to a branch in your forked repository.
-
-8. Once you have completed the project goals, create a pull request to merge your changes into the main repository.
-
-## Resources
-Here are some resources that may be helpful during your work on this project:
-
-- [TypeScript Documentation](https://www.typescriptlang.org/docs/) - Official documentation for TypeScript, offering guidance on TypeScript features and usage.
-
-- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - Explore React Testing Library, a popular testing library for React applications.
+- I created a useStopWatch hook to help seperate all the logic of the stopwatch and keep all components clean and simple.
+- I used Date objects instead of setInterval due to it being less accurate especially for something where every second is important like a stopwatch.
\ No newline at end of file

From 9425f38e115e986258fb51f348cd027befe590f7 Mon Sep 17 00:00:00 2001
From: HamsterStack <108938294+HamsterStack@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:44:36 -0500
Subject: [PATCH 13/21] Update README.md

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d731803..2df7984 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,9 @@ My stopwatch app has the following features:
 - Reset button to reset the times and laps to 0.
 - Lap button to record the laps easily along with minimum and maximum laps colored to easily identifty your slowest and fastest times.
 
+![Screenshot of the app(iPhone 15 Pro Max, iOS 17)](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/dbc6357c-4b48-47e3-80eb-c77e4aa07c61)
+
+
 ## Tests
 
 I added a few extra tests along with the original ones, such as a test to see that the maximum and minimum laps are colored correctly
@@ -15,4 +18,4 @@ and a test to see you can't add laps while paused.
 ## Design Choices
 
 - I created a useStopWatch hook to help seperate all the logic of the stopwatch and keep all components clean and simple.
-- I used Date objects instead of setInterval due to it being less accurate especially for something where every second is important like a stopwatch.
\ No newline at end of file
+- I used Date objects instead of setInterval due to it being less accurate especially for something where every second is important like a stopwatch.

From f137a4f008a516fbcd9728f7f2ece4c3798d4617 Mon Sep 17 00:00:00 2001
From: HamsterStack <108938294+HamsterStack@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:47:13 -0500
Subject: [PATCH 14/21] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2df7984..ddb2cc8 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,8 @@ My stopwatch app has the following features:
 - Reset button to reset the times and laps to 0.
 - Lap button to record the laps easily along with minimum and maximum laps colored to easily identifty your slowest and fastest times.
 
-![Screenshot of the app(iPhone 15 Pro Max, iOS 17)](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/dbc6357c-4b48-47e3-80eb-c77e4aa07c61)
+
+![Screenshot of the app(iPhone 15 Pro Max, iOS 17](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/ec6437af-67e9-44c8-86ff-8c4db29518da)
 
 
 ## Tests

From c01f1942297d5ad3d777bb5458cf9094713e2014 Mon Sep 17 00:00:00 2001
From: HamsterStack <108938294+HamsterStack@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:51:57 -0500
Subject: [PATCH 15/21] Update README.md

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ddb2cc8..89ea8b6 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,9 @@ My stopwatch app has the following features:
 - Lap button to record the laps easily along with minimum and maximum laps colored to easily identifty your slowest and fastest times.
 
 
-![Screenshot of the app(iPhone 15 Pro Max, iOS 17](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/ec6437af-67e9-44c8-86ff-8c4db29518da)
+![Screenshot of the app(iPhone 15 Pro Max, iOS 17](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/f8be86e4-0da9-48e4-97bc-e1714c0ccf1f)
+
+
 
 
 ## Tests

From b3027b3c7d4059b7b63ae12df00be5445c808803 Mon Sep 17 00:00:00 2001
From: HamsterStack <108938294+HamsterStack@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:52:54 -0500
Subject: [PATCH 16/21] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 89ea8b6..5d7623b 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ My stopwatch app has the following features:
 - Lap button to record the laps easily along with minimum and maximum laps colored to easily identifty your slowest and fastest times.
 
 
-![Screenshot of the app(iPhone 15 Pro Max, iOS 17](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/f8be86e4-0da9-48e4-97bc-e1714c0ccf1f)
+![Screenshot of the app(iPhone 15 Pro Max, iOS 17](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/94abb16c-2326-41ba-ba5a-5f7a41fae31d)
 
 
 

From 301a920e4618eea3c5d8d865ce1213ffa6773701 Mon Sep 17 00:00:00 2001
From: HamsterStack <108938294+HamsterStack@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:54:32 -0500
Subject: [PATCH 17/21] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5d7623b..eb37003 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ My stopwatch app has the following features:
 - Lap button to record the laps easily along with minimum and maximum laps colored to easily identifty your slowest and fastest times.
 
 
-![Screenshot of the app(iPhone 15 Pro Max, iOS 17](https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/94abb16c-2326-41ba-ba5a-5f7a41fae31d)
+<img src="https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/f1c2f8de-d75b-4b12-8a85-e05274f57adf" width="200">
 
 
 

From 396d21b176c2d4e3268f3875b7a2207885ab4aec Mon Sep 17 00:00:00 2001
From: HamsterStack <108938294+HamsterStack@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:56:59 -0500
Subject: [PATCH 18/21] Update README.md

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index eb37003..08de74e 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 My stopwatch app has the following features:
 - Start button to start/resume the timer and a stop button to pause it.
 - Reset button to reset the times and laps to 0.
-- Lap button to record the laps easily along with minimum and maximum laps colored to easily identifty your slowest and fastest times.
+- Lap button to record the laps easily along with minimum and maximum laps colored in red and green respectively to identify your slowest and fastest times easily.
 
 
 <img src="https://github.com/HamsterStack/eng-intern-assessment-react-native/assets/108938294/f1c2f8de-d75b-4b12-8a85-e05274f57adf" width="200">
@@ -16,9 +16,9 @@ My stopwatch app has the following features:
 ## Tests
 
 I added a few extra tests along with the original ones, such as a test to see that the maximum and minimum laps are colored correctly
-and a test to see you can't add laps while paused.
+and a test to ensure you can't add laps while paused.
 
 ## Design Choices
 
-- I created a useStopWatch hook to help seperate all the logic of the stopwatch and keep all components clean and simple.
-- I used Date objects instead of setInterval due to it being less accurate especially for something where every second is important like a stopwatch.
+- I created a useStopWatch hook to help separate all the logic of the stopwatch and keep all components clean and simple.
+- I used Date objects instead of setInterval due to it being less accurate, especially for something where every second is important like a stopwatch.

From 0e71f21e1b4dbd557910d381fbced4dae3c0e4fc Mon Sep 17 00:00:00 2001
From: HamsterStack <108938294+HamsterStack@users.noreply.github.com>
Date: Mon, 29 Jan 2024 23:26:14 -0500
Subject: [PATCH 19/21] Cleaned up tests

---
 tests/Stopwatch.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/Stopwatch.test.js b/tests/Stopwatch.test.js
index c6d7fda..88f519a 100644
--- a/tests/Stopwatch.test.js
+++ b/tests/Stopwatch.test.js
@@ -17,10 +17,10 @@ describe('Stopwatch', () => {
   test('starts and stops the stopwatch', () => {
     const { getByText, queryByText } = render(<Stopwatch />);
     
-    fireEvent.press(getByText('Start'));
+    act(() => fireEvent.press(getByText('Start')));
     expect(queryByText(/(\d{2}:){2}\d{2}\.\d{2}/)).toBeTruthy();
 
-    fireEvent.press(getByText('Stop'));
+    act(() => fireEvent.press(getByText('Stop')));
     expect(queryByText(/(\d{2}:){2}\d{2}\.\d{2}/)).toBeTruthy();
   });
 

From 7ee00df687289ef8fc6d52fcaaa02ec2ad763188 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 23:53:10 -0500
Subject: [PATCH 20/21] Moved components to components folder

---
 src/components/StopWatch.tsx       | 118 +++++++++++++++++++++++++++++
 src/components/StopWatchButton.tsx |  22 ++++++
 2 files changed, 140 insertions(+)
 create mode 100644 src/components/StopWatch.tsx
 create mode 100644 src/components/StopWatchButton.tsx

diff --git a/src/components/StopWatch.tsx b/src/components/StopWatch.tsx
new file mode 100644
index 0000000..2e52aef
--- /dev/null
+++ b/src/components/StopWatch.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import StopwatchButton from './StopWatchButton';
+import { useStopWatch } from '../hooks/useStopWatch';
+
+function formatNumber(num: number) {
+  return String(num).padStart(2, '0');
+}
+
+const formatTime = (milliseconds: number) => {
+  const hours = formatNumber(Math.floor(milliseconds / 3600000));
+  const minutes = formatNumber(Math.floor((milliseconds % 3600000) / 60000));
+  const seconds = formatNumber(Math.floor((milliseconds % 60000) / 1000));
+  const centiseconds = formatNumber(Math.floor((milliseconds % 1000) / 10));
+
+  return `${hours}:${minutes}:${seconds}.${centiseconds}`;
+};
+
+export const lapColors = {
+  default: 'black',
+  minLap: 'red',
+  maxLap: '#5ab068'
+};
+
+export default function Stopwatch() {
+
+  const stopwatch = useStopWatch();
+  return (
+    
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Text style={styles.time}>{formatTime(stopwatch.milliseconds)}</Text>
+        <StopwatchButton
+          onResume={stopwatch.resume}
+          onReset={stopwatch.reset}
+          onLap={stopwatch.lap}
+          onPause={stopwatch.pause}
+          isPaused={stopwatch.isPaused}
+        />
+              
+          <ScrollView 
+            style={styles.lapScrollView}
+            contentContainerStyle={styles.lapScrollViewContent}
+            testID='lap-list'
+          >
+
+          {stopwatch.laps.slice().reverse().map((lap, index) => {
+            let lapColor = lapColors.default;
+
+            if (stopwatch.laps.length >= 3) {
+              if (lap === stopwatch.minLapTime) {
+                lapColor = lapColors.minLap;
+              }
+              else if (lap === stopwatch.maxLapTime) {
+                lapColor = lapColors.maxLap;
+              }
+            }
+
+            return (
+              <React.Fragment key={index}>
+                <View style={styles.lapContentContainer}>
+                  <Text style={[styles.lap, { color: lapColor }]} testID={`lap-${index}`}>
+                    Lap {stopwatch.laps.length - index}
+                  </Text>
+                  <Text style={[styles.lap, { color: lapColor }]} testID={`time-${index}`}>
+                    {formatTime(lap)}
+                  </Text>
+                </View>
+                <View style={styles.divider} />
+              </React.Fragment>
+            );
+  })}
+          </ScrollView>
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lapContentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width:'75%',
+  },
+  time: {
+    fontSize: 56,
+    fontWeight: '500',
+    marginBottom: 20,
+    minWidth:320,
+  },
+  lapScrollView: {
+    maxHeight: 210,
+    width: '100%',
+    marginTop:'10%',
+  },
+  lapScrollViewContent: {
+    alignItems: 'center',
+  },
+  lap: {
+    fontSize: 18,
+    marginTop: 12,
+  },
+  divider: {
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1,
+    width: '75%',
+    marginTop:6,
+  }
+});
diff --git a/src/components/StopWatchButton.tsx b/src/components/StopWatchButton.tsx
new file mode 100644
index 0000000..d6a9a85
--- /dev/null
+++ b/src/components/StopWatchButton.tsx
@@ -0,0 +1,22 @@
+
+import React from 'react';
+import { Button, View } from 'react-native';
+
+export default function StopwatchButton({ onResume, onReset, onLap, onPause, isPaused }: { 
+  onReset: () => void; 
+  onLap: () => void; 
+  onPause: () => void;
+  onResume: () => void;
+  isPaused: boolean;
+}) {
+
+  return (
+    <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+      <Button testID='start-button' title="Start" onPress={onResume} disabled={!isPaused} />
+      <Button testID='stop-button' title="Stop" onPress={onPause} disabled={isPaused} />
+      <Button testID='reset-button' title="Reset" onPress={onReset} />
+      <Button testID='lap-button' title="Lap" onPress={onLap}  />
+    </View>
+  );
+}
+

From 97d62e7ff9dd52428b0881e5a593653f3ddcf492 Mon Sep 17 00:00:00 2001
From: Tom Miller <tommiller@tom.local>
Date: Mon, 29 Jan 2024 23:55:38 -0500
Subject: [PATCH 21/21] Revert "Cleaned up tests"

This reverts commit 0e71f21e1b4dbd557910d381fbced4dae3c0e4fc.
---
 tests/Stopwatch.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/Stopwatch.test.js b/tests/Stopwatch.test.js
index 88f519a..c6d7fda 100644
--- a/tests/Stopwatch.test.js
+++ b/tests/Stopwatch.test.js
@@ -17,10 +17,10 @@ describe('Stopwatch', () => {
   test('starts and stops the stopwatch', () => {
     const { getByText, queryByText } = render(<Stopwatch />);
     
-    act(() => fireEvent.press(getByText('Start')));
+    fireEvent.press(getByText('Start'));
     expect(queryByText(/(\d{2}:){2}\d{2}\.\d{2}/)).toBeTruthy();
 
-    act(() => fireEvent.press(getByText('Stop')));
+    fireEvent.press(getByText('Stop'));
     expect(queryByText(/(\d{2}:){2}\d{2}\.\d{2}/)).toBeTruthy();
   });