Switch page title for different pages

js/components/PageHelp.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import HeroHeadline from './HeroHeadline';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 
-export default function PageHelp({ leaving, onLeave }) {
+export default function PageHelp({ leaving, onLeave, ...props }) {
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title="How to use AOE Technology Radar" />
       <HeroHeadline>How to use AOE Technology Radar</HeroHeadline>
     </Fadeable>
   );

js/components/PageIndex.js

@@ -2,10 +2,12 @@ import React from 'react';
 import HeroHeadline from './HeroHeadline';
 import QuadrantGrid from './QuadrantGrid';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 
-export default function PageIndex({ leaving, onLeave, items, navigate }) {
+export default function PageIndex({ leaving, onLeave, items, navigate, ...props }) {
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title="Technology Radar" />
       <div className="headline-group">
         <HeroHeadline alt="Mar 2017">AOE Technology Radar (beta)</HeroHeadline>
       </div>

js/components/PageItem.js

@@ -4,6 +4,7 @@ import Badge from './Badge';
 import ItemList from './ItemList';
 import Link from './Link';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 import { createAnimation, createAnimationRunner } from '../animation';
 
 import { translate } from '../../common/config';
@@ -150,6 +151,7 @@ class PageItem extends React.Component {
     const itemsInRing = this.getItemsInRing(this.props);
     return (
       <div>
+        <SetTitle {...this.props} title={item.title} />
         <div className="item-page">
           <div className="item-page__nav">
             <div className="item-page__nav__inner">

js/components/PageOverview.js

@@ -6,6 +6,7 @@ import Badge from './Badge';
 import Link from './Link';
 import Search from './Search';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 import { groupByFirstLetter } from '../../common/model';
 import { translate } from '../../common/config';
 
@@ -83,6 +84,7 @@ class PageOverview extends React.Component {
 
     return (
       <Fadeable leaving={this.props.leaving} onLeave={this.props.onLeave}>
+        <SetTitle {...this.props} title="Technologies Overview" />
         <HeadlineGroup>
           <HeroHeadline>Technologies Overview</HeroHeadline>
         </HeadlineGroup>

js/components/PageQuadrant.js

@@ -3,14 +3,16 @@ import HeroHeadline from './HeroHeadline';
 import HeadlineGroup from './HeadlineGroup';
 import QuadrantSection from './QuadrantSection';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 
 import { translate } from '../../common/config';
 import { groupByQuadrants } from '../../common/model';
 
-export default function PageQuadrant({ leaving, onLeave, pageName, items }) {
+export default function PageQuadrant({ leaving, onLeave, pageName, items, ...props }) {
   const groups = groupByQuadrants(items);
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title={translate(pageName)} />
       <HeadlineGroup>
         <HeroHeadline>{translate(pageName)}</HeroHeadline>
       </HeadlineGroup>

js/components/SetTitle.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class SetTitle extends React.Component {
+  constructor(props) {
+    super(props);
+    if (typeof props.onSetTitle === 'function' && props.title) {
+      props.onSetTitle(props.title);
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default SetTitle;