render individual job on request and window transition

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

@@ -1,23 +1,39 @@
 import React, { cloneElement, PropTypes } from 'react';
 import { contain } from 'thundercats-react';
+import { Navigation } from 'react-router';
 import { Button, Jumbotron, Row } from 'react-bootstrap';
 import ListJobs from './List.jsx';
 
 export default contain(
   {
     store: 'jobsStore',
-    fetchAction: 'jobActions.getJobs'
+    fetchAction: 'jobActions.getJobs',
+    actions: 'jobActions'
   },
   React.createClass({
     displayName: 'Jobs',
+
     propTypes: {
       children: PropTypes.element,
+      jobActions: PropTypes.object,
       jobs: PropTypes.array
     },
+    mixins: [Navigation],
 
-    renderList(jobs) {
+    handleJobClick(id) {
+      const { jobActions } = this.props;
+      if (!id) {
+        return null;
+      }
+      jobActions.findJob(id);
+      this.transitionTo(`/jobs/${id}`);
+    },
+
+    renderList(handleJobClick, jobs) {
       return (
-        <ListJobs jobs={ jobs }/>
+        <ListJobs
+          handleClick={ handleJobClick }
+          jobs={ jobs }/>
       );
     },
 
@@ -53,7 +69,7 @@ export default contain(
           </Row>
           <Row>
             { this.renderChild(children, jobs) ||
-              this.renderList(jobs) }
+              this.renderList(this.handleJobClick, jobs) }
             </Row>
         </div>
       );

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

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import { Link } from 'react-router';
 import { PanelGroup, Thumbnail, Panel, Well } from 'react-bootstrap';
 import moment from 'moment';
 
@@ -7,15 +6,17 @@ export default React.createClass({
   displayName: 'ListJobs',
 
   propTypes: {
+    handleClick: PropTypes.func,
     jobs: PropTypes.array
   },
 
-  renderJobs(jobs =[]) {
+  renderJobs(handleClick, jobs =[]) {
     const thumbnailStyle = {
       backgroundColor: 'white',
       maxHeight: '100px',
       maxWidth: '100px'
     };
+
     return jobs.map((
       {
         id,
@@ -47,33 +48,35 @@ export default React.createClass({
           eventKey={ index }
           header={ header }
           key={ id }>
-          <Link to={ `/jobs/${id}` }>
-            <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>
-          </Link>
+          <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 onClick={ () => handleClick(id) }>{ description }</p>
+          </Well>
         </Panel>
       );
     });
   },
 
   render() {
-    const { jobs } = this.props;
+    const {
+      handleClick,
+      jobs
+    } = this.props;
+
     return (
       <PanelGroup>
-        { this.renderJobs(jobs) }
+        { this.renderJobs(handleClick, jobs) }
       </PanelGroup>
     );
   }

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

@@ -14,15 +14,18 @@ export default contain(
     store: 'jobsStore',
     fetchAction: 'jobActions.getJob',
     map({ currentJob }) {
+      return { job: currentJob };
+    },
+    getPayload({ params: { id }, job = {} }) {
       return {
-        job: currentJob
+        id,
+        isPrimed: job.id === id
       };
     },
-    getPayload({ params }) {
-      return { id: params.id };
-    },
-    shouldContainerFetch({ currentJob = {} }, { currentJob: nextJob = {}}) {
-      return currentJob.id !== nextJob.id;
+    // using es6 destructuring
+    shouldContainerFetch({ job = {} }, { params: { id } }
+    ) {
+      return job.id !== id;
     }
   },
   React.createClass({
@@ -46,7 +49,7 @@ export default contain(
     },
 
     render() {
-      const { job } = this.props;
+      const { job = {} } = this.props;
       const {
         logo,
         position,