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,

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

@@ -5,6 +5,29 @@ const debug = debugFactory('freecc:jobs:actions');
 
 export default Actions({
   setJobs: null,
+  // findJob assumes that the job is already in the list of jobs
+  findJob(id) {
+    return oldState => {
+      const { currentJob = {}, jobs = [] } = oldState;
+      // currentJob already set
+      // do nothing
+      if (currentJob.id === id) {
+        return null;
+      }
+      const foundJob = jobs.reduce((newJob, job) => {
+        if (job.id === id) {
+          return job;
+        }
+        return newJob;
+      }, null);
+
+      // if no job found this will be null which is a op noop
+      return foundJob ?
+        Object.assign({}, oldState, { currentJob: foundJob }) :
+        null;
+    };
+  },
+  setError: null,
   getJob: null,
   getJobs(params) {
     return { params };
@@ -13,13 +36,28 @@ export default Actions({
   .refs({ displayName: 'JobActions' })
   .init(({ instance: jobActions, args: [services] }) => {
     jobActions.getJobs.subscribe(() => {
-      services.read('job', null, null, (err, jobs) => {
+      services.read('jobs', null, null, (err, jobs) => {
         if (err) {
           debug('job services experienced an issue', err);
-          jobActions.setJobs({ jobs: [] });
+          return jobActions.setError({ err });
         }
         jobActions.setJobs({ jobs });
       });
     });
+
+    jobActions.getJob.subscribe(({ id, isPrimed }) => {
+      // job is already set, do nothing.
+      if (isPrimed) {
+        debug('job is primed');
+        return;
+      }
+      services.read('jobs', { id }, null, (err, job) => {
+        if (err) {
+          debug('job services experienced an issue', err);
+          return jobActions.setError({ err });
+        }
+        jobActions.setJobs({ currentJob: job });
+      });
+    });
     return jobActions;
   });

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

@@ -1,10 +1,17 @@
 import { Store } from 'thundercats';
 
-const { setter } = Store;
+const {
+  createRegistrar,
+  setter,
+  transformer
+} = Store;
 
 export default Store()
   .refs({ displayName: 'JobsStore' })
   .init(({ instance: jobsStore, args: [cat] }) => {
-    let jobActions = cat.getActions('JobActions');
-    jobsStore.register(setter(jobActions.setJobs));
+    const { setJobs, findJob, setError } = cat.getActions('JobActions');
+    const register = createRegistrar(jobsStore);
+    register(setter(setJobs));
+    register(transformer(findJob));
+    register(setter(setError));
   });

server/services/job.js

@@ -2,8 +2,12 @@ export default function getJobServices(app) {
   const { Job } = app.models;
 
   return {
-    name: 'job',
+    name: 'jobs',
     read: (req, resource, params, config, cb) => {
+      const id = params ? params.id : null;
+      if (id) {
+        return Job.findById(id, cb);
+      }
       Job.find({}, (err, jobs) => {
         cb(err, jobs);
       });