Añadidos: Settings ✨

7 files changed, 242 insertions, 34 deletions

diff --git a/src/App.css b/src/App.css
index 73001f9..7bf667b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -182,4 +182,13 @@
 .ui.items>.item>.content>a.header.inverted {
   color: #4183C4;
   ;
+}
+
+.ui.checkbox,
+.select {
+  margin-top: 0.5em;
+}
+
+.settingCheckbox {
+  display: block !important;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 94b3156..c3631e2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,6 +20,7 @@ import NotFound from "./NotFound";
 import ThreadList from "./ThreadList";
 import FAQ from "./FAQ";
 import ChangeLogPage from "./ChangelogPage";
+import SettingsModal from "./Settings";
 
 class App extends Component {
   constructor() {
@@ -29,7 +30,7 @@ class App extends Component {
       isLoaded: false,
       nightMode: false
     };
-    this.toggleTheme = this.toggleTheme.bind(this);
+    this.updateTheme = this.updateTheme.bind(this);
   }
 
   componentDidMount() {
@@ -56,18 +57,31 @@ class App extends Component {
         });
       });
 
-    let _nightMode = localStorage.getItem("nightMode");
-    if (_nightMode === null) {
-      localStorage.setItem("nightMode", false);
+    let lsSettings = localStorage.getItem("settings");
+    let settings = JSON.parse(lsSettings);
+
+    if (lsSettings === null) {
+      let defaultSettings = {
+        homeSound: "msn",
+        threadSound: "msn",
+        nightMode: false,
+        notifyOnHome: true,
+        notifyOnThread: true,
+        autoUpdateThreads: true,
+        showAvatars: true,
+        postPassword: this.genPassword()
+      };
+      localStorage.setItem("settings", JSON.stringify(defaultSettings));
+      settings = defaultSettings;
     } else {
-      this.setState({ nightMode: JSON.parse(_nightMode) });
-    }
-    let password = localStorage.getItem("password");
-    if (password === null) {
-      localStorage.setItem("password", this.genPassword());
+      this.setState({ nightMode: settings.nightMode });
     }
   }
 
