Formulario de respuesta arreglado

1 files changed, 46 insertions, 20 deletions

diff --git a/src/ReplyForm.js b/src/ReplyForm.js
index cd45211..769e0a6 100644
--- a/src/ReplyForm.js
+++ b/src/ReplyForm.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Form, Segment, Button } from "semantic-ui-react";
+import { Form, Segment, Button, Message } from "semantic-ui-react";
 
 class ReplyForm extends Component {
     constructor(props) {
@@ -10,7 +10,8 @@ class ReplyForm extends Component {
             message: "",
             submittedName: "",
             submittedEmail: "",
-            submittedMessage: ""
+            submittedMessage: "",
+            replyRes: null
         }
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -22,41 +23,66 @@ class ReplyForm extends Component {
     }
 
     handleSubmit() {
-        const { name, email, message } = this.state
+        const { submittedName, submittedEmail, name, email, message } = this.state
         this.setState({ submittedName: name, submittedEmail: email, submittedMessage: message })
-        const formData = {
+        const data = {
             board: this.props.dir,
             parent: this.props.parent,
             name: "",
             email: "",
-            fielda: name,
-            fieldb: email,
+            fielda: submittedName,
+            fieldb: submittedEmail,
             message: message,
             password: "bai-client"
         }
-        fetch('https://bienvenidoainternet.org/cgi/api/post', {
-            method: 'POST',
-            headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+
+        const formData = new FormData();
+        for (var key in data) {
+            formData.append(key, data[key]);
+        }
+
+        fetch("https://bienvenidoainternet.org/cgi/api/post", {
+            method: "POST",
             mode: "cors",
-            redirect: 'follow',
-            body: JSON.stringify(formData)
+            redirect: "follow",
+            body: formData
         }
-        ).then(response => {
-            console.log(response.json);
-        });
+        ).then((response) => {
+            return response.json()
+        }).then((resource) => {
+            console.log(resource);
+            this.setState({ replyRes: resource });
+        }
+        );
     }
 
     render() {
-        const { name, email, message } = this.state;
+        const { name, email, message, replyRes } = this.state;
+        const quotes = ["Eres una buena persona.", "Y por invertir en felaciones.", "Fue un mensaje cachilupi.", "holiwi :3", "Hemos enviado a tu casa un ejército de prostitutas.", "Fue un mensaje de PURA CALIDAD.", "Ganaste frot gratis por una semana.", "Te besaría en la boca.", "Te invitaría a un café.", "ミト━━━━━━⊂( ﾟ ヮﾟ)⊃━━━━━━ン!!!!!", "Suenas como un bot muy desarrollado.", "¿Usaste TheSaurus para escribir tu post?", "(´･ω･`)", "Plataformas del futuro para la web 1.0.", "Gracias por utilizar Internet.", "Plataformas del pasado para la web 2.0.", "Elegiste bien. Elegiste calidad.", "Espero que no hayas abusado del sage.", "gRAciAs pOR Tu PAgA ;)", "Gracias por tu papiro."]
         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>
-                        <Form.Input name="name" fluid placeholder='Nombre (Opcional)' value={name} width={4} onChange={this.handleChange} />
-                        <Form.Input name="email" fluid placeholder='E-mail (Opcional)' value={email} width={4} onChange={this.handleChange} />
+                    <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 ...' width={8} onChange={this.handleChange} />
-                    <Button type='submit' secondary>Enviar</Button>
+                    <Form.TextArea name="message" value={message} label="Mensaje" placeholder="(　･ω･) Cuentáme algo interesante ..." onChange={this.handleChange} />
+                    <Button type="submit" secondary>Enviar</Button>
                 </Form>
             </Segment >
         );