react stopwatch

//1: Imports and Constants
import React from "react-native"
import formatTime from 'minutes-seconds-milliseconds'
const {Text, View, AppRegistry, StyleSheet, TouchableHighlight} = React
const Button = TouchableHighlight

//2: Create Data Container

//3: Create Component
const StopWatch = React.createClass({

  getInitialState (){
    return{
      timeElapsed: null,
      running: false,
      startTime: null,
      laps:[],
    }
  },

  render (){

    return(
      <View style={styles.container}>
        {/*yellow*/}
        <View style={styles.header}>
          {/*red*/}
          <View style={styles.timerWLapper}>
            <Text style={styles.timer}>
              {formatTime(this.state.timeElapsed)}
            </Text>
          </View>
          {/*green*/}
          <View style={styles.buttonWLapper}>
            {this.startStopButton()}
            {this.LapButton()}
          </View>
        </View>
        {/*blue*/}
        <View style={styles.footer}>
          {this.laps()}
        </View>

      </View>
    )
  },

  laps (){
    return this.state.laps.map( (time, index) =>
      <View key={time} style={styles.Lap}>
        <Text style={styles.LapText}> Lap# {index +1}:</Text>
        <Text style={styles.LapText}> {formatTime(time)} </Text>
      </View>
    )
  },

  startStopButton (){

    let style = this.state.running ? styles.stopButton : styles.startButton

    return(
      <Button
        underlayColor="gray"
        onPress={this.handleStartPress}
        style={[styles.button, style]}>
        <Text>
          {this.state.running ? 'Stop': 'Start'}
        </Text>
      </Button>
    )
  },

  handleStartPress (){

    if(this.state.running){
      clearInterval(this.interval)
      this.setState({running:false})
      return
    }
    //grab inital time
    this.setState({startTime: new Date()})


    this.interval = setInterval(() => {
      this.setState({
        //delta
        timeElapsed: new Date() - this.state.startTime,
        running: true,
      })
    }, 30)
  },

  LapButton (){
    return(
      <Button
      underlayColor="gray"
      onPress={this.handleLapPress}
      style={styles.button}>
        <Text>Lap</Text>
      </Button>
    )
  },

  handleLapPress (){
    let lap = this.state.timeElapsed
    //reset clock
    this.setState({
      startTime: new Date(),
      laps: this.state.laps.concat([Lap]), //concating two, inorder to return new array, thus avoiding mutation
    })
  },

})
//4: Style Component
const styles = StyleSheet.create({
  container:{
    flex: 1,
    alignItems: 'stretch', //stretch horiz
  },
  header:{ //Yellow
    flex: 6,
  },
  footer:{ //Blue
    flex: 6,
  },
  timerWLapper:{ //red
    flex: 8,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  buttonWLapper: { //green
    flex: 4,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  timer:{
    fontSize:60,
  },
  button:{
    borderWidth: 2,
    height: 70,
    width: 70,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
  startButton:{
    borderColor: '#00CC00'
  },
  stopButton:{
    borderColor: 'red'
  },
  Lap:{
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  LapText: {
    fontSize: 20,
  },
})
//5: Register Root
AppRegistry.registerComponent('stopwatch', () => StopWatch)