bunch of fixes, need to refactoring to move state to the store in order to make it more fluxy

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

@@ -18,44 +18,75 @@ var Register = React.createClass({
       email: '',
       password: '',
       passwordConfirmation: '',
-      registration: UserStore.getRegistrationState()
+      registration: UserStore.getRegistrationState(),
+      myBabyDOBDay: -1,
+      myBabyDOBMonth: -1,
+      myBabyDOBYear: -1,
+      myBabyOnTheWay: false,
+      loginState : UserStore.getLoginState()
     };
   },
-  myBabyChange: function() {
+  myBabyChange: function(e) {
     this.setState({
-      myBabyDetailsVisible: true
+      myBabyDetailsVisible: true,
+      myBabyOnTheWay: (e.currentTarget.value === "1" ? true: false)
     });
   },
   renderMonthSelector: function() {
     var months = ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Juni',
     'Juli','August','Septembar', 'Oktobar','Novembar','Decembar'];
 
-    var monthsSelect = [];
-    for(var i = 0; i < months.length; i++) {
-      monthsSelect.push(<option value={i}>{months[i]}</option>)
+    var monthsSelect = [<option value='-1'>Mjesec</option>];
+    for(var i = 1; i <= months.length; i++) {
+      monthsSelect.push(<option value={i}>{months[i - 1]}</option>)
     }
 
-    return (<select>{monthsSelect}</select>)
+    return (<select onChange={this.onBabyDOBMonthChange}>{monthsSelect}</select>)
   },
   renderYearSelector: function() {
     var currentYear = (new Date().getFullYear());
     var years = [];
-    years.push(<option>Godina</option>)
+    years.push(<option value='-1'>Godina</option>)
 
     for(var i = 0; i < 12; i++) {
       years.push(<option value={currentYear - i}>{currentYear - i}</option>)
     }
 
-    return (<select> {years} </select>)
+    return (<select onChange={this.onBabyDOBYearChange}> {years} </select>)
   },
   renderDaySelector: function() {
     var days = [];
-    days.push(<option>Dan</option>)
+    days.push(<option value='-1'>Dan</option>)
     for(var i = 1; i <= 31; i++) {
       days.push(<option value={i}>{i}</option>)
     }
 
-    return (<select> {days} </select>)
+    return (<select onChange={this.onBabyDOBDayChange}> {days} </select>)
+  },
+  onBabyDOBDayChange: function(e) {
+      this.setState({
+          myBabyDOBDay: e.currentTarget.value
+      });
+  },
+  onBabyDOBMonthChange: function(e) {
+      this.setState({
+          myBabyDOBMonth: e.currentTarget.value
+      });
+  },
+  onBabyDOBYearChange: function(e) {
+      this.setState({
+          myBabyDOBYear: e.currentTarget.value
+      });
+  },
+  myBabyNameChange: function(e) {
+      this.setState({
+          babyName: e.currentTarget.value
+      });
+  },
+  myBabyGenderChange: function(e) {
+      this.setState({
+          babyGender: e.currentTarget.value
+      });
   },
   renderBabyDetails: function() {
     if (!this.state.myBabyDetailsVisible) {
@@ -70,16 +101,16 @@ var Register = React.createClass({
 
             <label for="baby_gender" className="col-md-4 control-label">Spol</label>
             <div className="col-md-4">
-              <input type="radio" name="baby_gender"/> Djevojčica
-              <input type="radio" name="baby_gender"/> Dječak
-              <input type="radio" name="baby_gender"/> Jos ne znamo
+              <input type="radio" name="baby_gender" value="0" onChange={this.myBabyGenderChange}/> Djevojčica
+              <input type="radio" name="baby_gender" value="1" onChange={this.myBabyGenderChange}/> Dječak
+              <input type="radio" name="baby_gender" value="2" onChange={this.myBabyGenderChange}/> Jos ne znamo
             </div>
           </div>
           <div className="form-group">
 
             <label for="baby_name" className="col-md-4 control-label">Ime</label>
             <div className="col-md-4">
-              <input type="text" className="form-control" id="baby_name" placeholder="Ime bebe"/>
+              <input type="text" className="form-control" id="baby_name" onChange={this.myBabyNameChange} placeholder="Ime bebe"/>
             </div>
           </div>
           <div className="form-group">
@@ -159,17 +190,30 @@ var Register = React.createClass({
   },
   onUserStoreChange: function() {
       this.setState({
-          registration: UserStore.getRegistrationState()
+          registration: UserStore.getRegistrationState(),
+          loginState : UserStore.getLoginState()
       });
   },
   register: function(e) {
     if(this.validate()) {
       var children = [];
       if (this.state.myBabyDetailsVisible) {
-          children.push({
-              name: 'Dijete',
-              gender: 1
-          });
+
+          var dobOk = this.state.myBabyDOBDay !== -1 && this.state.myBabyDOBMonth !== -1 && this.state.myBabyDOBYear !== -1;
+          
+          if (dobOk || this.state.babyName !== undefined || this.state.babyGender !== undefined) {
+              var childInfo = {
+                  name: this.state.babyName,
+                  gender: this.state.babyGender,
+                  on_the_way: this.state.myBabyOnTheWay
+              }
+
+              if(dobOk) {
+                  var dob = this.state.myBabyDOBDay + '/' + this.state.myBabyDOBMonth + '/' + this.state.myBabyDOBYear;
+                  childInfo.date_of_birth = dob;
+              }
+              children.push(childInfo);
+          }
       }
 
       var user = new UserRegistration({
@@ -194,6 +238,17 @@ var Register = React.createClass({
     NavigationActions.goToHome();
     e.preventDefault();
   },
+  prettyPrintError: function(err) {
+    var errorInfo = [];
+    for(var key in err) {
+        if (err.hasOwnProperty(key)) {
+            errorInfo.push(<li>{err[key]}</li>);
+        }
+    }
+    return (<ul>
+            {errorInfo}
+            </ul>)
+  },
   renderRegistrationState: function() {
     var rs = this.state.registration;
     if (!rs.performed) {
@@ -202,7 +257,7 @@ var Register = React.createClass({
     } else  if(rs.performed && !rs.success){
         return (<div>
                 Desila se pogreška pri registraciji. Detalji greške su:
-                {rs.error.responseJSON}
+                {this.prettyPrintError(rs.error)}
                 </div>)
     } else if (rs.performed && rs.success) {
         return (<div>
@@ -216,6 +271,9 @@ var Register = React.createClass({
   var classes = cx({
     'hide': regSuccess 
   });
+  if (this.state.loginState.loggedIn) {
+      return (<div>Vi ste već registrovani. Uživajte u kupovini.</div>)
+  }
     return (<div>
       <span className="h3">Registracija</span>
            {this.renderRegistrationState()}
@@ -265,8 +323,8 @@ var Register = React.createClass({
         <div className="form-group">
             <label for="my_baby" className="col-md-4 control-label">Moja beba</label>
             <div className="col-md-4">
-              <input type="radio" onChange={this.myBabyChange} name="my_baby" id="already_born" /> Vec rođena
-              <input type="radio" onChange={this.myBabyChange} id="on_the_way" name="my_baby" />Na putu
+              <input type="radio" onChange={this.myBabyChange}  name="my_baby" id="already_born" /> Vec rođena
+              <input type="radio" onChange={this.myBabyChange} value="1" id="on_the_way" name="my_baby" />Na putu
             </div>
         </div>