split jobs routes, add show comp

common/app/routes/Jobs/components/List.jsx

@@ -52,7 +52,8 @@ export default contain(
             key={ id }>
             <Well>
               <Thumbnail
-                alt='200x200' src={ logo }
+                alt={ company + 'company logo' }
+                src={ logo }
                 style={ thumbnailStyle } />
               <Panel>
                 Position: { position }

common/app/routes/Jobs/components/Show.jsx

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
-import { Thumbnail, Panel, Well } from 'react-bootstrap';
+import { contain } from 'thundercats-react';
+import { Row, Thumbnail, Panel, Well } from 'react-bootstrap';
 import moment from 'moment';
 
 const thumbnailStyle = {
@@ -7,53 +8,70 @@ const thumbnailStyle = {
   maxHeight: '100px',
   maxWidth: '100px'
 };
-export default React.createClass({
-  displayName: 'ShowJob',
-  propTypes: {
-    job: PropTypes.object
+
+export default contain(
+  {
+    store: 'jobsStore',
+    fetchAction: 'jobActions.getJob',
+    getPayload({ params }) {
+      return { id: params.id };
+    }
   },
+  React.createClass({
+    displayName: 'ShowJob',
+    propTypes: {
+      job: PropTypes.object,
+      params: PropTypes.object
+    },
 
-  renderHeader({ company, position }) {
-    return (
-      <div>
-        <h4 style={{ display: 'inline-block' }}>{ company }</h4>
-        <h5
-          className='pull-right hidden-xs hidden-md'
-          style={{ display: 'inline-block' }}>
-          { position }
-        </h5>
-      </div>
-    );
-  },
+    renderHeader({ company, position }) {
+      return (
+        <div>
+          <h4 style={{ display: 'inline-block' }}>{ company }</h4>
+          <h5
+            className='pull-right hidden-xs hidden-md'
+            style={{ display: 'inline-block' }}>
+            { position }
+          </h5>
+        </div>
+      );
+    },
 
-  render() {
-    const { job } = this.props;
-    const {
-      logo,
-      position,
-      city,
-      state,
-      email,
-      phone,
-      postedOn,
-      description
-    } = job;
+    render() {
+      const { job } = this.props;
+      const {
+        logo,
+        position,
+        city,
+        company,
+        state,
+        email,
+        phone,
+        postedOn,
+        description
+      } = job;
 
-    return (
-      <Well>
-        <Thumbnail
-          alt='200x200' src={ logo }
-          style={ thumbnailStyle } />
-        <Panel>
-          Position: { position }
-          Location: { city }, { state }
-          <br />
-          Contact: { email || phone || 'N/A' }
-          <br />
-          Posted On: { moment(postedOn).format('MMMM Do, YYYY') }
-        </Panel>
-        <p>{ description }</p>
-      </Well>
-    );
-  }
-});
+      return (
+        <div>
+          <Row>
+            <Well>
+              <Thumbnail
+                alt={ company + 'company logo' }
+                src={ logo }
+                style={ thumbnailStyle } />
+              <Panel>
+                Position: { position }
+                Location: { city }, { state }
+                <br />
+                Contact: { email || phone || 'N/A' }
+                <br />
+                Posted On: { moment(postedOn).format('MMMM Do, YYYY') }
+              </Panel>
+              <p>{ description }</p>
+            </Well>
+          </Row>
+        </div>
+      );
+    }
+  })
+);

common/app/routes/Jobs/flux/Actions.js

@@ -5,9 +5,7 @@ const debug = debugFactory('freecc:jobs:actions');
 
 export default Actions({
   setJobs: null,
-  getJob(id) {
-    return { id };
-  },
+  getJob: null,
   getJobs(params) {
     return { params };
   }

common/app/routes/Jobs/index.js

@@ -1,14 +1,19 @@
 import Jobs from './components/Jobs.jsx';
+import Show from './components/Show.jsx';
 
 /*
- *  show: /jobs
- *  showOne: /jobs/:id
- *  edit /jobs/:id
- *  delete /jobs/:id
- *  createOne /jobs/new
+ *  index: /jobs list jobs
+ *  show: /jobs/:id show one job
+ *  create /jobs/new create a new job
  */
 
 export default {
   path: 'jobs',
-  component: Jobs
+  childRoutes: [{
+    path: 'jobs',
+    component: Jobs
+  }, {
+    path: 'jobs/:id',
+    component: Show
+  }]
 };