diff options
| -rw-r--r-- | src/App.css | 6 | ||||
| -rw-r--r-- | src/App.js | 7 | ||||
| -rw-r--r-- | src/NewThread.js | 122 | ||||
| -rw-r--r-- | src/Settings.js | 1 |
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 @@ -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" }, |