import React from 'react'; import { Link } from 'react-router-dom'; import { HashLink } from 'react-router-hash-link'; import { Helmet } from 'react-helmet'; import moment from 'moment'; import localForage from 'localforage'; import { infoLine, ToggleDot } from './utils.js'; class Article extends React.Component { constructor(props) { super(props); const id = this.props.match.params.id; const cache = this.props.cache; if (id in cache) console.log('cache hit'); this.state = { story: cache[id] || false, error: false, }; } componentDidMount() { const id = this.props.match.params.id; localForage.getItem(id) .then( (value) => { this.setState({ story: value }); } ); fetch('/api/' + id) .then(res => res.json()) .then( (result) => { this.setState({ story: result.story }, () => { const hash = window.location.hash.substring(1); if (hash) { document.getElementById(hash).scrollIntoView(); } }); localForage.setItem(id, 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} - QotNews Comments

{story.title}

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

loading...

}
); } } export default Article;