tanner/qotnews
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix other discussions links.

Browse Source
This commit is contained in:
Jason Schwarzenberger 2020-11-20 09:47:56 +13:00
parent e1830a589b
commit f0b14408d4
4 changed files with 33 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webclient/src/App.js
View File

@ -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 />

27
webclient/src/pages/Article.js
View File

@ -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'>

25
webclient/src/pages/Comments.js
View File

@ -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))}

20
webclient/src/utils.js
View File

@ -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;