[Shopify Assessment] Implement Stop Watch - Love Otudor

App.tsx

@@ -1,20 +1,21 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import {SafeAreaView, StyleSheet} from 'react-native';
+import StopWatch from "./src/StopWatch";
+import React from "react";
 
 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>
-  );
+    return (
+        <SafeAreaView style={styles.container}>
+            <StopWatch/>
+        </SafeAreaView>
+    )
 }
 
+
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        backgroundColor: 'black'
+    }
+})

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",

src/StopWatch.tsx

@@ -1,8 +1,112 @@
-import { View } from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useEffect, useState} from "react";
+import LapList, {LapModel} from "./components/LapList";
+import StopWatchButton from "./StopWatchButton";
+import {formatTime} from "./common/TimeFormatter";
 
 export default function StopWatch() {
-  return (
-    <View >
-    </View>
-  );
-}
+
+    const [elapsedTime, setElapsedTime] = useState(0)
+    const [isRunning, setIsRunning] = useState(false)
+    const [laps, setLaps] = useState<number[]>([])
+    const [lastLapTime, setLastLapTime] = useState<number>(0)
+
+    const onLapClicked = () => {
+        if (isRunning) {
+            // Calculate the lap time
+            const lapTime = elapsedTime - lastLapTime;
+            setLaps((prevLaps) => [...prevLaps, lapTime]);
+            setLastLapTime(elapsedTime);
+        }
+    }
+
+    const onResetClicked = () => {
+        setIsRunning(false)
+        setLaps([])
+        setLastLapTime(0)
+        setElapsedTime(0)
+
+    }
+
+    const onStopClicked = () => {
+        setIsRunning(false)
+    }
+
+    const onStartClicked = () => {
+        setIsRunning(true)
+    }
+
+    useEffect(() => {
+        let intervalId: number;
+
+        if (isRunning) {
+            intervalId = setInterval(() => {
+                setElapsedTime((prevElapsedTime) => prevElapsedTime + 100);
+            }, 100);
+        }
+
+        return () => {
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [isRunning]);
+
+    return (
+        <>
+            <View style={styles.displayTIme}>
+                <Text style={styles.time}>{formatTime(elapsedTime)}</Text>
+            </View>
+
+            <View style={styles.buttons}>
+                <StopWatchButton label={"Reset"} onPress={onResetClicked}/>
+                <StopWatchButton label={"Lap"} onPress={onLapClicked}/>
+                <StopWatchButton label={"Start"} onPress={onStartClicked}/>
+                <StopWatchButton label={"Stop"} onPress={onStopClicked}/>
+            </View>
+
+            <View style={styles.lapList}>
+                {laps.length > 0 && <LapList laps={
+                    laps.map((lap, index) => ({
+                        title: `Lap ${index + 1}`,
+                        time: lap,
+                    }))
+                }/>}
+            </View>
+        </>
+
+    )
+}
+
+const styles = StyleSheet.create({
+    displayTIme: {
+        flex: 1,
+        alignItems: 'flex-end',
+        flexDirection: 'row',
+        paddingHorizontal: 10,
+    },
+
+    buttons: {
+        flex: 1,
+        flexDirection: 'row',
+        gap: 10,
+        alignItems: 'flex-end',
+        paddingHorizontal: 10,
+    },
+
+    lapList: {
+        flex: 2,
+        width: '100%',
+        paddingHorizontal: 16,
+        marginTop: 16
+    },
+
+    time: {
+        fontSize: 70,
+        fontWeight: 'normal',
+        width: "100%",
+        textAlign: 'center',
+        color: 'white'
+
+    }
+})

src/StopWatchButton.tsx

@@ -1,8 +1,30 @@
-import { View } from 'react-native';
-
-export default function StopWatchButton() {
-  return (
-    <View >
-    </View>
-  );
-}
+import {Button, StyleSheet, View} from 'react-native';
+
+interface StopWatchButtonProps {
+    label: string
+    onPress: () => void
+
+}
+
+export default function StopWatchButton({label, onPress}: StopWatchButtonProps) {
+    return (
+        <View style={styles.container}>
+            <Button title={label} color={'#fff'} onPress={onPress}/>
+        </View>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'gray',
+        height: 50,
+        justifyContent: 'center',
+        borderRadius: 10,
+        overflow: 'hidden'
+    },
+    text: {
+        color: '#fff',
+    }
+})

src/common/TimeFormatter.ts

@@ -0,0 +1,12 @@
+export const formatTime = (time: number): string => {
+    const minutes = Math.floor(time / (1000 * 60));
+    const seconds = Math.floor((time % (1000 * 60)) / 1000);
+    const milliseconds = Math.floor((time % 1000) / 10);
+
+    // Pad single-digit seconds and milliseconds with leading zeros
+    const formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+    const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+    const formattedMilliseconds = milliseconds < 10 ? `0${milliseconds}` : `${milliseconds}`;
+
+    return `${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`;
+};

src/components/LapList.tsx

@@ -0,0 +1,39 @@
+import {ScrollView, StyleSheet, Text, View} from "react-native";
+import React from "react";
+import {formatTime} from "../common/TimeFormatter";
+
+export interface LapModel {
+    title: string
+    time: number
+
+}
+
+interface LapGroupProps {
+    laps: LapModel[]
+}
+
+export default function LapList({laps}: LapGroupProps) {
+    return (
+
+        <ScrollView testID={"lap-list"}>
+            {laps.map((lap, index) => (
+                <View key={index} style={styles.container} testID={"lap-item"}>
+                    <Text style={styles.text}>{lap.title}</Text>
+                    <Text style={styles.text}>{formatTime(lap.time)}</Text>
+                </View>
+            ))}
+        </ScrollView>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        paddingHorizontal: 10,
+    },
+
+    text: {
+        fontSize: 16,
+        color: 'white'
+    },
+})