From 685c6b0129ae16142f589d5ad1517ed4ab5353d9 Mon Sep 17 00:00:00 2001
From: Paul Tibbetts <code@paultibbetts.uk>
Date: Sat, 7 Mar 2020 22:52:29 +0000
Subject: [PATCH] feat: Add page title

---
 src/Collection.js       |  4 +++-
 src/Story.js            |  8 ++++++-
 src/components/About.js | 49 +++++++++++++++++++++++------------------
 src/helpers.js          |  8 +++++++
 4 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/Collection.js b/src/Collection.js
index 912da21..b60226b 100644
--- a/src/Collection.js
+++ b/src/Collection.js
@@ -4,12 +4,13 @@ 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();
   }
 
@@ -17,6 +18,7 @@ class Collection extends Component {
     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);
     }
   }
diff --git a/src/Story.js b/src/Story.js
index 89c3165..4cccfec 100644
--- a/src/Story.js
+++ b/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')) {
diff --git a/src/components/About.js b/src/components/About.js
index 2a01756..4e211b1 100644
--- a/src/components/About.js
+++ b/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;
\ No newline at end of file
diff --git a/src/helpers.js b/src/helpers.js
index 06285d9..212e957 100644
--- a/src/helpers.js
+++ b/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);
 }
\ No newline at end of file