add map of hikes

.eslintrc

@@ -185,10 +185,12 @@
     "sort-vars": 0,
     "space-after-keywords": [
       2,
-      "always",
-      { "checkFunctionKeyword": false }
+      "always"
+    ],
+    "space-before-function-paren": [
+      2,
+      "never"
     ],
-    "space-after-function-names": "never",
     "space-before-blocks": [
       2,
       "always"

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

@@ -1,22 +1,35 @@
 import React, { PropTypes } from 'react';
-import { Row } from 'react-bootstrap';
-import Video from 'react-video';
+import stampit from 'react-stampit';
+import { Panel, Row } from 'react-bootstrap';
+// import debugFactory from 'debug';
 
-export default React.createClass({
+import HikesMap from './Map.jsx';
+
+// const debug = debugFactory('freecc:hikes');
+
+export default stampit(React, {
   displayName: 'Hikes',
+
   propTypes: {
-    id: PropTypes.string
+    children: PropTypes.element
+  },
+
+  renderMap() {
+    return (
+      <HikesMap />
+    );
   },
 
   render() {
-    const {
-      id
-    } = this.props.params;
-
     return (
-      <Video
-        from='vimeo'
-        videoId={ '132543959' } />
+      <div>
+        <Panel>
+          <h1>Hikes!</h1>
+        </Panel>
+        <Row>
+          { this.props.children || this.renderMap() }
+        </Row>
+      </div>
     );
   }
 });

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

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import stampit from 'react-stampit';
+import Vimeo from 'react-vimeo';
+import debugFactory from 'debug';
+
+const debug = debugFactory('freecc:hikes');
+
+export default stampit(React, {
+  displayName: 'Lecture',
+
+  propTypes: {
+    params: PropTypes.object
+  },
+
+  onError: debug,
+
+  render() {
+    const {
+      id
+    } = this.props.params;
+
+    return (
+      <Vimeo
+        onError={ this.onError }
+        videoId={ id } />
+    );
+  }
+});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import stampit from 'react-stampit';
+import { Link } from 'react-router';
+import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import videos from '../videos.json';
+
+export default stampit(React, {
+  displayName: 'HikesMap',
+
+  render() {
+
+    const vidElements = videos.map(({ title, id }) => {
+      return (
+        <ListGroupItem key={ id }>
+          <Link to={ `/hikes/${id}` }>
+            <h3>{ title }</h3>
+          </Link>
+        </ListGroupItem>
+      );
+    });
+
+    return (
+      <ListGroup>
+        { vidElements }
+      </ListGroup>
+    );
+  }
+});

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

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import stampit from 'react-stampit';
+// import debugFactory from 'debug';
+
+export default stampit(React, {
+  displayName: 'Question',
+
+  propTypes: {
+    params: PropTypes.object
+  },
+
+  render() {
+    return (
+      <div>
+        <h2>Question time</h2>
+      </div>
+    );
+  }
+});

common/app/routes/Hikes/index.js

@@ -1,4 +1,6 @@
 import Hikes from './components/Hikes.jsx';
+import Lecture from './components/Lecture.jsx';
+import Question from './components/Question.jsx';
 
 /*
  * show video /hikes/someVideo
@@ -6,11 +8,13 @@ import Hikes from './components/Hikes.jsx';
  */
 
 export default {
-  path: 'hikes(/:id)',
-
-  getComponents(cb) {
-    setTimeout(() => {
-      cb(null, Hikes);
-    }, 0);
-  }
+  path: 'hikes',
+  component: Hikes,
+  childRoutes: [{
+    path: ':id',
+    component: Lecture
+  }, {
+    path: ':id/question/:questionId',
+    component: Question
+  }]
 };