finishing section 2

index.ios.js

@@ -16,7 +16,10 @@ import {
 var Stopwatch = React.createClass({
   getInitialState: function() {
     return {
-      timeElapsed: null
+      timeElapsed: null,
+      running: false,
+      startTime: null,
+      laps: []
     };
   },
   render: function() {
@@ -36,37 +39,67 @@ var Stopwatch = React.createClass({
       </View>
 
       <View style={[styles.footer]}>
-        <Text>
-          I am a list of laps
-        </Text>
+        {this.laps()}
       </View>
 
     </View>
   },
+  laps: function() {
+    return this.state.laps.map(function(time, index) {
+      return <View style={styles.lap}>
+        <Text style={styles.lapText}>
+          Lap #{index + 1}
+        </Text>
+
+        <Text style={styles.lapText}>
+          {formatTime(time)}
+        </Text>
+      </View>
+    });
+  },
   startStopButton: function() {
+    var style = this.state.running ? styles.stopButton : styles.startButton;
+
     return <TouchableHighlight
             underlayColor="gray"
-            onPress={() => this.handleStartPress()}
-            style={[styles.button, styles.startButton]}
+            onPress={this.handleStartPress}
+            style={[styles.button, style]}
             >
       <Text>
-        Start
+        {this.state.running ? 'Stop' : 'Start'}
       </Text>
     </TouchableHighlight>
   },
   lapButton: function() {
-    return <View style={styles.button}>
+    return <TouchableHighlight
+            style={styles.button}
+            underlayColor="gray"
+            onPress={this.handleLapPress}>
       <Text>
         Lap
       </Text>
-    </View>
+    </TouchableHighlight>
+  },
+  handleLapPress: function() {
+    var lap = this.state.timeElapsed;
+    this.setState({
+      startTime: new Date(),
+      laps: this.state.laps.concat([lap])
+    });
   },
   handleStartPress: function() {
-    var startTime = new Date();
+    if (this.state.running) {
+      clearInterval(this.interval);
+      this.setState({running:false});
+      return;
+    }
+
+    this.setState({startTime: new Date()})
 
-    setInterval(() => {
+    this.interval = setInterval(() => {
       this.setState({
-        timeElapsed: new Date() - startTime
+        timeElapsed: new Date() - this.state.startTime,
+        running: true
       });
     }, 30);
   },
@@ -101,7 +134,9 @@ var styles = StyleSheet.create({
     alignItems: 'center'
   },
   timer: {
-    fontSize: 60
+    fontSize: 60,
+    fontFamily: 'HelveticaNeue-Light',
+    fontWeight: '100'
   },
   button: {
     borderWidth: 2,
@@ -113,6 +148,16 @@ var styles = StyleSheet.create({
   },
   startButton: {
     borderColor: '#00CC00'
+  },
+  stopButton: {
+    borderColor: '#cc0000'
+  },
+  lap: {
+    justifyContent: 'space-around',
+    flexDirection: 'row'
+  },
+  lapText: {
+    fontSize: 30
   }
 });