Prettier

11 files changed, 801 insertions, 433 deletions

diff --git a/src/Api.js b/src/Api.js
index b564aa2..3999b7a 100644
--- a/src/Api.js
+++ b/src/Api.js
@@ -1,13 +1,15 @@
 async function getBoards() {
-    var ret = await fetch("https://bienvenidoainternet.org/cgi/api/boards")
-        .then((response) => {
-            return response.json();
-        }).then((resource) => {
-            //console.log(resource["boards"]);
-            return resource["boards"];
-        }).catch(console.error)
+  var ret = await fetch("https://bienvenidoainternet.org/cgi/api/boards")
+    .then(response => {
+      return response.json();
+    })
+    .then(resource => {
+      //console.log(resource["boards"]);
+      return resource["boards"];
+    })
+    .catch(console.error);
 
-    return ret;
+  return ret;
 }
 
-export default getBoards;
\ No newline at end of file
+export default getBoards;
diff --git a/src/App.css b/src/App.css
index 16aba4d..3b800da 100644
--- a/src/App.css
+++ b/src/App.css
@@ -19,7 +19,7 @@
 }
 
 .vipFont {
-  font-family: Mona, Monapo, IPAMonaPGothic, 'MS PGothic', YOzFontAA97;
+  font-family: Mona, Monapo, IPAMonaPGothic, "MS PGothic", YOzFontAA97;
 }
 
 .tripcode {
@@ -28,11 +28,11 @@
 }
 
 .username {
-  color: #B5BD68;
+  color: #b5bd68;
 }
 
 .username.sage {
-  color: #81A2BE;
+  color: #81a2be;
 }
 
 /* a quien estás citando? */
@@ -77,4 +77,4 @@
 .deleted {
   color: rgba(0, 0, 0, 0.4);
   font-style: italic;
-}
\ No newline at end of file
+}
diff --git a/src/App.js b/src/App.js
index 99860cc..7b6bc94 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import { render } from "react-dom";
 import { Router, Link } from "@reach/router";
-import 'fomantic-ui-css/semantic.css';
+import "fomantic-ui-css/semantic.css";
 import "./App.css";
 
 import { Dropdown, Menu, Icon, Loader, Container } from "semantic-ui-react";
 import Home from "./Home";
 import Thread from "./Thread";
 import Board from "./Board";
