fix formatting of text for volunteer form

HackMerced/2017F/src/app/src/actions/actions.js

@@ -24,11 +24,12 @@
  */
 
 
-import { SET_AUTH, UPDATE_LOGIN_FORM, UPDATE_USER_DATA, UPDATE_SIGNUP_FORM, UPDATE_SIGNUP_ERRORS, UPDATE_LOGIN_ERRORS, SET_AUTH_AS_FALSE, SET_USER_NAME_AS_FALSE, SET_USER_NAME, SET_USER_ID_AS_FALSE, SET_USER_ID, UPDATE_APPLY_STEP_ONE, UPDATE_APPLY_STEP_TWO, UPDATE_APPLY_STEP_THREE, UPDATE_APPLY_STEP_FOUR, SET_CURRENT_APPLY_STEP, UPDATE_USER_UPDATING_STATUS, UPDATE_APPLY_ERRORS, UPDATE_MOBILE_MENU_STATUS, UPDATE_SUBMITTED_VIEW,UPDATE_FORGOT_PASSWORD_FORM,UPDATE_VOLUNTEER_FORM } from '../constants';
+import { SET_AUTH, UPDATE_LOGIN_FORM, UPDATE_USER_DATA, UPDATE_SIGNUP_FORM, UPDATE_SIGNUP_ERRORS, UPDATE_LOGIN_ERRORS, UPDATE_VOLUNTEER_ERRORS, SET_AUTH_AS_FALSE, SET_USER_NAME_AS_FALSE, SET_USER_NAME, SET_USER_ID_AS_FALSE, SET_USER_ID, UPDATE_APPLY_STEP_ONE, UPDATE_APPLY_STEP_TWO, UPDATE_APPLY_STEP_THREE, UPDATE_APPLY_STEP_FOUR, SET_CURRENT_APPLY_STEP, UPDATE_USER_UPDATING_STATUS, UPDATE_APPLY_ERRORS, UPDATE_MOBILE_MENU_STATUS, UPDATE_SUBMITTED_VIEW,UPDATE_FORGOT_PASSWORD_FORM,UPDATE_VOLUNTEER_FORM } from '../constants';
 import { auth } from '../util';
 
 import { browserHistory } from 'react-router';
 import { notMercedOptions } from '../constants'
