path: root/src/ReplyForm.js

import React, { Component } from "react";
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 })
    }

    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"
        }

        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: 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;