diff options
Diffstat (limited to 'src/Thread.js')
| -rw-r--r-- | src/Thread.js | 171 |
1 files changed, 99 insertions, 72 deletions
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; |