diff --git a/webclient/src/App.js b/webclient/src/App.js index d8dba3c..c4c2063 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -71,7 +71,7 @@ class App extends React.Component {
} /> - } /> + } /> diff --git a/webclient/src/pages/Article.js b/webclient/src/pages/Article.js index d53d3dd..1267e99 100644 --- a/webclient/src/pages/Article.js +++ b/webclient/src/pages/Article.js @@ -1,8 +1,7 @@ import React from 'react'; import { Helmet } from 'react-helmet'; import localForage from 'localforage'; -import { sourceLink, infoLine, ToggleDot } from '../utils.js'; -import { Link } from "react-router-dom"; +import { sourceLink, infoLine, otherDiscussions, ToggleDot } from '../utils.js'; class Article extends React.Component { constructor(props) { @@ -24,14 +23,8 @@ class Article extends React.Component { componentDidMount() { const id = this.props.match ? this.props.match.params.id : 'CLOL'; - localForage.getItem(id) - .then( - (value) => { - if (value) { - this.setState({ story: value }); - } - } - ); + localForage.getItem(id).then((value) => value ? this.setState({ story: value }) : null); + localForage.getItem(`related-${id}`).then((value) => value ? this.setState({ related: value }) : null); fetch('/api/' + id) .then(res => res.json()) @@ -39,6 +32,7 @@ class Article extends React.Component { (result) => { this.setState({ story: result.story, related: result.related }); localForage.setItem(id, result.story); + localForage.setItem(`related-${id}`, result.related); }, (error) => { this.setState({ error: true }); @@ -53,7 +47,7 @@ class Article extends React.Component { render() { const id = this.props.match ? this.props.match.params.id : 'CLOL'; const story = this.state.story; - const related = this.state.related;//.filter(r => r.id != id); + const related = this.state.related.filter(r => r.id != id); const error = this.state.error; const pConv = this.state.pConv; let nodes = null; @@ -80,16 +74,7 @@ class Article extends React.Component { {infoLine(story)} - - {related.length ?
- Other discussions: - {related.map((r, i) => - <> - {i !== 0 ? <> • : <>} - {r.source} - - )} -
: <>} + {otherDiscussions(related)} {nodes ?
diff --git a/webclient/src/pages/Comments.js b/webclient/src/pages/Comments.js index ed22abc..b10fe9d 100644 --- a/webclient/src/pages/Comments.js +++ b/webclient/src/pages/Comments.js @@ -4,7 +4,7 @@ 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'; +import { infoLine, otherDiscussions, ToggleDot } from '../utils.js'; class Comments extends React.Component { constructor(props) { @@ -27,12 +27,8 @@ class Comments extends React.Component { componentDidMount() { const id = this.props.match.params.id; - localForage.getItem(id) - .then( - (value) => { - this.setState({ story: value }); - } - ); + localForage.getItem(id).then((value) => this.setState({ story: value })); + localForage.getItem(`related-${id}`).then((value) => value ? this.setState({ related: value }) : null); fetch('/api/' + id) .then(res => res.json()) @@ -45,6 +41,7 @@ class Comments extends React.Component { } }); localForage.setItem(id, result.story); + localForage.setItem(`related-${id}`, result.related); }, (error) => { this.setState({ error: true }); @@ -111,7 +108,7 @@ class Comments extends React.Component { render() { const id = this.props.match.params.id; const story = this.state.story; - const related = this.state.related;//.filter(r => r.id != id); + const related = this.state.related.filter(r => r.id != id); const error = this.state.error; return ( @@ -130,17 +127,7 @@ class Comments extends React.Component {
{infoLine(story)} - - {related.length ?
- Other discussions: - {related.map((r, i) => - <> - {i !== 0 ? <> • : <>} - {r.source} - - )} -
: <>} - + {otherDiscussions(related)}
{story.comments.map(c => this.displayComment(story, c, 0))} diff --git a/webclient/src/utils.js b/webclient/src/utils.js index a933924..682cce1 100644 --- a/webclient/src/utils.js +++ b/webclient/src/utils.js @@ -27,6 +27,26 @@ export const infoLine = (story) => (
); +export const otherDiscussions = (related) => { + const stories = related.filter(r => r.num_comments > 0); + if (!stories.length) { + return null; + } + return ( +
+ Other discussions: + {stories.map((story, i) => + + {i !== 0 ? <> • : <>} + 99 ? "hot" : ""} to={"/" + story.id + "/c"}> + {story.source} ({story.num_comments} comment{story.num_comments !== 1 && "s"}) + + + )} +
+ ); +} + export class ToggleDot extends React.Component { render() { const id = this.props.id;