Adds paypal button and completes the number of views

client/index.js

@@ -27,7 +27,7 @@ app$({ history, location: appLocation })
   .flatMap(
     ({ AppCat }) => {
       // instantiate the cat with service
-      const appCat = AppCat(null, services);
+      const appCat = AppCat(null, services, history);
       // hydrate the stores
       return hydrate(appCat, catState)
         .map(() => appCat);

common/app/Cat.js

@@ -5,13 +5,13 @@ import { HikesActions, HikesStore } from './routes/Hikes/flux';
 import { JobActions, JobsStore} from './routes/Jobs/flux';
 
 export default Cat()
-  .init(({ instance: cat, args: [services] }) => {
+  .init(({ instance: cat, args: [services, history] }) => {
-    cat.register(AppActions, null, services);
+    cat.register(AppActions, null, services, history);
     cat.register(AppStore, null, cat);
 
     cat.register(HikesActions, null, services);
     cat.register(HikesStore, null, cat);
 
-    cat.register(JobActions, null, services);
+    cat.register(JobActions, null, cat, services);
     cat.register(JobsStore, null, cat);
   });

common/app/flux/Actions.js

@@ -16,10 +16,20 @@ export default Actions({
     };
   },
 
-  getUser: null
+  getUser: null,
+  goTo: null,
+  goBack: null
 })
   .refs({ displayName: 'AppActions' })
-  .init(({ instance: appActions, args: [services] }) => {
+  .init(({ instance: appActions, args: [services, history] }) => {
+    appActions.goTo.subscribe((url) => {
+      history.pushState(null, url);
+    });
+
+    appActions.goBack.subscribe(() => {
+      history.goBack();
+    });
+
     appActions.getUser.subscribe(({ isPrimed }) => {
       if (isPrimed) {
         debug('isPrimed');

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

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react';
+import { Col, Well, Row } from 'react-bootstrap';
+import { contain } from 'thundercats-react';
+
+export default contain(
+  {
+    store: 'JobsStore',
+    actions: 'JobActions',
+    map({ job: { id } = {} }) {
+      return { id };
+    }
+  },
+  React.createClass({
+    displayName: 'GoToPayPal',
+
+    propTypes: {
+      id: PropTypes.string
+    },
+
+    render() {
+      const { id } = this.props;
+      return (
+        <div>
+          <Row>
+            <Col
+              xs={ 12 }
+              sm={ 8 }
+              smOffset={ 2 }
+              md={ 6 }
+              mdOffset={ 3 }>
+              <Well>
+                <form
+                  action='https://www.sandbox.paypal.com/cgi-bin/webscr'
+                  method='post'
+                  target='_top'>
+                  <input
+                    name='cmd'
+                    type='hidden'
+                    value='_s-xclick' />
+                  <input
+                      name='hosted_button_id'
+                      type='hidden'
+                      value='ZVU498PLMPHKU' />
+                  <input
+                    alt='PayPal - The safer, easier way to pay online!'
+                    border='0'
+                    name='submit'
+                    src={
+                      'https://www.sandbox.paypal.com/' +
+                      'en_US/i/btn/btn_buynowCC_LG.gif'
+                    }
+                    type='image' />
+                  <input
+                    name='custom'
+                    type='hidden'
+                    value={ '' + id } />
+                  <img
+                    alt=''
+                    border='0'
+                    height='1'
+                    src='https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif'
+                    width='1' />
+                </form>
+              </Well>
+            </Col>
+          </Row>
+        </div>
+      );
+    }
+  })
+);

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

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import { Well, Row } from 'react-bootstrap';
+
+export default React.createClass({
+  displayName: 'NewJobCompleted',
+  propTypes: {
+  },
+  render() {
+    return (
+      <div>
+        <Row>
+          <Well>
+            Congrats!
+          </Well>
+        </Row>
+      </div>
+    );
+  }
+});

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

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import { History } from 'react-router';
 import { Well, Button, Row } from 'react-bootstrap';
 import { contain } from 'thundercats-react';
 import ShowJob from './ShowJob.jsx';
@@ -7,7 +6,10 @@ import ShowJob from './ShowJob.jsx';
 export default contain(
   {
     store: 'JobsStore',
-    actions: 'JobActions',
+    actions: [
+      'appActions',
+      'jobActions'
+    ],
     map({ form: job = {} }) {
       return { job };
     }
@@ -15,15 +17,14 @@ export default contain(
   React.createClass({
     displayName: 'Preview',
 
-    mixins: [History],
-
     propTypes: {
-      job: PropTypes.object
+      appActions: PropTypes.object,
+      job: PropTypes.object,
+      jobActions: PropTypes.object
     },
 
     render() {
-      const { job } = this.props;
+      const { appActions, job, jobActions } = this.props;
-      const { history } = this;
       return (
         <div>
           <ShowJob job={ job } />
@@ -31,12 +32,18 @@ export default contain(
             <Well>
               <Button
                 block={ true }
-                className='signup-btn' >
+                className='signup-btn'
+                onClick={ () => {
+                  jobActions.saveJobToDb({
+                    goTo: '/jobs/new/check-out',
+                    job
+                  });
+                }}>
                 Looks great! Let's Check Out
               </Button>
               <Button
                 block={ true }
-                onClick={ () => history.goBack() } >
+                onClick={ () => appActions.goBack() } >
                 Head back and make edits
               </Button>
             </Well>

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

@@ -31,6 +31,7 @@ export default Actions({
   },
   setError: null,
   getJob: null,
+  saveJobToDb: null,
   getJobs(params) {
     return { params };
   },
@@ -61,7 +62,7 @@ export default Actions({
   }
 })
   .refs({ displayName: 'JobActions' })
-  .init(({ instance: jobActions, args: [services] }) => {
+  .init(({ instance: jobActions, args: [cat, services] }) => {
     jobActions.getJobs.subscribe(() => {
       services.read('jobs', null, null, (err, jobs) => {
         if (err) {
@@ -100,5 +101,17 @@ export default Actions({
         jobActions.setForm(job);
       }
     });
+
+    jobActions.saveJobToDb.subscribe(({ goTo, job }) => {
+      const appActions = cat.getActions('appActions');
+      services.create('jobs', { job }, null, (err, job) => {
+        if (err) {
+          debug('job services experienced an issue', err);
+          return jobActions.setError(err);
+        }
+        jobActions.setJobs({ job });
+        appActions.goTo(goTo);
+      });
+    });
     return jobActions;
   });

common/app/routes/Jobs/index.js

@@ -2,6 +2,8 @@ import Jobs from './components/Jobs.jsx';
 import NewJob from './components/NewJob.jsx';
 import Show from './components/Show.jsx';
 import Preview from './components/Preview.jsx';
+import GoToPayPal from './components/GoToPayPal.jsx';
+import NewJobCompleted from './components/NewJobCompleted.jsx';
 
 /*
  *  index: /jobs list jobs
@@ -19,6 +21,12 @@ export default {
   }, {
     path: 'jobs/new/preview',
     component: Preview
+  }, {
+    path: 'jobs/new/check-out',
+    component: GoToPayPal
+  }, {
+    path: 'jobs/new/completed',
+    component: NewJobCompleted
   }, {
     path: 'jobs/:id',
     component: Show

server/services/job.js

@@ -3,7 +3,15 @@ export default function getJobServices(app) {
 
   return {
     name: 'jobs',
-    read: (req, resource, params, config, cb) => {
+    create(req, resource, { job } = {}, body, config, cb) {
+      if (!job) {
+        return cb(new Error('job creation should get a job object'));
+      }
+      Job.create(job, (err, savedJob) => {
+        cb(err, savedJob);
+      });
+    },
+    read(req, resource, params, config, cb) {
       const id = params ? params.id : null;
       if (id) {
         return Job.findById(id, cb);