diff options
Diffstat (limited to 'src/Home.js')
| -rw-r--r-- | src/Home.js | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/src/Home.js b/src/Home.js new file mode 100644 index 0000000..2c555f6 --- /dev/null +++ b/src/Home.js @@ -0,0 +1,112 @@ +import React, { Component } from "react"; +import { List, Header, Segment, Icon, Loader } from "semantic-ui-react"; +import Moment from "react-moment"; +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"] + }) + }); + + fetch("https://bienvenidoainternet.org/cgi/api/newThreads?limit=10") + .then((response) => { return response.json() }) + .then((resource) => { + this.setState({ + newThreadsList: resource["threads"], + }); + }); + + fetch("https://bienvenidoainternet.org/cgi/api/blotter") + .then((response) => { return response.json() }) + .then((resource) => { + this.setState({ + latestNews: resource["news"], + isLoaded: true + }); + }); + } + + render() { + if (!this.state.isLoaded) { + return ( + <Loader active centered > + Cargando ... + </Loader> + ) + } + + const { newThreadsList, lastAgeThreads, latestNews } = this.state; + + return ( + <Segment.Group> + <Segment.Group horizontal> + + <Segment> + <Header as="h4">Hilos activos</Header> + <List divided> + {lastAgeThreads.map(thread => + <List.Item> + <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> + </Segment> + + <Segment> + <Header as="h4">Nuevos hilos</Header> + <List divided> + {newThreadsList.map(thread => + <List.Item> + <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> + </Segment> + + </Segment.Group> + <Segment> + <Header as="h4">Blotter</Header> + <List divided> + {latestNews.map(n => + <List.Item> + <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> + </Segment> + + </Segment.Group> + ); + } +} + +export default Home;
\ No newline at end of file |