split jobs routes, add show comp

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>
+      );
+    }
+  })
+);