-import NotFound from "./NotFound"
+import NotFound from "./NotFound";
 
 class App extends Component {
   constructor() {
@@ -16,16 +16,15 @@ class App extends Component {
     this.state = {
       boardList: [],
       isLoaded: false
-    }
-
+    };
   }
 
   componentDidMount() {
     fetch("https://bienvenidoainternet.org/cgi/api/boards")
-      .then((response) => {
+      .then(response => {
         return response.json();
       })
-      .then((resource) => {
+      .then(resource => {
         this.setState({ boardList: resource["boards"], isLoaded: true });
       })
       .catch(console.error);
@@ -37,8 +36,8 @@ class App extends Component {
         return (
           <Loader active centered="true">
             Cargando ...
-            </Loader >
-        )
+          </Loader>
+        );
       }
     }
 
@@ -49,15 +48,37 @@ class App extends Component {
         <Menu inverted fixed="top">
           <Container>
             <Menu.Item header>B.a.I</Menu.Item>
-            <Menu.Item as={Link} to="/"><Icon name='home' /> Home</Menu.Item>
-            <Dropdown text='BBS' className='link item'>
+            <Menu.Item as={Link} to="/">
+              <Icon name="home" /> Home
+            </Menu.Item>
+            <Dropdown text="BBS" className="link item">
               <Dropdown.Menu>
-                {boardList.map(board => board.board_type === 1 ? <Dropdown.Item key={board.dir} as={Link} to={`/board/${board.dir}`}>/{board.dir}/ - {board.name}</Dropdown.Item> : null)}
+                {boardList.map(board =>
+                  board.board_type === 1 ? (
+                    <Dropdown.Item
+                      key={board.dir}
+                      as={Link}
+                      to={`/board/${board.dir}`}
+                    >
+                      /{board.dir}/ - {board.name}
+                    </Dropdown.Item>
+                  ) : null
+                )}
               </Dropdown.Menu>
             </Dropdown>
-            <Dropdown text='Imageboard' className='link item'>
+            <Dropdown text="Imageboard" className="link item">
               <Dropdown.Menu>
-                {boardList.map(board => board.board_type === 0 ? <Dropdown.Item key={board.dir} as={Link} to={`/board/${board.dir}`}>/{board.dir}/ - {board.name}</Dropdown.Item> : null)}
+                {boardList.map(board =>
+                  board.board_type === 0 ? (
+                    <Dropdown.Item
+                      key={board.dir}
+                      as={Link}
+                      to={`/board/${board.dir}`}
+                    >
+                      /{board.dir}/ - {board.name}
+                    </Dropdown.Item>
+                  ) : null
+                )}
               </Dropdown.Menu>
             </Dropdown>
           </Container>
@@ -71,11 +92,10 @@ class App extends Component {
             <Board path="/board/:dir" />
             <NotFound default />
           </Router>
-        </Container >
+        </Container>
       </React.Fragment>
     );
   }
 }
 
-
-render(<App />, document.getElementById("root"));
\ No newline at end of file
+render(<App />, document.getElementById("root"));
diff --git a/src/Board.js b/src/Board.js
index 11a2493..514687b 100644
--- a/src/Board.js
+++ b/src/Board.js
@@ -1,92 +1,116 @@
 import React, { Component } from "react";
-import { Loader, Message, Segment, Header, Image, Comment, Divider } from "semantic-ui-react";
+import {
+  Loader,
+  Message,
+  Segment,
+  Header,
+  Image,
+  Comment,
+  Divider
+} from "semantic-ui-react";
 import { Link } from "@reach/router";
 import Moment from "react-moment";
 import "moment/locale/es";
 import Post from "./Post";
 class Board extends Component {
-    constructor() {
-        super();
-        this.state = {
-            isLoaded: false,
-            threadList: [],
-            error: null
-        }
-    }
+  constructor() {
+    super();
+    this.state = {
+      isLoaded: false,
+      threadList: [],
+      error: null
+    };
+  }
 
-    componentDidMount() {
-        fetch(`https://bienvenidoainternet.org/cgi/api/list?dir=${this.props.dir}&replies=5&limit=10`)
-            .then((response) => {
-                return response.json();
-            })
-            .then((resource) => {
-                if (resource["state"] === "error") {
-                    this.setState({ error: resource });
-                }
-                this.setState({ isLoaded: true, threadList: resource["threads"] })
-            })
-            .catch(console.error)
-    }
+  componentDidMount() {
+    fetch(
+      `https://bienvenidoainternet.org/cgi/api/list?dir=${this.props.dir}&replies=5&limit=10`
+    )
+      .then(response => {
+        return response.json();
+      })
+      .then(resource => {
+        if (resource["state"] === "error") {
+          this.setState({ error: resource });
+        }
+        this.setState({ isLoaded: true, threadList: resource["threads"] });
+      })
+      .catch(console.error);
+  }
 
-    componentWillUnmount() {
-        console.log("will unmount")
-    }
+  componentWillUnmount() {
+    console.log("will unmount");
+  }
 
-    componentDidUpdate(prevProps) {
-        // Uso tipico (no olvides de comparar los props):
-        if (this.props.dir !== prevProps.dir) {
-            this.setState({
-                isLoaded: false,
-                threadList: [],
-                error: null
-            })
-            this.componentDidMount();
-        }
+  componentDidUpdate(prevProps) {
+    // Uso tipico (no olvides de comparar los props):
+    if (this.props.dir !== prevProps.dir) {
+      this.setState({
+        isLoaded: false,
+        threadList: [],
+        error: null
+      });
+      this.componentDidMount();
     }
+  }
 
-    render() {
-        const { isLoaded, error, threadList } = this.state;
+  render() {
+    const { isLoaded, error, threadList } = this.state;
 
-        if (error != null) {
-            return (
-                <div>
-                    <Message negative>
-                        <Message.Header>API Status: {error.state}</Message.Header>
-                        <p>{error.message}</p>
-                    </Message>
-                </div>
-            );
-        }
-
-        if (!isLoaded) {
-            return (
-                <Loader active centered="true" >
-                    Cargando ...
-                </Loader >
-            )
-        }
+    if (error != null) {
+      return (
+        <div>
+          <Message negative>
+            <Message.Header>API Status: {error.state}</Message.Header>
+            <p>{error.message}</p>
+          </Message>
+        </div>
+      );
+    }
 
-        return (
-            <div>
-                {threadList.map(thread =>
-                    <Segment.Group>
-                        <Header as="h4" attached>
-                            <Link to={`/${this.props.dir}/read/${thread.id}`}>{thread.subject}</Link>
-                        </Header>
-                        <Segment>
-                            <Comment.Group>
-                                <Post index={0} post={thread} locked={thread.locked} threadId={thread.id} dir={this.props.dir} />
-                                <Divider />
-                                {thread.replies.map((reply, index, replies) =>
-                                    <Post index={thread.total_replies - replies.length + index + 1} post={reply} locked={thread.locked} threadId={thread.id} dir={this.props.dir} />
-                                )}
-                            </Comment.Group>
-                        </Segment>
-                    </Segment.Group>
-                )}
-            </div>
-        );
+    if (!isLoaded) {
+      return (
+        <Loader active centered="true">
+          Cargando ...
+        </Loader>
+      );
     }
+
+    return (
+      <div>
+        {threadList.map(thread => (
+          <Segment.Group>
+            <Header as="h4" attached>
+              <Link to={`/${this.props.dir}/read/${thread.id}`}>
+                {thread.subject}
+              </Link>
+            </Header>
+            <Segment>
+              <Comment.Group>
+                <Post
+                  index={0}
+                  post={thread}
+                  locked={thread.locked}
+                  threadId={thread.id}
+                  dir={this.props.dir}
+                />
+                <Divider />
+                {thread.replies.map((reply, index, replies) => (
+                  <Post
+                    index={thread.total_replies - replies.length + index + 1}
+                    post={reply}
+                    locked={thread.locked}
+                    threadId={thread.id}
+                    dir={this.props.dir}
+                  />
+                ))}
+              </Comment.Group>
+            </Segment>
+          </Segment.Group>
+        ))}
+      </div>
+    );
+  }
 }
 
-export default Board;
\ No newline at end of file
+export default Board;
diff --git a/src/Home.js b/src/Home.js
index 8493db2..4544cf2 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -6,105 +6,144 @@ import "moment/locale/es";
 import { Link } from "@reach/router";
 
 class Home extends Component {
-    constructor() {
-        super();
-        this.state = {
-            lastAgeThreads: [],
-            newThreadsList: [],
-            latestNews: [],
-            isLoaded: false
-        }
-    }
-
-    componentDidMount() {
-        fetch("https://bienvenidoainternet.org/cgi/api/lastage?limit=10")
-            .then((response) => { return response.json() })
-            .then((resource) => {
-                this.setState({
-                    lastAgeThreads: resource["threads"]
-                })
-            });
+  constructor() {
+    super();
+    this.state = {
+      lastAgeThreads: [],
+      newThreadsList: [],
+      latestNews: [],
+      isLoaded: false
+    };
+  }
 
-        fetch("https://bienvenidoainternet.org/cgi/api/newThreads?limit=10")
-            .then((response) => { return response.json() })
-            .then((resource) => {
-                this.setState({
-                    newThreadsList: resource["threads"],
-                });
-            });
+  componentDidMount() {
+    fetch("https://bienvenidoainternet.org/cgi/api/lastage?limit=10")
+      .then(response => {
+        return response.json();
+      })
+      .then(resource => {
+        this.setState({
+          lastAgeThreads: resource["threads"]
+        });
+      });
 
-        fetch("https://bienvenidoainternet.org/cgi/api/blotter")
-            .then((response) => { return response.json() })
-            .then((resource) => {
-                this.setState({
-                    latestNews: resource["news"],
-                    isLoaded: true
-                });
-            });
-    }
+    fetch("https://bienvenidoainternet.org/cgi/api/newThreads?limit=10")
+      .then(response => {
+        return response.json();
+      })
+      .then(resource => {
+        this.setState({
+          newThreadsList: resource["threads"]
+        });
+      });
 
-    render() {
-        if (!this.state.isLoaded) {
-            return (
-                <Loader active centered="true" >
-                    Cargando ...
-                </Loader>
-            )
-        }
+    fetch("https://bienvenidoainternet.org/cgi/api/blotter")
+      .then(response => {
+        return response.json();
+      })
+      .then(resource => {
+        this.setState({
+          latestNews: resource["news"],
+          isLoaded: true
+        });
+      });
+  }
 
-        const { newThreadsList, lastAgeThreads, latestNews } = this.state;
+  render() {
+    if (!this.state.isLoaded) {
+      return (
+        <Loader active centered="true">
+          Cargando ...
+        </Loader>
+      );
+    }
 
-        return (
-            <Grid columns={2} divided container doubling>
-                <Grid.Row>
-                    <Grid.Column>
-                        <Header as="h4">Hilos activos</Header>
-                        <List divided>
-                            {lastAgeThreads.map(thread =>
-                                <List.Item key={thread.id}>
-                                    <List.Icon name='comment alternate outline' size='large' verticalAlign='middle' />
-                                    <List.Content>
-                                        <List.Header as={Link} to={`${thread.dir}/read/${thread.id}`}>{thread.content}</List.Header>
-                                        <List.Description as='a'><Icon name="folder open outline" /> {thread.board_fulln} ― <Icon name="clock" /><Moment fromNow unix locale="es" date={thread.last} /></List.Description>
-                                    </List.Content>
-                                </List.Item>
-                            )}
-                        </List>
-                    </Grid.Column>
-                    <Grid.Column>
-                        <Header as="h4">Nuevos hilos</Header>
-                        <List divided>
-                            {newThreadsList.map(thread =>
-                                <List.Item key={thread.id}>
-                                    <List.Icon name='comment alternate outline' size='large' verticalAlign='middle' />
-                                    <List.Content>
-                                        <List.Header as={Link} to={`${thread.dir}/read/${thread.id}`}>{thread.content}</List.Header>
-                                        <List.Description as='a'><Icon name="folder open outline" /> {thread.board_fulln} ― <Icon name="clock" /><Moment fromNow unix locale="es" date={thread.timestamp} /></List.Description>
-                                    </List.Content>
-                                </List.Item>
-                            )}
-                        </List>
-                    </Grid.Column>
-                </Grid.Row>
-                <Grid.Row columns={1}>
-                    <Grid.Column>
-                        <Header as="h4">Blotter</Header>
-                        <List divided>
-                            {latestNews.map(n =>
-                                <List.Item key={n.timestamp}>
-                                    <List.Content>
-                                        <div dangerouslySetInnerHTML={{ __html: n.message }} />
-                                        <span className="ui tiny"><Icon name="clock" /><Moment fromNow unix locale="es" date={n.timestamp} /></span>
+    const { newThreadsList, lastAgeThreads, latestNews } = this.state;
 
-                                    </List.Content>
-                                </List.Item>
-                            )}
-                        </List>
-                    </Grid.Column>
-                </Grid.Row>
-            </Grid>
-        );
-    }
+    return (
+      <Grid columns={2} divided container doubling>
+        <Grid.Row>
+          <Grid.Column>
+            <Header as="h4">Hilos activos</Header>
+            <List divided>
+              {lastAgeThreads.map(thread => (
+                <List.Item key={thread.id}>
+                  <List.Icon
+                    name="comment alternate outline"
+                    size="large"
+                    verticalAlign="middle"
+                  />
+                  <List.Content>
+                    <List.Header
+                      as={Link}
+                      to={`${thread.dir}/read/${thread.id}`}
+                    >
+                      {thread.content}
+                    </List.Header>
+                    <List.Description as="a">
+                      <Icon name="folder open outline" /> {thread.board_fulln} ―{" "}
+                      <Icon name="clock" />
+                      <Moment fromNow unix locale="es" date={thread.last} />
+                    </List.Description>
+                  </List.Content>
+                </List.Item>
+              ))}
+            </List>
+          </Grid.Column>
+          <Grid.Column>
+            <Header as="h4">Nuevos hilos</Header>
+            <List divided>
+              {newThreadsList.map(thread => (
+                <List.Item key={thread.id}>
+                  <List.Icon
+                    name="comment alternate outline"
+                    size="large"
+                    verticalAlign="middle"
+                  />
+                  <List.Content>
+                    <List.Header
+                      as={Link}
+                      to={`${thread.dir}/read/${thread.id}`}
+                    >
+                      {thread.content}
+                    </List.Header>
+                    <List.Description as="a">
+                      <Icon name="folder open outline" /> {thread.board_fulln} ―{" "}
+                      <Icon name="clock" />
+                      <Moment
+                        fromNow
+                        unix
+                        locale="es"
+                        date={thread.timestamp}
+                      />
+                    </List.Description>
+                  </List.Content>
+                </List.Item>
+              ))}
+            </List>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row columns={1}>
+          <Grid.Column>
+            <Header as="h4">Blotter</Header>
+            <List divided>
+              {latestNews.map(n => (
+                <List.Item key={n.timestamp}>
+                  <List.Content>
+                    <div dangerouslySetInnerHTML={{ __html: n.message }} />
+                    <span className="ui tiny">
+                      <Icon name="clock" />
+                      <Moment fromNow unix locale="es" date={n.timestamp} />
+                    </span>
+                  </List.Content>
+                </List.Item>
+              ))}
+            </List>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    );
+  }
 }
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/NotFound.js b/src/NotFound.js
index 8f04084..55ff50a 100644
--- a/src/NotFound.js
+++ b/src/NotFound.js
@@ -2,17 +2,15 @@ import React from "react";
 import { Header, Icon } from "semantic-ui-react";
 
 const NotFound = () => {
-    return (
-        <div style={{ "margin-top": "50px" }}>
-            <Header as='h1' icon textAlign='center'>
-                <Icon name='bug' />
-                404
-                <Header.Subheader>
-                    Recurso no encontrado
-                </Header.Subheader>
-            </Header>
-        </div>
-    )
-}
+  return (
+    <div style={{ "margin-top": "50px" }}>
+      <Header as="h1" icon textAlign="center">
+        <Icon name="bug" />
+        404
+        <Header.Subheader>Recurso no encontrado</Header.Subheader>
+      </Header>
+    </div>
+  );
+};
 
-export default NotFound;
\ No newline at end of file
+export default NotFound;
diff --git a/src/Post.js b/src/Post.js
index 3d08c05..4ccb7d0 100644
--- a/src/Post.js
+++ b/src/Post.js
@@ -1,69 +1,116 @@
 import React from "react";
-import { Segment, Header, Image, Label, Icon, Modal, Comment, Divider } from "semantic-ui-react";
+import {
+  Segment,
+  Header,
+  Image,
+  Label,
+  Icon,
+  Modal,
+  Comment,
+  Divider
+} from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
 import { avatars } from "./Quotes";
 
 const ImageModal = ({ href, trigger }) => (
-    <Modal trigger={trigger} basic size="fullscreen">
-        <Modal.Content image>
-            <Modal.Description style={{ "textAlign": "center" }}>
-                <Image as="a" src={href} />
-            </Modal.Description>
-        </Modal.Content>
-    </Modal>
+  <Modal trigger={trigger} basic size="fullscreen">
+    <Modal.Content image>
+      <Modal.Description style={{ textAlign: "center" }}>
+        <Image as="a" src={href} />
+      </Modal.Description>
+    </Modal.Content>
+  </Modal>
 );
 
 const Post = ({ index, post, locked, dir, threadId }) => {
-    if (post.IS_DELETED > 0) {
-        return (
-            <Comment>
-                <Comment.Avatar src={`https://bienvenidoainternet.org/static/css/img/picnicbdy.gif`} />
-                <Comment.Content>
-                    <Comment.Author as='a'>#{index + 1}</Comment.Author>
-                    <Comment.Metadata>
-                        <div><Moment fromNow unix locale="es" date={post.timestamp} /></div>
-                    </Comment.Metadata>
-                    <Comment.Text>
-                        <span className="deleted">Eliminado por el {post.IS_DELETED === 1 ? "usuario." : "Staff."}</span>
-                    </Comment.Text>
-                </Comment.Content>
-            </Comment>
-        );
-    }
+  if (post.IS_DELETED > 0) {
+    return (
+      <Comment>
+        <Comment.Avatar
+          src={`https://bienvenidoainternet.org/static/css/img/picnicbdy.gif`}
+        />
+        <Comment.Content>
+          <Comment.Author as="a">#{index + 1}</Comment.Author>
+          <Comment.Metadata>
+            <div>
+              <Moment fromNow unix locale="es" date={post.timestamp} />
+            </div>
+          </Comment.Metadata>
+          <Comment.Text>
+            <span className="deleted">
+              Eliminado por el {post.IS_DELETED === 1 ? "usuario." : "Staff."}
+            </span>
+          </Comment.Text>
+        </Comment.Content>
+      </Comment>
+    );
+  }
 
-    const filesize = require('filesize');
-    const seedrandom = require("seedrandom");
-    const rng = seedrandom(threadId + index);
+  const filesize = require("filesize");
+  const seedrandom = require("seedrandom");
+  const rng = seedrandom(threadId + index);
 
-    let user_id = post.timestamp_formatted.split(" ID:")[1];
-    const i = Math.round(rng() * avatars.length);
-    const rndAvatar = avatars[i];
+  let user_id = post.timestamp_formatted.split(" ID:")[1];
+  const i = Math.round(rng() * avatars.length);
+  const rndAvatar = avatars[i];
 
-    return (
-        <Comment>
-            <Comment.Avatar src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`} />
-            <Comment.Content>
-                <Comment.Author as='a'>#{index + 1} <span className={post.email === "sage" ? "username sage" : "username"}>{post.name}</span><span className="tripcode">{post.tripcode}</span></Comment.Author>
-                <Comment.Metadata>
-                    <div><Moment fromNow unix locale="es" date={post.timestamp} /></div>
-                    <div><Icon name="star" color={user_id === "CAP_USER*" ? "yellow" : "grey"} />{user_id}</div>
-                </Comment.Metadata>
-                <Comment.Text>
-                    {post.file !== "" ?
-                        <div className="imageContainer">
-                            <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image centered className="postImage" src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} />
-                            {post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}
-                        </div>
-                        : null}
-                    <div className={`postMessage ${dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: post.message }} />
-                </Comment.Text>
-                <Comment.Actions>
-                    <Comment.Action>Responder</Comment.Action><Comment.Action>Reportar</Comment.Action>
-                </Comment.Actions>
-            </Comment.Content>
-        </Comment>
-    );
-}
+  return (
+    <Comment>
+      <Comment.Avatar
+        src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`}
+      />
+      <Comment.Content>
+        <Comment.Author as="a">
+          #{index + 1}{" "}
+          <span
+            className={post.email === "sage" ? "username sage" : "username"}
+          >
+            {post.name}
+          </span>
+          <span className="tripcode">{post.tripcode}</span>
+        </Comment.Author>
+        <Comment.Metadata>
+          <div>
+            <Moment fromNow unix locale="es" date={post.timestamp} />
+          </div>
+          <div>
+            <Icon
+              name="star"
+              color={user_id === "CAP_USER*" ? "yellow" : "grey"}
+            />
+            {user_id}
+          </div>
+        </Comment.Metadata>
+        <Comment.Text>
+          {post.file !== "" ? (
+            <div className="imageContainer">
+              <ImageModal
+                href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`}
+                trigger={
+                  <Image
+                    centered
+                    className="postImage"
+                    src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`}
+                  />
+                }
+              />
+              {post.file} {post.image_width}x{post.image_height}{" "}
+              {filesize(post.file_size, { bits: true })}
+            </div>
+          ) : null}
+          <div
+            className={`postMessage ${dir === "zonavip" ? "vipFont" : null}`}
+            dangerouslySetInnerHTML={{ __html: post.message }}
+          />
+        </Comment.Text>
+        <Comment.Actions>
+          <Comment.Action>Responder</Comment.Action>
+          <Comment.Action>Reportar</Comment.Action>
+        </Comment.Actions>
+      </Comment.Content>
+    </Comment>
+  );
+};
 
-export default Post;
\ No newline at end of file
+export default Post;
diff --git a/src/Quotes.js b/src/Quotes.js
index 07b538d..0b58349 100644
--- a/src/Quotes.js
+++ b/src/Quotes.js
@@ -1,2 +1,188 @@
-export const avatars = ["1372836", "6396408", "anime_charhan02", "anime_jyorujyu01", "anime_monar05", "anime_sasuga04", "anime_zonu01", "fuun", "gocchin_face", "iyou", "kuma", "nurupo_ga_2", "u_naoruyo_bath", "1k", "6za", "anime_giko01", "anime_jyorujyu02", "anime_morara01", "anime_shii01", "anime_zonu02", "gaku", "gomiopen", "jisakujien_2", "kuma2", "onigiri_seito", "u_okotowari_a", "2-1", "8028885", "anime_giko04", "anime_jyorujyu03", "anime_morara02", "anime_shii02", "aramaki", "gaku2", "goo_1", "jisakujien_xmas", "maimai", "otiketu48", "u_sofa", "2ppa", "8toushinnomonar16", "anime_giko10", "anime_kukkuru01", "anime_morara04", "anime_shii03", "aroeri-na32", "gaku3", "goo_3", "kantoku1", "makotan2_folder", "pc3", "wakannai1", "2syobo_2", "8toushinnomonar32", "anime_giko11", "anime_kuma01", "anime_nokar01", "anime_syobon01", "asopasomaso", "gekisya1", "gya-", "kappappa1", "mona", "pgya", "yakimochi", "3", "ace", "anime_giko12", "anime_kumaface01", "anime_okashi01", "anime_syobon03", "bikyakusan32", "giko1", "hagenin-shuriken", "kasa-ri", "mona_shiri", "sasuga1", "youkan", "3-2", "af1", "anime_giko13", "anime_loop", "anime_okashi02", "anime_tarn01", "bs", "gikog_gomibako", "hagurumaou", "kashiwamo-chi32", "mona_tya", "seito_2", "zonu_1", "3na", "af2", "anime_hossyu01", "anime_marara02", "anime_onigiri04", "anime_uwan01", "button1_03", "gikog_gyunyupack", "hikky", "kinokorusensei32", "monaazarashi_1", "soon", "zuzagiko48", "4-2", "ahya_xmas_2", "anime_imanouchi01", "anime_matanki01", "anime_saitama01", "anime_uwan02", "buun", "gikog_pimiento", "hikky_xmas_2", "kita_", "namaetukenai", "tasukete", "4248688", "aka", "anime_iyou02", "anime_matanki02", "anime_saitama02", "anime_uwan03", "chahan", "gikoinu", "hyou", "kodomona", "naoruyo", "torimasu1", "5007629", "ame", "anime_jien01", "anime_miruna01", "anime_saitama03", "anime_youkanman01", "dokuo1", "gikoneko", "iirasan_face", "konkon_folder", "nida", "torimasu2", "5296219", "anime_buun02", "anime_jien02", "anime_monar02", "anime_sasuga01", "anime_youkanman02", "file2_01", "gikoneko_1", "imanouchi_1", "kossorisan", "nigete", "u_ame", "5ta", "anime_charhan01", "anime_jien03", "anime_monar03", "anime_sasuga03", "anime_youkanman03", "fujisan", "gikoneko2", "iyahoo", "kotatu", "nono_ie", "u_hoshi"];
-export const quotes = ["Eres una buena persona.", "Y por invertir en felaciones.", "Fue un mensaje cachilupi.", "holiwi :3", "Hemos enviado a tu casa un ejército de prostitutas.", "Fue un mensaje de PURA CALIDAD.", "Ganaste frot gratis por una semana.", "Te besaría en la boca.", "Te invitaría a un café.", "ミト━━━━━━⊂( ﾟ ヮﾟ)⊃━━━━━━ン!!!!!", "Suenas como un bot muy desarrollado.", "¿Usaste TheSaurus para escribir tu post?", "(´･ω･`)", "Plataformas del futuro para la web 1.0.", "Gracias por utilizar Internet.", "Plataformas del pasado para la web 2.0.", "Elegiste bien. Elegiste calidad.", "Espero que no hayas abusado del sage.", "gRAciAs pOR Tu PAgA ;)", "Gracias por tu papiro."]
\ No newline at end of file
+export const avatars = [
+  "1372836",
+  "6396408",
+  "anime_charhan02",
+  "anime_jyorujyu01",
+  "anime_monar05",
+  "anime_sasuga04",
+  "anime_zonu01",
+  "fuun",
+  "gocchin_face",
+  "iyou",
+  "kuma",
+  "nurupo_ga_2",
+  "u_naoruyo_bath",
+  "1k",
+  "6za",
+  "anime_giko01",
+  "anime_jyorujyu02",
+  "anime_morara01",
+  "anime_shii01",
+  "anime_zonu02",
+  "gaku",
+  "gomiopen",
+  "jisakujien_2",
+  "kuma2",
+  "onigiri_seito",
+  "u_okotowari_a",
+  "2-1",
+  "8028885",
+  "anime_giko04",
+  "anime_jyorujyu03",
+  "anime_morara02",
+  "anime_shii02",
+  "aramaki",
+  "gaku2",
+  "goo_1",
+  "jisakujien_xmas",
+  "maimai",
+  "otiketu48",
+  "u_sofa",
+  "2ppa",
+  "8toushinnomonar16",
+  "anime_giko10",
+  "anime_kukkuru01",
+  "anime_morara04",
+  "anime_shii03",
+  "aroeri-na32",
+  "gaku3",
+  "goo_3",
+  "kantoku1",
+  "makotan2_folder",
+  "pc3",
+  "wakannai1",
+  "2syobo_2",
+  "8toushinnomonar32",
+  "anime_giko11",
+  "anime_kuma01",
+  "anime_nokar01",
+  "anime_syobon01",
+  "asopasomaso",
+  "gekisya1",
+  "gya-",
+  "kappappa1",
+  "mona",
+  "pgya",
+  "yakimochi",
+  "3",
+  "ace",
+  "anime_giko12",
+  "anime_kumaface01",
+  "anime_okashi01",
+  "anime_syobon03",
+  "bikyakusan32",
+  "giko1",
+  "hagenin-shuriken",
+  "kasa-ri",
+  "mona_shiri",
+  "sasuga1",
+  "youkan",
+  "3-2",
+  "af1",
+  "anime_giko13",
+  "anime_loop",
+  "anime_okashi02",
+  "anime_tarn01",
+  "bs",
+  "gikog_gomibako",
+  "hagurumaou",
+  "kashiwamo-chi32",
+  "mona_tya",
+  "seito_2",
+  "zonu_1",
+  "3na",
+  "af2",
+  "anime_hossyu01",
+  "anime_marara02",
+  "anime_onigiri04",
+  "anime_uwan01",
+  "button1_03",
+  "gikog_gyunyupack",
+  "hikky",
+  "kinokorusensei32",
+  "monaazarashi_1",
+  "soon",
+  "zuzagiko48",
+  "4-2",
+  "ahya_xmas_2",
+  "anime_imanouchi01",
+  "anime_matanki01",
+  "anime_saitama01",
+  "anime_uwan02",
+  "buun",
+  "gikog_pimiento",
+  "hikky_xmas_2",
+  "kita_",
+  "namaetukenai",
+  "tasukete",
+  "4248688",
+  "aka",
+  "anime_iyou02",
+  "anime_matanki02",
+  "anime_saitama02",
+  "anime_uwan03",
+  "chahan",
+  "gikoinu",
+  "hyou",
+  "kodomona",
+  "naoruyo",
+  "torimasu1",
+  "5007629",
+  "ame",
+  "anime_jien01",
+  "anime_miruna01",
+  "anime_saitama03",
+  "anime_youkanman01",
+  "dokuo1",
+  "gikoneko",
+  "iirasan_face",
+  "konkon_folder",
+  "nida",
+  "torimasu2",
+  "5296219",
+  "anime_buun02",
+  "anime_jien02",
+  "anime_monar02",
+  "anime_sasuga01",
+  "anime_youkanman02",
+  "file2_01",
+  "gikoneko_1",
+  "imanouchi_1",
+  "kossorisan",
+  "nigete",
+  "u_ame",
+  "5ta",
+  "anime_charhan01",
+  "anime_jien03",
+  "anime_monar03",
+  "anime_sasuga03",
+  "anime_youkanman03",
+  "fujisan",
+  "gikoneko2",
+  "iyahoo",
+  "kotatu",
+  "nono_ie",
+  "u_hoshi"
+];
+export const quotes = [
+  "Eres una buena persona.",
+  "Y por invertir en felaciones.",
+  "Fue un mensaje cachilupi.",
+  "holiwi :3",
+  "Hemos enviado a tu casa un ejército de prostitutas.",
+  "Fue un mensaje de PURA CALIDAD.",
+  "Ganaste frot gratis por una semana.",
+  "Te besaría en la boca.",
+  "Te invitaría a un café.",
+  "ミト━━━━━━⊂( ﾟ ヮﾟ)⊃━━━━━━ン!!!!!",
+  "Suenas como un bot muy desarrollado.",
+  "¿Usaste TheSaurus para escribir tu post?",
+  "(´･ω･`)",
+  "Plataformas del futuro para la web 1.0.",
+  "Gracias por utilizar Internet.",
+  "Plataformas del pasado para la web 2.0.",
+  "Elegiste bien. Elegiste calidad.",
+  "Espero que no hayas abusado del sage.",
+  "gRAciAs pOR Tu PAgA ;)",
+  "Gracias por tu papiro."
+];
diff --git a/src/ReplyForm.js b/src/ReplyForm.js
index 1aa71e5..33a6af4 100644
--- a/src/ReplyForm.js
+++ b/src/ReplyForm.js
@@ -3,91 +3,118 @@ import { Form, Segment, Button, Message } from "semantic-ui-react";
 import { quotes } from "./Quotes";
 
 class ReplyForm extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            name: "",
-            email: "",
-            message: "",
-            submittedName: "",
-            submittedEmail: "",
-            submittedMessage: "",
-            replyRes: null
-        }
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    handleChange(e) {
-        const { name, value } = e.target;
-        this.setState({ [name]: value })
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "",
+      email: "",
+      message: "",
+      submittedName: "",
+      submittedEmail: "",
+      submittedMessage: "",
+      replyRes: null
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
 
-    handleSubmit() {
-        const { submittedName, submittedEmail, name, email, message } = this.state
-        this.setState({ submittedName: name, submittedEmail: email, submittedMessage: message })
-        const data = {
-            board: this.props.dir,
-            parent: this.props.parent,
-            name: "",
-            email: "",
-            fielda: submittedName,
-            fieldb: submittedEmail,
-            message: message,
-            password: "bai-client"
-        }
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  }
 
-        const formData = new FormData();
-        for (var key in data) {
-            formData.append(key, data[key]);
-        }
+  handleSubmit() {
+    const { submittedName, submittedEmail, name, email, message } = this.state;
+    this.setState({
+      submittedName: name,
+      submittedEmail: email,
+      submittedMessage: message
+    });
+    const data = {
+      board: this.props.dir,
+      parent: this.props.parent,
+      name: "",
+      email: "",
+      fielda: submittedName,
+      fieldb: submittedEmail,
+      message: message,
+      password: "bai-client"
+    };
 
-        fetch("https://bienvenidoainternet.org/cgi/api/post", {
-            method: "POST",
-            mode: "cors",
-            redirect: "follow",
-            body: formData
-        }
-        ).then((response) => {
-            return response.json()
-        }).then((resource) => {
-            console.log(resource);
-            this.setState({ replyRes: resource });
-        }
-        );
+    const formData = new FormData();
+    for (var key in data) {
+      formData.append(key, data[key]);
     }
 
-    render() {
-        const { name, email, message, replyRes } = this.state;
-        return (
-            <Segment>
-                {
-                    replyRes !== null ?
-                        replyRes.state === "success" ?
-                            (<Message positive>
-                                <Message.Header>Gracias por tu post</Message.Header>
-                                {quotes[Math.floor(Math.random() * quotes.length)]}<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>
-                            ) : null
-                }
-                <Form onSubmit={this.handleSubmit}>
-                    <Form.Group widths="equal">
-                        <Form.Input label="Nombre" name="name" fluid placeholder="Nombre (Opcional)" value={name} onChange={this.handleChange} />
-                        <Form.Input label="E-mail" name="email" fluid placeholder="E-mail (Opcional)" value={email} onChange={this.handleChange} />
-                    </Form.Group>
-                    <Form.TextArea name="message" value={message} label="Mensaje" placeholder="(　･ω･) Cuentáme algo interesante ..." onChange={this.handleChange} />
-                    <Button type="submit" secondary>Enviar</Button>
-                </Form>
-            </Segment >
-        );
-    }
+    fetch("https://bienvenidoainternet.org/cgi/api/post", {
+      method: "POST",
+      mode: "cors",
+      redirect: "follow",
+      body: formData
+    })
+      .then(response => {
+        return response.json();
+      })
+      .then(resource => {
+        console.log(resource);
+        this.setState({ replyRes: resource });
+      });
+  }
 
+  render() {
+    const { name, email, message, replyRes } = this.state;
+    return (
+      <Segment>
+        {replyRes !== null ? (
+          replyRes.state === "success" ? (
+            <Message positive>
+              <Message.Header>Gracias por tu post</Message.Header>
+              {quotes[Math.floor(Math.random() * quotes.length)]}
+              <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>
+          )
+        ) : null}
+        <Form onSubmit={this.handleSubmit}>
+          <Form.Group widths="equal">
+            <Form.Input
+              label="Nombre"
+              name="name"
+              fluid
+              placeholder="Nombre (Opcional)"
+              value={name}
+              onChange={this.handleChange}
+            />
+            <Form.Input
+              label="E-mail"
+              name="email"
+              fluid
+              placeholder="E-mail (Opcional)"
+              value={email}
+              onChange={this.handleChange}
+            />
+          </Form.Group>
+          <Form.TextArea
+            name="message"
+            value={message}
+            label="Mensaje"
+            placeholder="(　･ω･) Cuentáme algo interesante ..."
+            onChange={this.handleChange}
+          />
+          <Button type="submit" secondary>
+            Enviar
+          </Button>
+        </Form>
+      </Segment>
+    );
+  }
 }
 
-export default ReplyForm;
\ No newline at end of file
+export default ReplyForm;
diff --git a/src/Thread.js b/src/Thread.js
index 085a754..4d0f56d 100644
--- a/src/Thread.js
+++ b/src/Thread.js
@@ -1,92 +1,119 @@
 import React, { Component } from "react";
-import { Header, Icon, Loader, Message, Segment, Comment } from "semantic-ui-react";
+import {
+  Header,
+  Icon,
+  Loader,
+  Message,
+  Segment,
+  Comment
+} from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
 import Post from "./Post";
 import ReplyForm from "./ReplyForm";
 
 class Thread extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isLoading: true,
-            thread: [],
-            error: null
-        }
-    }
-
-    componentDidMount() {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      thread: [],
+      error: null
+    };
+  }
 
