From 8320bf6186e16f536d8e5e105293a317f3dcf073 Mon Sep 17 00:00:00 2001 From: oneJ1 Date: Mon, 29 Jan 2024 17:15:19 -0500 Subject: [PATCH 1/7] Initial button styles created --- App.tsx | 10 ++--- src/StopWatch.tsx | 7 +++- src/StopWatchButton.tsx | 82 +++++++++++++++++++++++++++++++++++++++-- 3 files changed, 89 insertions(+), 10 deletions(-) diff --git a/App.tsx b/App.tsx index 0329d0c..cf37530 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 StopWatch from './src/StopWatch'; export default function App() { return ( - Open up App.tsx to start working on your app! - + ); } @@ -13,8 +13,8 @@ export default function App() { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', + backgroundColor: "#0D0916", + alignItems: "center", + justifyContent: "center", }, }); diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index 5c7eb74..eea0155 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -1,8 +1,13 @@ import { View } from 'react-native'; +import StopWatchButton from './StopWatchButton'; export default function StopWatch() { return ( - + + console.log("Nice")}> + console.log("Nice")}> + console.log("Nice")}> + console.log("Nice")}> ); } \ No newline at end of file diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index 8768555..04a8e1e 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -1,8 +1,82 @@ -import { View } from 'react-native'; +import { DimensionValue, Insets, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +type ActionTypes = + | "start" + | "stop" + | "reset" + | "lap"; + +interface StopWatchButtonProps { + action: ActionTypes + onPress(): void; + + height?: DimensionValue; + width?: DimensionValue; + + buttonColor?: string; + buttonBorderColor?: string; + + borderRadius?: number; + bottomBorderWidth?: number; + + isDisabled?: boolean; + hitslop?: Insets; +} + +export default function StopWatchButton( + { + action, + onPress, + height = 40, + width = 80, + buttonColor = "#6BBDF3", + buttonBorderColor = "white", + borderRadius = 8, + isDisabled = false, + hitslop = { top: 20, bottom: 20, left: 20, right: 20 }, + ...props + } + : StopWatchButtonProps) { + + //Button title is just the action capitalized + const buttonTitle = action.substring(0, 1).toUpperCase() + action.substring(1); -export default function StopWatchButton() { return ( - + + + + {buttonTitle} + + + ); -} \ No newline at end of file +} + +const styles = StyleSheet.create({ + text: { + color: "#FAFAFA", + }, +}); From 15214d65c192491017177d692a2a2c0d82caa05f Mon Sep 17 00:00:00 2001 From: oneJ1 Date: Mon, 29 Jan 2024 17:55:20 -0500 Subject: [PATCH 2/7] basis timer functionality works in millis --- src/StopWatch.tsx | 80 ++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 73 insertions(+), 7 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index eea0155..8404d8d 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -1,13 +1,79 @@ -import { View } from 'react-native'; +import { StyleSheet, Text, View } from 'react-native'; import StopWatchButton from './StopWatchButton'; +import { useEffect, useState } from 'react'; + +function formatTime(millis: number){ + const hours = millis +} export default function StopWatch() { + const[time, setTime] = useState(0); + const [isTimerOn, setIsTimerOn] = useState(false); + + useEffect(() => { + let interval: number | null = null; + + if(isTimerOn){ + interval = setInterval(() => { + setTime(time => time+1) + }, 10); + } else if(!isTimerOn && time > 0){ + clearInterval(interval!); + } + + return () => clearInterval(interval!); + }) + return ( - - console.log("Nice")}> - console.log("Nice")}> - console.log("Nice")}> - console.log("Nice")}> + + + {time} + + + + setIsTimerOn(true)}> + setIsTimerOn(false)}> + + + console.log("Nice")}> + console.log("Nice")}> + + ); -} \ No newline at end of file +} + +const styles = StyleSheet.create({ + container: { + justifyContent: "center", + alignItems: "center", + width: "100%", + height: "100%", + }, + stopwatchContainer: { + justifyContent: "center", + alignItems: "center", + height: "60%", + width: "90%", + }, + buttonsContainer:{ + justifyContent: "flex-end", + alignItems: "center", + height: "40%", + width: "90%", + // borderWidth: 2, + // borderColor: "white" + }, + buttonsRowContainer: { + flexDirection: "row", + justifyContent: "space-between", + // borderWidth: 2, + // borderColor: "white", + width: "80%", + marginBottom: 32, + }, + text: { + color: "#FAFAFA", + fontSize: 64, + }, +}) \ No newline at end of file From 56f19dbd89b08cd70e2e748ed038bd4bcf23ff2f Mon Sep 17 00:00:00 2001 From: oneJ1 Date: Mon, 29 Jan 2024 18:50:08 -0500 Subject: [PATCH 3/7] changed stopwatch logic for milliseconds and finished all basic functions --- src/StopWatch.tsx | 80 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 67 insertions(+), 13 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index 8404d8d..2e141b8 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -1,33 +1,77 @@ -import { StyleSheet, Text, View } from 'react-native'; +import { FlatList, StyleSheet, Text, View } from 'react-native'; import StopWatchButton from './StopWatchButton'; import { useEffect, useState } from 'react'; -function formatTime(millis: number){ - const hours = millis +function formatTime(millis: number): string { + const hours = Math.floor((millis/1000)/3600); + const minutes = Math.floor(((millis/1000) - (hours*3600))/60); + const seconds = Math.floor((millis/1000)%60); + const millisFormatted = millis%1000; + + return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${millisFormatted.toString().padStart(3, "0")}`; } +const renderLap = ({ item }: { item: number }) => { + return ( + + {formatTime(item)} + + ); +}; + export default function StopWatch() { - const[time, setTime] = useState(0); + const[startTime, setStartTime] = useState(null); + const[time, setTime] = useState(3560000); const [isTimerOn, setIsTimerOn] = useState(false); + const [laps, setLaps] = useState([]); useEffect(() => { let interval: number | null = null; if(isTimerOn){ + if (startTime === null) { + setStartTime(Date.now() - time); + } + interval = setInterval(() => { - setTime(time => time+1) - }, 10); - } else if(!isTimerOn && time > 0){ - clearInterval(interval!); + setTime(Date.now() - startTime!); + }, 1); + } else { + setStartTime(null); } return () => clearInterval(interval!); }) + function resetTimer(){ + setTime(0); + setIsTimerOn(false); + setLaps([]); + } + + function addLap(){ + const newLaps = [ + ...laps.slice(0, laps.length), + time, + ...laps.slice(laps.length) + ]; + + console.log(newLaps); + setLaps(newLaps); + } + return ( - {time} + {formatTime(time)} + + + @@ -35,8 +79,8 @@ export default function StopWatch() { setIsTimerOn(false)}> - console.log("Nice")}> - console.log("Nice")}> + + @@ -51,9 +95,15 @@ const styles = StyleSheet.create({ height: "100%", }, stopwatchContainer: { + justifyContent: "flex-end", + alignItems: "center", + height: "30%", + width: "90%", + }, + lapsContainer: { justifyContent: "center", alignItems: "center", - height: "60%", + height: "30%", width: "90%", }, buttonsContainer:{ @@ -72,8 +122,12 @@ const styles = StyleSheet.create({ width: "80%", marginBottom: 32, }, + stopwatchText: { + color: "#FAFAFA", + fontSize: 48, + }, text: { color: "#FAFAFA", - fontSize: 64, + fontSize: 16, }, }) \ No newline at end of file From 8afcbccb5660a46537792e1b5d4a95f4e3fcc521 Mon Sep 17 00:00:00 2001 From: oneJ1 Date: Mon, 29 Jan 2024 19:48:40 -0500 Subject: [PATCH 4/7] lap functionality fully works --- src/StopWatch.tsx | 95 ++++++++++++++++++++++++++++++----------- src/StopWatchButton.tsx | 4 +- 2 files changed, 72 insertions(+), 27 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index 2e141b8..a07bc46 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -2,6 +2,12 @@ import { FlatList, StyleSheet, Text, View } from 'react-native'; import StopWatchButton from './StopWatchButton'; import { useEffect, useState } from 'react'; +type LapItem = { + index: number; + lapTime: number; + generalTime: number; +} + function formatTime(millis: number): string { const hours = Math.floor((millis/1000)/3600); const minutes = Math.floor(((millis/1000) - (hours*3600))/60); @@ -11,19 +17,34 @@ function formatTime(millis: number): string { return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${millisFormatted.toString().padStart(3, "0")}`; } -const renderLap = ({ item }: { item: number }) => { +const renderLap = ({ item }: { item: LapItem }) => { return ( - - {formatTime(item)} - + + + + {item.index.toString()} + + + + + {formatTime(item.lapTime)} + + + + + {formatTime(item.generalTime)} + + + + ); }; export default function StopWatch() { - const[startTime, setStartTime] = useState(null); - const[time, setTime] = useState(3560000); + const [startTime, setStartTime] = useState(null); + const [time, setTime] = useState(0); const [isTimerOn, setIsTimerOn] = useState(false); - const [laps, setLaps] = useState([]); + const [lapItems, setLapItems] = useState([]); useEffect(() => { let interval: number | null = null; @@ -46,18 +67,26 @@ export default function StopWatch() { function resetTimer(){ setTime(0); setIsTimerOn(false); - setLaps([]); + setLapItems([]); } function addLap(){ + const newestTime = lapItems.length > 0 ? lapItems[lapItems.length-1].generalTime : 0; + const newestIndex = lapItems.length > 0 ? lapItems[lapItems.length-1].index : 0; + + const newLapItem = { + index: newestIndex+1, + lapTime: time-newestTime, + generalTime: time + } + const newLaps = [ - ...laps.slice(0, laps.length), - time, - ...laps.slice(laps.length) + ...lapItems.slice(0, lapItems.length), + newLapItem, + ...lapItems.slice(lapItems.length) ]; - console.log(newLaps); - setLaps(newLaps); + setLapItems(newLaps); } return ( @@ -66,8 +95,21 @@ export default function StopWatch() { {formatTime(time)} + {lapItems.length > 0 ? + + + Lap + + + Lap Time + + + Overall Time + + : + null} - setIsTimerOn(true)}> - setIsTimerOn(false)}> + setIsTimerOn(true)} isDisabled={isTimerOn}/> + setIsTimerOn(false)} isDisabled={!isTimerOn}> - - + + @@ -100,25 +142,28 @@ const styles = StyleSheet.create({ height: "30%", width: "90%", }, + lapsHeader: { + flexDirection: "row", + width: "100%", + marginBottom: 4, + }, lapsContainer: { - justifyContent: "center", - alignItems: "center", height: "30%", - width: "90%", + width: "80%", + }, + lapItemContainer:{ + flexDirection: "row", + alignItems: "center", }, buttonsContainer:{ justifyContent: "flex-end", alignItems: "center", height: "40%", width: "90%", - // borderWidth: 2, - // borderColor: "white" }, buttonsRowContainer: { flexDirection: "row", justifyContent: "space-between", - // borderWidth: 2, - // borderColor: "white", width: "80%", marginBottom: 32, }, diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index 04a8e1e..363fc3a 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -38,7 +38,7 @@ export default function StopWatchButton( } : StopWatchButtonProps) { - //Button title is just the action capitalized + //Button title is just the action name capitalized const buttonTitle = action.substring(0, 1).toUpperCase() + action.substring(1); return ( @@ -65,7 +65,7 @@ export default function StopWatchButton( justifyContent: "center", alignItems: "center" }} - onPress={onPress} + onPress={!isDisabled ? onPress : () => null} > {buttonTitle} From fbc5c75450fa8a3527c0f0ef13f82b6f1b03d707 Mon Sep 17 00:00:00 2001 From: oneJ1 Date: Mon, 29 Jan 2024 19:58:55 -0500 Subject: [PATCH 5/7] added colors to buttons --- src/StopWatch.tsx | 4 ++-- src/StopWatchButton.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index a07bc46..86ed828 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -117,12 +117,12 @@ export default function StopWatch() { - setIsTimerOn(true)} isDisabled={isTimerOn}/> + setIsTimerOn(true)} isDisabled={isTimerOn} buttonColor='#62a84f' buttonBorderColor='#326345'/> setIsTimerOn(false)} isDisabled={!isTimerOn}> - + diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index 363fc3a..b18e99f 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -30,7 +30,7 @@ export default function StopWatchButton( height = 40, width = 80, buttonColor = "#6BBDF3", - buttonBorderColor = "white", + buttonBorderColor = "#4796D0", borderRadius = 8, isDisabled = false, hitslop = { top: 20, bottom: 20, left: 20, right: 20 }, @@ -52,6 +52,7 @@ export default function StopWatchButton( style={{ backgroundColor: isDisabled ? "#484254" : buttonColor, borderColor: isDisabled ? "#777777" : buttonBorderColor, + borderWidth: 1, borderRadius: borderRadius, }} {...props} From d63c94610aadaa913b64851bb674907dabc3b19e Mon Sep 17 00:00:00 2001 From: oneJ1 Date: Mon, 29 Jan 2024 20:28:33 -0500 Subject: [PATCH 6/7] cleaned up code and added comments --- App.tsx | 2 +- src/{ => components}/StopWatch.tsx | 56 +++++++++++++++++------- src/{ => components}/StopWatchButton.tsx | 43 ++++++------------ src/types/ButtonProps.ts | 28 ++++++++++++ src/types/StopwatchButtonActionTypes.ts | 6 +++ src/utils/formatTime.tsx | 9 ++++ tests/Stopwatch.test.js | 2 +- 7 files changed, 97 insertions(+), 49 deletions(-) rename src/{ => components}/StopWatch.tsx (70%) rename src/{ => components}/StopWatchButton.tsx (65%) create mode 100644 src/types/ButtonProps.ts create mode 100644 src/types/StopwatchButtonActionTypes.ts create mode 100644 src/utils/formatTime.tsx diff --git a/App.tsx b/App.tsx index cf37530..a076846 100644 --- a/App.tsx +++ b/App.tsx @@ -1,6 +1,6 @@ import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; -import StopWatch from './src/StopWatch'; +import StopWatch from './src/components/StopWatch'; export default function App() { return ( diff --git a/src/StopWatch.tsx b/src/components/StopWatch.tsx similarity index 70% rename from src/StopWatch.tsx rename to src/components/StopWatch.tsx index 86ed828..7c660a1 100644 --- a/src/StopWatch.tsx +++ b/src/components/StopWatch.tsx @@ -1,36 +1,30 @@ import { FlatList, StyleSheet, Text, View } from 'react-native'; import StopWatchButton from './StopWatchButton'; import { useEffect, useState } from 'react'; +import { formatTime } from '../utils/formatTime'; +//LapItem contains the field needed to display the laps type LapItem = { index: number; lapTime: number; generalTime: number; } -function formatTime(millis: number): string { - const hours = Math.floor((millis/1000)/3600); - const minutes = Math.floor(((millis/1000) - (hours*3600))/60); - const seconds = Math.floor((millis/1000)%60); - const millisFormatted = millis%1000; - - return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${millisFormatted.toString().padStart(3, "0")}`; -} - +//renderLap function is used to render each lapItem into a row with the formatted time const renderLap = ({ item }: { item: LapItem }) => { return ( - + {item.index.toString()} - + {formatTime(item.lapTime)} - + {formatTime(item.generalTime)} @@ -41,14 +35,22 @@ const renderLap = ({ item }: { item: LapItem }) => { }; export default function StopWatch() { + //States: + //startTime, the startTime of the stopwatch, necessary for precise milliseconds display + //time, the time in milliseconds passed from the beginning + //isTimerOn, a boolean state needed to set the timer on/off + //lapItems, a state array needed to add lapItems and display the laps const [startTime, setStartTime] = useState(null); const [time, setTime] = useState(0); const [isTimerOn, setIsTimerOn] = useState(false); const [lapItems, setLapItems] = useState([]); + //useEffect is needed here to update the time once the user presses Start or Stop useEffect(() => { let interval: number | null = null; + //Checks if the timer is on: + //If it is on: keep incrementing the time if(isTimerOn){ if (startTime === null) { setStartTime(Date.now() - time); @@ -58,34 +60,43 @@ export default function StopWatch() { setTime(Date.now() - startTime!); }, 1); } else { + //If the timer is off: stop incrementing the time setStartTime(null); } + //Clear the interval on return return () => clearInterval(interval!); }) + //reset the timer by resetting all time states and laps function resetTimer(){ setTime(0); setIsTimerOn(false); setLapItems([]); } + //function to add a lap item function addLap(){ + //Gets the latest lap item to get the time and the index, if there's no previous lap item, start at 0 const newestTime = lapItems.length > 0 ? lapItems[lapItems.length-1].generalTime : 0; const newestIndex = lapItems.length > 0 ? lapItems[lapItems.length-1].index : 0; + //Create a new lap item using the latest lap item + //Increment the index and calculate the lap time using the time now - the time at which the previous lap was at const newLapItem = { index: newestIndex+1, lapTime: time-newestTime, generalTime: time } + //Create a new laps array and add the new object const newLaps = [ ...lapItems.slice(0, lapItems.length), newLapItem, ...lapItems.slice(lapItems.length) ]; + //Set the lap items to the new array setLapItems(newLaps); } @@ -97,13 +108,13 @@ export default function StopWatch() { {lapItems.length > 0 ? - + Lap - + Lap Time - + Overall Time : @@ -147,8 +158,19 @@ const styles = StyleSheet.create({ width: "100%", marginBottom: 4, }, + lapsHeaderLeftSection: { + width: "20%", + }, + lapsHeaderMiddleSection: { + width: "40%", + alignItems: "center", + }, + lapsHeaderRightSection: { + width: "40%", + alignItems: "flex-end", + }, lapsContainer: { - height: "30%", + height: "40%", width: "80%", }, lapItemContainer:{ @@ -158,7 +180,7 @@ const styles = StyleSheet.create({ buttonsContainer:{ justifyContent: "flex-end", alignItems: "center", - height: "40%", + height: "30%", width: "90%", }, buttonsRowContainer: { diff --git a/src/StopWatchButton.tsx b/src/components/StopWatchButton.tsx similarity index 65% rename from src/StopWatchButton.tsx rename to src/components/StopWatchButton.tsx index b18e99f..aa82837 100644 --- a/src/StopWatchButton.tsx +++ b/src/components/StopWatchButton.tsx @@ -1,27 +1,5 @@ -import { DimensionValue, Insets, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; - -type ActionTypes = - | "start" - | "stop" - | "reset" - | "lap"; - -interface StopWatchButtonProps { - action: ActionTypes - onPress(): void; - - height?: DimensionValue; - width?: DimensionValue; - - buttonColor?: string; - buttonBorderColor?: string; - - borderRadius?: number; - bottomBorderWidth?: number; - - isDisabled?: boolean; - hitslop?: Insets; -} +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { StopWatchButtonProps } from '../types/ButtonProps'; export default function StopWatchButton( { @@ -60,12 +38,7 @@ export default function StopWatchButton( null} > {buttonTitle} @@ -77,6 +50,16 @@ export default function StopWatchButton( } const styles = StyleSheet.create({ + container: { + width: "100%", + height: "100%", + }, + button: { + width: "100%", + height: "100%", + justifyContent: "center", + alignItems: "center" + }, text: { color: "#FAFAFA", }, diff --git a/src/types/ButtonProps.ts b/src/types/ButtonProps.ts new file mode 100644 index 0000000..a8d8a57 --- /dev/null +++ b/src/types/ButtonProps.ts @@ -0,0 +1,28 @@ +import { DimensionValue, Insets } from "react-native"; +import { StopwatchButtonActionTypes } from "./StopwatchButtonActionTypes"; + +//The stopwatch button takes in as input the following: +//action: the type of the button, what it does +//onPress: the function which is executes on press +//height: adjustable height if needed +//width: adjustable width if needed +//buttonColor: adjustable button color if needed, default is light blue +//buttonBorderColor: adjustable border color if needed, default is shade of light blue +//isDisabled: boolean to disable the button if needed +//hitslop: adjustable hitslop, default is 20 +export interface StopWatchButtonProps { + action: StopwatchButtonActionTypes + onPress(): void; + + height?: DimensionValue; + width?: DimensionValue; + + buttonColor?: string; + buttonBorderColor?: string; + + borderRadius?: number; + bottomBorderWidth?: number; + + isDisabled?: boolean; + hitslop?: Insets; +} \ No newline at end of file diff --git a/src/types/StopwatchButtonActionTypes.ts b/src/types/StopwatchButtonActionTypes.ts new file mode 100644 index 0000000..ef55fcc --- /dev/null +++ b/src/types/StopwatchButtonActionTypes.ts @@ -0,0 +1,6 @@ +//The different types of buttons +export type StopwatchButtonActionTypes = + | "start" + | "stop" + | "reset" + | "lap"; \ No newline at end of file diff --git a/src/utils/formatTime.tsx b/src/utils/formatTime.tsx new file mode 100644 index 0000000..4ff576f --- /dev/null +++ b/src/utils/formatTime.tsx @@ -0,0 +1,9 @@ +//Function which formats the time from milliseconds to HH:MM:SS.(mls) +export function formatTime(millis: number): string { + const hours = Math.floor((millis/1000)/3600); + const minutes = Math.floor(((millis/1000) - (hours*3600))/60); + const seconds = Math.floor((millis/1000)%60); + const millisFormatted = millis%1000; + + return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${millisFormatted.toString().padStart(3, "0")}`; +} \ No newline at end of file diff --git a/tests/Stopwatch.test.js b/tests/Stopwatch.test.js index d5e9f1f..584f38a 100644 --- a/tests/Stopwatch.test.js +++ b/tests/Stopwatch.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react-native'; -import Stopwatch from '../src/Stopwatch'; +import Stopwatch from '../src/components/StopWatch'; describe('Stopwatch', () => { test('renders initial state correctly', () => { From d77653c164301917c1da61e09822889ecb4cda21 Mon Sep 17 00:00:00 2001 From: oneJ1 Date: Mon, 29 Jan 2024 20:30:56 -0500 Subject: [PATCH 7/7] added one more type to types --- src/components/StopWatch.tsx | 8 +------- src/types/LapItem.ts | 6 ++++++ 2 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 src/types/LapItem.ts diff --git a/src/components/StopWatch.tsx b/src/components/StopWatch.tsx index 7c660a1..faa28cf 100644 --- a/src/components/StopWatch.tsx +++ b/src/components/StopWatch.tsx @@ -2,13 +2,7 @@ import { FlatList, StyleSheet, Text, View } from 'react-native'; import StopWatchButton from './StopWatchButton'; import { useEffect, useState } from 'react'; import { formatTime } from '../utils/formatTime'; - -//LapItem contains the field needed to display the laps -type LapItem = { - index: number; - lapTime: number; - generalTime: number; -} +import { LapItem } from '../types/LapItem'; //renderLap function is used to render each lapItem into a row with the formatted time const renderLap = ({ item }: { item: LapItem }) => { diff --git a/src/types/LapItem.ts b/src/types/LapItem.ts new file mode 100644 index 0000000..cc71e86 --- /dev/null +++ b/src/types/LapItem.ts @@ -0,0 +1,6 @@ +//LapItem contains the field needed to display the laps +export type LapItem = { + index: number; + lapTime: number; + generalTime: number; +} \ No newline at end of file