show preview from new job

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

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { History } from 'react-router';
 import { contain } from 'thundercats-react';
 import debugFactory from 'debug';
 import { getDefaults } from '../utils';
@@ -104,6 +105,8 @@ export default contain({
       highlight: PropTypes.object
     },
 
+    mixins: [History],
+
     handleSubmit(e) {
       e.preventDefault();
       const props = this.props;
@@ -153,8 +156,11 @@ export default contain({
         return accu;
       }, {});
 
+      job.postedOn = new Date();
       debug('job sanitized', job);
       jobActions.saveForm(job);
+
+      this.history.pushState(null, '/jobs/new/preview');
     },
 
     componentDidMount() {

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

@@ -0,0 +1,14 @@
+// import React, { PropTypes } from 'react';
+import { contain } from 'thundercats-react';
+import ShowJob from './ShowJob.jsx';
+
+export default contain(
+  {
+    store: 'JobsStore',
+    actions: 'JobActions',
+    map({ form: job = {} }) {
+      return { job };
+    }
+  },
+  ShowJob
+);

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

@@ -1,13 +1,5 @@
-import React, { PropTypes } from 'react';
 import { contain } from 'thundercats-react';
-import { Row, Thumbnail, Panel, Well } from 'react-bootstrap';
+import ShowJob from './ShowJob.jsx';
-import moment from 'moment';
-
-const thumbnailStyle = {
-  backgroundColor: 'white',
-  maxHeight: '100px',
-  maxWidth: '100px'
-};
 
 export default contain(
   {
@@ -28,61 +20,5 @@ export default contain(
       return job.id !== id;
     }
   },
-  React.createClass({
+  ShowJob
-    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>
-      );
-    },
-
-    render() {
-      const { job = {} } = this.props;
-      const {
-        logo,
-        position,
-        city,
-        company,
-        state,
-        email,
-        phone,
-        postedOn,
-        description
-      } = job;
-
-      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/components/ShowJob.jsx

@@ -0,0 +1,67 @@
+import React, { PropTypes } from 'react';
+import { Row, Thumbnail, Panel, Well } from 'react-bootstrap';
+import moment from 'moment';
+
+const thumbnailStyle = {
+  backgroundColor: 'white',
+  maxHeight: '100px',
+  maxWidth: '100px'
+};
+
+export default 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>
+    );
+  },
+
+  render() {
+    const { job = {} } = this.props;
+    const {
+      logo,
+      position,
+      city,
+      company,
+      state,
+      email,
+      phone,
+      postedOn,
+      description
+    } = job;
+
+    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/index.js

@@ -1,6 +1,7 @@
 import Jobs from './components/Jobs.jsx';
 import NewJob from './components/NewJob.jsx';
 import Show from './components/Show.jsx';
+import Preview from './components/Preview.jsx';
 
 /*
  *  index: /jobs list jobs
@@ -15,6 +16,9 @@ export default {
   }, {
     path: 'jobs/new',
     component: NewJob
+  }, {
+    path: 'jobs/new/preview',
+    component: Preview
   }, {
     path: 'jobs/:id',
     component: Show