diff options
Diffstat (limited to 'src/Home.js')
| -rw-r--r-- | src/Home.js | 227 |
1 files changed, 133 insertions, 94 deletions
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; |