-
Notifications
You must be signed in to change notification settings - Fork 1
/
ContactForm.js
143 lines (120 loc) · 3.4 KB
/
ContactForm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*** dependencies ***/
import React, { Component, PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { reduxForm } from 'redux-form';
import classnames from 'classnames';
import Promise from 'bluebird';
/*** My functions ***/
import {
checkAnyOpen,
closeAll
} from '../../js/core-questions';
/*** Third-party Components ***/
import Dialog from 'react-toolbox/lib/dialog';
import Input from 'react-toolbox/lib/input';
import { Button, IconButton } from 'react-toolbox/lib/button';
import TextField from 'material-ui/lib/text-field';
import RaisedButton from 'material-ui/lib/raised-button';
import Icon from 'react-fa';
/*** actions ***/
import { addUser } from '../../actions/';
/*** styling ***/
import style from './style';
const ContactForm = (props) => {
const {
fields: { name, email, situation },
handleSubmit,
submitting,
resetForm,
questions,
closeAll,
className
} = props;
const submit = (values, dispatch) => {
// return a promise so that the submitting value gets updated from
// redux-from.
return new Promise((resolve, reject) => {
const actionObj = dispatch(addUser(values));
if (actionObj.error !== true) {
setTimeout(() => {
closeAll(questions);
resolve();
}, 1000); // simulate latency
} else {
const error = {
name: 'There was an error on our end. Please just try again.',
_error: 'ADD_ERROR'
};
reject(error);
}
});
};
const formClass = classnames({
[style.form]: true,
[className]: !!className
});
console.log(props)
return (
<Dialog
active={checkAnyOpen(questions)}
onOverlayClick={() => closeAll(questions)}
className={style.wrapper}>
<form
role="form"
className={formClass}
onSubmit={handleSubmit(submit)}>
<Input
type="text"
label="Enter Name"
icon={<Icon name="user" />}
{...name} />
<Input
type="text"
label="Enter Email"
icon={<Icon name="envelope" />}
{...email} />
<Input
type="text"
label="Your Situation"
multiline={true}
icon={<Icon name="file-text" />}
{...situation} />
<div className={style.btnGroup}>
<Button
raised
className={style.button}
type="submit"
disabled={submitting}
icon={submitting ?
<Icon spin name="spinner" /> :
<Icon name="paper-plane-o" />}
label="Submit"
primary
neutral={true} />
<Button
raised
className={style.button}
type="button"
disabled={submitting}
icon={<Icon name="trash-o" />}
label="Cancel"
primary
netural={true}
onClick={() => {
resetForm();
closeAll(questions);
}} />
</div>
</form>
</Dialog>
);
};
ContactForm.propTypes = {
questions: ImmutablePropTypes.listOf(ImmutablePropTypes.map).isRequired,
closeAll: PropTypes.func.isRequired,
className: PropTypes.string
};
export default reduxForm({
form: 'contact',
fields: ['name', 'email', 'situation']
})(ContactForm);