Modal creación de hilos

4 files changed, 215 insertions, 78 deletions

diff --git a/src/App.js b/src/App.js
index 9fffc93..1f4daa4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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