Set title on article and comment pages, add comment anchors

webclient/src/Comments.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { HashLink } from 'react-router-hash-link';
+import { Helmet } from 'react-helmet';
 import moment from 'moment';
 import { sourceLink, infoLine, ToggleDot } from './utils.js';
 
-const apiUrl = 'https://news-api.t0.vc/';
-
 class Article extends React.Component {
 	constructor(props) {
 		super(props);
@@ -20,12 +20,17 @@ class Article extends React.Component {
     componentDidMount() {
 		const id = this.props.match.params.id;
 
-        fetch(apiUrl + id)
+        fetch('/api/' + id)
             .then(res => res.json())
             .then(
                 (result) => {
-                    this.setState({ story: result.story });
                     localStorage.setItem(id, JSON.stringify(result.story));
+                    this.setState({ story: result.story }, () => {
+						const hash = window.location.hash.substring(1);
+						if (hash) {
+							document.getElementById(hash).scrollIntoView();
+						}
+					});
                 },
                 (error) => {
                     this.setState({ error: true });
@@ -37,7 +42,10 @@ class Article extends React.Component {
 		return (
 			<div className={level ? 'comment lined' : 'comment'}>
 				<div className='info'>
-					<p>{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'} | {moment.unix(c.date).fromNow()}</p>
+					<p>
+						{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'}
+						&#8203; | <HashLink to={'#'+c.author+c.date} id={c.author+c.date}>{moment.unix(c.date).fromNow()}</HashLink>
+					</p>
 				</div>
 
 				<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
@@ -61,10 +69,14 @@ class Article extends React.Component {
 				{error && <p>Connection error?</p>}
 				{story ?
 					<div className='article'>
+						<Helmet>
+							<title>{story.title} - QotNews Comments</title>
+						</Helmet>
+
 						<h1>{story.title}</h1>
 
 						<div className='info'>
-							<Link to={'/' + story.id + '/a'}>View article</Link>
+							<Link to={'/' + story.id}>View article</Link>
 						</div>
 
 						{infoLine(story)}