Lista de hilos

3 files changed, 104 insertions, 1 deletions

diff --git a/src/App.js b/src/App.js
index 864eaa2..399d8a1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,7 @@ import Home from "./Home";
 import Thread from "./Thread";
 import Board from "./Board";
 import NotFound from "./NotFound";
+import ThreadList from "./ThreadList";
 
 class App extends Component {
   constructor() {
@@ -140,6 +141,11 @@ class App extends Component {
               path="/board/:dir"
               nightMode={this.state.nightMode}
             />
+            <ThreadList
+              boardList={this.state.boardList}
+              path="/list/:dir"
+              nightMode={this.state.nightMode}
+            />
             <NotFound default />
           </Router>
         </Container>
diff --git a/src/Board.js b/src/Board.js
index 41727bc..b15f050 100644
--- a/src/Board.js
+++ b/src/Board.js
@@ -35,7 +35,12 @@ class Board extends Component {
         if (resource["state"] === "error") {
           this.setState({ error: resource });
         }
-        this.setState({ isLoaded: true, threadList: resource["threads"] });
+        this.setState(
+          { isLoaded: true, threadList: resource["threads"] },
+          () => {
+            window.scrollTo(0, 0);
+          }
+        );
       });
     window.scrollTo(0, 0);
     window.addEventListener("scroll", this.handleScroll);
@@ -127,6 +132,14 @@ class Board extends Component {
           <Breadcrumb.Divider icon="right chevron" />
           <Breadcrumb.Section link>{currentBoard.name}</Breadcrumb.Section>
         </Breadcrumb>
+        <Segment basic>
+          <Header as="h1">
+            {currentBoard.name}
+            <Header.Subheader>/{currentBoard.dir}/</Header.Subheader>
+          </Header>
+          <Link to={`/list/${currentBoard.dir}`}>Lista de hilos</Link>
+        </Segment>
+
         {threadList.map(thread => (
           <Segment.Group key={"seg_" + thread.timestamp + thread.id}>
             <Header as="h3" attached inverted={nightMode}>
diff --git a/src/ThreadList.js b/src/ThreadList.js
new file mode 100644
index 0000000..c5eb990
--- /dev/null
+++ b/src/ThreadList.js
@@ -0,0 +1,84 @@
+import React, { Component } from "react";
+import { Header, Loader, List, Card, Image, Icon } from "semantic-ui-react";
+import { Link } from "@reach/router";
+import Moment from "react-moment";
+import "moment/locale/es";
+
+class ThreadList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isLoading: true, threadList: [] };
+  }
+
+  componentDidMount() {
+    const { dir } = this.props;
+    fetch(
+      `https://bienvenidoainternet.org/cgi/api/list?dir=${dir}&replies=0&limit=30&nohtml=1`
+    )
+      .then(response => {
+        return response.json();
+      })
+      .then(resource => {
+        this.setState({ threadList: resource.threads, isLoading: false });
+      });
+  }
+
+  render() {
+    const { dir, boardList } = this.props;
+    const { threadList, isLoading } = this.state;
+
+    const currentBoard = boardList.find(board => {
+      return board.dir === dir;
+    });
+
+    if (isLoading) {
+      return (
+        <Loader active centered="true">
+          Cargando lista de hilos ...
+        </Loader>
+      );
+    }
+
+    const stripHtml = RegExp(
+      /(<script(\s|\S)*?<\/script>)|(<style(\s|\S)*?<\/style>)|(<!--(\s|\S)*?-->)|(<\/?(\s|\S)*?>)/g
+    );
+
+    return (
+      <Card.Group centered itemsPerRow={4} stackable>
+        {threadList.map((thread, index) => {
+          return (
+            <Card key={index} raised>
+              {currentBoard.allow_images === 1 ? (
+                <Image
+                  src={`https://bienvenidoainternet.org/${dir}/thumb/${thread.thumb}`}
+                  ui={false}
+                  style={{ maxHeight: "250px" }}
+                />
+              ) : null}
+              <Card.Content>
+                <Card.Header as={Link} to={`/${dir}/read/${thread.id}`}>
+                  {thread.subject}
+                </Card.Header>
+                <Card.Meta>
+                  <span className="date">
+                    <Moment fromNow unix date={thread.timestamp} />
+                  </span>
+                </Card.Meta>
+                <Card.Description>
+                  {thread.message.replace(stripHtml, "").substring(0, 200) +
+                    " ..."}
+                </Card.Description>
+              </Card.Content>
+              <Card.Content extra>
+                <Icon name="reply" />
+                {thread.total_replies} Respuestas
+              </Card.Content>
+            </Card>
+          );
+        })}
+      </Card.Group>
+    );
+  }
+}
+
+export default ThreadList;