sipp11 6 years ago
parent
commit
27eff5d615
  1. 62
      src/actions/fare.js
  2. 2
      src/components/FareAttrList.js
  3. 34
      src/components/FareAttributesForm.js
  4. 31
      src/components/FareList.js
  5. 34
      src/components/FareRulesForm.js
  6. 8
      src/constants/ActionTypes.js
  7. 79
      src/reducers/farerule.js
  8. 2
      src/reducers/index.js

62
src/actions/fareattr.js → 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,
]
}
})

2
src/components/FareAttrList.js

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

34
src/components/FareAttributesForm.js

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

31
src/components/FareList.js

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

34
src/components/FareRulesForm.js

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

8
src/constants/ActionTypes.js

@ -86,3 +86,11 @@ export const FAREATTR_SUCCESS = 'FAREATTR_SUCCESS'
export const FAREATTR_CREATE = 'FAREATTR_CREATE' export const FAREATTR_CREATE = 'FAREATTR_CREATE'
export const FAREATTR_DELETE = 'FAREATTR_DELETE' export const FAREATTR_DELETE = 'FAREATTR_DELETE'
export const FAREATTR_UPDATE = 'FAREATTR_UPDATE' 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'

79
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

2
src/reducers/index.js

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

Loading…
Cancel
Save