WIP

src/actions/fare.js

@@ -65,3 +65,65 @@ export const deleteFareAttr = (id) => ({
     ]
   }
 })
+
+
+export const getFareRule = (query) => ({
+  [RSAA]: {
+    endpoint: `${API_URL}/fare-rule/?${query || ''}`,
+    method: 'GET',
+    headers: RSAAHeaders,
+    bailout: (state) => state.fareattr.fetching || state.fareattr.query === query,
+    types: [
+      {
+        type: types.FARERULE_REQUEST,
+        meta: { query: query },
+      },
+      types.FARERULE_SUCCESS,
+      types.FARERULE_FAILURE,
+    ]
+  }
+})
+
+export const updateFareRule = (id, body) => ({
+  [RSAA]: {
+    endpoint: `${API_URL}/fare-rule/${id}/`,
+    body: JSON.stringify(body),
+    method: 'PATCH',
+    headers: RSAAHeaders,
+    types: [
+      types.FARERULE_REQUEST,
+      types.FARERULE_UPDATE,
+      types.FARERULE_FAILURE,
+    ]
+  }
+})
+
+export const createFareRule = (body) => ({
+  [RSAA]: {
+    endpoint: `${API_URL}/fare-rule/`,
+    body: JSON.stringify(body),
+    method: 'POST',
+    headers: RSAAHeaders,
+    types: [
+      types.FARERULE_REQUEST,
+      types.FARERULE_CREATE,
+      types.FARERULE_FAILURE,
+    ]
+  }
+})
+
+export const deleteFareRule = (id) => ({
+  [RSAA]: {
+    endpoint: `${API_URL}/fare-rule/${id}/`,
+    method: 'DELETE',
+    headers: RSAAHeaders,
+    types: [
+      types.FARERULE_REQUEST,
+      {
+        type: types.FARERULE_DELETE,
+        meta: { id }
+      },
+      types.FARERULE_FAILURE,
+    ]
+  }
+})

src/components/FareAttrList.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import Spinner from './Spinner'
-import { getFareAttr } from '../actions/fareattr'
+import { getFareAttr } from '../actions/fare'
 import store from '../store'
 
 

src/components/FareAttributesForm.js

@@ -3,7 +3,11 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Redirect, Link } from 'react-router-dom'
 
-import { updateCalendar, createCalendar, deleteCalendar } from '../actions/calendar'
+import {
+  updateFareAttr,
+  createFareAttr,
+  deleteFareAttr
+} from '../actions/fare'
 import store from '../store'
 import HorizontalInput from './parts/HorizontalInput'
 import HorizontalDate from './parts/HorizontalDate'
