Merge pull request #419 from project-icp/jf/form-success-modal

Flash success message modal after any survey succeeds
project-icp · Jan 15, 2019 · 4fa8aff · 4fa8aff
2 parents 6d16573 + ac21e95
commit 4fa8aff
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 18 deletions.
diff --git a/src/icp/apps/beekeepers/js/src/App.jsx b/src/icp/apps/beekeepers/js/src/App.jsx
@@ -16,6 +16,7 @@ import LoginModal from './components/LoginModal';
 import ParticipateModal from './components/ParticipateModal';
 import UserSurveyModal from './components/UserSurveyModal';
 import EmailFormModal from './components/EmailFormModal';
+import SuccessModal from './components/SuccessModal';
 
 import { UserSurvey } from './propTypes';
 import { login, saveAndFetchApiaries, openUserSurveyModal } from './actions';
@@ -55,6 +56,7 @@ class App extends React.Component {
                     <SignUpModal />
                     <LoginModal />
                     <EmailFormModal />
+                    <SuccessModal />
                     <Switch>
                         <Route path="/survey" component={Survey} />
                         <Route render={locationFinder} />

diff --git a/src/icp/apps/beekeepers/js/src/actions.js b/src/icp/apps/beekeepers/js/src/actions.js
@@ -38,6 +38,8 @@ export const openUserSurveyModal = createAction('Open user survey modal');
 export const closeUserSurveyModal = createAction('Close user survey modal');
 export const openEmailFormModal = createAction('Open email form modal');
 export const closeEmailFormModal = createAction('Close email form modal');
+export const openSuccessModal = createAction('Open success message modal');
+export const closeSuccessModal = createAction('Close success message modal');
 
 
 export function fetchApiaryScores(apiaryList, forageRange) {
@@ -149,6 +151,15 @@ export function fetchApiaryScores(apiaryList, forageRange) {
     };
 }
 
+
+export function flashSuccessModal() {
+    return (dispatch) => {
+        dispatch(openSuccessModal());
+        setTimeout(() => dispatch(closeSuccessModal()), 2000);
+    };
+}
+
+
 export function signUp(form) {
     return dispatch => csrfRequest.post('/user/sign_up?beekeepers', form)
         .then(({ data: { result } }) => {
@@ -175,6 +186,7 @@ export function signUp(form) {
         });
 }
 
+
 export function login(form) {
     return (dispatch) => {
         const request = form
@@ -259,6 +271,7 @@ export function createUserSurvey(form) {
                     userSurvey: data.beekeeper_survey,
                 }));
                 dispatch(closeUserSurveyModal());
+                dispatch(flashSuccessModal());
             })
             .catch(() => {
                 const errorMsg = 'Error submitting user survey. Check the fields and try again, or try again later.';

diff --git a/src/icp/apps/beekeepers/js/src/components/AprilSurveyForm.jsx b/src/icp/apps/beekeepers/js/src/components/AprilSurveyForm.jsx
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import { func } from 'prop-types';
 
-import { fetchUserApiaries } from '../actions';
+import { fetchUserApiaries, flashSuccessModal } from '../actions';
 import { SURVEY_TYPE_APRIL, COLONY_LOSS_REASONS } from '../constants';
 import { arrayToSemicolonDelimitedString, getOrCreateSurveyRequest } from '../utils';
 import { Survey } from '../propTypes';
@@ -95,6 +95,7 @@ class AprilSurveyForm extends Component {
                 month_year,
             },
             dispatch,
+            close,
         } = this.props;
 
         const {
@@ -130,12 +131,10 @@ class AprilSurveyForm extends Component {
         const form = Object.assign({}, this.state, multipleChoiceState, { survey });
 
         getOrCreateSurveyRequest({ apiary, form })
-            .then(({ data }) => {
-                this.setState({
-                    completedSurvey: data,
-                    error: '',
-                });
+            .then(() => {
                 dispatch(fetchUserApiaries());
+                close();
+                dispatch(flashSuccessModal());
             })
             .catch(error => this.setState({ error: error.response.statusText }));
     }
@@ -257,6 +256,7 @@ function mapStateToProps(state) {
 AprilSurveyForm.propTypes = {
     survey: Survey.isRequired,
     dispatch: func.isRequired,
+    close: func.isRequired,
 };
 
 export default connect(mapStateToProps)(AprilSurveyForm);
diff --git a/src/icp/apps/beekeepers/js/src/components/NovemberSurveyForm.jsx b/src/icp/apps/beekeepers/js/src/components/NovemberSurveyForm.jsx
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import { func } from 'prop-types';
 
-import { fetchUserApiaries } from '../actions';
+import { fetchUserApiaries, flashSuccessModal } from '../actions';
 import {
     SURVEY_TYPE_NOVEMBER,
     MITE_MANAGEMENT_OPTIONS,
@@ -130,6 +130,7 @@ class NovemberSurveyForm extends Component {
                 month_year,
             },
             dispatch,
+            close,
         } = this.props;
 
         const {
@@ -165,12 +166,10 @@ class NovemberSurveyForm extends Component {
         const form = Object.assign({}, this.state, multipleChoiceState, { survey });
 
         getOrCreateSurveyRequest({ apiary, form })
-            .then(({ data }) => {
-                this.setState({
-                    completedSurvey: data,
-                    error: '',
-                });
+            .then(() => {
                 dispatch(fetchUserApiaries());
+                close();
+                dispatch(flashSuccessModal());
             })
             .catch(error => this.setState({ error: error.response.statusText }));
     }
@@ -443,6 +442,7 @@ function mapStateToProps(state) {
 NovemberSurveyForm.propTypes = {
     survey: Survey.isRequired,
     dispatch: func.isRequired,
+    close: func.isRequired,
 };
 
 export default connect(mapStateToProps)(NovemberSurveyForm);
diff --git a/src/icp/apps/beekeepers/js/src/components/SuccessModal.jsx b/src/icp/apps/beekeepers/js/src/components/SuccessModal.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { bool, func } from 'prop-types';
+import Popup from 'reactjs-popup';
+import { connect } from 'react-redux';
+
+import { closeSuccessModal } from '../actions';
+
+const SuccessModal = ({ dispatch, isSuccessModalOpen }) => (
+    <Popup open={isSuccessModalOpen} onClose={() => dispatch(closeSuccessModal())} modal>
+        {close => (
+            <div className="authModal">
+                <div className="authModal__header">
+                    Thank You
+                    <button type="button" className="button" onClick={close}>
+                        &times;
+                    </button>
+                </div>
+                <div className="authModal__content">
+                    Your response has been saved.
+                </div>
+            </div>
+        )}
+    </Popup>
+);
+
+function mapStateToProps(state) {
+    return {
+        isSuccessModalOpen: state.main.isSuccessModalOpen,
+        dispatch: state.main.dispatch,
+    };
+}
+
+SuccessModal.propTypes = {
+    isSuccessModalOpen: bool.isRequired,
+    dispatch: func.isRequired,
+};
+
+export default connect(mapStateToProps)(SuccessModal);
diff --git a/src/icp/apps/beekeepers/js/src/components/SurveyCardListing.jsx b/src/icp/apps/beekeepers/js/src/components/SurveyCardListing.jsx
@@ -23,14 +23,14 @@ const SurveyCardListing = ({
     let formComponent;
     switch (survey_type) {
         case SURVEY_TYPE_APRIL:
-            formComponent = (
-                <AprilSurveyForm survey={survey} />
-            );
+            formComponent = (close => (
+                <AprilSurveyForm survey={survey} close={close} />
+            ));
             break;
         case SURVEY_TYPE_NOVEMBER:
-            formComponent = (
-                <NovemberSurveyForm survey={survey} />
-            );
+            formComponent = (close => (
+                <NovemberSurveyForm survey={survey} close={close} />
+            ));
             break;
         case SURVEY_TYPE_MONTHLY:
             formComponent = <div />; // replace with monthly form component

diff --git a/src/icp/apps/beekeepers/js/src/reducers.js b/src/icp/apps/beekeepers/js/src/reducers.js
@@ -24,6 +24,8 @@ import {
     closeUserSurveyModal,
     openEmailFormModal,
     closeEmailFormModal,
+    openSuccessModal,
+    closeSuccessModal,
 } from './actions';
 
 const initialState = {
@@ -37,6 +39,7 @@ const initialState = {
     cropLayerOpacity: 0.5,
     isUserSurveyModalOpen: false,
     isEmailFormModalOpen: false,
+    isSuccessModalOpen: false,
 };
 
 const mainReducer = createReducer({
@@ -72,6 +75,10 @@ const mainReducer = createReducer({
         state => update(state, { isEmailFormModalOpen: { $set: true } }),
     [closeEmailFormModal]:
         state => update(state, { isEmailFormModalOpen: { $set: false } }),
+    [openSuccessModal]:
+        state => update(state, { isSuccessModalOpen: { $set: true } }),
+    [closeSuccessModal]:
+        state => update(state, { isSuccessModalOpen: { $set: false } }),
 }, initialState);
 
 // Placeholder reducer for parts of state that will be persisted to localStorage