Avances creación de hilos

1 files changed, 122 insertions, 0 deletions

diff --git a/src/NewThread.js b/src/NewThread.js
new file mode 100644
index 0000000..c76f515
--- /dev/null
+++ b/src/NewThread.js
@@ -0,0 +1,122 @@
+import React, { Component } from "react";
+import {
+  Segment,
+  Button,
+  Form,
+  Icon,
+  Checkbox,
+  Header
+} from "semantic-ui-react";
+
+class NewThread extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      subject: "",
+      name: "",
+      email: "",
+      message: "",
+      attachment: "",
+      selectedFile: null,
+      isSpoiler: false
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  }
+
+  render() {
+    const { boardList, dir } = this.props;
+    const {
+      subject,
+      name,
+      email,
+      message,
+      attachment,
+      selectedFile,
+      isSpoiler
+    } = 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 && (
+              <Form.Input
+                id="name"
+                name="name"
+                label="Nombre"
+                value={name}
+                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
+                  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"
+            />
+          )}
+          <Button type="submit">Crear nuevo hilo</Button>
+        </Form>
+      </Segment>
+    );
+  }
+}
+
+export default NewThread;