diff --git a/src/action_creators/EnrollActionCreator.js b/src/action_creators/EnrollActionCreator.js index ffb9bb7..48bcd55 100644 --- a/src/action_creators/EnrollActionCreator.js +++ b/src/action_creators/EnrollActionCreator.js @@ -1,4 +1,5 @@ import ActionTypes from '../constants/ActionTypes'; +import API from '../lib/API'; const EnrollActionCreator = { toggleBasicInfo() { @@ -11,7 +12,50 @@ const EnrollActionCreator = { return { type: ActionTypes.TOGGLE_PREFERENCES } + }, + + requestStudentEnrollment(student) { + var that = this; + + function successEnrollment(dispatch){ + return function(students) { + dispatch(that._receivedStudentEnrollmentSuccess(students)); + } + }; + + function errorEnrollment(dispatch){ + return function(errors) { + dispatch(that._receivedStudentEnrollmentFailure(errors)); + } + }; + + return (dispatch) => { + dispatch(this._enrollmentInProgress()); + return new API(). + addStudent(student.name, student.surname, student.house, student.pet). + then(successEnrollment(dispatch), errorEnrollment(dispatch)); + }; + }, + + _receivedStudentEnrollmentSuccess(students) { + return { + type: ActionTypes.ENROLL_STUDENT_SUCCESS, + students: students, + } + }, + + _receivedStudentEnrollmentFailure(errors) { + return { + type: ActionTypes.ENROLL_STUDENT_FAILURE, + errors: errors + } + }, + + _enrollmentInProgress(){ + return { + type: ActionTypes.ENROLL_STUDENT_INPROGRESS + } } -} +}; export default EnrollActionCreator; diff --git a/src/action_creators/ParticipantsActionCreator.js b/src/action_creators/ParticipantsActionCreator.js index 8ced454..4461cb7 100644 --- a/src/action_creators/ParticipantsActionCreator.js +++ b/src/action_creators/ParticipantsActionCreator.js @@ -16,6 +16,6 @@ const PaticipantsActionCreator = { students: students }; } -} +}; export default PaticipantsActionCreator; diff --git a/src/components/enroll/BasicInfo.js b/src/components/enroll/BasicInfo.js index c1383ff..788fd92 100644 --- a/src/components/enroll/BasicInfo.js +++ b/src/components/enroll/BasicInfo.js @@ -1,7 +1,5 @@ import React from 'react'; import Error from '../shared/Error'; -import EnrollActionCreator from '../../action_creators/EnrollActionCreator'; -import { connect } from 'react-redux'; class BasicInfo extends React.Component { value() { @@ -11,16 +9,11 @@ class BasicInfo extends React.Component { } } - toggleForm() { - const action = EnrollActionCreator.toggleBasicInfo(); - this.props.dispatch(action); - } - formVisibilityCss() { - const { open } = this.props; + const { isOpen } = this.props; const common = "fields"; const visible = "active"; - return open ? `${common} ${visible}` : common; + return isOpen ? `${common} ${visible}` : common; } renderErrorForField(field) { @@ -32,7 +25,7 @@ class BasicInfo extends React.Component { render() { return (
- Basic Info + Basic Info
{this.renderErrorForField("name")} @@ -46,10 +39,4 @@ class BasicInfo extends React.Component { } } -function select(state) { - return { - open: state.enroll.isBasicInfoOpen - } -} - -export default connect(select)(BasicInfo); +export default BasicInfo; diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index 676dc12..abeea31 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -3,4 +3,7 @@ export default { TOGGLE_PREFERENCES: 'TOGGLE_PREFERENCES', REQUEST_STUDENTS: 'REQUEST_STUDENTS', RECEIVE_STUDENTS: 'RECEIVE_STUDENTS', + ENROLL_STUDENT_SUCCESS: 'ENROLL_STUDENT_SUCCESS', + ENROLL_STUDENT_FAILURE: 'ENROLL_STUDENT_FAILURE', + ENROLL_STUDENT_INPROGRESS: 'ENROLL_STUDENT_INPROGRESS' }; diff --git a/src/containers/Enroll.js b/src/containers/Enroll.js index 8a28c5a..3e178f5 100644 --- a/src/containers/Enroll.js +++ b/src/containers/Enroll.js @@ -1,55 +1,60 @@ -import React from 'react'; -import Menu from '../components/shared/Menu'; -import MenuButtonNames from '../lib/MenuButtonNames'; -import BasicInfo from '../components/enroll/BasicInfo'; -import Preferences from '../components/enroll/Preferences'; -import API from '../lib/API'; - -class Enroll extends React.Component { - constructor(props) { - super(props); - this.state = { - errors: null - } - } - - handleSubmit(e) { - e.preventDefault(); - const student = Object.assign({}, this.refs.basic.value(), this.refs.preferences.value()) - const result = new API().addStudent(student.name, student.surname, student.house, student.pet) - if (result.errors) { - this.setErrors(result.errors); - } else { - this.redirectToList(); - } - } - - setErrors(errors) { - this.setState({errors: errors}) - } - - redirectToList() { - return this.props.history.pushState(null, "/participants"); - } - - render() { - const { errors } = this.state; - - return ( -
- -
- - -
- -
- -
- ) - } -} - - - -export default Enroll; +import React from 'react'; +import Menu from '../components/shared/Menu'; +import MenuButtonNames from '../lib/MenuButtonNames'; +import BasicInfo from '../components/enroll/BasicInfo'; +import Preferences from '../components/enroll/Preferences'; +import API from '../lib/API'; +import EnrollActionCreator from '../action_creators/EnrollActionCreator'; +import { connect } from 'react-redux'; + +class Enroll extends React.Component { + handleSubmit(e) { + e.preventDefault(); + const student = Object.assign({}, this.refs.basic.value(), {pet: "Owl", house: "Gryffindor"}); + const action = EnrollActionCreator.requestStudentEnrollment(student); + this.props.dispatch(action); + } + + redirectToList() { + return this.props.history.pushState(null, "/participants"); + } + + toggleForm() { + const action = EnrollActionCreator.toggleBasicInfo(); + this.props.dispatch(action); + } + + componentWillUpdate(nextProps, nextState){ + if(nextProps.enrolled) { this.redirectToList() }; + } + + render() { + return ( +
+ +
+ +
+

{this.props.enrolling ? "enrolling..." : ""}

+ +
+ +
+ ) + } +} + + +function select(state) { + return { + isBasicInfoOpen: state.enroll.isBasicInfoOpen, + enrolling: state.enroll.enrolling, + enrolled: state.enroll.enrolled, + errors: state.enroll.errors, + } +} + +export default connect(select)(Enroll) diff --git a/src/reducers/EnrollReducer.js b/src/reducers/EnrollReducer.js index 387dc98..86c2844 100644 --- a/src/reducers/EnrollReducer.js +++ b/src/reducers/EnrollReducer.js @@ -3,6 +3,9 @@ import ActionTypes from '../constants/ActionTypes'; const initialState = { isBasicInfoOpen: true, isPreferencesOpen: false, + enrolling: false, + enrolled: false, + errors: [] }; let EnrollReducer = (state = initialState, action) => { @@ -15,6 +18,21 @@ let EnrollReducer = (state = initialState, action) => { return Object.assign({}, state, { isPreferencesOpen: !state.isPreferencesOpen }) + case ActionTypes.ENROLL_STUDENT_INPROGRESS: + return Object.assign({}, state, { + enrolling: true, + errors: [], + }) + case ActionTypes.ENROLL_STUDENT_SUCCESS: + return Object.assign({}, state, { + enrolled: true, + enrolling: false, + }) + case ActionTypes.ENROLL_STUDENT_FAILURE: + return Object.assign({}, state, { + enrolling: false, + errors: action.errors + }) default: return state; }