wip

src/components/FareAttributesDetail.js

@@ -0,0 +1,134 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import { connect } from 'react-redux'
+import { Redirect, Link } from 'react-router-dom'
+
+import {
+  PaymentMethodChoices, TransferChoices
+} from '../constants/choices'
+import { getItemFromList } from '../utils'
+import { getFareAttr, getFareRule } from '../actions/fare'
+import store from '../store'
+import { FareRulesOne } from './FareRulesDetail'
+
+const StyledFareAttributesDetail = styled.div`
+padding: 1rem;
+background: #fafafa;
+`
+
+const FakeRow = styled.nav`
+padding-top: 5px;
+padding-bottom: 5px;
+background: white;
+margin-bottom: 1rem;
+`
+
+export const FareAttributesOne = (props) => {
+  const { item, edit } = props
+  const payTxt = getItemFromList(item.payment_method, PaymentMethodChoices, '')
+  const transferTxt = getItemFromList(item.transfer, TransferChoices, '')
+
+  return (
+    <FakeRow className="level panel" key={item.fare_id}>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Fare ID</p>
+          <Link to={`/fare/attributes/${item.id}${edit ? '/edit' : ''}`}>{item.fare_id}</Link>
+        </div>
+      </div>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Price</p>
+          <p key={item.id}>{item.price} <small>{item.currency_type}</small>
+            <br />
+            {payTxt && payTxt.label}
+          </p>
+        </div>
+      </div>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Transfer / sec</p>
+          <p>{transferTxt && transferTxt.label} / {item.transfer_duration}</p>
+        </div>
+      </div>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Agency</p>
+          <Link to={`/agency/${item.agency.agency_id}`} >{item.agency.name}</Link>
+        </div>
+      </div>
+    </FakeRow>
+  )
+}
+
+
+class FareAttributesDetail extends Component {
+  state = {
+    fetching: true
+  }
+
+  constructor() {
+    super()
+    this.renderItem = this.renderItem.bind(this)
+  }
+
+  componentWillMount() {
+    const { props } = this
+    const { attribID } = props.match.params
+    const { results } = props.fareattr
+    const ones = results.filter(ele => ele.id === +attribID)
+    store.dispatch(getFareRule(`fareattr=${attribID}`))
+    if (ones.length > 0) {
+      this.setState({fetching: false})
+    } else {
+      store.dispatch(getFareAttr())
+      this.setState({fetching: true})
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.fareattr.fetching && !nextProps.fareattr.fetching) {
+      this.setState({fetching: false})
+    }
+  }
+
+  renderItem(one) {
+    return (
+      <StyledFareAttributesDetail>
+        <FareAttributesOne item={one} edit={true} />
+      </StyledFareAttributesDetail>
+    )
+  }
+
+  render () {
+    const { fetching, results } = this.props.fareattr
+    const { farerule } = this.props
+    // redirect to view page if no data
+    const { attribID } = this.props.match.params
+    const ones = results.filter(ele => ele.id === +attribID)
+    if (this.state.fetching || fetching)
+      return <div>Waiting...</div>
+
+    if (ones.length < 1)
+      return <Redirect to='/fare' />
+
+    return (
+      <div>
+        {this.renderItem(ones[0])}
+        {farerule.results.map(ele => <FareRulesOne item={ele} />)}
+      </div>
+    )
+  }
+
+}
+
+
+const mapStateToProps = state => ({
+  fareattr: state.fareattr,
+  farerule: state.farerule,
+})
+
+const connectFareAttributesDetail = connect(
+  mapStateToProps,
+)(FareAttributesDetail)
+export default connectFareAttributesDetail

src/components/FareAttributesForm.js

