Merge pull request #1135 from thomasjshafer/survey-validate-api

addressed TODO: made SurveyForm use api endpoint for validation

Author: erikras

api/actions/index.js

@@ -3,3 +3,4 @@ export loadAuth from './loadAuth';
 export login from './login';
 export logout from './logout';
 export * as widget from './widget/index';
+export * as survey from './survey/index';

api/actions/survey/index.js

@@ -0,0 +1 @@
+export isValid from './isValid';

api/actions/survey/isValid.js

@@ -0,0 +1,17 @@
+export default function survey(req) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const errors = {};
+      let valid = true;
+      if (~['[email protected]', '[email protected]'].indexOf(req.body.email)) {
+        errors.email = 'Email address already used';
+        valid = false;
+      }
+      if (valid) {
+        resolve();
+      } else {
+        reject(errors);
+      }
+    }, 1000);
+  });
+}

src/components/SurveyForm/SurveyForm.js

@@ -1,29 +1,19 @@
 import React, {Component, PropTypes} from 'react';
 import {reduxForm} from 'redux-form';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import surveyValidation from './surveyValidation';
+import * as surveyActions from 'redux/modules/survey';
 
-function asyncValidate(data) {
-  // TODO: figure out a way to move this to the server. need an instance of ApiClient
+function asyncValidate(data, dispatch, {isValidEmail}) {
   if (!data.email) {
     return Promise.resolve({});
   }
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      const errors = {};
-      let valid = true;
-      if (~['[email protected]', '[email protected]'].indexOf(data.email)) {
-        errors.email = 'Email address already used';
-        valid = false;
-      }
-      if (valid) {
-        resolve();
-      } else {
-        reject(errors);
-      }
-    }, 1000);
-  });
+  return isValidEmail(data);
 }
-
+@connect(() => ({}),
+  dispatch => bindActionCreators(surveyActions, dispatch)
+)
 @reduxForm({
   form: 'survey',
   fields: ['name', 'email', 'occupation', 'currentlyEmployed', 'sex'],
@@ -137,4 +127,3 @@ class SurveyForm extends Component {
     );
   }
 }
-

src/redux/modules/survey.js

@@ -0,0 +1,38 @@
+const IS_VALID = 'redux-example/survey/IS_VALID';
+const IS_VALID_SUCCESS = 'redux-example/survey/IS_VALID_SUCCESS';
+const IS_VALID_FAIL = 'redux-example/survey/IS_VALID_FAIL';
+
+const initialState = {
+  saveError: null,
+};
+
+export default function reducer(state = initialState, action = {}) {
+  switch (action.type) {
+    case IS_VALID:
+      return state; // 'saving' flag handled by redux-form
+    case IS_VALID_SUCCESS:
+      const data = [...state.data];
+      data[action.result.id - 1] = action.result;
+      return {
+        ...state,
+        data: data,
+        saveError: null,
+      };
+    case IS_VALID_FAIL:
+      return typeof action.error === 'string' ? {
+        ...state,
+        saveError: action.error
+      } : state;
+    default:
+      return state;
+  }
+}
+
+export function isValidEmail(data) {
+  return {
+    types: [IS_VALID, IS_VALID_SUCCESS, IS_VALID_FAIL],
+    promise: (client) => client.post('/survey/isValid', {
+      data
+    })
+  };
+}