Avances creación de hilos

4 files changed, 135 insertions, 1 deletions

diff --git a/src/App.css b/src/App.css
index 7bf667b..06ec594 100644
--- a/src/App.css
+++ b/src/App.css
@@ -191,4 +191,10 @@
 
 .settingCheckbox {
   display: block !important;
+}
+
+.spoilerCheckbox {
+  display: block !important;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index c3631e2..9fffc93 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ import ThreadList from "./ThreadList";
 import FAQ from "./FAQ";
 import ChangeLogPage from "./ChangelogPage";
 import SettingsModal from "./Settings";
+import NewThread from "./NewThread";
 
 class App extends Component {
   constructor() {
@@ -193,7 +194,11 @@ class App extends Component {
             />
             <ChangeLogPage path="/changelog" nightMode={nightMode} />
             <FAQ path="/faq" nightMode={nightMode} />
-
+            <NewThread
+              path="/new/:dir"
+              boardList={boardList}
+              nightMode={nightMode}
+            />
             <NotFound default />
           </Router>
         </Container>
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;
diff --git a/src/Settings.js b/src/Settings.js
index 7330cd4..a0453af 100644
--- a/src/Settings.js
+++ b/src/Settings.js
@@ -6,6 +6,7 @@ const notificationSounds = [
   { key: "bongchime", value: "bongchime", text: "Bongchime" },
   { key: "boombang", value: "boombang", text: "Boom bang!" },
   { key: "chime", value: "chime", text: "Chime" },
+  { key: "cuack", value: "cuack", text: "Cuack" },
   { key: "dootdoot", value: "dootdoot", text: "Mr Skeltal - Doot doot" },
   { key: "iqc", value: "iqc", text: "Notificación IQC" },
   { key: "msn", value: "msn", text: "Notificación MSN" },