From d8e8f3bb67982ffab614de6236695a6470b0eb3b Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <Berkeley@robotie.com>
Date: Mon, 14 Sep 2015 13:06:27 -0700
Subject: [PATCH] add `create job` modal

---
 .../routes/Jobs/components/CreateJobModal.jsx | 33 +++++++++++++++++++
 common/app/routes/Jobs/components/Jobs.jsx    | 23 ++++++++++---
 common/app/routes/Jobs/flux/Actions.js        |  6 ++++
 common/app/routes/Jobs/flux/Store.js          | 12 +++++--
 4 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 common/app/routes/Jobs/components/CreateJobModal.jsx

diff --git a/common/app/routes/Jobs/components/CreateJobModal.jsx b/common/app/routes/Jobs/components/CreateJobModal.jsx
new file mode 100644
index 0000000000..d3e6d34581
--- /dev/null
+++ b/common/app/routes/Jobs/components/CreateJobModal.jsx
@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+import { Button, Modal } from 'react-bootstrap';
+
+export default React.createClass({
+  displayName: 'CreateJobsModal',
+  propTypes: {
+    onHide: PropTypes.func,
+    showModal: PropTypes.bool
+  },
+
+  render() {
+    const {
+      showModal,
+      onHide
+    } = this.props;
+
+    return (
+      <Modal
+        onHide={ onHide }
+        show={ showModal }>
+        <Modal.Body>
+          <h4>Welcome to Free Code Camp's board</h4>
+          <p>We post jobs specifically target to our junior developers.</p>
+          <Button
+            block={ true }
+            className='signup-btn'>
+            Post a Job
+          </Button>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+});
diff --git a/common/app/routes/Jobs/components/Jobs.jsx b/common/app/routes/Jobs/components/Jobs.jsx
index 6c40cf6b0c..a4d8354b3f 100644
--- a/common/app/routes/Jobs/components/Jobs.jsx
+++ b/common/app/routes/Jobs/components/Jobs.jsx
@@ -2,6 +2,8 @@ import React, { cloneElement, PropTypes } from 'react';
 import { contain } from 'thundercats-react';
 import { History } from 'react-router';
 import { Button, Jumbotron, Row } from 'react-bootstrap';
+
+import CreateJobModal from './CreateJobModal.jsx';
 import ListJobs from './List.jsx';
 
 export default contain(
@@ -13,12 +15,14 @@ export default contain(
   React.createClass({
     displayName: 'Jobs',
 
+    mixins: [History],
+
     propTypes: {
       children: PropTypes.element,
       jobActions: PropTypes.object,
-      jobs: PropTypes.array
+      jobs: PropTypes.array,
+      showModal: PropTypes.bool
     },
-    mixins: [History],
 
     handleJobClick(id) {
       const { jobActions } = this.props;
@@ -48,7 +52,12 @@ export default contain(
     },
 
     render() {
-      const { children, jobs } = this.props;
+      const {
+        children,
+        jobs,
+        showModal,
+        jobActions
+      } = this.props;
 
       return (
         <div>
@@ -62,7 +71,8 @@ export default contain(
               </p>
               <Button
                 bsSize='large'
-                className='signup-btn'>
+                className='signup-btn'
+                onClick={ jobActions.openModal }>
                 Try the first month 20% off!
               </Button>
             </Jumbotron>
@@ -70,7 +80,10 @@ export default contain(
           <Row>
             { this.renderChild(children, jobs) ||
               this.renderList(this.handleJobClick, jobs) }
-            </Row>
+          </Row>
+          <CreateJobModal
+            onHide={ jobActions.closeModal }
+            showModal={ showModal } />
         </div>
       );
     }
diff --git a/common/app/routes/Jobs/flux/Actions.js b/common/app/routes/Jobs/flux/Actions.js
index ce31070736..40c78025d0 100644
--- a/common/app/routes/Jobs/flux/Actions.js
+++ b/common/app/routes/Jobs/flux/Actions.js
@@ -31,6 +31,12 @@ export default Actions({
   getJob: null,
   getJobs(params) {
     return { params };
+  },
+  openModal() {
+    return { showModal: true };
+  },
+  closeModal() {
+    return { showModal: false };
   }
 })
   .refs({ displayName: 'JobActions' })
diff --git a/common/app/routes/Jobs/flux/Store.js b/common/app/routes/Jobs/flux/Store.js
index 2fdfa50207..abe3eb61cc 100644
--- a/common/app/routes/Jobs/flux/Store.js
+++ b/common/app/routes/Jobs/flux/Store.js
@@ -6,12 +6,20 @@ const {
   transformer
 } = Store;
 
-export default Store()
+export default Store({ showModal: false })
   .refs({ displayName: 'JobsStore' })
   .init(({ instance: jobsStore, args: [cat] }) => {
-    const { setJobs, findJob, setError } = cat.getActions('JobActions');
+    const {
+      setJobs,
+      findJob,
+      setError,
+      openModal,
+      closeModal
+    } = cat.getActions('JobActions');
     const register = createRegistrar(jobsStore);
     register(setter(setJobs));
     register(transformer(findJob));
     register(setter(setError));
+    register(setter(openModal));
+    register(setter(closeModal));
   });