diff options
| -rw-r--r-- | src/App.js | 5 | ||||
| -rw-r--r-- | src/Board.js | 14 | ||||
| -rw-r--r-- | src/NewThread.js | 272 | ||||
| -rw-r--r-- | src/ReplyForm.js | 2 |
4 files changed, 215 insertions, 78 deletions
@@ -47,7 +47,10 @@ class App extends Component { dir: "polka", maxsize: 500, name: "Testing field", - postarea_desc: "" + postarea_desc: "", + disable_name: 0, + disable_subject: 0, + allow_spoilers: 0 }; if (localStorage.getItem("thereisnourflevel") === null) { polka = {}; diff --git a/src/Board.js b/src/Board.js index c30844d..6992bd3 100644 --- a/src/Board.js +++ b/src/Board.js @@ -6,10 +6,12 @@ import { Header, Comment, Divider, - Breadcrumb + Breadcrumb, + Button } from "semantic-ui-react"; import { Link } from "@reach/router"; import Post from "./Post"; +import NewThread from "./NewThread"; class Board extends Component { constructor() { super(); @@ -147,8 +149,16 @@ class Board extends Component { dangerouslySetInnerHTML={{ __html: currentBoard.postarea_desc }} ></div> </p> - <Link to={`/list/${currentBoard.dir}`}>Lista de hilos</Link> </Segment> + <Button.Group widths={5} basic={!nightMode} secondary={nightMode}> + <Button as={Link} to={`/list/${currentBoard.dir}`}> + Lista de hilos + </Button> + <NewThread + trigger={<Button>Crear un hilo</Button>} + currentBoard={currentBoard} + /> + </Button.Group> {threadList.map(thread => ( <Segment.Group key={"seg_" + thread.timestamp + thread.id}> diff --git a/src/NewThread.js b/src/NewThread.js index c76f515..4452f35 100644 --- a/src/NewThread.js +++ b/src/NewThread.js @@ -1,12 +1,13 @@ import React, { Component } from "react"; import { - Segment, Button, Form, Icon, Checkbox, - Header + Message, + Modal } from "semantic-ui-react"; +import { quotes } from "./Quotes"; class NewThread extends Component { constructor(props) { @@ -18,18 +19,128 @@ class NewThread extends Component { message: "", attachment: "", selectedFile: null, - isSpoiler: false + isSpoiler: false, + submittedName: "", + submittedEmail: "", + submittedMessage: "", + submittedSubject: "", + replyRes: null }; this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.handleClick = this.handleClick.bind(this); } handleChange(e) { const { name, value } = e.target; - this.setState({ [name]: value }); + if (name === "hiddenInput") { + let hiddenInput = document.getElementById("hiddenInput"); + if (hiddenInput.files.length === 0) { + this.setState({ selectedFile: null }); + } else { + let file = hiddenInput.files[0].name; + this.setState({ selectedFile: file }); + } + } else { + this.setState({ [name]: value }); + } + } + + handleClick(e) { + e.preventDefault(); + document.getElementById("hiddenInput").click(); + } + handleSubmit() { + const { name, email, message, subject } = this.state; + this.setState( + { + submittedName: name, + submittedEmail: email, + submittedMessage: message, + submittedSubject: subject, + replyRes: null + }, + () => { + var { + submittedName, + submittedEmail, + submittedMessage, + submittedSubject, + selectedFile, + isSpoiler + } = this.state; + const { currentBoard } = this.props; + let password = JSON.parse(localStorage.getItem("settings")) + .postPassword; + let data = { + board: currentBoard.dir, + name: "", + email: "", + fielda: submittedName, + fieldb: submittedEmail, + message: submittedMessage, + subject: submittedSubject, + password: password + }; + + if (selectedFile !== null) { + let file = document.getElementById("hiddenInput").files[0]; + data["file"] = file; + } + + if (currentBoard.allow_spoilers) { + data["spoil"] = isSpoiler; + } + + let userData = { name: name, email: email }; + localStorage.setItem("userData", JSON.stringify(userData)); + + 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 => { + if (resource.state === "success") { + this.randomQuote = + quotes[Math.floor(Math.random() * quotes.length)]; + this.setState({ + replyRes: resource, + message: "", + selectedFile: null + }); + let ownPosts = JSON.parse(localStorage.getItem("ownPosts")); + if (ownPosts === null) { + ownPosts = {}; + } + // eslint-disable-next-line no-prototype-builtins + if (!ownPosts.hasOwnProperty(currentBoard.dir)) { + ownPosts[currentBoard.dir] = []; + } + ownPosts[currentBoard.dir] = ownPosts[currentBoard.dir].concat({ + thread_id: resource.post_id, + reply_id: resource.post_id + }); + localStorage.setItem("ownPosts", JSON.stringify(ownPosts)); + } else { + this.setState({ replyRes: resource }); + } + }); + } + ); } render() { - const { boardList, dir } = this.props; + const { currentBoard, trigger } = this.props; const { subject, name, @@ -37,84 +148,99 @@ class NewThread extends Component { message, attachment, selectedFile, - isSpoiler + isSpoiler, + replyRes } = this.state; - const currentBoard = boardList.find(board => { - return board.dir === dir; - }); return ( - <Segment inverted={this.props.nightMode}> - <Header as="h2" dividing> - Crear un nuevo hilo en {currentBoard.name} - </Header> - <Form inverted={this.props.nightMode}> - {currentBoard.disable_subject === 0 && ( - <Form.Input - id="subject" - name="subject" - label="Asunto" - value={subject} - onChange={this.handleChange} - /> - )} - <Form.Group widths="equal"> - {currentBoard.disable_name === 0 && ( + <Modal trigger={trigger}> + <Modal.Header>Crear un nuevo hilo en {currentBoard.name}</Modal.Header> + <Modal.Content> + {replyRes !== null && + (replyRes.state === "success" ? ( + <Message positive> + <Message.Header>Gracias por tu post</Message.Header> + {this.randomQuote} + <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> + ))} + + <Form onSubmit={this.handleSubmit}> + {currentBoard.disable_subject === 0 && ( <Form.Input - id="name" - name="name" - label="Nombre" - value={name} + id="subject" + name="subject" + label="Asunto" + value={subject} onChange={this.handleChange} /> )} - <Form.Input - id="email" - name="email" - label="E-mail" - value={email} - onChange={this.handleChange} - /> - {currentBoard.allow_image_replies === 1 && ( - <React.Fragment> - <input - id="hiddenInput" - name="hiddenInput" - type="file" - hidden + <Form.Group widths="equal"> + {currentBoard.disable_name === 0 && ( + <Form.Input + id="name" + name="name" + label="Nombre" + value={name} onChange={this.handleChange} - multiple={false} /> - <Form.Button - label="Adjunto" - fluid - value={attachment} - onClick={this.handleClick} - > - <Icon name="attach" /> - {selectedFile === null ? "Adjuntar archivo" : selectedFile} - </Form.Button> - </React.Fragment> - )} - </Form.Group> - <Form.TextArea - name="message" - value={message} - label="Mensaje" - placeholder="( ･ω･) Cuentáme algo interesante ..." - onChange={this.handleChange} - rows={7} - /> - {currentBoard.allow_spoilers === 1 && ( - <Checkbox - label="El archivo adjunto es un spoiler" - checked={isSpoiler} - className="spoilerCheckbox" + )} + <Form.Input + id="email" + name="email" + label="E-mail" + value={email} + onChange={this.handleChange} + /> + {currentBoard.allow_image_replies === 1 && ( + <React.Fragment> + <input + id="hiddenInput" + name="hiddenInput" + type="file" + hidden + onChange={this.handleChange} + multiple={false} + /> + <Form.Button + label="Adjunto" + fluid + value={attachment} + onClick={this.handleClick} + > + <Icon name="attach" /> + {selectedFile === null ? "Adjuntar archivo" : selectedFile} + </Form.Button> + </React.Fragment> + )} + </Form.Group> + <Form.TextArea + name="message" + value={message} + label="Mensaje" + placeholder="( ･ω･) Cuentáme algo interesante ..." + onChange={this.handleChange} + rows={7} /> - )} - <Button type="submit">Crear nuevo hilo</Button> - </Form> - </Segment> + {currentBoard.allow_spoilers === 1 && ( + <Checkbox + label="El archivo adjunto es un spoiler" + checked={isSpoiler} + className="spoilerCheckbox" + /> + )} + <Button type="submit">Crear nuevo hilo</Button> + </Form> + </Modal.Content> + </Modal> ); } } diff --git a/src/ReplyForm.js b/src/ReplyForm.js index bac770e..6e5b810 100644 --- a/src/ReplyForm.js +++ b/src/ReplyForm.js @@ -46,7 +46,6 @@ class ReplyForm extends Component { } handleSubmit() { - console.log("submit event"); const { name, email, message } = this.state; this.setState( { @@ -190,7 +189,6 @@ class ReplyForm extends Component { onChange={this.handleChange} maxLength="50" /> - {/* TODO: Archivos adjuntos */} {currentBoard.allow_image_replies === 1 ? ( <React.Fragment> <input |