Add initial routing setup for app.

package.json

@@ -15,7 +15,8 @@
         "browserify": "10.1.3",
         "coffee-reactify": "3.0.0",
         "font-awesome": "4.3.0",
-        "react-fontawesome": "0.2.5"
+        "react-fontawesome": "0.2.5",
+        "react-router": "0.13.3"
     },
     "devDependencies": {
         "chai": "1.9.2",
@@ -29,7 +30,8 @@
         "karma-chai": "0.1.0",
         "karma-phantomjs-launcher": "0.1.4",
         "karma-mocha": "0.1.9",
-        "karma-coverage": "0.2.6"
+        "karma-coverage": "0.2.6",
+        "watchify": "3.2.2"
     },
     "repository": {
         "type": "git",
@@ -50,6 +52,7 @@
     "browser": "./rookeries/app.cjsx",
     "scripts": {
         "test": "karma start tests/karma.conf.coffee",
-        "package": "browserify -t coffee-reactify rookeries/app.cjsx -o dist/rookeries.js"
+        "package": "browserify -t coffee-reactify rookeries/app.cjsx -o dist/rookeries.js",
+        "dev_ci": "watchify -t coffee-reactify rookeries/app.cjsx -o dist/rookeries.js"
     }
 }

rookeries/app.cjsx

@@ -14,6 +14,26 @@ JournalMarkdownView = require('./views/journal_markdown_viewer.cjsx')
 require('./views/user_login_modal.cjsx')
 require('./views/theme_switcher.cjsx')
 
-React.render(<JournalMarkdownView />, document.getElementById("markdown-target"))
 
-# TODO Add in routing using react-router
+# TODO Extract routing
+Router = require('react-router')
+Route = Router.Route
+
+app_routes = (
+    <Route handler={App}>
+        <Route path='doc/:id' handler={JournalMarkdownView} />
+    </Route>
+)
+
+App = React.createClass(
+    render: () ->
+        console.log('Render Route handler.')
+        return (
+            <h1>App</h1>
+            <RouteHandler />
+        )
+)
+
+Router.run(app_routes, Router.HashLocation, (Root) =>
+    React.render(<Root />, document.getElementById("markdown-target"))
+)

rookeries/stores/journal_entry_store.coffee

@@ -18,9 +18,9 @@ JournalEntryStore = Reflux.createStore(
         console.log('Initialize JournalEntryStore.')
         @listenTo(JournalEntryActions.loadEntry, @loadEntry)
 
-    loadEntry: () ->
+    loadEntry: (id) ->
         console.log('Request loading ')
-        request.get('/api/docs/about')
+        request.get("/api/docs/#{id}")
         .accept('json')
         .end(
             (err, res) ->

rookeries/views/journal_markdown_viewer.cjsx

@@ -11,13 +11,14 @@ Rookeries client - Markdown controller to view a journal entry.
 React = require('react')
 Reflux = require('reflux')
 marked = require('marked')
+Router = require('react-router')
 
 JournalEntryActions = require('../actions/journal_actions.coffee')
 JournalEntryStore = require('../stores/journal_entry_store.coffee')
 
 
 JournalMarkdownView = React.createClass(
-    mixins: [Reflux.ListenerMixin]
+    mixins: [Reflux.ListenerMixin, Router.State]
 
     getInitialState: () ->
         console.log('Initialize JournalMarkdownView state.')
@@ -30,15 +31,16 @@ JournalMarkdownView = React.createClass(
     componentDidMount: () ->
         console.log('Mount JournalMarkdownView.')
         @listenTo(JournalEntryActions.viewEntry, @onStatusChange)
-        console.log('Trigger JournalEntryAction.loadEntry event.')
+        pageToLoad = @getParams().id
-        JournalEntryActions.loadEntry()
+        console.log("Trigger JournalEntryAction.loadEntry event - #{pageToLoad}.")
+        JournalEntryActions.loadEntry(pageToLoad)
 
     render: () ->
         console.log("Render JournalMarkdownView.")
         raw_markup = marked(@state.page_content, {sanitized: true})
         return (
             <div>
-                <h1>{ @state.name }</h1>
+                <h1>{ @state.name } - {@getParams().id}</h1>
                 <span dangerouslySetInnerHTML={{__html: raw_markup}} />
             </div>
         )