@@ -50,23 +54,23 @@ class FareAttributesForm extends Component {
     let body = {...this.state}
     delete body.id
     if (id !== null) {
-      store.dispatch(updateCalendar(id, body))
+      store.dispatch(updateFareAttr(id, body))
     } else {
-      store.dispatch(createCalendar(body))
+      store.dispatch(createFareAttr(body))
     }
     this.setState({justSubmit: true})
   }
 
   handleDelete() {
     const { id } = this.state
-    store.dispatch(deleteCalendar(id))
+    store.dispatch(deleteFareAttr(id))
     this.setState({justSubmit: true})
   }
 
   componentWillMount() {
     const { props } = this
     const { serviceId } = props.match.params
-    const { results } = props.calendar
+    const { results } = props.fareattr
     const ones = results.filter(ele => ele.service_id === serviceId)
     if (ones.length > 0) {
       this.setState(ones[0])
@@ -75,7 +79,7 @@ class FareAttributesForm extends Component {
 
   renderForm() {
     const one = this.state
-    const { fetching } = this.props.calendar
+    const { fetching } = this.props.fareattr
     return (
       <StyledFareAttributesForm>
         <h1 className="title">{one.name}&nbsp;&nbsp;</h1>
@@ -151,7 +155,7 @@ class FareAttributesForm extends Component {
               DELETE</button>
           </div>}
           <div className="control">
-            <Link to={`/calendar`} className="button is-text">Cancel</Link>
+            <Link to={`/fare`} className="button is-text">Cancel</Link>
           </div>
         </div>
       </StyledFareAttributesForm>
@@ -160,23 +164,23 @@ class FareAttributesForm extends Component {
 
   render () {
     const one = this.state
-    const { fetching } = this.props.calendar
+    const { fetching } = this.props.fareattr
     // redirect to view page if no data
     const { serviceId } = this.props.match.params
     // this is a create form
     if (serviceId === undefined) {
       if (one.justSubmit === true && !fetching) {
-        return <Redirect to={`/calendar`} />
+        return <Redirect to={`/fare`} />
       }
       return this.renderForm()
     }
 
     if (one.id === null && serviceId.length > 0)
-      return <Redirect to={`/calendar`} />
+      return <Redirect to={`/fare`} />
 
-    // redirect to calendar list if submitted
+    // redirect to fare list if submitted
     if (one.justSubmit === true && !fetching) {
-      return <Redirect to={`/calendar`} />
+      return <Redirect to={`/fare`} />
     }
     return this.renderForm()
   }
@@ -185,10 +189,10 @@ class FareAttributesForm extends Component {
 
 
 const mapStateToProps = state => ({
-  calendar: state.calendar
+  fareattr: state.fareattr
 })
 
-const connectCalendarFom = connect(
+const connectFareAttributesForm = connect(
   mapStateToProps,
 )(FareAttributesForm)
-export default connectCalendarFom
+export default connectFareAttributesForm

src/components/FareList.js

@@ -35,32 +35,32 @@ const CheckboxIcon = (props) => (
 class FareList extends Component {
 
   componentWillMount() {
-    const { count } = this.props.calendar
+    const { count } = this.props.fareattr
     if (count === 0)
       store.dispatch(getCalendar())
   }
 
   render() {
-    const { results } = this.props.calendar
+    const { results } = this.props.fareattr
     const { match } = this.props
     return (
       <StyledBox>
-      <h1 className="title">Service</h1>
+      <h1 className="title">Fare</h1>
       <div className="columns">
         <div className="column is-12">
           <nav className="level is-mobile">
             <p className="level-item has-text-centered">
               <Link className="link is-info" to={`${match.url}/new`}>
-                <i className="fas fa-plus" /> New service
+                <i className="fas fa-plus" /> New fare
               </Link>
             </p>
           </nav>
           {results && Object.keys(results).map(i => (
-          <FakeRow className="level panel" key={results[i].service_id}>
+          <FakeRow className="level panel" key={results[i].fare_id}>
             <div className="level-item has-text-centered">
               <div>
-                <p className="heading">Service ID</p>
-                <p className="title"><Link to={`${match.url}/${results[i].service_id}`}>{results[i].service_id}</Link></p>
+                <p className="heading">Fare ID</p>
+                <p className="title"><Link to={`${match.url}/${results[i].fare_id}`}>{results[i].fare_id}</Link></p>
               </div>
             </div>
             <div className="level-item has-text-centered">
@@ -75,20 +75,6 @@ class FareList extends Component {
                 <p className="title">{results[i].end_date}</p>
               </div>
             </div>
-            <div className="level-item has-text-centered">
-              <div>
-                <p className="heading">M T W Th F Sa Su</p>
-                <p className="title">
-                <CheckboxIcon disabled={true} checked={results[i].monday} />
-                <CheckboxIcon disabled={true} checked={results[i].tuesday} />
-                <CheckboxIcon disabled={true} checked={results[i].wednesday} />
-                <CheckboxIcon disabled={true} checked={results[i].thursday} />
-                <CheckboxIcon disabled={true} checked={results[i].friday} />
-                <CheckboxIcon disabled={true} checked={results[i].saturday} />
-                <CheckboxIcon disabled={true} checked={results[i].sunday} />
-                </p>
-              </div>
-            </div>
           </FakeRow>
           ))}
         </div>
@@ -99,7 +85,8 @@ class FareList extends Component {
 }
 
 const mapStateToProps = state => ({
-  calendar: state.calendar
+  farerule: state.farerule,
+  fareattr: state.fareattr,
 })
 const connectFareList = connect(
   mapStateToProps,

src/components/FareRulesForm.js

@@ -3,7 +3,11 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Redirect, Link } from 'react-router-dom'
 
-import { updateCalendar, createCalendar, deleteCalendar } from '../actions/calendar'
+import {
+  updateFareRule,
+  createFareRule,
+  deleteFareRule
+} from '../actions/fare'
 import store from '../store'
 import HorizontalInput from './parts/HorizontalInput'
 import HorizontalDate from './parts/HorizontalDate'
@@ -45,23 +49,23 @@ class FareRulesForm extends Component {
     let body = {...this.state}
     delete body.id
     if (id !== null) {
-      store.dispatch(updateCalendar(id, body))
+      store.dispatch(updateFareRule(id, body))
     } else {
-      store.dispatch(createCalendar(body))
+      store.dispatch(createFareRule(body))
     }
     this.setState({justSubmit: true})
   }
 
   handleDelete() {
     const { id } = this.state
-    store.dispatch(deleteCalendar(id))
+    store.dispatch(deleteFareRule(id))
     this.setState({justSubmit: true})
   }
 
   componentWillMount() {
     const { props } = this
     const { serviceId } = props.match.params
-    const { results } = props.calendar
+    const { results } = props.farerule
     const ones = results.filter(ele => ele.service_id === serviceId)
     if (ones.length > 0) {
       this.setState(ones[0])
@@ -70,7 +74,7 @@ class FareRulesForm extends Component {
 
   renderForm() {
     const one = this.state
-    const { fetching } = this.props.calendar
+    const { fetching } = this.props.farerule
     return (
       <StyledFareRulesForm>
         <h1 className="title">{one.name}&nbsp;&nbsp;</h1>
@@ -126,7 +130,7 @@ class FareRulesForm extends Component {
               DELETE</button>
           </div>}
           <div className="control">
-            <Link to={`/calendar`} className="button is-text">Cancel</Link>
+            <Link to={`/farerule`} className="button is-text">Cancel</Link>
           </div>
         </div>
       </StyledFareRulesForm>
@@ -135,23 +139,23 @@ class FareRulesForm extends Component {
 
   render () {
     const one = this.state
-    const { fetching } = this.props.calendar
+    const { fetching } = this.props.farerule
     // redirect to view page if no data
     const { serviceId } = this.props.match.params
     // this is a create form
     if (serviceId === undefined) {
       if (one.justSubmit === true && !fetching) {
-        return <Redirect to={`/calendar`} />
+        return <Redirect to={`/farerule`} />
       }
       return this.renderForm()
     }
 
     if (one.id === null && serviceId.length > 0)
-      return <Redirect to={`/calendar`} />
+      return <Redirect to={`/farerule`} />
 
-    // redirect to calendar list if submitted
+    // redirect to fare list if submitted
     if (one.justSubmit === true && !fetching) {
-      return <Redirect to={`/calendar`} />
+      return <Redirect to={`/farerule`} />
     }
     return this.renderForm()
   }
@@ -160,10 +164,10 @@ class FareRulesForm extends Component {
 
 
 const mapStateToProps = state => ({
-  calendar: state.calendar
+  farerule: state.farerule
 })
 
-const connectCalendarFom = connect(
+const connectFareRulesForm = connect(
   mapStateToProps,
 )(FareRulesForm)
-export default connectCalendarFom
+export default connectFareRulesForm

src/constants/ActionTypes.js

@@ -86,3 +86,11 @@ export const FAREATTR_SUCCESS = 'FAREATTR_SUCCESS'
 export const FAREATTR_CREATE = 'FAREATTR_CREATE'
 export const FAREATTR_DELETE = 'FAREATTR_DELETE'
 export const FAREATTR_UPDATE = 'FAREATTR_UPDATE'
+
+export const FARERULE_REQUEST = 'FARERULE_REQUEST'
+export const FARERULE_FAILURE = 'FARERULE_FAILURE'
+export const FARERULE_SUCCESS = 'FARERULE_SUCCESS'
+// below items are SUCCESS for other tasks
+export const FARERULE_CREATE = 'FARERULE_CREATE'
+export const FARERULE_DELETE = 'FARERULE_DELETE'
+export const FARERULE_UPDATE = 'FARERULE_UPDATE'

src/reducers/farerule.js

@@ -0,0 +1,79 @@
+import {
+  FARERULE_CREATE, FARERULE_DELETE, FARERULE_UPDATE,
+  FARERULE_REQUEST, FARERULE_SUCCESS, FARERULE_FAILURE,
+} from '../constants/ActionTypes'
+
+
+const fareRuleInitState = {
+  results: [],
+  next: null,
+  count: 0,
+  fetching: false,
+  query: '',
+}
+const fareRule = (state = fareRuleInitState, action) => {
+  switch(action.type) {
+    case FARERULE_REQUEST:
+      const { query } = action.meta
+      return {
+        ...state,
+        fetching: true,
+        query,
+      }
+    case FARERULE_SUCCESS:
+      const { count, next, prev, results } = action.payload
+      return {
+        ...state,
+        fetching: false,
+        count,
+        next,
+        results: [
+          ...( (prev) ? state.results : [] ),
+          ...results,
+        ]
+      }
+    case FARERULE_UPDATE:
+      const { id } = action.payload
+      const oldResults = state.results
+      const targetInd = oldResults.findIndex(ele => ele.id === id)
+      return {
+        ...state,
+        fetching: false,
+        results: [
+          ...oldResults.slice(0, targetInd),
+          action.payload,
+          ...oldResults.slice(targetInd + 1)
+        ]
+      }
+    case FARERULE_CREATE:
+      return {
+        ...state,
+        fetching: false,
+        count: state.count + 1,
+        results: [
+          ...state.results,
+          action.payload,
+        ]
+      }
+    case FARERULE_DELETE:
+      const deleteInd = state.results.findIndex(ele => ele.id === action.meta.id)
+      return {
+        ...state,
+        count: state.count - 1,
+        fetching: false,
+        results: [
+          ...state.results.slice(0, deleteInd),
+          ...state.results.slice(deleteInd + 1)
+        ]
+      }
+    case FARERULE_FAILURE:
+      return {
+        ...state,
+        fetching: false,
+      }
+    default:
+      return state;
+  }
+}
+
+export default fareRule

src/reducers/index.js

@@ -4,6 +4,7 @@ import auth from './auth'
 import agency from './agency'
 import route from './route'
 import fareattr from './fareattr'
+import farerule from './farerule'
 import calendar from './calendar'
 import stoptime from './stoptime'
 import frequency from './frequency'
@@ -17,6 +18,7 @@ export default combineReducers({
   route,
   stop,
   fareattr,
+  farerule,
   frequency,
   calendar,
   stoptime,