From 7cdeb8fb2013f273b1e9265f96f472671b4803e1 Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Mon, 29 Jan 2024 00:46:33 +0100
Subject: [PATCH 01/10] Modified file structure and implemented skeleton

---
 App.tsx                                       | 22 ++++---
 package-lock.json                             | 14 ++--
 package.json                                  |  6 +-
 src/Components/LapsList/LapsList.tsx          | 22 +++++++
 src/Components/StopWatch/StopWatch.tsx        | 11 ++++
 .../StopWatchButton/StopWatchButton.tsx       | 44 +++++++++++++
 .../StopWatchScreen/StopWatchScreen.tsx       | 47 ++++++++++++++
 src/StopWatch.tsx                             |  8 ---
 src/StopWatchButton.tsx                       |  8 ---
 tests/Stopwatch.test.js                       | 64 ++++++++++---------
 10 files changed, 180 insertions(+), 66 deletions(-)
 create mode 100644 src/Components/LapsList/LapsList.tsx
 create mode 100644 src/Components/StopWatch/StopWatch.tsx
 create mode 100644 src/Components/StopWatchButton/StopWatchButton.tsx
 create mode 100644 src/Screens/StopWatchScreen/StopWatchScreen.tsx
 delete mode 100644 src/StopWatch.tsx
 delete mode 100644 src/StopWatchButton.tsx

diff --git a/App.tsx b/App.tsx
index 0329d0c..81c9e5c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,20 +1,24 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from "expo-status-bar";
+import { SafeAreaView, StyleSheet, Text, View } from "react-native";
+import StopWatch from "./src/Components/StopWatch/StopWatch";
+import StopWatchScreen from "./src/Screens/StopWatchScreen/StopWatchScreen";
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <SafeAreaView style={styles.container}>
+      {/* <Text>Open up App.tsx to start working on your app!</Text> */}
+      <StopWatchScreen />
+
+      {/* <StatusBar style="auto" /> */}
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
 });