@@ -190,16 +190,16 @@ class FareAttributesForm extends Component {
     const one = this.state
     const { fetching } = this.props.fareattr
     // redirect to view page if no data
-    const { serviceId } = this.props.match.params
+    const { attribID } = this.props.match.params
     // this is a create form
-    if (serviceId === undefined) {
+    if (attribID === undefined) {
       if (one.justSubmit === true && !fetching) {
         return <Redirect to={`/fare`} />
       }
       return this.renderForm()
     }
 
-    if (one.id === null && serviceId.length > 0)
+    if (one.id === null && attribID.length > 0)
       return <Redirect to={`/fare`} />
 
     // redirect to fare list if submitted

src/components/FareList.js

@@ -4,11 +4,9 @@ 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'
+import { FareAttributesOne } from './FareAttributesDetail'
+import { FareRulesOne } from './FareRulesDetail'
 
 
 const StyledBox = styled.div`
@@ -16,13 +14,6 @@ padding: 1rem;
 background: #fafafa;
 `
 
-const FakeRow = styled.nav`
-padding-top: 5px;
-padding-bottom: 5px;
-background: white;
-margin-bottom: 1rem;
-`
-
 class FareList extends Component {
 
   componentWillMount() {
@@ -51,38 +42,7 @@ class FareList extends Component {
             </p>
           </nav>
           {fareattr.results && Object.keys(fareattr.results).map(i => (
-          <FakeRow className="level panel" key={fareattr.results[i].fare_id}>
+            <FareAttributesOne item={fareattr.results[i]} />
-            <div className="level-item has-text-centered">
-              <div>
-                <p className="heading">Fare ID</p>
-                <Link to={`${match.url}/attributes/${fareattr.results[i].id}`}>{fareattr.results[i].fare_id}</Link>
-              </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>
-                <Link to={`/agency/${fareattr.results[i].agency.agency_id}`} >{fareattr.results[i].agency.name}</Link>
-              </div>
-            </div>
-          </FakeRow>
           ))}
         </div>
 
@@ -95,37 +55,7 @@ class FareList extends Component {
             </p>
           </nav>
           {farerule.results && Object.keys(farerule.results).map(i => (
-          <FakeRow className="level panel" key={farerule.results[i].fare_id}>
+            <FareRulesOne item={farerule.results[i]} />
-            <div className="level-item has-text-centered">
-              <div>
-                <p className="heading">Fare ID</p>
-                <Link to={`${match.url}/rules/${farerule.results[i].id}`}>{farerule.results[i].fare.fare_id}</Link>
-              </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>
-                  {farerule.results[i].route && (farerule.results[i].route.route_id || '-')}
-                </p>
-              </div>
-            </div>
-          </FakeRow>
           ))}
         </div>
 

src/components/FareRulesDetail.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+
+const FakeRow = styled.nav`
+padding-top: 5px;
+padding-bottom: 5px;
+background: white;
+margin-bottom: 1rem;
+`
+
+export const FareRulesOne = (props) => {
+  const { item } = props
+
+  return (
+    <FakeRow className="level panel" key={item.fare_id}>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Fare ID</p>
+          <Link to={`/fare/rules/${item.id}`}>{item.fare.fare_id}</Link>
+        </div>
+      </div>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Origin ID</p>
+          <p className="title">{item.origin_id}</p>
+        </div>
+      </div>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Destination ID (or contains)</p>
+          <p className="title">
+            {item.destination_id}
+            {item.contains_id}
+          </p>
+        </div>
+      </div>
+      <div className="level-item has-text-centered">
+        <div>
+          <p className="heading">Route ID</p>
+          <p>
+            {item.route && (item.route.route_id || '-')}
+          </p>
+        </div>
+      </div>
+    </FakeRow>
+  )
+}

src/components/FareRulesForm.js

@@ -222,16 +222,16 @@ class FareRulesForm extends Component {
     const one = this.state
     const { fetching } = this.props.farerule
     // redirect to view page if no data
-    const { serviceId } = this.props.match.params
+    const { attribID } = this.props.match.params
     // this is a create form
-    if (serviceId === undefined) {
+    if (attribID === undefined) {
       if (one.justSubmit === true && !fetching) {
         return <Redirect to={`/fare`} />
       }
       return this.renderForm()
     }
 
-    if (one.id === null && serviceId.length > 0)
+    if (one.id === null && attribID.length > 0)
       return <Redirect to={`/fare`} />
 
     // redirect to fare list if submitted

src/container/Main.js

@@ -17,6 +17,7 @@ import TripForm from '../components/TripForm'
 import FareList from '../components/FareList'
 import FareRulesForm from '../components/FareRulesForm'
 import FareAttributesForm from '../components/FareAttributesForm'
+import FareAttributesDetail from '../components/FareAttributesDetail'
 
 import { LOGIN_PATH } from '../constants/path'
 import store from '../store'
@@ -54,10 +55,11 @@ class Main extends Component {
           <Route exact path={`${match.url}agency`} component={AgencyList} />
 
           <Route exact path={`${match.url}fare`} component={FareList} />
+          <Route exact path={`${match.url}fare/attributes/new`} component={FareAttributesForm} />
+          <Route exact path={`${match.url}fare/attributes/:attribID/edit`} component={FareAttributesForm} />
+          <Route exact path={`${match.url}fare/attributes/:attribID`} component={FareAttributesDetail} />
           <Route exact path={`${match.url}fare/rules/new`} component={FareRulesForm} />
           <Route exact path={`${match.url}fare/rules/:ruleID`} component={FareRulesForm} />
-          <Route exact path={`${match.url}fare/attributes/new`} component={FareAttributesForm} />
-          <Route exact path={`${match.url}fare/attributes/:attribID`} component={FareAttributesForm} />
 
           <Route exact path={`${match.url}calendar/new`} component={CalendarForm} />
           <Route exact path={`${match.url}calendar/:serviceId`} component={CalendarForm} />

src/reducers/farerule.js

@@ -14,10 +14,14 @@ const fareRuleInitState = {
 const fareRule = (state = fareRuleInitState, action) => {
   switch(action.type) {
     case FARERULE_REQUEST:
+      let resetResult = state.query !== action.meta.query ? [] : state.results
+      let resetCount = state.query !== action.meta.query ? 0 : state.count
       return {
         ...state,
         fetching: true,
         query: action.meta !== undefined ? action.meta.query : state.query,
+        results: resetResult,
+        count: resetCount,
       }
     case FARERULE_SUCCESS:
       const { count, next, prev, results } = action.payload

src/store.js

@@ -12,7 +12,8 @@ import gruntApp from './reducers'
 const persistConfig = {
   key: 'root',
   storage,
-  blacklist: ['agency', 'calendar']
+  whitelist: ['auth', 'geo']
+  // blacklist: ['agency', 'calendar']
 }
 
 // create the saga middleware