registration progress

front-ui/app/actions/navigationActions.js

@@ -72,6 +72,12 @@ var NavigationActions = {
       actionType: NavigationConstants.CHANGE_URL,
       url: '/dostava'
     });
+  },
+  goToHome: function() {
+     AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: '/'
+    });
   }
 
 

front-ui/app/actions/userActions.js

@@ -0,0 +1,39 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var UserConstants = require('../constants/userConstants');
+
+// Define action methods
+var UserActions = {
+
+  registerUser: function(user) {
+    AppDispatcher.handleAction({
+      actionType: UserConstants.REGISTER_USER,
+      user: user
+    });
+
+      user.save(null, {
+        success: function() {
+          alert('saved!');
+          UserActions.registrationSuccess();
+        },
+        error: function(model, response, options) {
+          alert('error');
+          console.log('error:', response);
+          UserActions.registrationFailure(response);
+        }
+      });
+  },
+  registrationSuccess: function() {
+      AppDispatcher.handleAction({
+          actionType: UserConstants.REGISTRATION_SUCCESS
+      });
+  },
+  registrationFailure: function(error) {
+      AppDispatcher.handleAction({
+          actionType: UserConstants.REGISTRATION_FAILURE,
+          error: error
+      });
+  }
+
+};
+
+module.exports = UserActions;

front-ui/app/components/account/register.js

@@ -1,6 +1,10 @@
 var React = require("react/addons"),
     UserRegistration = require('../../models/userRegistration'),
-    RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin');
+    RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin'),
+    UserStore = require('../../stores/userStore'),
+    NavigationActions = require('../../actions/navigationActions'),
+    UserActions = require('../../actions/userActions');
+
 
 
 var Register = React.createClass({
@@ -13,7 +17,8 @@ var Register = React.createClass({
       email: '',
       password: '',
       passwordConfirmation: '',
-      errors: {}
+      errors: {},
+      registrationState: UserStore.getRegistrationState()
     };
   },
   myBabyChange: function() {
@@ -149,10 +154,20 @@ var Register = React.createClass({
   renderErrorMessage: function(message){
     return (<div className='error-message'>{message}</div>)
   },
-  doRegister: function(e) {
+  componentDidMount: function() {
+      UserStore.addChangeListener(this.onUserStoreChange);
+  },
+  componentWillUnmount: function() {
+      UserStore.removeChangeListener(this.onUserStoreChange);
+  },
+  onUserStoreChange: function() {
+      this.setState({
+          registrationState: UserStore.getRegistrationState()
+      });
+  },
+  register: function(e) {
     // TODO: move this to the UserRegistrationStore
     if(this.validate()) {
-      alert('all fine!');
       var user = new UserRegistration({
         first_name: this.state.firstName,
         last_name: this.state.lastName,
@@ -161,29 +176,41 @@ var Register = React.createClass({
         password_confirmation: this.state.passwordConfirmation
       });
 
-      user.save(null, {
-        success: function() {
-          alert('saved!');
-        },
-        error: function(model, response, options) {
-          alert('error');
-          console.log('error:', response);
-        }.bind(this)
-      });
+      UserActions.registerUser(user);
     }
 
     e.preventDefault();
   },
+  successContinue: function(e) {
+    NavigationActions.goToHome();
+    e.preventDefault();
+  },
+  renderRegistrationState: function() {
+    var rs = this.state.registrationState;
+    if (!rs.performed) {
+
+    return (<div></div>)
+    } else  if(rs.performed && !rs.success){
+        return (<div>
+                Desila se pogreska pri registraciji. Detalji greske su:
+                {rs.error.responseJSON}
+                </div>)
+    } else if (rs.performed && rs.success) {
+        return (<div>
+               Uspjesno ste se registrovali na Ribicu. Kliknite <a onClick={this.successContinue}>ovdje</a> za nastavak. 
+                </div>)
+    }
+  },
   render : function() {
+  var cx = React.addons.classSet;
+  var regSuccess = this.state.registrationState.performed && this.state.registrationState.success;
+  var classes = cx({
+    'hide': regSuccess 
+  });
     return (<div>
       <span className="h3">Registracija</span>
-      {this.state.firstName} |
-      {this.state.lastName} |
-      {this.state.email} |
-      {this.state.password} |
-      {this.state.passwordConfirmation} |
-      {this.isValid() ? "yes" : "no"} |
-      <div className="center">
+           {this.renderRegistrationState()}
+      <div className="center" className={classes}>
         <form className="form-horizontal">
 
         <fieldset>
@@ -239,7 +266,7 @@ var Register = React.createClass({
         <div className="form-group">
             <div className="col-md-4">
 
-            <button onClick={this.doRegister} type="button" className="btn btn-default btn-lg">
+            <button onClick={this.register} type="button" className="btn btn-default btn-lg">
             Register2
 </button>
             </div>

front-ui/app/constants/userConstants.js

@@ -0,0 +1,8 @@
+var keyMirror = require('react/lib/keyMirror');
+
+// Define action constants
+module.exports = keyMirror({
+    REGISTER_USER : null,
+    REGISTRATION_SUCCESS: null,
+    REGISTRATION_FAILURE: null
+});

front-ui/app/stores/userStore.js

@@ -0,0 +1,87 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var UserConstants = require('../constants/userConstants');
+var _ = require('underscore');
+
+
+
+var _registrationState = {};
+
+var handleRegistrationSuccess = function() {
+    _registrationState = {
+        performed: true,
+        success: true
+    };
+};
+
+var handleRegistrationFailure = function(error) {
+    _registrationState = {
+        performed: true,
+        success: false,
+        error: error
+    };
+};
+
+// Extend SectionStore with EventEmitter to add eventing capabilities
+var UserStore = _.extend({}, EventEmitter.prototype, {
+
+    getRegistrationState: function() {
+      //return _categoryDetails;
+      return _registrationState;
+    },
+    // Emit Change event
+    emitChange: function() {
+      console.log("Emmiting Section change!");
+      this.emit('change');
+    },
+
+    // Add change listener
+    addChangeListener: function(callback) {
+      this.on('change', callback);
+    },
+
+    // Remove change listener
+    removeChangeListener: function(callback) {
+      this.removeListener('change', callback);
+    }
+});
+
+
+// Register callback with AppDispatcher
+AppDispatcher.register(function(payload) {
+  var action = payload.action;
+  var text;
+
+  switch(action.actionType) {
+
+    // Respond to SELECT_ITEM action
+    //case SectionConstants.LOAD_SECTIONS:
+      //loadSections();      
+      //break;
+
+    //case SectionConstants.SET_SECTION_HOVER:
+      //setHovered(action.section.get('id'));
+      //break;
+
+    //case SectionConstants.UNSET_SECTION_HOVER:
+      //setHovered('');
+      //break;
+
+      case UserConstants.REGISTRATION_SUCCESS:
+          handleRegistrationSuccess();
+      break;
+      case UserConstants.REGISTRATION_FAILURE:
+          handleRegistrationFailure(action.error);
+      break;
+
+    default:
+      return true;
+  }
+
+  // If action was responded to, emit change event
+  UserStore.emitChange();
+  return true;
+
+});
+
+module.exports = UserStore;