grunt-front/src/components/FareList.js

import React, { Component } from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

import { getFareAttr, getFareRule } from '../actions/fare'
import { getItemFromList } from '../utils'
import {
  PaymentMethodChoices, TransferChoices
} from '../constants/choices'
import store from '../store'


const StyledBox = styled.div`
padding: 1rem;
background: #fafafa;
`

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

class FareList extends Component {

  componentWillMount() {
    const { fareattr, farerule } = this.props
    if (fareattr.count === 0)
      store.dispatch(getFareAttr())

    if (farerule.count === 0)
      store.dispatch(getFareRule())
  }

  render() {
    const { fareattr, farerule } = this.props
    const { match } = this.props
    return (
      <StyledBox>
      <h1 className="title">Fare</h1>
      <div className="columns">

        <div className="column is-6">
          <nav className="level is-mobile">
            <p className="level-item has-text-centered">
              <Link className="link is-info" to={`${match.url}/attributes/new`}>
                <i className="fas fa-plus" /> New fare attributes
              </Link>
            </p>
          </nav>
          {fareattr.results && Object.keys(fareattr.results).map(i => (
          <FakeRow className="level panel" key={fareattr.results[i].fare_id}>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Fare ID</p>
                <p className="title"><Link to={`${match.url}/attributes/${fareattr.results[i].id}`}>{fareattr.results[i].fare_id}</Link></p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Price</p>
                <p key={fareattr.results[i].id}>{fareattr.results[i].price}
                  <small>{fareattr.results[i].currency_type}</small>
                  <br />
                  {getItemFromList(fareattr.results[i].payment_method, PaymentMethodChoices, '') && getItemFromList(fareattr.results[i].payment_method, PaymentMethodChoices, '').label}
                </p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Transfer / sec</p>
                <p>
                  {getItemFromList(fareattr.results[i].transfer, TransferChoices, '') && getItemFromList(fareattr.results[i].transfer, TransferChoices, '').label}
                  / {fareattr.results[i].transfer_duration}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Agency</p>
                <p className="title">{fareattr.results[i].agency.name}</p>
              </div>
            </div>
          </FakeRow>
          ))}
        </div>

        <div className="column is-6">
          <nav className="level is-mobile">
            <p className="level-item has-text-centered">
              <Link className="link is-info" to={`${match.url}/rules/new`}>
                <i className="fas fa-plus" /> New fare rule
              </Link>
            </p>
          </nav>
          {farerule.results && Object.keys(farerule.results).map(i => (
          <FakeRow className="level panel" key={farerule.results[i].fare_id}>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Fare ID</p>
                <p className="title"><Link to={`${match.url}/rules/${farerule.results[i].id}`}>{farerule.results[i].fare.fare_id}</Link></p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Origin ID</p>
                <p className="title">{farerule.results[i].origin_id}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Destination ID (or contains)</p>
                <p className="title">
                  {farerule.results[i].destination_id}
                  {farerule.results[i].contains_id}
                </p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Route ID</p>
                <p className="title">
                  {farerule.results[i].route_id}
                </p>
              </div>
            </div>
          </FakeRow>
          ))}
        </div>

      </div>
      </StyledBox>
    )
  }
}

const mapStateToProps = state => ({
  farerule: state.farerule,
  fareattr: state.fareattr,
})
const connectFareList = connect(
  mapStateToProps,
  {},
)(FareList)

export default styled(connectFareList)`
  color: palevioletred;
  font-weight: bold;
`