diff --git a/package-lock.json b/package-lock.json
index ea36168..a360b56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9208,9 +9208,9 @@
       }
     },
     "node_modules/expo": {
-      "version": "49.0.21",
-      "resolved": "https://registry.npmjs.org/expo/-/expo-49.0.21.tgz",
-      "integrity": "sha512-JpHL6V0yt8/fzsmkAdPdtsah+lU6Si4ac7MDklLYvzEil7HAFEsN/pf06wQ21ax4C+BL27hI6JJoD34tzXUCJA==",
+      "version": "49.0.22",
+      "resolved": "https://registry.npmjs.org/expo/-/expo-49.0.22.tgz",
+      "integrity": "sha512-1hhcphaKN74gDqEmGzU4sqxnusLi/i8SsWZ04rRn7b6zdyEchyudVLN3SOzeIUgfGmn7AcXm78JAQ7+e0WqSyw==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "@expo/cli": "0.10.16",
@@ -9225,7 +9225,7 @@
         "expo-font": "~11.4.0",
         "expo-keep-awake": "~12.3.0",
         "expo-modules-autolinking": "1.5.1",
-        "expo-modules-core": "1.5.12",
+        "expo-modules-core": "1.5.13",
         "fbemitter": "^3.0.0",
         "invariant": "^2.2.4",
         "md5-file": "^3.2.3",
@@ -9415,9 +9415,9 @@
       }
     },
     "node_modules/expo-modules-core": {
-      "version": "1.5.12",
-      "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.5.12.tgz",
-      "integrity": "sha512-mY4wTDU458dhwk7IVxLNkePlYXjs9BTgk4NQHBUXf0LapXsvr+i711qPZaFNO4egf5qq6fQV+Yfd/KUguHstnQ==",
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.5.13.tgz",
+      "integrity": "sha512-cKRsiHKwpDPRkBgMW3XdUWmEUDzihEPWXAyeo629BXpJ6uX6a66Zbz63SEXhlgsbLq8FB77gvYku3ceBqb+hHg==",
       "dependencies": {
         "compare-versions": "^3.4.0",
         "invariant": "^2.2.4"
diff --git a/package.json b/package.json
index bf0f5a3..ac35609 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,10 @@
   "dependencies": {
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
+    "jest": "^29.2.1",
     "jest-expo": "~49.0.0",
-    "jest": "^29.2.1"
+    "react": "18.2.0",
+    "react-native": "0.72.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/Components/LapsList/LapsList.tsx b/src/Components/LapsList/LapsList.tsx
new file mode 100644
index 0000000..3f5cc7c
--- /dev/null
+++ b/src/Components/LapsList/LapsList.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+
+const LapsList = () => {
+  return (
+    <View style={styles.container}>
+      <ScrollView>
+        <Text>1</Text>
+        <Text>2</Text>
+        <Text>3</Text>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: "50%",
+  },
+});
+
+export default LapsList;
diff --git a/src/Components/StopWatch/StopWatch.tsx b/src/Components/StopWatch/StopWatch.tsx
new file mode 100644
index 0000000..11f9794
--- /dev/null
+++ b/src/Components/StopWatch/StopWatch.tsx
@@ -0,0 +1,11 @@
+import { useState } from "react";
+import { Text, View } from "react-native";
+import StopWatchButton from "../StopWatchButton/StopWatchButton";
+
+export default function StopWatch() {
+  return (
+    <View>
+      <Text>00:00:00</Text>
+    </View>
+  );
+}
diff --git a/src/Components/StopWatchButton/StopWatchButton.tsx b/src/Components/StopWatchButton/StopWatchButton.tsx
new file mode 100644
index 0000000..0c4a943
--- /dev/null
+++ b/src/Components/StopWatchButton/StopWatchButton.tsx
@@ -0,0 +1,44 @@
+import {
+  Alert,
+  Button,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from "react-native";
+
+const StopWatchButton = () => {
+  return (
+    <View>
+      {/* <Button
+        title="Testing"
+        onPress={() => {
+          Alert.alert("Testing button pressed!");
+        }}
+        color="red"
+      /> */}
+      <TouchableHighlight
+        onPress={() => {
+          Alert.alert("Testing button pressed!");
+        }}
+      >
+        <View style={styles.button}>
+          <Text>Testing</Text>
+        </View>
+      </TouchableHighlight>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // container: {
+  //   display: "flex",
+  //   flexDirection: "column",
+  // },
+  button: {
+    backgroundColor: "orange",
+    padding: 5,
+  },
+});
+
+export default StopWatchButton;
diff --git a/src/Screens/StopWatchScreen/StopWatchScreen.tsx b/src/Screens/StopWatchScreen/StopWatchScreen.tsx
new file mode 100644
index 0000000..9cee74d
--- /dev/null
+++ b/src/Screens/StopWatchScreen/StopWatchScreen.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import StopWatch from "../../Components/StopWatch/StopWatch";
+import { StyleSheet, View } from "react-native";
+import StopWatchButton from "../../Components/StopWatchButton/StopWatchButton";
+import LapsList from "../../Components/LapsList/LapsList";
+
+const StopWatchScreen = () => {
+  const [isRunning, setIsRunning] = useState(false);
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [laps, setLaps] = useState([]);
+  const [displayLaps, setDisplayLaps] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.stopwatchContainer}>
+        <StopWatch />
+        <View style={styles.buttonContainer}>
+          <StopWatchButton />
+          <StopWatchButton />
+        </View>
+      </View>
+      <LapsList />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  stopwatchContainer: {
+    height: "50%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonContainer: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 5,
+  },
+});
+
+export default StopWatchScreen;
diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
deleted file mode 100644
index 5c7eb74..0000000
--- a/src/StopWatch.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { View } from 'react-native';
-
-export default function StopWatch() {
-  return (
-    <View >
-    </View>
-  );
-}
\ No newline at end of file
diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx
deleted file mode 100644
index 8768555..0000000
--- a/src/StopWatchButton.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { View } from 'react-native';
-
-export default function StopWatchButton() {
-  return (
-    <View >
-    </View>
-  );
-}
\ No newline at end of file
diff --git a/tests/Stopwatch.test.js b/tests/Stopwatch.test.js
index d5e9f1f..514afab 100644
--- a/tests/Stopwatch.test.js
+++ b/tests/Stopwatch.test.js
@@ -1,55 +1,57 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
-import Stopwatch from '../src/Stopwatch';
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import Stopwatch from "../src/Components/StopWatch/StopWatch";
 
-describe('Stopwatch', () => {
-  test('renders initial state correctly', () => {
+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")).toBeTruthy();
+    expect(queryByTestId("lap-list")).toBeNull();
   });
 
-  test('starts and stops the stopwatch', () => {
+  test("starts and stops the stopwatch", () => {
     const { getByText, queryByText } = render(<Stopwatch />);
-    
-    fireEvent.press(getByText('Start'));
+
+    fireEvent.press(getByText("Start"));
     expect(queryByText(/(\d{2}:){2}\d{2}/)).toBeTruthy();
 
-    fireEvent.press(getByText('Stop'));
+    fireEvent.press(getByText("Stop"));
     expect(queryByText(/(\d{2}:){2}\d{2}/)).toBeNull();
   });
 
-  test('pauses and resumes the stopwatch', () => {
+  test("pauses and resumes the stopwatch", () => {
     const { getByText } = render(<Stopwatch />);
-    
-    fireEvent.press(getByText('Start'));
-    fireEvent.press(getByText('Pause'));
+
+    fireEvent.press(getByText("Start"));
+    fireEvent.press(getByText("Pause"));
     const pausedTime = getByText(/(\d{2}:){2}\d{2}/).textContent;
 
-    fireEvent.press(getByText('Resume'));
+    fireEvent.press(getByText("Resume"));
     expect(getByText(/(\d{2}:){2}\d{2}/).textContent).not.toBe(pausedTime);
   });
 
-  test('records and displays lap times', () => {
+  test("records and displays lap times", () => {
     const { getByText, getByTestId } = render(<Stopwatch />);
-    
-    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);
+    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);
   });
 
-  test('resets the stopwatch', () => {
+  test("resets the stopwatch", () => {
     const { getByText, queryByTestId } = render(<Stopwatch />);
-    
-    fireEvent.press(getByText('Start'));
-    fireEvent.press(getByText('Lap'));
-    fireEvent.press(getByText('Reset'));
 
-    expect(getByText('00:00:00')).toBeTruthy();
-    expect(queryByTestId('lap-list')).toBeNull();
+    fireEvent.press(getByText("Start"));
+    fireEvent.press(getByText("Lap"));
+    fireEvent.press(getByText("Reset"));
+
+    expect(getByText("00:00:00")).toBeTruthy();
+    expect(queryByTestId("lap-list")).toBeNull();
   });
 });

From 593094da3764ade58b58e7649a4f929a39671e60 Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Mon, 29 Jan 2024 11:37:25 +0100
Subject: [PATCH 02/10] Implemented time format util function for miliseconds

---
 src/utils/TimeUtils.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/utils/TimeUtils.ts

diff --git a/src/utils/TimeUtils.ts b/src/utils/TimeUtils.ts
new file mode 100644
index 0000000..f54e2df
--- /dev/null
+++ b/src/utils/TimeUtils.ts
@@ -0,0 +1,11 @@
+export const formatTime = (time: number) => {
+  const minutes = Math.floor(time / 60000);
+  const seconds = Math.floor((time - minutes * 60000) / 1000);
+  const miliseconds = Math.floor(time % 1000);
+
+  const minutesString = minutes.toString().padStart(2, "0");
+  const secondsString = seconds.toString().padStart(2, "0");
+  const milisecondsString = miliseconds.toString().padStart(3, "0");
+
+  return `${minutesString}:${secondsString}:${milisecondsString}`;
+};

From d058d5a7122100304613d596d215270ffbedb8bb Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Mon, 29 Jan 2024 21:04:31 +0100
Subject: [PATCH 03/10] Implemented basic start and stop functionality

---
 src/Components/StopWatch/StopWatch.tsx        | 13 +++++-
 .../StopWatchButton/StopWatchButton.tsx       | 31 ++++++--------
 .../StopWatchScreen/StopWatchScreen.tsx       | 41 +++++++++++++++++--
 3 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/Components/StopWatch/StopWatch.tsx b/src/Components/StopWatch/StopWatch.tsx
index 11f9794..37f7b70 100644
--- a/src/Components/StopWatch/StopWatch.tsx
+++ b/src/Components/StopWatch/StopWatch.tsx
@@ -1,11 +1,20 @@
 import { useState } from "react";
 import { Text, View } from "react-native";
 import StopWatchButton from "../StopWatchButton/StopWatchButton";
+import { formatTime } from "../../utils/TimeUtils";
+
+interface StopWatchProps {
+  time: number;
+}
+
+export default function StopWatch(props: StopWatchProps) {
+  const { time } = props;
+
+  const formattedTime = formatTime(time);
 
-export default function StopWatch() {
   return (
     <View>
-      <Text>00:00:00</Text>
+      <Text>{formattedTime}</Text>
     </View>
   );
 }
diff --git a/src/Components/StopWatchButton/StopWatchButton.tsx b/src/Components/StopWatchButton/StopWatchButton.tsx
index 0c4a943..608dc4e 100644
--- a/src/Components/StopWatchButton/StopWatchButton.tsx
+++ b/src/Components/StopWatchButton/StopWatchButton.tsx
@@ -7,23 +7,20 @@ import {
   View,
 } from "react-native";
 
-const StopWatchButton = () => {
+interface StopWatchButtonProps {
+  title: string;
+  onPress: () => void;
+  colour: string;
+}
+
+const StopWatchButton = (props: StopWatchButtonProps) => {
+  const { title, onPress, colour } = props;
+
   return (
     <View>
-      {/* <Button
-        title="Testing"
-        onPress={() => {
-          Alert.alert("Testing button pressed!");
-        }}
-        color="red"
-      /> */}
-      <TouchableHighlight
-        onPress={() => {
-          Alert.alert("Testing button pressed!");
-        }}
-      >
-        <View style={styles.button}>
-          <Text>Testing</Text>
+      <TouchableHighlight onPress={onPress}>
+        <View style={[styles.button, { backgroundColor: colour }]}>
+          <Text>{title}</Text>
         </View>
       </TouchableHighlight>
     </View>
@@ -31,10 +28,6 @@ const StopWatchButton = () => {
 };
 
 const styles = StyleSheet.create({
-  // container: {
-  //   display: "flex",
-  //   flexDirection: "column",
-  // },
   button: {
     backgroundColor: "orange",
     padding: 5,
diff --git a/src/Screens/StopWatchScreen/StopWatchScreen.tsx b/src/Screens/StopWatchScreen/StopWatchScreen.tsx
index 9cee74d..a645a91 100644
--- a/src/Screens/StopWatchScreen/StopWatchScreen.tsx
+++ b/src/Screens/StopWatchScreen/StopWatchScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import StopWatch from "../../Components/StopWatch/StopWatch";
 import { StyleSheet, View } from "react-native";
 import StopWatchButton from "../../Components/StopWatchButton/StopWatchButton";
@@ -9,14 +9,47 @@ const StopWatchScreen = () => {
   const [elapsedTime, setElapsedTime] = useState(0);
   const [laps, setLaps] = useState([]);
   const [displayLaps, setDisplayLaps] = useState(false);
+  const [startTime, setStartTime] = useState(0);
+
+  useEffect(() => {
+    let intervalID: number;
+    if (isRunning) {
+      intervalID = setInterval(() => {
+        const currentTime = Date.now();
+        setElapsedTime(
+          (previousElapsedTime) =>
+            previousElapsedTime + (currentTime - startTime)
+        );
+        setStartTime(currentTime);
+      }, 1);
+    }
+    return () => clearInterval(intervalID);
+  }, [isRunning, startTime]);
+
+  const startTimer = () => {
+    setStartTime(Date.now());
+    setIsRunning(true);
+  };
+
+  const stopTimer = () => setIsRunning(false);
+
+  // TODO: Use when "Reset" button added in
+  const resetTimer = () => {
+    setIsRunning(false); // TODO: Reset button should only appear AFTER we have stopped the timer -> Not needed later on
+    setElapsedTime(0);
+  };
 
   return (
     <View style={styles.container}>
       <View style={styles.stopwatchContainer}>
-        <StopWatch />
+        <StopWatch time={elapsedTime} />
         <View style={styles.buttonContainer}>
-          <StopWatchButton />
-          <StopWatchButton />
+          <StopWatchButton
+            onPress={startTimer}
+            title="Start"
+            colour="#90be6d"
+          />
+          <StopWatchButton onPress={stopTimer} title="Stop" colour="#f94144" />
         </View>
       </View>
       <LapsList />

From efe720ddbdee32496af876fd080c77d45c8bc901 Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Mon, 29 Jan 2024 21:30:14 +0100
Subject: [PATCH 04/10] Added functioning reset button and skeleton lap button

---
 .../StopWatchButton/StopWatchButton.tsx       |  1 -
 .../StopWatchScreen/StopWatchScreen.tsx       | 33 +++++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/Components/StopWatchButton/StopWatchButton.tsx b/src/Components/StopWatchButton/StopWatchButton.tsx
index 608dc4e..17665d0 100644
--- a/src/Components/StopWatchButton/StopWatchButton.tsx
+++ b/src/Components/StopWatchButton/StopWatchButton.tsx
@@ -29,7 +29,6 @@ const StopWatchButton = (props: StopWatchButtonProps) => {
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: "orange",
     padding: 5,
   },
 });
diff --git a/src/Screens/StopWatchScreen/StopWatchScreen.tsx b/src/Screens/StopWatchScreen/StopWatchScreen.tsx
index a645a91..4bb8502 100644
--- a/src/Screens/StopWatchScreen/StopWatchScreen.tsx
+++ b/src/Screens/StopWatchScreen/StopWatchScreen.tsx
@@ -44,12 +44,33 @@ const StopWatchScreen = () => {
       <View style={styles.stopwatchContainer}>
         <StopWatch time={elapsedTime} />
         <View style={styles.buttonContainer}>
-          <StopWatchButton
-            onPress={startTimer}
-            title="Start"
-            colour="#90be6d"
-          />
-          <StopWatchButton onPress={stopTimer} title="Stop" colour="#f94144" />
+          {isRunning ? (
+            <>
+              <StopWatchButton
+                onPress={stopTimer}
+                title="Stop"
+                colour="#f94144"
+              />
+              <StopWatchButton
+                onPress={() => {}}
+                title="Lap"
+                colour="#a5a58d"
+              />
+            </>
+          ) : (
+            <>
+              <StopWatchButton
+                onPress={startTimer}
+                title="Start"
+                colour="#90be6d"
+              />
+              <StopWatchButton
+                onPress={resetTimer}
+                title="Reset"
+                colour="#ffe8d6"
+              />
+            </>
+          )}
         </View>
       </View>
       <LapsList />

From 9813822555760dac2ece3f52324f573514586b6d Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Tue, 30 Jan 2024 00:41:11 +0100
Subject: [PATCH 05/10] Completed core implementation

---
 App.tsx                                       |   6 +-
 PLEASE_READ.md                                |   6 +
 README.md                                     |  59 ++++---
 package-lock.json                             | 151 +++++++++++++++++-
 package.json                                  |   6 +-
 src/Components/LapsList/LapsList.tsx          |  21 ++-
 src/Components/StopWatch/StopWatch.tsx        | 107 +++++++++++--
 .../StopWatchScreen/StopWatchScreen.tsx       | 101 ------------
 src/utils/TimeUtils.ts                        |  10 +-
 tests/Stopwatch.test.js                       | 106 +++++++++---
 10 files changed, 407 insertions(+), 166 deletions(-)
 create mode 100644 PLEASE_READ.md
 delete mode 100644 src/Screens/StopWatchScreen/StopWatchScreen.tsx

diff --git a/App.tsx b/App.tsx
index 81c9e5c..a2c338f 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,15 +1,11 @@
 import { StatusBar } from "expo-status-bar";
 import { SafeAreaView, StyleSheet, Text, View } from "react-native";
 import StopWatch from "./src/Components/StopWatch/StopWatch";
-import StopWatchScreen from "./src/Screens/StopWatchScreen/StopWatchScreen";
 
 export default function App() {
   return (
     <SafeAreaView style={styles.container}>
-      {/* <Text>Open up App.tsx to start working on your app!</Text> */}
-      <StopWatchScreen />
-
-      {/* <StatusBar style="auto" /> */}
+      <StopWatch />
     </SafeAreaView>
   );
 }
diff --git a/PLEASE_READ.md b/PLEASE_READ.md
new file mode 100644
index 0000000..588d0ba
--- /dev/null
+++ b/PLEASE_READ.md
@@ -0,0 +1,6 @@
+# Considerations
+
+- The given `records and displays lap time` test was having a lot of issues, incl. the usage of `toContainElement()` as it's meant for web DOM elements rather than React Native components -> Checked for existence instead
+- Given tests' usage of `.textContent` does not seem to work anymore -> Used `.props.children` instead
+- Wrapped fire events that caused state changed with `act()`
+  - However, I acknowledge that the fire event for pressing the "Lap" button is still triggering a warning (albeit being wrapped)
diff --git a/README.md b/README.md
index 6b8b50e..58a0111 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,23 @@
+# Joshua Fung Submission for Shopify 2024 Mobile Engineering Assessment
+
+## Changes
+
+- The given `records and displays lap time` test was having a lot of issues, incl. the usage of `toContainElement()` as it's meant for web DOM elements rather than React Native components -> Checked for existence instead
+- Given tests' usage of `.textContent` does not seem to work anymore -> Used `.props.children` instead
+- Wrapped fire events that caused state changed with `act()`
+  - However, I acknowledge that the fire event for pressing the "Lap" button is still triggering a warning (albeit being wrapped)
+
+---
+
 # 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
 
 # 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:
 
 - Start the stopwatch to begin counting time.
@@ -15,6 +28,7 @@ The goal of this project is to implement a stopwatch application using React Nat
 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.
 
 ## Project Setup
+
 To get started with the project, follow these steps:
 
 1. Clone the project repository to your local development environment.
@@ -22,42 +36,50 @@ To get started with the project, follow these steps:
 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.
+
+   - /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.
+
+   - 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.
+
+   - 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.
+
+   - 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.
+
+   - 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.
+   - 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.
@@ -77,6 +99,7 @@ To start working on the project, follow these steps:
 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.
diff --git a/package-lock.json b/package-lock.json
index a360b56..b8f8038 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,14 @@
       "dependencies": {
         "expo": "~49.0.15",
         "expo-status-bar": "~1.6.0",
-        "jest": "^29.2.1",
+        "jest": "^29.7.0",
         "jest-expo": "~49.0.0",
         "react": "18.2.0",
         "react-native": "0.72.6"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
+        "@testing-library/jest-dom": "^6.3.0",
         "@testing-library/react-native": "^12.4.3",
         "@tsconfig/react-native": "^3.0.2",
         "@types/jest": "^29.5.11",
@@ -25,6 +26,12 @@
         "typescript": "^5.3.3"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
+      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
+      "dev": true
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -6911,6 +6918,118 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.3.0.tgz",
+      "integrity": "sha512-hJVIrkFizEQxoWsGBlycTcQhrpoCH4DhXfrnHFFXgkx3Xdm15zycsq5Ep+vpw4W8S0NJa8cxDHcuJib+1tEbhg==",
+      "dev": true,
+      "dependencies": {
+        "@adobe/css-tools": "^4.3.2",
+        "@babel/runtime": "^7.9.2",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      },
+      "peerDependencies": {
+        "@jest/globals": ">= 28",
+        "@types/bun": "latest",
+        "@types/jest": ">= 28",
+        "jest": ">= 28",
+        "vitest": ">= 0.32"
+      },
+      "peerDependenciesMeta": {
+        "@jest/globals": {
+          "optional": true
+        },
+        "@types/bun": {
+          "optional": true
+        },
+        "@types/jest": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/react-native": {
       "version": "12.4.3",
       "resolved": "https://registry.npmjs.org/@testing-library/react-native/-/react-native-12.4.3.tgz",
@@ -7360,6 +7479,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -8618,6 +8746,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -8875,6 +9009,15 @@
         "prop-types": "*"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -8922,6 +9065,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
diff --git a/package.json b/package.json
index ac35609..46b6cb8 100644
--- a/package.json
+++ b/package.json
@@ -7,18 +7,20 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "test": "jest"
+    "test": "jest",
+    "specific": "jest -t 'renders initial state correctly'"
   },
   "dependencies": {
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
-    "jest": "^29.2.1",
+    "jest": "^29.7.0",
     "jest-expo": "~49.0.0",
     "react": "18.2.0",
     "react-native": "0.72.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react-native": "^12.4.3",
     "@tsconfig/react-native": "^3.0.2",
     "@types/jest": "^29.5.11",
diff --git a/src/Components/LapsList/LapsList.tsx b/src/Components/LapsList/LapsList.tsx
index 3f5cc7c..0269ad5 100644
--- a/src/Components/LapsList/LapsList.tsx
+++ b/src/Components/LapsList/LapsList.tsx
@@ -1,13 +1,24 @@
 import React from "react";
 import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { formatTime } from "../../utils/TimeUtils";
+
+interface LapsListInterface {
+  laps: number[];
+}
+
+const LapsList = (props: LapsListInterface) => {
+  const { laps } = props;
 
-const LapsList = () => {
   return (
     <View style={styles.container}>
-      <ScrollView>
-        <Text>1</Text>
-        <Text>2</Text>
-        <Text>3</Text>
+      <ScrollView testID="lap-list">
+        {laps.map((lap, index) => {
+          return (
+            <Text key={index + 1} testID={`saved-lap-${index + 1}`}>{`Lap ${
+              index + 1
+            } - ${formatTime(lap)}`}</Text>
+          );
+        })}
       </ScrollView>
     </View>
   );
diff --git a/src/Components/StopWatch/StopWatch.tsx b/src/Components/StopWatch/StopWatch.tsx
index 37f7b70..f785d7b 100644
--- a/src/Components/StopWatch/StopWatch.tsx
+++ b/src/Components/StopWatch/StopWatch.tsx
@@ -1,20 +1,105 @@
-import { useState } from "react";
-import { Text, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
 import StopWatchButton from "../StopWatchButton/StopWatchButton";
+import LapsList from "../LapsList/LapsList";
 import { formatTime } from "../../utils/TimeUtils";
 
-interface StopWatchProps {
-  time: number;
-}
+const StopWatch = () => {
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const [elapsedTime, setElapsedTime] = useState<number>(0);
+  const [laps, setLaps] = useState<number[]>([]);
+  const [startTime, setStartTime] = useState<number>(0);
 
-export default function StopWatch(props: StopWatchProps) {
-  const { time } = props;
+  useEffect(() => {
+    let intervalID: number;
+    if (isRunning) {
+      intervalID = setInterval(() => {
+        const currentTime = Date.now();
+        setElapsedTime(
+          (previousElapsedTime) =>
+            previousElapsedTime + (currentTime - startTime)
+        );
+        setStartTime(currentTime);
+      }, 1);
+    }
+    return () => clearInterval(intervalID);
+  }, [isRunning, startTime]);
 
-  const formattedTime = formatTime(time);
+  const startTimer = () => {
+    setStartTime(Date.now());
+    setIsRunning(true);
+  };
+
+  const stopTimer = () => setIsRunning(false);
+
+  const resetTimer = () => {
+    setElapsedTime(0);
+    setLaps([]);
+  };
+
+  const addLap = (time: number) => {
+    setLaps([...laps, time]);
+  };
 
   return (
-    <View>
-      <Text>{formattedTime}</Text>
+    <View style={styles.container}>
+      <View style={styles.stopwatchContainer}>
+        <Text testID="elapsed-time">{formatTime(elapsedTime)}</Text>
+        <View style={styles.buttonContainer}>
+          {isRunning ? (
+            <>
+              <StopWatchButton
+                onPress={stopTimer}
+                title="Stop"
+                colour="#f94144"
+              />
+              <StopWatchButton
+                onPress={() => {
+                  addLap(elapsedTime);
+                }}
+                title="Lap"
+                colour="#a5a58d"
+              />
+            </>
+          ) : (
+            <>
+              <StopWatchButton
+                onPress={startTimer}
+                title={elapsedTime === 0 ? "Start" : "Resume"}
+                colour="#90be6d"
+              />
+              <StopWatchButton
+                onPress={resetTimer}
+                title="Reset"
+                colour="#ffe8d6"
+              />
+            </>
+          )}
+        </View>
+      </View>
+      {laps.length > 0 && <LapsList laps={laps} />}
     </View>
   );
-}
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  stopwatchContainer: {
+    height: "50%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonContainer: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 5,
+  },
+});
+
+export default StopWatch;
diff --git a/src/Screens/StopWatchScreen/StopWatchScreen.tsx b/src/Screens/StopWatchScreen/StopWatchScreen.tsx
deleted file mode 100644
index 4bb8502..0000000
--- a/src/Screens/StopWatchScreen/StopWatchScreen.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { useEffect, useState } from "react";
-import StopWatch from "../../Components/StopWatch/StopWatch";
-import { StyleSheet, View } from "react-native";
-import StopWatchButton from "../../Components/StopWatchButton/StopWatchButton";
-import LapsList from "../../Components/LapsList/LapsList";
-
-const StopWatchScreen = () => {
-  const [isRunning, setIsRunning] = useState(false);
-  const [elapsedTime, setElapsedTime] = useState(0);
-  const [laps, setLaps] = useState([]);
-  const [displayLaps, setDisplayLaps] = useState(false);
-  const [startTime, setStartTime] = useState(0);
-
-  useEffect(() => {
-    let intervalID: number;
-    if (isRunning) {
-      intervalID = setInterval(() => {
-        const currentTime = Date.now();
-        setElapsedTime(
-          (previousElapsedTime) =>
-            previousElapsedTime + (currentTime - startTime)
-        );
-        setStartTime(currentTime);
-      }, 1);
-    }
-    return () => clearInterval(intervalID);
-  }, [isRunning, startTime]);
-
-  const startTimer = () => {
-    setStartTime(Date.now());
-    setIsRunning(true);
-  };
-
-  const stopTimer = () => setIsRunning(false);
-
-  // TODO: Use when "Reset" button added in
-  const resetTimer = () => {
-    setIsRunning(false); // TODO: Reset button should only appear AFTER we have stopped the timer -> Not needed later on
-    setElapsedTime(0);
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.stopwatchContainer}>
-        <StopWatch time={elapsedTime} />
-        <View style={styles.buttonContainer}>
-          {isRunning ? (
-            <>
-              <StopWatchButton
-                onPress={stopTimer}
-                title="Stop"
-                colour="#f94144"
-              />
-              <StopWatchButton
-                onPress={() => {}}
-                title="Lap"
-                colour="#a5a58d"
-              />
-            </>
-          ) : (
-            <>
-              <StopWatchButton
-                onPress={startTimer}
-                title="Start"
-                colour="#90be6d"
-              />
-              <StopWatchButton
-                onPress={resetTimer}
-                title="Reset"
-                colour="#ffe8d6"
-              />
-            </>
-          )}
-        </View>
-      </View>
-      <LapsList />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  stopwatchContainer: {
-    height: "50%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  buttonContainer: {
-    display: "flex",
-    flexDirection: "row",
-    gap: 5,
-  },
-});
-
-export default StopWatchScreen;
diff --git a/src/utils/TimeUtils.ts b/src/utils/TimeUtils.ts
index f54e2df..b95f0f1 100644
--- a/src/utils/TimeUtils.ts
+++ b/src/utils/TimeUtils.ts
@@ -1,11 +1,11 @@
 export const formatTime = (time: number) => {
-  const minutes = Math.floor(time / 60000);
-  const seconds = Math.floor((time - minutes * 60000) / 1000);
-  const miliseconds = Math.floor(time % 1000);
+  const hours = Math.floor(time / 3600000);
+  const minutes = Math.floor((time - hours * 3600000) / 60000);
+  const seconds = Math.floor((time - hours * 3600000 - minutes * 60000) / 1000);
 
+  const hoursString = hours.toString().padStart(2, "0");
   const minutesString = minutes.toString().padStart(2, "0");
   const secondsString = seconds.toString().padStart(2, "0");
-  const milisecondsString = miliseconds.toString().padStart(3, "0");
 
-  return `${minutesString}:${secondsString}:${milisecondsString}`;
+  return `${hoursString}:${minutesString}:${secondsString}`;
 };
diff --git a/tests/Stopwatch.test.js b/tests/Stopwatch.test.js
index 514afab..74b7588 100644
--- a/tests/Stopwatch.test.js
+++ b/tests/Stopwatch.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, fireEvent } from "@testing-library/react-native";
+import { act, render, fireEvent } from "@testing-library/react-native";
 import Stopwatch from "../src/Components/StopWatch/StopWatch";
 
 describe("Stopwatch", () => {
@@ -13,45 +13,115 @@ 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}/)).toBeTruthy();
 
-    fireEvent.press(getByText("Stop"));
-    expect(queryByText(/(\d{2}:){2}\d{2}/)).toBeNull();
+    act(() => {
+      fireEvent.press(getByText("Stop"));
+    });
+
+    expect(queryByText("00:00:00")).toBeTruthy();
   });
 
   test("pauses and resumes the stopwatch", () => {
     const { getByText } = render(<Stopwatch />);
 
-    fireEvent.press(getByText("Start"));
-    fireEvent.press(getByText("Pause"));
-    const pausedTime = getByText(/(\d{2}:){2}\d{2}/).textContent;
+    act(() => {
+      fireEvent.press(getByText("Start"));
+    });
+
+    fireEvent.press(getByText("Stop"));
+    const pausedTime = getByText(/(\d{2}:){2}\d{2}/).props.children;
+
+    act(() => {
+      fireEvent.press(getByText("Start"));
+    });
 
-    fireEvent.press(getByText("Resume"));
     expect(getByText(/(\d{2}:){2}\d{2}/).textContent).not.toBe(pausedTime);
   });
 
   test("records and displays lap times", () => {
     const { getByText, getByTestId } = render(<Stopwatch />);
 
-    fireEvent.press(getByText("Start"));
-    fireEvent.press(getByText("Lap"));
-    expect(getByTestId("lap-list")).toContainElement(
-      getByText(/(\d{2}:){2}\d{2}/)
-    );
+    act(() => {
+      fireEvent.press(getByText("Start"));
+    });
+
+    act(() => {
+      fireEvent.press(getByText("Lap"));
+    });
 
-    fireEvent.press(getByText("Lap"));
-    expect(getByTestId("lap-list").children.length).toBe(2);
+    expect(getByTestId("lap-list")).toBeTruthy();
+    expect(getByTestId("saved-lap-1")).toBeTruthy();
+
+    act(() => {
+      fireEvent.press(getByText("Lap"));
+    });
+
+    expect(getByTestId("saved-lap-1")).toBeTruthy();
+    expect(getByTestId("saved-lap-2")).toBeTruthy();
   });
 
   test("resets the stopwatch", () => {
     const { getByText, queryByTestId } = render(<Stopwatch />);
 
-    fireEvent.press(getByText("Start"));
-    fireEvent.press(getByText("Lap"));
-    fireEvent.press(getByText("Reset"));
+    act(() => {
+      fireEvent.press(getByText("Start"));
+    });
+
+    act(() => {
+      fireEvent.press(getByText("Lap"));
+    });
+
+    fireEvent.press(getByText("Stop"));
+
+    act(() => {
+      fireEvent.press(getByText("Reset"));
+    });
 
     expect(getByText("00:00:00")).toBeTruthy();
     expect(queryByTestId("lap-list")).toBeNull();
   });
+
+  it("should initially render the correct buttons of start and reset", () => {
+    const { getByText, queryByText } = render(<Stopwatch />);
+
+    expect(getByText("Start")).toBeTruthy();
+    expect(getByText("Reset")).toBeTruthy();
+    expect(queryByText("Stop")).not.toBeTruthy();
+    expect(queryByText("Lap")).not.toBeTruthy();
+  });
+
+  it("should render the correct buttons of stop and lap when running", () => {
+    const { getByText, queryByText } = render(<Stopwatch />);
+
+    act(() => {
+      fireEvent.press(getByText("Start"));
+    });
+
+    expect(getByText("Stop")).toBeTruthy();
+    expect(getByText("Lap")).toBeTruthy();
+    expect(queryByText("Start")).not.toBeTruthy();
+    expect(queryByText("Reset")).not.toBeTruthy();
+  });
+
+  it("should render the initial buttons after stopping a running stopwatch", () => {
+    const { getByText, queryByText } = render(<Stopwatch />);
+
+    act(() => {
+      fireEvent.press(getByText("Start"));
+    });
+
+    act(() => {
+      fireEvent.press(getByText("Stop"));
+    });
+
+    expect(getByText("Start")).toBeTruthy();
+    expect(getByText("Reset")).toBeTruthy();
+    expect(queryByText("Stop")).not.toBeTruthy();
+    expect(queryByText("Lap")).not.toBeTruthy();
+  });
 });

From 679794cdfcbf957c56eecf6a3066f5ee6218c5cb Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Tue, 30 Jan 2024 00:41:59 +0100
Subject: [PATCH 06/10] Removed extra script

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 46b6cb8..cc18285 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,7 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "test": "jest",
-    "specific": "jest -t 'renders initial state correctly'"
+    "test": "jest"
   },
   "dependencies": {
     "expo": "~49.0.15",

From 221722bf40c51c80713cb879000881ab062e45bc Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Tue, 30 Jan 2024 01:13:53 +0100
Subject: [PATCH 07/10] Finalized basic styling

---
 App.tsx                                       |  2 +-
 src/Components/LapsList/LapsList.tsx          | 55 +++++++++++++++----
 src/Components/StopWatch/StopWatch.tsx        | 25 ++++++---
 .../StopWatchButton/StopWatchButton.tsx       | 21 ++++---
 4 files changed, 75 insertions(+), 28 deletions(-)

diff --git a/App.tsx b/App.tsx
index a2c338f..56e34c2 100644
--- a/App.tsx
+++ b/App.tsx
@@ -13,8 +13,8 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
     alignItems: "center",
     justifyContent: "center",
+    backgroundColor: "#463f3a",
   },
 });
diff --git a/src/Components/LapsList/LapsList.tsx b/src/Components/LapsList/LapsList.tsx
index 0269ad5..bcd330f 100644
--- a/src/Components/LapsList/LapsList.tsx
+++ b/src/Components/LapsList/LapsList.tsx
@@ -10,23 +10,56 @@ const LapsList = (props: LapsListInterface) => {
   const { laps } = props;
 
   return (
-    <View style={styles.container}>
-      <ScrollView testID="lap-list">
-        {laps.map((lap, index) => {
-          return (
-            <Text key={index + 1} testID={`saved-lap-${index + 1}`}>{`Lap ${
-              index + 1
-            } - ${formatTime(lap)}`}</Text>
-          );
-        })}
-      </ScrollView>
-    </View>
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.containerItems}
+      testID="lap-list"
+    >
+      {laps.map((lap, index) => {
+        return (
+          <View
+            key={index + 1}
+            style={styles.lapItem}
+            testID={`saved-lap-${index + 1}`}
+          >
+            <Text style={styles.lapTitle}>Lap {index + 1}</Text>
+            <Text>{formatTime(lap)}</Text>
+          </View>
+        );
+      })}
+    </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
+    width: "100%",
     height: "50%",
+    display: "flex",
+    marginBottom: 50,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    backgroundColor: "#bcb8b1",
+  },
+  containerItems: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-evenly",
+    paddingVertical: 20,
+    gap: 10,
+  },
+  lapItem: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+    paddingVertical: 10,
+    gap: 15,
+    borderRadius: 8,
+    backgroundColor: "white",
+  },
+  lapTitle: {
+    fontWeight: "bold",
   },
 });
 
diff --git a/src/Components/StopWatch/StopWatch.tsx b/src/Components/StopWatch/StopWatch.tsx
index f785d7b..9a5aead 100644
--- a/src/Components/StopWatch/StopWatch.tsx
+++ b/src/Components/StopWatch/StopWatch.tsx
@@ -44,21 +44,23 @@ const StopWatch = () => {
   return (
     <View style={styles.container}>
       <View style={styles.stopwatchContainer}>
-        <Text testID="elapsed-time">{formatTime(elapsedTime)}</Text>
+        <Text style={styles.timeDisplay} testID="elapsed-time">
+          {formatTime(elapsedTime)}
+        </Text>
         <View style={styles.buttonContainer}>
           {isRunning ? (
             <>
               <StopWatchButton
                 onPress={stopTimer}
                 title="Stop"
-                colour="#f94144"
+                colour="#ffa69e"
               />
               <StopWatchButton
                 onPress={() => {
                   addLap(elapsedTime);
                 }}
                 title="Lap"
-                colour="#a5a58d"
+                colour="#b5e2fa"
               />
             </>
           ) : (
@@ -71,7 +73,7 @@ const StopWatch = () => {
               <StopWatchButton
                 onPress={resetTimer}
                 title="Reset"
-                colour="#ffe8d6"
+                colour="#d5bdaf"
               />
             </>
           )}
@@ -84,21 +86,30 @@ const StopWatch = () => {
 
 const styles = StyleSheet.create({
   container: {
+    width: "80%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
+    padding: 20,
   },
   stopwatchContainer: {
-    height: "50%",
+    height: "40%",
     display: "flex",
-    justifyContent: "center",
     alignItems: "center",
+    justifyContent: "center",
+    padding: 10,
+  },
+  timeDisplay: {
+    fontSize: 50,
+    fontWeight: "bold",
+    color: "#e9ecef",
   },
   buttonContainer: {
     display: "flex",
     flexDirection: "row",
-    gap: 5,
+    padding: 10,
+    gap: 8,
   },
 });
 
diff --git a/src/Components/StopWatchButton/StopWatchButton.tsx b/src/Components/StopWatchButton/StopWatchButton.tsx
index 17665d0..e7ddbf2 100644
--- a/src/Components/StopWatchButton/StopWatchButton.tsx
+++ b/src/Components/StopWatchButton/StopWatchButton.tsx
@@ -1,11 +1,4 @@
-import {
-  Alert,
-  Button,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} from "react-native";
+import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
 
 interface StopWatchButtonProps {
   title: string;
@@ -20,7 +13,7 @@ const StopWatchButton = (props: StopWatchButtonProps) => {
     <View>
       <TouchableHighlight onPress={onPress}>
         <View style={[styles.button, { backgroundColor: colour }]}>
-          <Text>{title}</Text>
+          <Text style={styles.buttonText}>{title}</Text>
         </View>
       </TouchableHighlight>
     </View>
@@ -29,7 +22,17 @@ const StopWatchButton = (props: StopWatchButtonProps) => {
 
 const styles = StyleSheet.create({
   button: {
+    width: 80,
+    height: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     padding: 5,
+    borderRadius: 8,
+  },
+  buttonText: {
+    fontSize: 18,
+    fontWeight: "500",
   },
 });
 

From 61e565c41e002738f9fd88ad3051c55fefc0b4d9 Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Tue, 30 Jan 2024 01:21:56 +0100
Subject: [PATCH 08/10] Cleaned up imports and added comments

---
 App.tsx                                            | 3 +--
 src/Components/LapsList/LapsList.tsx               | 5 +++++
 src/Components/StopWatch/StopWatch.tsx             | 6 ++++++
 src/Components/StopWatchButton/StopWatchButton.tsx | 5 +++++
 src/utils/TimeUtils.ts                             | 5 +++++
 5 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/App.tsx b/App.tsx
index 56e34c2..b47cc23 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,5 +1,4 @@
-import { StatusBar } from "expo-status-bar";
-import { SafeAreaView, StyleSheet, Text, View } from "react-native";
+import { SafeAreaView, StyleSheet } from "react-native";
 import StopWatch from "./src/Components/StopWatch/StopWatch";
 
 export default function App() {
diff --git a/src/Components/LapsList/LapsList.tsx b/src/Components/LapsList/LapsList.tsx
index bcd330f..e00855e 100644
--- a/src/Components/LapsList/LapsList.tsx
+++ b/src/Components/LapsList/LapsList.tsx
@@ -6,6 +6,11 @@ interface LapsListInterface {
   laps: number[];
 }
 
+/**
+ * Component which displays all saved laps
+ * @param props - LapsListInterface which only has a list of laps (each in miliseconds)
+ * @returns Component for a list of laps
+ */
 const LapsList = (props: LapsListInterface) => {
   const { laps } = props;
 
diff --git a/src/Components/StopWatch/StopWatch.tsx b/src/Components/StopWatch/StopWatch.tsx
index 9a5aead..bfbb846 100644
--- a/src/Components/StopWatch/StopWatch.tsx
+++ b/src/Components/StopWatch/StopWatch.tsx
@@ -4,6 +4,10 @@ import StopWatchButton from "../StopWatchButton/StopWatchButton";
 import LapsList from "../LapsList/LapsList";
 import { formatTime } from "../../utils/TimeUtils";
 
+/**
+ * Stopwatch component that includes the time display, buttons, and laps list
+ * @returns A stopwatch component
+ */
 const StopWatch = () => {
   const [isRunning, setIsRunning] = useState<boolean>(false);
   const [elapsedTime, setElapsedTime] = useState<number>(0);
@@ -15,6 +19,7 @@ const StopWatch = () => {
     if (isRunning) {
       intervalID = setInterval(() => {
         const currentTime = Date.now();
+        // Computes elapsed time between current time and (state) start time
         setElapsedTime(
           (previousElapsedTime) =>
             previousElapsedTime + (currentTime - startTime)
@@ -79,6 +84,7 @@ const StopWatch = () => {
           )}
         </View>
       </View>
+      {/* Only renders the laps list when we have at least one lap */}
       {laps.length > 0 && <LapsList laps={laps} />}
     </View>
   );
diff --git a/src/Components/StopWatchButton/StopWatchButton.tsx b/src/Components/StopWatchButton/StopWatchButton.tsx
index e7ddbf2..afda874 100644
--- a/src/Components/StopWatchButton/StopWatchButton.tsx
+++ b/src/Components/StopWatchButton/StopWatchButton.tsx
@@ -6,6 +6,11 @@ interface StopWatchButtonProps {
   colour: string;
 }
 
+/**
+ * Reusable button component for the stopwatch
+ * @param props - StopWatchButtonProps which has a title, onPress function, and colour
+ * @returns A button component
+ */
 const StopWatchButton = (props: StopWatchButtonProps) => {
   const { title, onPress, colour } = props;
 
diff --git a/src/utils/TimeUtils.ts b/src/utils/TimeUtils.ts
index b95f0f1..39aa8d2 100644
--- a/src/utils/TimeUtils.ts
+++ b/src/utils/TimeUtils.ts
@@ -1,3 +1,8 @@
+/**
+ * Utility function that formats time in miliseconds to a string in the format HH:MM:SS
+ * @param time - Time in miliseconds
+ * @returns String for the time in the format HH:MM:SS
+ */
 export const formatTime = (time: number) => {
   const hours = Math.floor(time / 3600000);
   const minutes = Math.floor((time - hours * 3600000) / 60000);

From c70a0af7c821cf5a5b7b6ff291d87b7fb5cb53c8 Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Tue, 30 Jan 2024 01:29:35 +0100
Subject: [PATCH 09/10] Updated README.md to include notes for reviewer

---
 README.md | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 58a0111..77551c2 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,28 @@
 # Joshua Fung Submission for Shopify 2024 Mobile Engineering Assessment
 
-## Changes
+This is my submission for the Shopify 2024 Mobile Engineering Assessment, thank you for your time and consideration! :)
+
+Truthfully, I would have liked to have put in more time and polished it more (as well as more test cases), however, I have been very tight on time and extremely jetlagged due to flying across the world for my upcoming academic exchange.
+
+I have included some considerations and changes I have made in the sections below:.
+
+## Considerations
+
+- The test cases seemed to suggest 4 separate buttons which seemed excessive from a user's perspective -- Instead, I went for a two button approach:
+
+  - When the stopwatch has not started / has stopped, we have the 'start' and 'reset' buttons
+    - Start -> Starts the stopwatch and begins counting time
+    - Reset -> Resets the saved time and clears all laps
+  - When the stopwatch is running, we have the 'stop' and 'lap' buttons
+    - Stop -> Pauses the stopwatch and halts its count
+    - Lap -> Takes the elapsed time and adds it to the state as another lap
+
+- File structure was also slightly modified to break it down into more subfolders. Initially I was going to put what is currently in `StopWatch.tsx` into a `Screens` folder, but I didn't want to deviate too much.
+
+## (Test) Changes
 
 - The given `records and displays lap time` test was having a lot of issues, incl. the usage of `toContainElement()` as it's meant for web DOM elements rather than React Native components -> Checked for existence instead
-- Given tests' usage of `.textContent` does not seem to work anymore -> Used `.props.children` instead
+- Given tests' usage of `.textContent` seemed to also be having issues -> Used `.props.children` instead
 - Wrapped fire events that caused state changed with `act()`
   - However, I acknowledge that the fire event for pressing the "Lap" button is still triggering a warning (albeit being wrapped)
 

From 2ee161ad33dbde175cdbaef45140c0c554759996 Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Tue, 30 Jan 2024 01:30:25 +0100
Subject: [PATCH 10/10] Removed file that was copied into README.md

---
 PLEASE_READ.md | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 PLEASE_READ.md

diff --git a/PLEASE_READ.md b/PLEASE_READ.md
deleted file mode 100644
index 588d0ba..0000000
--- a/PLEASE_READ.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Considerations
-
-- The given `records and displays lap time` test was having a lot of issues, incl. the usage of `toContainElement()` as it's meant for web DOM elements rather than React Native components -> Checked for existence instead
-- Given tests' usage of `.textContent` does not seem to work anymore -> Used `.props.children` instead
-- Wrapped fire events that caused state changed with `act()`
-  - However, I acknowledge that the fire event for pressing the "Lap" button is still triggering a warning (albeit being wrapped)