+  updateTheme(mode) {
+    this.setState({ nightMode: mode });
+  }
+
   genPassword() {
     let pass = "";
     for (let i = 0; i < 10; i++) {
@@ -95,12 +109,6 @@ class App extends Component {
     }
   }
 
-  toggleTheme() {
-    this.setState({ nightMode: !this.state.nightMode }, () => {
-      localStorage.setItem("nightMode", this.state.nightMode);
-    });
-  }
-
   render() {
     const { boardList, nightMode, isLoaded } = this.state;
 
@@ -120,8 +128,9 @@ class App extends Component {
             <Menu.Item as={Link} to="/">
               <Icon name="home" /> Home
             </Menu.Item>
-            <Dropdown text="BBS" className="link item">
+            <Dropdown text="Boards" className="link item">
               <Dropdown.Menu>
+                <Dropdown.Header>Bolletin Board System</Dropdown.Header>
                 {boardList.map(board =>
                   board.board_type === 1 ? (
                     <Dropdown.Item
@@ -133,10 +142,7 @@ class App extends Component {
                     </Dropdown.Item>
                   ) : null
                 )}
-              </Dropdown.Menu>
-            </Dropdown>
-            <Dropdown text="Imageboard" className="link item">
-              <Dropdown.Menu>
+                <Dropdown.Header>Imageboard</Dropdown.Header>
                 {boardList.map(board =>
                   board.board_type === 0 ? (
                     <Dropdown.Item
@@ -154,9 +160,14 @@ class App extends Component {
               <Icon name="help" /> FAQ
             </Menu.Item>
             <Menu.Menu position="right">
-              <Menu.Item as="a" onClick={this.toggleTheme}>
-                {nightMode ? <Icon name="sun" /> : <Icon name="moon" />}
-              </Menu.Item>
+              <SettingsModal
+                trigger={
+                  <Menu.Item as="a">
+                    <Icon name="configure" />
+                  </Menu.Item>
+                }
+                handler={this.updateTheme}
+              />
             </Menu.Menu>
           </Container>
         </Menu>
diff --git a/src/Home.js b/src/Home.js
index 0cdad72..1695ed4 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -19,8 +19,9 @@ class Home extends Component {
     this.refreshCooldown = 15;
     this.cooldownCounter = 0;
     this.lastTimeNoAge = 0;
+    let homeSound = JSON.parse(localStorage.getItem("settings")).homeSound;
     this.notificationSound = new Audio(
-      "https://bienvenidoainternet.org/msn.ogg"
+      `https://bienvenidoainternet.org/static/sfx/${homeSound}.ogg`
     );
     this.handeMouseMove = this.handeMouseMove.bind(this);
     this.mouseVars = {};
@@ -77,6 +78,9 @@ class Home extends Component {
   }
 
   async updateAges() {
+    if (!JSON.parse(localStorage.getItem("settings")).autoUpdateThreads) {
+      return;
+    }
     this.cooldownCounter++;
     if (this.cooldownCounter < this.refreshCooldown) {
       return;
@@ -96,7 +100,9 @@ class Home extends Component {
               lastAgeThreads: resource.threads
             });
             this.refreshCooldown = 30;
-            this.notificationSound.play();
+            if (JSON.parse(localStorage.getItem("settings")).notifyOnHome) {
+              this.notificationSound.play();
+            }
           } else {
             this.refreshCooldown += 15;
             this.lastTimeNoAge = resource.time;
@@ -131,7 +137,7 @@ class Home extends Component {
           className={nightMode ? "homeContainer inverted" : "homeContainer"}
         >
           <Grid.Row centered columns={1}>
-            <Grid.Column centered textAlign="center">
+            <Grid.Column textAlign="center">
               <div id="baiLogo" className={nightMode ? "invLogo" : "whiLogo"}>
                 BaI
               </div>
diff --git a/src/Post.js b/src/Post.js
index 18d81e0..68ba36e 100644
--- a/src/Post.js
+++ b/src/Post.js
@@ -91,7 +91,7 @@ class Post extends Component {
   handleConfirm() {
     this.setState({ deleteDialog: false });
     const { post, currentBoard } = this.props;
-    let password = localStorage.getItem("password");
+    let password = JSON.parse(localStorage.getItem("settings")).postPassword;
     fetch(
       `https://bienvenidoainternet.org/cgi/api/delete?dir=${currentBoard.dir}&id=${post.id}&password=${password}`
     )
@@ -251,12 +251,17 @@ class Post extends Component {
       isDeleteable = false;
     }
 
+    let settingRenderAvatar = JSON.parse(localStorage.getItem("settings"))
+      .showAvatars;
+
     return (
       <Comment inverted={nightMode}>
-        <Comment.Avatar
-          src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`}
-          style={{ filter: `hue-rotate(${hue}deg)` }}
-        />
+        {settingRenderAvatar && (
+          <Comment.Avatar
+            src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`}
+            style={{ filter: `hue-rotate(${hue}deg)` }}
+          />
+        )}
         <Comment.Content>
           <Comment.Author
             as="a"
diff --git a/src/ReplyForm.js b/src/ReplyForm.js
index 4fe45a8..bac770e 100644
--- a/src/ReplyForm.js
+++ b/src/ReplyForm.js
@@ -63,7 +63,8 @@ class ReplyForm extends Component {
           selectedFile
         } = this.state;
         const { currentBoard, parent } = this.props;
-        let password = localStorage.getItem("password");
+        let password = JSON.parse(localStorage.getItem("settings"))
+          .postPassword;
         let data = {
           board: currentBoard.dir,
           parent: parent,
diff --git a/src/Settings.js b/src/Settings.js
new file mode 100644
index 0000000..f5f298d
--- /dev/null
+++ b/src/Settings.js
@@ -0,0 +1,169 @@
+import React, { Component } from "react";
+import { Dropdown, Checkbox, Modal, Header, Input } from "semantic-ui-react";
+
+const notificationSounds = [
+  { key: "bed", value: "bed", text: "Bed squeak" },
+  { key: "bongchime", value: "bongchime", text: "Bongchime" },
+  { key: "boombang", value: "boombang", text: "Boom bang!" },
+  { key: "chime", value: "chime", text: "Chime" },
+  { 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" },
+  { key: "manscream", value: "manscream", text: "Man Scream (Loud)" },
+  {
+    key: "messageforme",
+    value: "messageforme",
+    text: "IT Crowd - Message for me!"
+  },
+  { key: "nootnoot", value: "nootnoot", text: "Pengu - noot noot" },
+  { key: "ohwahahahahah", value: "ohwahahahahah", text: "Oh wah ah ah ah!" },
+  { key: "pincheputita", value: "pincheputita", text: "Pinche putita" },
+  { key: "idk", value: "idk", text: "??? Pájaro" },
+  { key: "whoa", value: "whoa", text: "Woow" }
+];
+
+class SettingsModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      homeSound: "msn",
+      threadSound: "dootdoot",
+      nightMode: true,
+      notifyOnHome: true,
+      notifyOnThread: true,
+      autoUpdateThreads: true,
+      showAvatars: true,
+      postPassword: ""
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.toggleSetting = this.toggleSetting.bind(this);
+  }
+
+  componentDidMount() {
+    let settings = JSON.parse(localStorage.getItem("settings"));
+    this.setState({
+      homeSound: settings.homeSound,
+      threadSound: settings.threadSound,
+      nightMode: settings.nightMode,
+      notifyOnHome: settings.notifyOnHome,
+      notifyOnThread: settings.notifyOnThread,
+      autoUpdateThreads: settings.autoUpdateThreads,
+      showAvatars: settings.showAvatars,
+      postPassword: settings.postPassword
+    });
+  }
+
+  handleChange(e, { name, value }) {
+    this.setState({ [name]: value }, () => {
+      new Audio(
+        `https://bienvenidoainternet.org/static/sfx/${
+          name === "threadSound" ? this.state.threadSound : this.state.homeSound
+        }.ogg`
+      ).play();
+      this.saveSettings();
+    });
+  }
+
+  toggleSetting(e, { name, checked }) {
+    this.setState({ [name]: checked }, () => {
+      this.props.handler(this.state.nightMode);
+      this.saveSettings();
+    });
+  }
+
+  saveSettings() {
+    localStorage.setItem("settings", JSON.stringify(this.state));
+  }
+
+  render() {
+    const {
+      homeSound,
+      threadSound,
+      nightMode,
+      autoUpdateThreads,
+      notifyOnHome,
+      notifyOnThread,
+      postPassword,
+      showAvatars
+    } = this.state;
+    return (
+      <Modal trigger={this.props.trigger} size="tiny" centered={false}>
+        <Modal.Header>Configuración</Modal.Header>
+        <Modal.Content>
+          <Modal.Description>
+            <Header as="h4" dividing>
+              Apariencia
+            </Header>
+            <Checkbox
+              label="Modo nocturno"
+              checked={nightMode}
+              name="nightMode"
+              onChange={this.toggleSetting}
+              className="settingCheckbox"
+            />
+            <Checkbox
+              label="Mostrar avatares"
+              checked={showAvatars}
+              name="showAvatars"
+              onChange={this.toggleSetting}
+              className="settingCheckbox"
+            />
+            <Header as="h4" dividing>
+              Comportamiento
+            </Header>
+            <Checkbox
+              label="Actualizar automáticamente hilos"
+              checked={autoUpdateThreads}
+              name="autoUpdateThreads"
+              onChange={this.toggleSetting}
+              className="settingCheckbox"
+            />
+            <Checkbox
+              label="Notificar cuando existan nuevas respuestas"
+              checked={notifyOnHome}
+              name="notifyOnHome"
+              onChange={this.toggleSetting}
+              className="settingCheckbox"
+            />
+            <div className="select">
+              Sonido de notificación:{" "}
+              <Dropdown
+                inline
+                select
+                options={notificationSounds}
+                value={homeSound}
+                onChange={this.handleChange}
+                name="homeSound"
+              />
+            </div>
+            <Checkbox
+              label="Notificar cuando un hilo reciba nuevas respuestas"
+              checked={notifyOnThread}
+              name="notifyOnThread"
+              onChange={this.toggleSetting}
+              className="settingCheckbox"
+            />
+
+            <div className="select">
+              Sonido de notificación :{" "}
+              <Dropdown
+                inline
+                select
+                options={notificationSounds}
+                value={threadSound}
+                onChange={this.handleChange}
+                name="threadSound"
+              />
+            </div>
+            <Header as="h4" dividing>
+              Posteo
+            </Header>
+            <Input label="Contraseña" value={postPassword} type="password" />
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+    );
+  }
+}
+
+export default SettingsModal;
diff --git a/src/Thread.js b/src/Thread.js
index c79e7e0..b656b9f 100644
--- a/src/Thread.js
+++ b/src/Thread.js
@@ -28,8 +28,9 @@ class Thread extends Component {
     this.refreshCooldown = 15;
     this.cooldownCounter = 0;
     this.newPostCounter = 0;
+    let threadSound = JSON.parse(localStorage.getItem("settings")).threadSound;
     this.notificationSound = new Audio(
-      "https://bienvenidoainternet.org/msn.ogg"
+      `https://bienvenidoainternet.org/static/sfx/${threadSound}.ogg`
     );
   }
 
@@ -64,6 +65,10 @@ class Thread extends Component {
   }
 
   async updateReplies() {
+    if (!JSON.parse(localStorage.getItem("settings")).autoUpdateThreads) {
+      return;
+    }
+
     this.cooldownCounter++;
     if (this.cooldownCounter < this.refreshCooldown) {
       return;
@@ -87,7 +92,9 @@ class Thread extends Component {
             const newPosts = this.state.thread.posts.concat(resource.posts);
             this.refreshCooldown = 15;
             this.newPostCounter += resource.posts.length;
-            this.notificationSound.play();
+            if (JSON.parse(localStorage.getItem("settings")).notifyOnThread) {
+              this.notificationSound.play();
+            }
             this.setState(({ thread }) => ({
               thread: {
                 ...thread,