set and render page title

note this requires changes to thundercats to work
see: thundercatsjs/thundercats-react/issues/3

common/app/App.jsx

@@ -20,9 +20,26 @@ export default contain(
 
     propTypes: {
       children: PropTypes.node,
-      username: PropTypes.string,
       points: PropTypes.number,
-      picture: PropTypes.string
+      picture: PropTypes.string,
+      title: PropTypes.string,
+      username: PropTypes.string
+    },
+
+    componentDidMount() {
+      const title = this.props.title;
+      this.setTitle(title);
+    },
+
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.title !== this.props.title) {
+        this.setTitle(nextProps.title);
+      }
+    },
+
+    setTitle(title) {
+      const doc = typeof document !== 'undefined' ? document : {};
+      doc.title = title;
     },
 
     render() {

common/app/flux/Actions.js

@@ -4,6 +4,10 @@ import debugFactory from 'debug';
 const debug = debugFactory('freecc:app:actions');
 
 export default Actions({
+  setTitle(title = 'Learn To Code') {
+    return { title: title + '| Free Code Camp' };
+  },
+
   setUser({ username, picture, progressTimestamps = [] }) {
     return {
       username,
@@ -11,6 +15,7 @@ export default Actions({
       points: progressTimestamps.length
     };
   },
+
   getUser: null
 })
   .refs({ displayName: 'AppActions' })
@@ -28,4 +33,5 @@ export default Actions({
         return appActions.setUser(user);
       });
     });
+    return appActions;
   });

common/app/flux/Store.js

@@ -1,7 +1,8 @@
 import { Store } from 'thundercats';
 
-const { createRegistrar, setter } = Store;
+const { createRegistrar, setter, fromMany } = Store;
 const initValue = {
+  title: 'Learn To Code | Free Code Camp',
   username: null,
   picture: null,
   points: 0
@@ -10,9 +11,10 @@ const initValue = {
 export default Store(initValue)
   .refs({ displayName: 'AppStore' })
   .init(({ instance: appStore, args: [cat] }) => {
-    const { setUser } = cat.getActions('appActions');
+    const { setUser, setTitle } = cat.getActions('appActions');
     const register = createRegistrar(appStore);
-    register(setter(setUser));
+
+    register(setter(fromMany(setUser, setTitle)));
 
     return appStore;
   });

common/app/routes/Hikes/components/Hikes.jsx

@@ -10,6 +10,7 @@ import HikesMap from './Map.jsx';
 export default contain(
   {
     store: 'hikesStore',
+    actions: ['appActions'],
     fetchAction: 'hikesActions.fetchHikes',
     getPayload: ({ hikes, params }) => ({
       isPrimed: (hikes && !!hikes.length),
@@ -23,11 +24,17 @@ export default contain(
     displayName: 'Hikes',
 
     propTypes: {
+      appActions: PropTypes.object,
       children: PropTypes.element,
       currentHike: PropTypes.object,
       hikes: PropTypes.array
     },
 
+    componentWillMount() {
+      const { appActions } = this.props;
+      appActions.setTitle('Hikes');
+    },
+
     renderMap(hikes) {
       return (
         <HikesMap hikes={ hikes }/>

server/boot/a-react.js

@@ -51,9 +51,13 @@ export default function reactSubRouter(app) {
       // makes sure we only get one onNext and closes subscription
       .flatMap(function({ data, markup }) {
         debug('react rendered');
+        const { title } = data.AppStore;
         res.expose(data, 'data');
         // now render jade file with markup injected from react
-        return res.render$('layout-react', { markup: markup });
+        return res.render$(
+          'layout-react',
+          { markup, title }
+        );
       })
       .subscribe(
         function(markup) {

server/views/layout-react.jade

@@ -1,6 +1,10 @@
 doctype html
 html(ng-app='profileValidation', lang='en')
   head
+    if title
+      title= title
+    else
+      title redirecting to | Free Code Camp
     include partials/small-head
   body.top-and-bottom-margins(style='overflow: hidden')
     .container

server/views/partials/small-head.jade

@@ -7,7 +7,6 @@ link(rel='stylesheet', href='/css/lib/Vimeo.css')
 // End **REQUIRED** includes
 
 include meta
-title redirecting to | Free Code Camp
 meta(charset='utf-8')
 meta(http-equiv='X-UA-Compatible', content='IE=edge')
 meta(name='viewport', content='width=device-width, initial-scale=1.0')