+import { parseError } from '../util'
 
 function mapUserDetailsToApplication(dispatch, details){
   let stepOne = {
@@ -186,6 +187,41 @@ export function logout() {
   }
 }
 
+/**
+ *
+ * @param user
+ * @returns {function(*)}
+ */
+export function signUpVolunteer(user) {
+  return (dispatch) => {
+    auth.submitVolunteerApplication(user)
+      .then(() => {
+        dispatch(updateVolunteerForm({
+          name: "",
+          email: "",
+          age: "",
+          friday_availability: "",
+          saturday_availability: "",
+          sunday_availability: "",
+          dietary_restrictions: "",
+          shirt_size: ""
+        }));
+
+        forwardTo('/');
+      })
+      .catch(({ validation }) => {
+        let errorSet = {};
+        if(validation.errors){
+          validation.errors.forEach((error) => {
+            errorSet[error.key] = parseError(error.key, error.message);
+          })
+        }
+
+        dispatch(updateVolunteerErrors(errorSet));
+    });
+  }
+}
+
 export function signup(user) {
    return (dispatch) => {
 
@@ -216,6 +252,8 @@ export function signup(user) {
    }
  }
 
+
+
 export function updateApplyStep(index, data){
   const applyStepMap = [
     updateApplyStepOne(data),
@@ -268,6 +306,11 @@ export function updateSignupErrors(newState) {
   return { type: UPDATE_SIGNUP_ERRORS, newState };
 }
 
+
+export function updateVolunteerErrors(newState) {
+  return { type: UPDATE_VOLUNTEER_ERRORS, newState };
+}
+
 export function updateApplyErrors(newState) {
   return { type: UPDATE_APPLY_ERRORS, newState };
 }

HackMerced/2017F/src/app/src/components/application/layout.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { TextInputBlock } from '../partials';
 import { updateApplyStep, update, updateApplyErrors } from '../../actions';
 import { StepOne, StepTwo, StepThree, StepFour } from './';
 import { notMercedOptions } from '../../constants';
@@ -9,7 +8,6 @@ let timeChecker;
 
 export class ApplicationLayout extends Component {
 
-
   render() {
     return (
       <div className='application'>
@@ -85,7 +83,7 @@ export class ApplicationLayout extends Component {
     const { data } = this.props;
     const { name, value } = event.target;
     let newState = {};
-    let newErrorState = {}
+    let newErrorState = {};
 
     newErrorState = assign(data.applyErrors, {
        [ name ]: undefined

HackMerced/2017F/src/app/src/components/application/step-three.js

@@ -7,7 +7,7 @@ export class StepThree extends Component {
 
 
   render() {
-    const { resume, question, experience, dietary_restrictions, allergies, github, linkedin, devpost } = this.props.data;
+    const { resume, experience, dietary_restrictions, allergies, github, linkedin, devpost } = this.props.data;
 
     return (
       <div id='applyForm-3'>

HackMerced/2017F/src/app/src/components/forms/index.js

@@ -1,4 +1,5 @@
 export * from './signup';
 export * from './login';
-export *from'./forget';
-export *from'./volunteer';
+export * from './forget';
+export * from './volunteer';
+

HackMerced/2017F/src/app/src/components/forms/volunteer.js

@@ -13,53 +13,47 @@ import { signUpVolunteer, updateVolunteerForm } from '../../actions';
 const assign = Object.assign || require('object.assign');
 
 export class VolunteerForm extends Component {
-  
+
   render() {
+    const { errors, data } = this.props;
+
     return (
       <form onChange={this._onChange.bind(this)} onSubmit={this._onSubmit.bind(this)} >
-        <h3>Volunteer for HackMerced</h3>
+        <h3>Interested in helping out HackMerced?</h3>
+        <h3> Become a volunteer!</h3>
         <TextInputBlock
-          error={this.props.errors.name}
-          value={this.props.data.name}
+          error={errors.name}
+          value={data.name}
           name='name'
           type='text'
           label='Name'
           placeholder='Your Full Name' autoCorrect="off" autoCapitalize="off" spellCheck="false"/>
 
         <TextInputBlock
-          error={this.props.errors.email}
-          value={this.props.data.email}
+          error={ errors.email}
+          value={data.email}
           name='email'
           type='text'
           label='Email'
           placeholder='Your Email' autoCorrect="off" autoCapitalize="off" spellCheck="false"/>
 
         <TextInputBlock
-          error={this.props.errors.age}
-          value={this.props.data.age}
+          error={errors.age}
+          value={data.age}
           name='age'
           type='number'
           label='Age'
           placeholder='Your Age' autoCorrect="off" autoCapitalize="off" spellCheck="false"/>
 
         <TextInputBlock
-          error={this.props.errors.availibility}
-          value={this.props.data.availibility}
-          name='availibility'
-          type='text'
-          label='Availability'
-          helper='In order to be eligable for free HackMerced goodies, you must volunteer for a minimum of 3 hours'
-          placeholder='Availability Hours' autoCorrect="off" autoCapitalize="off" spellCheck="false"/>
-
-        <TextInputBlock
-          value={this.props.data.dietary_restrictions}
-          error={this.props.errors.dietary_restrictions}
+          value={data.dietary_restrictions}
+          error={errors.dietary_restrictions}
           label='Do you have any dietary restrictions?'
           labelType='large'
           name='dietary_restrictions'
           type='options'
           optionsType='small'
-          onChange={this.props.onChange}
+          onChange={this._onChange.bind(this)}
           options={[
             'None',
             'Vegetarian',
@@ -71,13 +65,13 @@ export class VolunteerForm extends Component {
           ]}/>
 
         <TextInputBlock
-          value={this.props.data.shirt_size}
-          error={this.props.errors.shirt_size}
+          value={data.shirt_size}
+          error={errors.shirt_size}
           label='Shirt Size'
           name='shirt_size'
           type='options'
           optionsType='small'
-          onChange={this.props.onChange}
+          onChange={this._onChange.bind(this)}
           options={[
             'XS',
             'S',
@@ -88,7 +82,56 @@ export class VolunteerForm extends Component {
             '3XL',
             '4XL'
           ]}/>
-
+
+        <TextInputBlock
+          value={data.friday_availability}
+          error={errors.friday}
+          label='Friday Availability'
+          labelType='large'
+          name='friday_availability'
+          type='options'
+          onChange={this._onChange.bind(this)}
+          optionsType='small'
+          options={[
+            'None',
+            'Morning',
+            'Afternoon',
+            'Evening',
+          ]}/>
+
+        <TextInputBlock
+          value={data.saturday_availability}
+          error={errors.saturday}
+          label='Saturday Availability'
+          labelType='large'
+          name='saturday_availability'
+          type='options'
+          onChange={this._onChange.bind(this)}
+          optionsType='small'
+          options={[
+            'None',
+            'Morning',
+            'Afternoon',
+            'Evening',
+          ]}/>
+
+        <TextInputBlock
+          value={data.sunday_availability}
+          error={errors.sunday}
+          label='Sunday Availability'
+          labelType='large'
+          name='sunday_availability'
+          type='options'
+          onChange={this._onChange.bind(this)}
+          optionsType='small'
+          options={[
+            'None',
+            'Morning',
+            'Afternoon',
+            'Evening',
+          ]}
+          helper='In order to be eligible for free HackMerced goodies, you must volunteer for a minimum of 3 hours'/>
+
         <button className='object--center button--gold'>Submit</button>
       </form>
     );
@@ -104,7 +147,7 @@ export class VolunteerForm extends Component {
 
   // Merges the current state with a change
   _mergeWithCurrentState(change) {
-    return assign(this.props.data, change);
+    return assign(data, change);
   }
 
   // Emits a change of the form state to the application state
@@ -113,13 +156,20 @@ export class VolunteerForm extends Component {
   }
 
   _onSubmit(event){
+    const { dispatch, data } = this.props;
+
     event.preventDefault();
 
-    this.props.dispatch(signUpVolunteer({
-      name: this.props.data.name,
-      age: this.props.data.age,
-      availibility: this.props.data.availibility,
-      dietary_restrictions: this.props.data.dietary_restrictions,
+    dispatch(signUpVolunteer({
+      name: data.name,
+      email: data.email,
+      age: data.age,
+      availability: {
+        friday: data.friday_availability,
+        saturday: data.saturday_availability,
+        sunday: data.sunday_availability
+      },
+      dietary_restrictions: data.dietary_restrictions,
       shirt_size: this.props.data.shirt_size
     }))
 

HackMerced/2017F/src/app/src/components/volunteer.js

@@ -1,22 +1,22 @@
-
 import React, { Component} from 'react';
 import { connect } from 'react-redux';
 import { browserHistory } from 'react-router'
 import { VolunteerForm } from './forms';
-import { LogoWithCopy } from './partials'
+import { LogoWithCopy } from './partials';
 
+import '../styles/apply.scss';
 
 export class VolunteerComponent extends Component {
 
 
   render() {
     const dispatch = this.props.dispatch;
-    const { volunteerPersonForm, loginErrors } = this.props.data;
+    const { volunteerPersonForm, volunteerErrors } = this.props.data;
 
     return (
-      <div className='authorization-object signup w420 text--center object--center'>
-        <LogoWithCopy/>
-        <VolunteerForm data={volunteerPersonForm} errors={loginErrors} dispatch={dispatch}/>
+      <div className='authorization-form signup w420 text--center object--center'>
+          <LogoWithCopy/>
+          <VolunteerForm data={volunteerPersonForm} errors={volunteerErrors} dispatch={dispatch}/>
       </div>
     )
   }

HackMerced/2017F/src/app/src/constants/constants.js

@@ -31,3 +31,4 @@ export const UPDATE_MOBILE_MENU_STATUS ='UPDATE_MOBILE_MENU_STATUS';
 export const UPDATE_SUBMITTED_VIEW = 'UPDATE_SUBMITTED_VIEW';
 export const UPDATE_FORGOT_PASSWORD_FORM = 'UPDATE_FORGOT_PASSWORD_FORM';
 export const UPDATE_VOLUNTEER_FORM = 'UPDATE_VOLUNTEER_FORM';
+export const UPDATE_VOLUNTEER_ERRORS = 'UPDATE_VOLUNTEER_ERRORS';