fix other discussions links.

webclient/src/App.js

@@ -71,7 +71,7 @@ class App extends React.Component {
 						<Route path='/search' component={Results} />
 						<Route path='/:id' exact render={(props) => <Article {...props} cache={this.cache} />} />
 					</Switch>
-					<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} />
+					<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} key={props.match.params.id} />} />
 
 					<ForwardDot />
 

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 { sourceLink, infoLine, otherDiscussions, ToggleDot } from '../utils.js';
-import { Link } from "react-router-dom";
 
 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)
+		localForage.getItem(id).then((value) => value ? this.setState({ story: value }) : null);
-			.then(
+		localForage.getItem(`related-${id}`).then((value) => value ? this.setState({ related: value }) : null);
-				(value) => {
-					if (value) {
-						this.setState({ story: value });
-					}
-				}
-			);
 
 		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 {
 						</div>
 
 						{infoLine(story)}
-
+						{otherDiscussions(related)}
-						{related.length ? <div className='related indented info'>
-							<span>Other discussions: </span>
-							{related.map((r, i) =>
-								<>
-									{i !== 0 ? <> &bull; </> : <></>}
-									<Link className='' to={"/" + r.id + "/c"}>{r.source}</Link>
-								</>
-							)}
-						</div> : <></>}
 
 						{nodes ?
 							<div className='story-text'>

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)
+		localForage.getItem(id).then((value) => this.setState({ story: value }));
-			.then(
+		localForage.getItem(`related-${id}`).then((value) => value ? this.setState({ related: value }) : null);
-				(value) => {
-					this.setState({ story: value });
-				}
-			);
 
 		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 {
 						</div>
 
 						{infoLine(story)}
-
+						{otherDiscussions(related)}
-						{related.length ? <div className='related indented info'>
-							<span>Other discussions: </span>
-							{related.map((r, i) =>
-								<>
-									{i !== 0 ? <> &bull; </> : <></>}
-									<Link className='' to={"/" + r.id + "/c"}>{r.source}</Link>
-								</>
-							)}
-						</div> : <></>}
-
 
 						<div className='comments'>
 							{story.comments.map(c => this.displayComment(story, c, 0))}

webclient/src/utils.js

@@ -27,6 +27,26 @@ export const infoLine = (story) => (
 	</div>
 );
 
+export const otherDiscussions = (related) => {
+	const stories = related.filter(r => r.num_comments > 0);
+	if (!stories.length) {
+		return null;
+	}
+	return (
+		<div className='related indented info'>
+			<span>Other discussions: </span>
+			{stories.map((story, i) =>
+				<span id={story.id}>
+					{i !== 0 ? <> &bull; </> : <></>}
+					<Link className={story.num_comments > 99 ? "hot" : ""} to={"/" + story.id + "/c"}>
+						{story.source} ({story.num_comments} comment{story.num_comments !== 1 && "s"})
+					</Link>
+				</span>
+			)}
+		</div>
+	);
+}
+
 export class ToggleDot extends React.Component {
 	render() {
 		const id = this.props.id;