import React from 'react'; import { Helmet } from 'react-helmet'; import localForage from 'localforage'; import { sourceLink, infoLine, ToggleDot } from './utils.js'; class Article extends React.Component { constructor(props) { super(props); const id = this.props.match ? this.props.match.params.id : 'CLOL'; const cache = this.props.cache; if (id in cache) console.log('cache hit'); this.state = { story: cache[id] || false, error: false, pConv: [], }; } componentDidMount() { const id = this.props.match ? this.props.match.params.id : 'CLOL'; localForage.getItem(id) .then( (value) => { if (value) { this.setState({ story: value }); } } ); fetch('/api/' + id) .then(res => res.json()) .then( (result) => { this.setState({ story: result.story }); localForage.setItem(id, result.story); }, (error) => { this.setState({ error: true }); } ); } pConvert = (n) => { this.setState({ pConv: [...this.state.pConv, n]}); } render() { const id = this.props.match ? this.props.match.params.id : 'CLOL'; const story = this.state.story; const error = this.state.error; const pConv = this.state.pConv; let nodes = null; if (story.text) { let div = document.createElement('div'); div.innerHTML = story.text; nodes = div.childNodes; } return (
Connection error?
} {story ?{v.data}
: <>Problem getting article :(
}loading...
}