Obscures howToApply

common/app/flux/Actions.js

@@ -8,11 +8,19 @@ export default Actions({
     return { title: title + '| Free Code Camp' };
   },
 
-  setUser({ username, picture, progressTimestamps = [] }) {
+  setUser({
+    username,
+    picture,
+    progressTimestamps = [],
+    isFrontEndCert,
+    isFullStackCert
+  }) {
     return {
       username,
       picture,
-      points: progressTimestamps.length
+      points: progressTimestamps.length,
+      isFrontEndCert,
+      isFullStackCert
     };
   },
 

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

@@ -6,12 +6,49 @@ import ShowJob from './ShowJob.jsx';
 import JobNotFound from './JobNotFound.jsx';
 import { isJobValid } from '../utils';
 
+function shouldShowJob(
+  {
+    isFrontEndCert: isFrontEndCertReq = false,
+    isFullStackCert: isFullStackCertReq = false
+  }, {
+    isFrontEndCert = false,
+    isFullStackCert = false
+  }
+) {
+  return (!isFrontEndCertReq && !isFullStackCertReq) ||
+    (isFullStackCertReq && isFullStackCert) ||
+    (isFrontEndCertReq && isFrontEndCert);
+}
+
+function generateMessage(
+  {
+    isFrontEndCert: isFrontEndCertReq = false
+  }, {
+    isFrontEndCert = false,
+    isSignedIn = false
+  }
+) {
+
+  if (!isSignedIn) {
+    return 'Must be singed in to apply';
+  }
+  if (isFrontEndCertReq && !isFrontEndCert) {
+    return 'Job requires applicant be Front End Certified';
+  }
+  return 'Job requires applicant be Full Stack Certified';
+}
+
 export default contain(
   {
-    store: 'jobsStore',
+    stores: ['appStore', 'jobsStore'],
+    fetchWaitFor: 'jobsStore',
     fetchAction: 'jobActions.getJob',
-    map({ currentJob }) {
+    combineLatest({ isFrontEndCert, isFullStackCert }, { currentJob }) {
-      return { job: currentJob };
+      return {
+        job: currentJob,
+        isFrontEndCert,
+        isFullStackCert
+      };
     },
     getPayload({ params: { id }, job = {} }) {
       return {
@@ -39,12 +76,23 @@ export default contain(
     },
 
     render() {
-      const { job } = this.props;
+      const {
+        isFullStackCert,
+        isFrontEndCert,
+        job,
+        username
+      } = this.props;
+      const isSignedIn = !!username;
 
       if (!isJobValid(job)) {
         return <JobNotFound />;
       }
-      return <ShowJob { ...this.props }/>;
+      return (
+        <ShowJob
+          message={ generateMessage(job, { isFrontEndCert, isSignedIn }) }
+          showApply={ shouldShowJob(job, { isFrontEndCert, isFullStackCert }) }
+          { ...this.props }/>
+      );
     }
   })
 );

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

@@ -22,7 +22,9 @@ export default React.createClass({
   displayName: 'ShowJob',
   propTypes: {
     job: PropTypes.object,
-    params: PropTypes.object
+    params: PropTypes.object,
+    showApply: PropTypes.bool,
+    message: PropTypes.string
   },
 
   renderHeader({ company, position }) {
@@ -38,8 +40,42 @@ export default React.createClass({
     );
   },
 
+  renderHowToApply(showApply, message, howToApply) {
+    if (!showApply) {
+      return (
+        <Row>
+            <Col
+              md={ 6 }
+              mdOffset={ 3 }>
+              <h4>{ message }</h4>
+            </Col>
+        </Row>
+      );
+    }
+
+    return (
+      <Row>
+          <Col
+            md={ 6 }
+            mdOffset={ 3 }>
+              <bold>How do I apply?</bold>
+              <br />
+              <br />
+              <span dangerouslySetInnerHTML={{
+                __html: addATags(howToApply)
+              }} />
+          </Col>
+      </Row>
+    );
+  },
+
   render() {
-    const { job = {} } = this.props;
+    const {
+      showApply,
+      message,
+      job = {}
+    } = this.props;
+
     const {
       logo,
       position,
@@ -94,18 +130,7 @@ export default React.createClass({
                 </Col>
               </Row>
               <Well>
-                <Row>
+                { this.renderHowToApply(showApply, message, howToApply) }
-                    <Col
-                      md={ 6 }
-                      mdOffset={ 3 }>
-                        <bold>How do I apply?</bold>
-                        <br />
-                        <br />
-                        <span dangerouslySetInnerHTML={{
-                          __html: addATags(howToApply)
-                        }} />
-                    </Col>
-                </Row>
               </Well>
             </Panel>
           </Col>