Rusiłko zrobił zadanie!

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;

src/action_creators/ParticipantsActionCreator.js

@@ -16,6 +16,6 @@ const PaticipantsActionCreator = {
       students: students
     };
   }
-}
+};
 
 export default PaticipantsActionCreator;

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 (
       <fieldset>
-        <legend onClick={this.toggleForm.bind(this)}>Basic Info</legend>
+        <legend onClick={this.props.toggle}>Basic Info</legend>
         <div className={this.formVisibilityCss()}>
           <label htmlFor="name">First Name</label>
           {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;

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'
 };

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 (
-      <div>
-        <Menu activeButton={MenuButtonNames.ENROLL} />
-        <form>
-          <BasicInfo ref="basic" errors={errors} />
-          <Preferences ref="preferences" errors={errors} />
-          <div className="action-holder">
-            <input type="submit" value="Enroll" onClick={this.handleSubmit.bind(this)} />
-          </div>
-        </form>
-      </div>
-    )
-  }
-}
-
-
-
-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 (
+      <div>
+        <Menu activeButton={MenuButtonNames.ENROLL} />
+        <form>
+          <BasicInfo ref="basic"
+            toggle={this.toggleForm.bind(this)}
+            isOpen={this.props.isBasicInfoOpen}
+            errors={this.props.errors} />
+          <div className="action-holder">
+            <p>{this.props.enrolling ? "enrolling..." : ""}</p>
+            <input type="submit" value="Enroll" onClick={this.handleSubmit.bind(this)} />
+          </div>
+        </form>
+      </div>
+    )
+  }
+}
+
+
+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)

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;
   }