diff options
Diffstat (limited to 'src/ReplyForm.js')
| -rw-r--r-- | src/ReplyForm.js | 187 |
1 files changed, 107 insertions, 80 deletions
diff --git a/src/ReplyForm.js b/src/ReplyForm.js index 1aa71e5..33a6af4 100644 --- a/src/ReplyForm.js +++ b/src/ReplyForm.js @@ -3,91 +3,118 @@ import { Form, Segment, Button, Message } from "semantic-ui-react"; import { quotes } from "./Quotes"; class ReplyForm extends Component { - constructor(props) { - super(props); - this.state = { - name: "", - email: "", - message: "", - submittedName: "", - submittedEmail: "", - submittedMessage: "", - replyRes: null - } - this.handleChange = this.handleChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - } - - handleChange(e) { - const { name, value } = e.target; - this.setState({ [name]: value }) - } + constructor(props) { + super(props); + this.state = { + name: "", + email: "", + message: "", + submittedName: "", + submittedEmail: "", + submittedMessage: "", + replyRes: null + }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } - handleSubmit() { - const { submittedName, submittedEmail, name, email, message } = this.state - this.setState({ submittedName: name, submittedEmail: email, submittedMessage: message }) - const data = { - board: this.props.dir, - parent: this.props.parent, - name: "", - email: "", - fielda: submittedName, - fieldb: submittedEmail, - message: message, - password: "bai-client" - } + handleChange(e) { + const { name, value } = e.target; + this.setState({ [name]: value }); + } - const formData = new FormData(); - for (var key in data) { - formData.append(key, data[key]); - } + handleSubmit() { + const { submittedName, submittedEmail, name, email, message } = this.state; + this.setState({ + submittedName: name, + submittedEmail: email, + submittedMessage: message + }); + const data = { + board: this.props.dir, + parent: this.props.parent, + name: "", + email: "", + fielda: submittedName, + fieldb: submittedEmail, + message: message, + password: "bai-client" + }; - fetch("https://bienvenidoainternet.org/cgi/api/post", { - method: "POST", - mode: "cors", - redirect: "follow", - body: formData - } - ).then((response) => { - return response.json() - }).then((resource) => { - console.log(resource); - this.setState({ replyRes: resource }); - } - ); + const formData = new FormData(); + for (var key in data) { + formData.append(key, data[key]); } - render() { - const { name, email, message, replyRes } = this.state; - return ( - <Segment> - { - replyRes !== null ? - replyRes.state === "success" ? - (<Message positive> - <Message.Header>Gracias por tu post</Message.Header> - {quotes[Math.floor(Math.random() * quotes.length)]}<br /> - <span className="ui small text">Nos tomó {replyRes.time_taken} segundos procesar tu mensaje.</span> - </Message>) : - ( - <Message negative> - <Message.Header>{replyRes.state}</Message.Header> - {replyRes.message} - </Message> - ) : null - } - <Form onSubmit={this.handleSubmit}> - <Form.Group widths="equal"> - <Form.Input label="Nombre" name="name" fluid placeholder="Nombre (Opcional)" value={name} onChange={this.handleChange} /> - <Form.Input label="E-mail" name="email" fluid placeholder="E-mail (Opcional)" value={email} onChange={this.handleChange} /> - </Form.Group> - <Form.TextArea name="message" value={message} label="Mensaje" placeholder="( ･ω･) Cuentáme algo interesante ..." onChange={this.handleChange} /> - <Button type="submit" secondary>Enviar</Button> - </Form> - </Segment > - ); - } + fetch("https://bienvenidoainternet.org/cgi/api/post", { + method: "POST", + mode: "cors", + redirect: "follow", + body: formData + }) + .then(response => { + return response.json(); + }) + .then(resource => { + console.log(resource); + this.setState({ replyRes: resource }); + }); + } + render() { + const { name, email, message, replyRes } = this.state; + return ( + <Segment> + {replyRes !== null ? ( + replyRes.state === "success" ? ( + <Message positive> + <Message.Header>Gracias por tu post</Message.Header> + {quotes[Math.floor(Math.random() * quotes.length)]} + <br /> + <span className="ui small text"> + Nos tomó {replyRes.time_taken} segundos procesar tu mensaje. + </span> + </Message> + ) : ( + <Message negative> + <Message.Header>{replyRes.state}</Message.Header> + {replyRes.message} + </Message> + ) + ) : null} + <Form onSubmit={this.handleSubmit}> + <Form.Group widths="equal"> + <Form.Input + label="Nombre" + name="name" + fluid + placeholder="Nombre (Opcional)" + value={name} + onChange={this.handleChange} + /> + <Form.Input + label="E-mail" + name="email" + fluid + placeholder="E-mail (Opcional)" + value={email} + onChange={this.handleChange} + /> + </Form.Group> + <Form.TextArea + name="message" + value={message} + label="Mensaje" + placeholder="( ･ω･) Cuentáme algo interesante ..." + onChange={this.handleChange} + /> + <Button type="submit" secondary> + Enviar + </Button> + </Form> + </Segment> + ); + } } -export default ReplyForm;
\ No newline at end of file +export default ReplyForm; |