-        let apiURl;
-        if (this.props.id > 1000000) {
-            apiURl = `https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&ts=${this.props.id}`;
-        } else {
-            apiURl = `https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`;
-        }
-        console.log(apiURl);
-        fetch(apiURl)
-            .then((response) => { return response.json() })
-            .then((resource => {
-                if (resource["state"] === "error") {
-                    console.log("API Error:" + resource["message"]);
-                    this.setState({ error: resource });
-                }
-                this.setState({ isLoading: false, thread: resource });
-            }))
-            .catch(console.error);
+  componentDidMount() {
+    let apiURl;
+    if (this.props.id > 1000000) {
+      apiURl = `https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&ts=${this.props.id}`;
+    } else {
+      apiURl = `https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`;
     }
-    render() {
-        const { isLoading, error } = this.state;
-
-        if (isLoading) {
-            return (
-                <Loader active centered="true">
-                    Cargando ...
-                </Loader >
-            )
+    console.log(apiURl);
+    fetch(apiURl)
+      .then(response => {
+        return response.json();
+      })
+      .then(resource => {
+        if (resource["state"] === "error") {
+          console.log("API Error:" + resource["message"]);
+          this.setState({ error: resource });
         }
+        this.setState({ isLoading: false, thread: resource });
+      })
+      .catch(console.error);
+  }
+  render() {
+    const { isLoading, error } = this.state;
 
-        if (error != null) {
-            return (
-                <div>
-                    <Message negative>
-                        <Message.Header>API Status: {error.state}</Message.Header>
-                        <p>{error.message}</p>
-                    </Message>
-                </div>
-            );
-        }
-
-        const { posts, subject, timestamp, total_replies, locked, id } = this.state.thread;
-        document.title = subject;
+    if (isLoading) {
+      return (
+        <Loader active centered="true">
+          Cargando ...
+        </Loader>
+      );
+    }
 
-        return (
-            <div>
-                <Header as="h2">
-                    <Header.Content className="postMessage">
-                        {subject}{locked ? <Icon name='lock' /> : null}
-                    </Header.Content>
+    if (error != null) {
+      return (
+        <div>
+          <Message negative>
+            <Message.Header>API Status: {error.state}</Message.Header>
+            <p>{error.message}</p>
+          </Message>
+        </div>
+      );
+    }
 
-                    <Header.Subheader>
+    const {
+      posts,
+      subject,
+      timestamp,
+      total_replies,
+      locked,
+      id
+    } = this.state.thread;
+    document.title = subject;
 
-                        Creado <Moment fromNow unix locale="es" date={timestamp} /><br />
-                        {total_replies} respuestas<br />
+    return (
+      <div>
+        <Header as="h2">
+          <Header.Content className="postMessage">
+            {subject}
+            {locked ? <Icon name="lock" /> : null}
+          </Header.Content>
 
-                    </Header.Subheader>
-                </Header>
+          <Header.Subheader>
+            Creado <Moment fromNow unix locale="es" date={timestamp} />
+            <br />
+            {total_replies} respuestas
+            <br />
+          </Header.Subheader>
+        </Header>
 
-                <Comment.Group>
-                    {posts.map((post, index) =>
-                        <Post key={index} index={index} post={post} locked={locked} dir={this.props.dir} threadId={id} />
-                    )
-                    }
-                </Comment.Group>
+        <Comment.Group>
+          {posts.map((post, index) => (
+            <Post
+              key={index}
+              index={index}
+              post={post}
+              locked={locked}
+              dir={this.props.dir}
+              threadId={id}
+            />
+          ))}
+        </Comment.Group>
 
-                <ReplyForm dir={this.props.dir} parent={id} />
+        <ReplyForm dir={this.props.dir} parent={id} />
 
-                <a href={`https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`}>API Link</a>
-            </div>);
-    }
+        <a
+          href={`https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`}
+        >
+          API Link
+        </a>
+      </div>
+    );
+  }
 }
 
-export default Thread;
\ No newline at end of file
+export default Thread;
diff --git a/src/index.html b/src/index.html
index 027309e..5207dc3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Bievenido a Internet</title>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root">Doesn't work :(</div>
     <script src="App.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>