From f0b14408d4d7947289e6d63a63e475d1461bbd95 Mon Sep 17 00:00:00 2001
From: Jason Schwarzenberger <jason@credisense.io>
Date: Fri, 20 Nov 2020 09:47:56 +1300
Subject: [PATCH] fix other discussions links.

---
 webclient/src/App.js            |  2 +-
 webclient/src/pages/Article.js  | 27 ++++++---------------------
 webclient/src/pages/Comments.js | 25 ++++++-------------------
 webclient/src/utils.js          | 20 ++++++++++++++++++++
 4 files changed, 33 insertions(+), 41 deletions(-)

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 {
 						<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 />
 
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 {
 						</div>
 
 						{infoLine(story)}
-
-						{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> : <></>}
+						{otherDiscussions(related)}
 
 						{nodes ?
 							<div className='story-text'>
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 {
 						</div>
 
 						{infoLine(story)}
-
-						{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> : <></>}
-
+						{otherDiscussions(related)}
 
 						<div className='comments'>
 							{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) => (
 	</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;