feat: Add page title

src/Collection.js

@@ -4,19 +4,21 @@ import { Redirect } from 'react-router-dom';
 import { getCollection } from './actions';
 import Item from './components/Item';
 import Pagination from './components/Pagination';
-import { scrollToTop, renderLoading } from './helpers';
+import { scrollToTop, renderLoading, setTitle } from './helpers';
 
 class Collection extends Component {
 
   componentDidMount() {
     this.getData(this.props.type);
+    setTitle(this.props.type === 'news' ? 'Top' : this.props.type)
     scrollToTop();
   }
 
   componentDidUpdate(nextProps) {
     const typeChanged = this.props.type !== nextProps.type;
     const pageChanged = this.props.match.params.page !== nextProps.match.params.page
     if (typeChanged || pageChanged) {
+      setTitle(this.props.type)
       this.getData(this.props.type, this.props.match.params.page || null);
     }
   }

src/Story.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { getSingle } from './actions';
 import Comment from './components/Comment';
 import discussion from './components/discussion';
-import { scrollToTop, renderLoading } from './helpers';
+import { scrollToTop, renderLoading, setTitle } from './helpers';
 
 class Story extends Component {
 
@@ -13,6 +13,12 @@ class Story extends Component {
     this.props.dispatch(getSingle('item', id));
     scrollToTop();
   }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.state && this.props.state.title) {
+      setTitle(this.props.state.title);
+    }
+  }
 
   renderStory(data) {
     if (data && Object.hasOwnProperty.call(data, 'comments')) {

src/components/About.js

@@ -1,25 +1,32 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { setTitle } from '../helpers';
 
-const About = () => (
-  <div className="container">
-    <div className="content about">
-      <h2>About</h2>
-      <p>
-        Yet another Hacker News clone
-      </p>
-      <p> 
-        Featuring <a href="https://reactjs.org/">React 16</a>, <a href="https://reacttraining.com/react-router/">React Router 4</a>, <a href="https://redux.js.org/docs/basics/UsageWithReact.html">React Redux</a>, <a href="https://github.com/gaearon/redux-thunk">Redux Thunk</a>, <a href="https://github.com/cheeaun/node-hnapi/">HN API</a>, CSS variables, unread link highlighting and clickable links in comments.
-      </p>
-      <p>
-        View the source code on <a href="https://github.com/ptibbetts/reactHN">GitHub</a>
-      </p>
-      <p>
-      <a className="<3" href="https://paultibbetts.uk">
-        <span role="img" aria-label="love">💙</span>
-      </a>
-      </p>
+const About = () => {
+  useEffect(() => {
+     setTitle('about')
+  })
+
+  return (
+    <div className="container">
+      <div className="content about">
+        <h2>About</h2>
+        <p>
+          Yet another Hacker News clone
+        </p>
+        <p>
+          Featuring <a href="https://reactjs.org/">React 16</a>, <a href="https://reacttraining.com/react-router/">React Router 4</a>, <a href="https://redux.js.org/docs/basics/UsageWithReact.html">React Redux</a>, <a href="https://github.com/gaearon/redux-thunk">Redux Thunk</a>, <a href="https://github.com/cheeaun/node-hnapi/">HN API</a>, CSS variables, unread link highlighting and clickable links in comments.
+        </p>
+        <p>
+          View the source code on <a href="https://github.com/ptibbetts/reactHN">GitHub</a>
+        </p>
+        <p>
+        <a className="<3" href="https://paultibbetts.uk">
+          <span role="img" aria-label="love">💙</span>
+        </a>
+        </p>
+      </div>
     </div>
-  </div>
-);
+  )
+};
 
 export default About;

src/helpers.js

@@ -31,4 +31,12 @@ export const renderLoading = () => {
       <span role="img" aria-label="loading…">🙈</span>
     </div>
   );
+}
+
+export const setTitle = (title) => {
+  document.title = `${title ? ucFirst(title) + ' - ' : '' } React HN`;
+}
+
+export const ucFirst = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
 }