MobileDevInternAssesment

App.tsx

@@ -1,20 +1,65 @@
-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';
 
+// The main App component
 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>
-  );
+    // State for tracking time
+    const [time, setTime] = useState<number>(0);
+    // State for tracking whether the stopwatch is running
+    const [running, setRunning] = useState<boolean>(false);
+    // State for storing lap times
+    const [laps, setLaps] = useState<number[]>([]);
+
+    // Timer logic to update the time every second when running
+    useEffect(() => {
+        let interval: ReturnType<typeof setTimeout> | null = null;
+        if (running) {
+            interval = setInterval(() => {
+                setTime(prevTime => prevTime + 1);
+            }, 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 (
+        <View style={styles.container}>
+            // Stopwatch display component
+            <StopWatch time={time} laps={laps} />
+            // Buttons for controlling the stopwatch
+            <StopWatchButton
+                onStart={handleStart}
+                onStop={handleStop}
+                onReset={handleReset}
+                onLap={handleLap}
+            />
+        </View>
+    );
 }
 
+// Styles for the App component
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+      flex: 1, // Take up the entire screen
+      justifyContent: 'center', // Center content vertically
+      alignItems: 'center', // Center content horizontally
+      backgroundColor: '#F0F0F0', // Light grey background
+  }
 });

package.json

@@ -12,17 +12,20 @@
   "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",
     "@testing-library/react-native": "^12.4.3",
     "@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"
   },

src/StopWatch.tsx

@@ -1,8 +1,31 @@
-import { View } from 'react-native';
-
-export default function StopWatch() {
-  return (
-    <View >
-    </View>
-  );
-}
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+// Define the props interface for the StopWatch component
+interface StopWatchProps {
+  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 (
+        <View>
+            // Display the total time
+            <Text style={styles.text}>{time}s</Text>
+
+            // Map through the laps array and render each lap time
+            {laps.map((lap, index) => (
+                <Text key={index} style={styles.text}>Lap {index + 1}: {lap}s</Text>
+            ))}
+        </View>
+    );
+}
+
+// StyleSheet for the component
+const styles = StyleSheet.create({
+    text: {
+        fontSize: 18, // Set font size to 18 for better readability
+        color: '#333', // Dark grey color for the text
+    }
+});

src/StopWatchButton.tsx

@@ -1,8 +1,50 @@
-import { View } from 'react-native';
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
-export default function StopWatchButton() {
+// Define the props interface for the StopWatchButton component
+interface StopWatchButtonProps {
+  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 (
-    <View >
+    <View>
+      // Start button with an onPress event to trigger onStart
+      <TouchableOpacity style={styles.button} onPress={onStart}>
+        <Text>Start</Text>
+      </TouchableOpacity>
+
+      // Stop button with an onPress event to trigger onStop
+      <TouchableOpacity style={styles.button} onPress={onStop}>
+        <Text>Stop</Text>
+      </TouchableOpacity>
+
+      // Reset button with an onPress event to trigger onReset
+      <TouchableOpacity style={styles.button} onPress={onReset}>
+        <Text>Reset</Text>
+      </TouchableOpacity>
+
+      // Lap button with an onPress event to trigger onLap
+      <TouchableOpacity style={styles.button} onPress={onLap}>
+        <Text>Lap</Text>
+      </TouchableOpacity>
     </View>
   );
-}
+}
+
+// StyleSheet for the component
+const styles = StyleSheet.create({
+  button: {
+    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
+});