grunt-front/src/components/StopTimeOne.js

import React, { Component } from 'react'
import styled from 'styled-components'

import StopTimeForm from './StopTimeForm'

const StyledRow = styled.div`
padding-top: 5px;
padding-bottom: 5px;
background: white;
margin-bottom: 1rem;
`

class StopTimeOne extends Component {

  state = {
    editMode: false
  }

  constructor(props) {
    super(props)
    this.toggleEditMode = this.toggleEditMode.bind(this)
  }

  toggleEditMode() {
    this.setState({editMode: !this.state.editMode})
  }

  renderReadOnly = (item) => (
    <StyledRow className="level panel" key={`st-item-${item.id}`}>
      <div className="level-item has-text-centered">
        <div>
          <p className="heading">
            Stop <a onClick={() => this.toggleEditMode()}>EDIT</a>
          </p>
          <p className="title">{item.sequence}. {item.stop.stop_id}</p>
          <div style={{maxWidth: '11rem'}}><small>{item.stop.name}</small></div>
        </div>
      </div>
      <div className="level-item has-text-centered">
        <div>
          <p className="heading">Arrival</p>
          <p className="title">{item.arrival}</p>
        </div>
      </div>
      <div className="level-item has-text-centered">
        <div>
          <p className="heading">Departure</p>
          <p className="title">{item.departure}</p>
        </div>
      </div>
      <div className="level-item has-text-centered">
        <div>
          <p className="heading">Stop headsign</p>
          <p className="title">{item.stop_headsign || '-'}</p>
        </div>
      </div>
    </StyledRow>
  )

  render() {
    const { item } = this.props
    if (this.state.editMode)
      return <StopTimeForm item={item}
                toggleEditMode={this.toggleEditMode} />
    return this.renderReadOnly(item)
  }

}

export default StopTimeOne