import React from 'react'; import { Link } from 'react-router-dom'; import moment from 'moment'; import { sourceLink, infoLine, ToggleDot } from './utils.js'; const apiUrl = 'https://news-api.t0.vc/'; class Article extends React.Component { constructor(props) { super(props); const id = this.props.match.params.id; this.state = { story: JSON.parse(localStorage.getItem(id)) || false, error: false, }; } componentDidMount() { const id = this.props.match.params.id; fetch(apiUrl + id) .then(res => res.json()) .then( (result) => { this.setState({ story: result.story }); localStorage.setItem(id, JSON.stringify(result.story)); }, (error) => { this.setState({ error: true }); } ); } displayComment(story, c, level) { return (

{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'} | {moment.unix(c.date).fromNow()}

{level < 5 ? c.comments.map(i => this.displayComment(story, i, level + 1)) :

[replies snipped]

}
); } render() { const id = this.props.match.params.id; const story = this.state.story; const error = this.state.error; return (
{error &&

Connection error?

} {story ?

{story.title}

View article
{infoLine(story)}
{story.comments.map(c => this.displayComment(story, c, 0))}
:

loading...

}
); } } export default Article;