From 370243a0e695788a1e36798678ba7399fd35cf01 Mon Sep 17 00:00:00 2001 From: hamidxahmed <115740578+hamidxahmed@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:50:21 -0500 Subject: [PATCH 1/7] Update App.tsx --- App.tsx | 59 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 46 insertions(+), 13 deletions(-) diff --git a/App.tsx b/App.tsx index 0329d0c..94c519f 100644 --- a/App.tsx +++ b/App.tsx @@ -1,20 +1,53 @@ -import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View } from 'react-native'; +import React, { useState, useEffect } from 'react'; +import { View, StyleSheet } from 'react-native'; +import StopWatch from './StopWatch'; +import StopWatchButton from './StopWatchButton'; export default function App() { - return ( - - Open up App.tsx to start working on your app! - - - ); + const [time, setTime] = useState(0); + const [running, setRunning] = useState(false); + const [laps, setLaps] = useState([]); + + // Timer logic + useEffect(() => { + let interval: ReturnType | null = null; + if (running) { + interval = setInterval(() => { + setTime(prevTime => prevTime + 1); + }, 1000); + } + return () => { + if (interval) clearInterval(interval); + }; + }, [running]); + + const handleStart = () => setRunning(true); + const handleStop = () => setRunning(false); + const handleReset = () => { + setTime(0); + setLaps([]); + setRunning(false); + }; + const handleLap = () => setLaps(prevLaps => [...prevLaps, time]); + + return ( + + + + + ); } const styles = StyleSheet.create({ container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', - }, + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F0F0F0', + } }); From 032c476549e4b572184b44754f2e2570ef4187b1 Mon Sep 17 00:00:00 2001 From: hamidxahmed <115740578+hamidxahmed@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:52:08 -0500 Subject: [PATCH 2/7] Update StopWatch.tsx --- src/StopWatch.tsx | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index 5c7eb74..f73b253 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -1,8 +1,25 @@ -import { View } from 'react-native'; +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; -export default function StopWatch() { - return ( - - - ); -} \ No newline at end of file +interface StopWatchProps { + time: number; + laps: number[]; +} + +export default function StopWatch({ time, laps }: StopWatchProps) { + return ( + + {time}s + {laps.map((lap, index) => ( + Lap {index + 1}: {lap}s + ))} + + ); +} + +const styles = StyleSheet.create({ + text: { + fontSize: 18, // Slightly larger text + color: '#333', // Darker text for better contrast + } +}); From e18d760e488fd1fc269513bd7c8a5e1a037c1388 Mon Sep 17 00:00:00 2001 From: hamidxahmed <115740578+hamidxahmed@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:52:25 -0500 Subject: [PATCH 3/7] Update StopWatchButton.tsx --- src/StopWatchButton.tsx | 40 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index 8768555..6293ce8 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -1,8 +1,40 @@ -import { View } from 'react-native'; +import React from 'react'; +import { View, TouchableOpacity, Text, StyleSheet } from 'react-native'; -export default function StopWatchButton() { +interface StopWatchButtonProps { + onStart: () => void; + onStop: () => void; + onReset: () => void; + onLap: () => void; +} + +export default function StopWatchButton({ onStart, onStop, onReset, onLap }: StopWatchButtonProps) { return ( - + + + Start + + + Stop + + + Reset + + + Lap + ); -} \ No newline at end of file +} + +const styles = StyleSheet.create({ + button: { + margin: 5, + borderWidth: 1, + borderColor: '#333', + padding: 10, + alignItems: 'center', + backgroundColor: '#A0A0A0' + }, + // Add other styles as needed +}); From 474596f2b99dad0ed147e7144b0b509392565d29 Mon Sep 17 00:00:00 2001 From: hamidxahmed <115740578+hamidxahmed@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:56:28 -0500 Subject: [PATCH 4/7] Update package.json --- package.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index bf0f5a3..c7fd90e 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,12 @@ "dependencies": { "expo": "~49.0.15", "expo-status-bar": "~1.6.0", + "jest": "^29.2.1", + "jest-expo": "~49.0.0", "react": "18.2.0", "react-native": "0.72.6", - "jest-expo": "~49.0.0", - "jest": "^29.2.1" + "react-native-web": "~0.19.6", + "react-dom": "18.2.0" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -23,6 +25,7 @@ "@tsconfig/react-native": "^3.0.2", "@types/jest": "^29.5.11", "@types/react": "~18.2.14", + "@types/react-native": "^0.73.0", "@types/react-test-renderer": "^18.0.7", "typescript": "^5.3.3" }, From 1b882e2e28fac0b85c005b462897b2cc033dbc0f Mon Sep 17 00:00:00 2001 From: hamidxahmed <115740578+hamidxahmed@users.noreply.github.com> Date: Mon, 29 Jan 2024 19:03:22 -0500 Subject: [PATCH 5/7] Update StopWatch.tsx --- src/StopWatch.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index f73b253..d8eb32e 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -1,15 +1,20 @@ import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; +// Define the props interface for the StopWatch component interface StopWatchProps { - time: number; - laps: number[]; + time: number; // Represents the total time in seconds + laps: number[]; // Array of lap times in seconds } +// The StopWatch functional component export default function StopWatch({ time, laps }: StopWatchProps) { return ( + // Display the total time {time}s + + // Map through the laps array and render each lap time {laps.map((lap, index) => ( Lap {index + 1}: {lap}s ))} @@ -17,9 +22,10 @@ export default function StopWatch({ time, laps }: StopWatchProps) { ); } +// StyleSheet for the component const styles = StyleSheet.create({ text: { - fontSize: 18, // Slightly larger text - color: '#333', // Darker text for better contrast + fontSize: 18, // Set font size to 18 for better readability + color: '#333', // Dark grey color for the text } }); From 17fb290270ea15cb1f2d1a27aefad9037ea50090 Mon Sep 17 00:00:00 2001 From: hamidxahmed <115740578+hamidxahmed@users.noreply.github.com> Date: Mon, 29 Jan 2024 19:05:03 -0500 Subject: [PATCH 6/7] Update StopWatchButton.tsx --- src/StopWatchButton.tsx | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index 6293ce8..633388b 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -1,25 +1,34 @@ import React from 'react'; import { View, TouchableOpacity, Text, StyleSheet } from 'react-native'; +// Define the props interface for the StopWatchButton component interface StopWatchButtonProps { - onStart: () => void; - onStop: () => void; - onReset: () => void; - onLap: () => void; + onStart: () => void; // Function to be called when the Start button is pressed + onStop: () => void; // Function to be called when the Stop button is pressed + onReset: () => void; // Function to be called when the Reset button is pressed + onLap: () => void; // Function to be called when the Lap button is pressed } +// The StopWatchButton functional component export default function StopWatchButton({ onStart, onStop, onReset, onLap }: StopWatchButtonProps) { return ( + // Start button with an onPress event to trigger onStart Start + + // Stop button with an onPress event to trigger onStop Stop + + // Reset button with an onPress event to trigger onReset Reset + + // Lap button with an onPress event to trigger onLap Lap @@ -27,14 +36,15 @@ export default function StopWatchButton({ onStart, onStop, onReset, onLap }: Sto ); } +// StyleSheet for the component const styles = StyleSheet.create({ button: { - margin: 5, - borderWidth: 1, - borderColor: '#333', - padding: 10, - alignItems: 'center', - backgroundColor: '#A0A0A0' + margin: 5, // Margin around each button + borderWidth: 1, // Border width of 1 for the button + borderColor: '#333', // Border color set to a dark grey + padding: 10, // Padding inside the button for better touch area + alignItems: 'center', // Align text to the center of the button + backgroundColor: '#A0A0A0' // Background color of the button }, // Add other styles as needed }); From 519a8c9066d32268ddc0c1310075b99e94f4acdc Mon Sep 17 00:00:00 2001 From: hamidxahmed <115740578+hamidxahmed@users.noreply.github.com> Date: Mon, 29 Jan 2024 19:06:39 -0500 Subject: [PATCH 7/7] Update App.tsx --- App.tsx | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/App.tsx b/App.tsx index 94c519f..0466b55 100644 --- a/App.tsx +++ b/App.tsx @@ -3,12 +3,16 @@ import { View, StyleSheet } from 'react-native'; import StopWatch from './StopWatch'; import StopWatchButton from './StopWatchButton'; +// The main App component export default function App() { + // State for tracking time const [time, setTime] = useState(0); + // State for tracking whether the stopwatch is running const [running, setRunning] = useState(false); + // State for storing lap times const [laps, setLaps] = useState([]); - // Timer logic + // Timer logic to update the time every second when running useEffect(() => { let interval: ReturnType | null = null; if (running) { @@ -17,22 +21,29 @@ export default function App() { }, 1000); } return () => { + // Clear the interval when the component is unmounted or running state changes if (interval) clearInterval(interval); }; }, [running]); + // Function to start the stopwatch const handleStart = () => setRunning(true); + // Function to stop the stopwatch const handleStop = () => setRunning(false); + // Function to reset the stopwatch const handleReset = () => { setTime(0); setLaps([]); setRunning(false); }; + // Function to record a lap time const handleLap = () => setLaps(prevLaps => [...prevLaps, time]); return ( + // Stopwatch display component + // Buttons for controlling the stopwatch