diff options
| -rw-r--r-- | src/BBSThread.js | 6 | ||||
| -rw-r--r-- | src/ReplyForm.js | 67 |
2 files changed, 71 insertions, 2 deletions
diff --git a/src/BBSThread.js b/src/BBSThread.js index e54588b..dd220ce 100644 --- a/src/BBSThread.js +++ b/src/BBSThread.js @@ -3,7 +3,7 @@ import { Header, Icon, Loader, Message, Segment } from "semantic-ui-react"; import Moment from "react-moment"; import "moment/locale/es"; import Post from "./Post"; - +import ReplyForm from "./ReplyForm"; class BBSThread extends Component { constructor(props) { @@ -57,7 +57,7 @@ class BBSThread extends Component { ); } - const { posts, subject, timestamp, total_replies, locked } = this.state.thread; + const { posts, subject, timestamp, total_replies, locked, id } = this.state.thread; return ( <div> @@ -83,6 +83,8 @@ class BBSThread extends Component { ) } + <ReplyForm dir={this.props.dir} parent={id} /> + <a href={`https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`}>API Link</a> </div>); } diff --git a/src/ReplyForm.js b/src/ReplyForm.js new file mode 100644 index 0000000..cd45211 --- /dev/null +++ b/src/ReplyForm.js @@ -0,0 +1,67 @@ +import React, { Component } from "react"; +import { Form, Segment, Button } from "semantic-ui-react"; + +class ReplyForm extends Component { + constructor(props) { + super(props); + this.state = { + name: "", + email: "", + message: "", + submittedName: "", + submittedEmail: "", + submittedMessage: "" + } + 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 { name, email, message } = this.state + this.setState({ submittedName: name, submittedEmail: email, submittedMessage: message }) + const formData = { + board: this.props.dir, + parent: this.props.parent, + name: "", + email: "", + fielda: name, + fieldb: email, + message: message, + password: "bai-client" + } + fetch('https://bienvenidoainternet.org/cgi/api/post', { + method: 'POST', + headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, + mode: "cors", + redirect: 'follow', + body: JSON.stringify(formData) + } + ).then(response => { + console.log(response.json); + }); + } + + render() { + const { name, email, message } = this.state; + return ( + <Segment> + <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> + <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> + </Segment > + ); + } + +} + +export default ReplyForm;
\ No newline at end of file |