add create job modal

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>
+    );
+  }
+});

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>
@@ -71,6 +81,9 @@ export default contain(
             { this.renderChild(children, jobs) ||
               this.renderList(this.handleJobClick, jobs) }
           </Row>
+          <CreateJobModal
+            onHide={ jobActions.closeModal }
+            showModal={ showModal } />
         </div>
       );
     }

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' })

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));
   });