grunt-front/src/components/RouteForm.js

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

import Input from './parts/Input'
import Select from './parts/Select'
import {
  getRoute, updateRoute,
  createRoute, deleteRoute
} from '../actions/route';
import store from '../store'
import { getItemFromList } from '../utils'
import { RouteTypeChoices } from '../constants/choices'

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

// TODO: need to deal with shapes

class RouteForm extends Component {

  state = {
    id: null,
    agency: null,
    route_id: "",
    short_name: "",
    long_name: "",
    desc: "",
    route_type: "3",
    route_url: "",
    route_color: "",
    route_text_color: "",
    route_sort_order: "0",
  }

  constructor() {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleDelete = this.handleDelete.bind(this)
    this.renderForm = this.renderForm.bind(this)
  }

  handleChange(evt) {
    let updated = {}
    updated[evt.target.name] = evt.target.value
    this.setState(updated)
  }

  handleSubmit() {
    const { id } = this.state
    let body = { ...this.state }
    delete body.id
    delete body.farerule_set
    delete body.trip_set
    delete body.geojson
    if (id !== null) {
      store.dispatch(updateRoute(id, body))
    } else {
      store.dispatch(createRoute(body))
    }
    this.setState({justSubmit: true})
  }

  handleDelete() {
    const { id } = this.state
    store.dispatch(deleteRoute(id))
    this.setState({justSubmit: true})
  }

  componentDidMount() {
    const { routeId } = this.props.match.params
    const { fetching, count } = this.props.route
    if (routeId !== undefined && count === 0 && !fetching)
      store.dispatch(getRoute(`route_id=${routeId}`))
  }

  static getDerivedStateFromProps(props, state) {
    // if form is ready, then nothing else to do
    if (state.agency !== null || state.id !== null)
      return null

    const { agencyId, routeId } = props.match.params
    if (routeId === undefined
        && state.agency === null
        && props.agency.count > 0) {
      // this is for new route
      const { results } = props.agency
      const agencies = results.filter(ele => ele.agency_id === agencyId)
      if (agencies.length > 0) {
        props.updateBreadcrumb({ agencyId, routeId: 'new' })
        return { agency: agencies[0].id }
      }
    } else if (routeId !== undefined && state.id === null) {
      // this is for editing route
      const ones = props.route.results.filter(ele => ele.route_id === routeId)
      if (ones.length > 0) {
        props.updateBreadcrumb({ agencyId, routeId })
        return ones[0]
      }
      return null
    }
    return null
  }

  renderForm() {
    const one = this.state
    const { agencyId, routeId } = this.props.match.params
    const { agency } = this.props
    const agencies = agency.results.filter(ele => ele.agency_id === agencyId)
    const { fetching } = this.props.route
    return (
      <StyledRouteForm>
        <h1 className="title">{one.route_id || 'New Route'}&nbsp;&nbsp;</h1>
        <div className="content">
          <Input
              label="Route ID"
              type="text"
              fieldName="route_id"
              value={one.route_id || ''}
            handleChange={this.handleChange} />

          <Input
            label="Short Name"
            type="text"
            fieldName="short_name"
            value={one.short_name || ''}
            handleChange={this.handleChange} />

          <Input
            label="Long Name"
            type="text"
            fieldName="long_name"
            value={one.long_name || ''}
            handleChange={this.handleChange} />

          <Input
              label="Description"
              type="text"
              fieldName="desc"
              value={one.desc || ''}
              handleChange={this.handleChange} />

          <Select
            label="Route Type"
            fieldName="route_type"
            value={getItemFromList(one.route_type, RouteTypeChoices)}
            handleChange={this.handleChange}
            choices={RouteTypeChoices} />

          <Input
              label="Route URL"
              type="text"
              fieldName="route_url"
              value={one.route_url || ''}
              handleChange={this.handleChange} />

          <Input
              label="Route Color"
              type="text"
              fieldName="route_color"
              value={one.route_color || ''}
              handleChange={this.handleChange} />

          <Input
              label="Route Text Color"
              type="text"
              fieldName="route_text_color"
              value={one.route_text_color || ''}
              handleChange={this.handleChange} />

          <Input
              label="Route Sort Order"
              type="text"
              fieldName="route_sort_order"
              defaultValue="0"
              value={one.route_sort_order || ''}
              handleChange={this.handleChange} />
        </div>

        <div className="field is-grouped">
          <div className="control">
            <button className="button is-link"
              onClick={this.handleSubmit}
              disabled={fetching}>
              Save</button>
          </div>
          {one.id !== null && <div className="control">
            <button className="button is-danger"
              onClick={this.handleDelete}
              disabled={fetching}>
              DELETE</button>
          </div>}
          <div className="control">
            {agencies[0] &&
            <Link to={`/map/${agencies[0].agency_id}/${routeId ? `route/${routeId}` : ''}`}
                className="button is-text">Cancel</Link>}
          </div>
        </div>
      </StyledRouteForm>
    )
  }

  render () {
    const one = this.state
    const { fetching } = this.props.agency
    // redirect to view page if no data
    const { agencyId } = this.props.match.params
    // redirect to agency list if submitted
    if (one.justSubmit === true && !fetching) {
      return <Redirect to={`/map/${agencyId}/route/${one.route_id || ''}`} />
    }
    return this.renderForm()
  }

}


const mapStateToProps = state => ({
  agency: state.agency,
  route: state.route,
})

const connectRouteForm = connect(
  mapStateToProps,
)(RouteForm)
export default connectRouteForm