diff options
| -rw-r--r-- | src/Board.js | 60 |
1 files changed, 53 insertions, 7 deletions
diff --git a/src/Board.js b/src/Board.js index 18eecb8..a9293d7 100644 --- a/src/Board.js +++ b/src/Board.js @@ -1,21 +1,45 @@ import React, { Component } from "react"; -import { Loader } from "semantic-ui-react"; - +import { Loader, Message, Segment, Header } from "semantic-ui-react"; +import { Link } from "@reach/router"; +import Moment from "react-moment"; +import "moment/locale/es"; class Board extends Component { constructor() { super(); this.state = { isLoaded: false, - threadList: [] + threadList: [], + error: null } } componentDidMount() { - // fecth boardlist + 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) } render() { - const { isLoaded, threadList } = this.state; + 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 ( @@ -23,9 +47,31 @@ class Board extends Component { Cargando ... </Loader> ) - } else { - return "yay"; } + + return ( + <div> + {threadList.map(thread => + <Segment.Group> + <Header as="h4" attached> + <Link to={`/${this.props.dir}/read/${thread.id}`}>{thread.subject}</Link> + <Header.Subheader> + {thread.name} ― <Moment fromNow unix locale="es" date={thread.timestamp} /> + </Header.Subheader> + </Header> + <Segment attached> + <div dangerouslySetInnerHTML={{ __html: thread.message }} /> + </Segment> + {thread.replies.map(reply => + <Segment attached> + <div dangerouslySetInnerHTML={{ __html: reply.message }} /> + </Segment> + )} + + </Segment.Group> + )} + </div> + ); } } |