Permalink
Browse files

Making it functional

  • Loading branch information...
ionofzion committed Nov 2, 2018
1 parent b10b88c commit c14a08f57e84ffa70272573644bdf830db4ed158
Showing with 96 additions and 33 deletions.
  1. +96 −33 app/components/contactForm.jsx
@@ -1,41 +1,104 @@
import React from 'react';
import PropTypes from 'prop-types';
import fetchWP from '../utils/fetchWP';
export default class ContactForm extends React.Component {
render() {
constructor(props) {
super(props);
this.state = {
error: false,
submitted: false,
name: '',
email: '',
message: '',
};
this.fetchWP = new fetchWP({
restURL: this.props.wpObject.api_url,
restNonce: this.props.wpObject.api_nonce,
});
}
handleInputChange = (event) => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit = (event) => {
event.preventDefault();
this.fetchWP.post( 'submission', {
name: this.state.name,
email: this.state.email,
message: this.state.message,
} )
.then(
(json) => {
this.setState({
submitted: true,
error: false
}),
console.log(`New Contact Submission: ${json.value}`)
},
(err) => this.setState({
error: err.message
}),
);
}
render() {
const contactForm = this.state.submitted ? <p>Thanks for getting in touch!</p> :
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
name="name"
onChange={this.handleInputChange}
/>
</label>
<label>
Email:
<input
type="email"
name="email"
onChange={this.handleInputChange}
/>
</label>
<label>
Message:
<textarea
name="message"
onChange={this.handleInputChange}
/>
</label>
<button
className="button button-primary"
onClick={this.handleSubmit}
>Submit</button>
</form>;
const error = this.state.error ? <p className="error">{this.state.error}</p> : '';
return (
<div>
<form>
<label>
Name:
<input
type="text"
name="name"
/>
</label>
<label>
Email:
<input
type="email"
name="email"
/>
</label>
<label>
Message:
<textarea
name="message"
/>
</label>
<button
id="submit"
className="button button-primary"
>Submit</button>
</form>;
{contactForm}
{error}
</div>
);
}
}
}
ContactForm.propTypes = {
wpObject: PropTypes.object
};

0 comments on commit c14a08f

Please sign in to comment.