Feature/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',
@@ -86,15 +80,64 @@ export class VolunteerForm extends Component {
             'XL',
             '2XL',
             '3XL',
-            '4XL'
+            '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>
     );
   }
 
-  _onChange(event){
+  _onChange(event) {
     let newState = this._mergeWithCurrentState({
       [event.target.name]: event.target.value
     });
@@ -103,26 +146,30 @@ export class VolunteerForm extends Component {
   }
 
   // Merges the current state with a change
-  _mergeWithCurrentState(change) {
-    return assign(this.props.data, change);
+  _mergeWithCurrentState (change) {
+    const { data } = this.props;
+    return assign(data, change);
   }
 
   // Emits a change of the form state to the application state
-  _emitChange(newState) {
+  _emitChange (newState) {
     this.props.dispatch(updateVolunteerForm(newState));
   }
 
-  _onSubmit(event){
-    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,
-      shirt_size: this.props.data.shirt_size
-    }))
+  _onSubmit (event) {
+    const { dispatch, data } = this.props
 
+    event.preventDefault()
 
+    dispatch(signUpVolunteer({
+      name: data.name,
+      email: data.email,
+      age: data.age,
+      friday_availability: data.friday_availability,
+      saturday_availability: data.saturday_availability,
+      sunday_availability: data.sunday_availability,
+      dietary_restrictions: data.dietary_restrictions,
+      shirt_size: 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>
     )
   }