Fare on route page

src/components/RouteDetail.js

@@ -7,6 +7,7 @@ import Spinner from './Spinner'
 import { getRoute, polygonUpdate } from '../actions'
 import { getStopTime } from '../actions/stoptime'
 import { getTrip } from '../actions/trip'
+import { getFareAttr } from '../actions/fare'
 import store from '../store'
 
 const StyledTripDesc = styled.div`
@@ -83,14 +84,14 @@ const TripList = (props) => (
   </div>
 )
 
-const FareRuleList = (props) => (
+const FareAttrList = (props) => (
   <div>
-    {props.farerules.map(ele => (
+    {props.fareattrItems && props.fareattrItems.map(ele => (
       <span key={ele.id} className="panel-block">
-        {ele.fare.fare_id} - {ele.fare.price}
+        {ele.fare_id} - {ele.price} {ele.currency_type}
       </span>
     ))}
-    {props.farerules.length === 0 && <span key="empty-farerule" className="panel-block">
+    {props.fareattrItems && props.fareattrItems.length === 0 && <span key="empty-farerule" className="panel-block">
       No fare rule set
     </span>}
   </div>
@@ -116,6 +117,7 @@ class RouteDetail extends Component {
     } else {
       this.pushShapeToStore(match, route)
     }
+    store.dispatch(getFareAttr(`agency=${match.params.agencyId}`))
   }
 
   componentWillReceiveProps(newProps) {
@@ -137,7 +139,7 @@ class RouteDetail extends Component {
   }
 
   render() {
-    const { route, match, trip } = this.props
+    const { route, match, trip, fareattr } = this.props
     const { routeId, agencyId, routeParams } = match.params
     const tRoute = route.results.filter(ele => ele.route_id === routeId)
     if (tRoute.length === 0) {
@@ -162,7 +164,7 @@ class RouteDetail extends Component {
         <Route exact path={`${baseUrl}`} render={(props) => (
           <RouteDesc route={item} {...props} />)} />
         <Route exact path={`${baseUrl}/fare`} render={(props) => (
-          <FareRuleList farerules={item.farerule_set} {...props} />)} />
+          <FareAttrList fareattrItems={fareattr.results} {...props} />)} />
         <Route exact path={`${baseUrl}/trip`} render={(props) => (
           <TripList trips={trip.results} routeId={routeId} agencyId={agencyId} {...props} />)} />
       </nav>
@@ -173,6 +175,7 @@ class RouteDetail extends Component {
 const mapStateToProps = state => ({
   route: state.route,
   trip: state.trip,
+  fareattr: state.fareattr,
 })
 export default connect(
   mapStateToProps