Merge pull request freeCodeCamp#3232 from FreeCodeCamp/feature/jobs

add individual pages to jobs
LayfonBushin · Sep 11, 2015 · b21c0a3 · b21c0a3
2 parents ef5715f + 7741b30
commit b21c0a3
Show file tree

Hide file tree

Showing 15 changed files with 374 additions and 175 deletions.
diff --git a/client/es6-shims.js b/client/es6-shims.js
@@ -0,0 +1,2 @@
+require('object.assign').shim();
+require('es6-map/implement');
diff --git a/client/index.js b/client/index.js
@@ -1,3 +1,4 @@
+import unused from './es6-shims'; // eslint-disable-line
 import Rx from 'rx';
 import React from 'react';
 import Fetchr from 'fetchr';

diff --git a/common/app/app-stream.jsx b/common/app/app-stream.jsx
@@ -1,5 +1,4 @@
 import Rx from 'rx';
-import assign from 'object.assign';
 import { Router } from 'react-router';
 import App from './App.jsx';
 import AppCat from './Cat';
@@ -8,7 +7,7 @@ import childRoutes from './routes';
 
 const router$ = Rx.Observable.fromNodeCallback(Router.run, Router);
 
-const routes = assign({ components: App }, childRoutes);
+const routes = Object.assign({ components: App }, childRoutes);
 
 export default function app$(location) {
   return router$(routes, location)

diff --git a/common/app/routes/Hikes/flux/Actions.js b/common/app/routes/Hikes/flux/Actions.js
@@ -1,5 +1,4 @@
 import { Actions } from 'thundercats';
-import assign from 'object.assign';
 import debugFactory from 'debug';
 
 const debug = debugFactory('freecc:hikes:actions');
@@ -45,7 +44,7 @@ export default Actions({
                 dashedName,
                 oldState.currentHike
               );
-              return assign({}, oldState, { currentHike });
+              return Object.assign({}, oldState, { currentHike });
             }
           });
         }

diff --git a/common/app/routes/Jobs/components/Jobs.jsx b/common/app/routes/Jobs/components/Jobs.jsx
@@ -1,23 +1,39 @@
 import React, { cloneElement, PropTypes } from 'react';
 import { contain } from 'thundercats-react';
+import { Navigation } from 'react-router';
 import { Button, Jumbotron, Row } from 'react-bootstrap';
 import ListJobs from './List.jsx';
 
 export default contain(
   {
     store: 'jobsStore',
-    fetchAction: 'jobActions.getJobs'
+    fetchAction: 'jobActions.getJobs',
+    actions: 'jobActions'
   },
   React.createClass({
     displayName: 'Jobs',
+
     propTypes: {
       children: PropTypes.element,
+      jobActions: PropTypes.object,
       jobs: PropTypes.array
     },
+    mixins: [Navigation],
+
+    handleJobClick(id) {
+      const { jobActions } = this.props;
+      if (!id) {
+        return null;
+      }
+      jobActions.findJob(id);
+      this.transitionTo(`/jobs/${id}`);
+    },
 
-    renderList(jobs) {
+    renderList(handleJobClick, jobs) {
       return (
-        <ListJobs jobs={ jobs }/>
+        <ListJobs
+          handleClick={ handleJobClick }
+          jobs={ jobs }/>
       );
     },
 
@@ -53,7 +69,7 @@ export default contain(
           </Row>
           <Row>
             { this.renderChild(children, jobs) ||
-              this.renderList(jobs) }
+              this.renderList(this.handleJobClick, jobs) }
             </Row>
         </div>
       );

diff --git a/common/app/routes/Jobs/components/List.jsx b/common/app/routes/Jobs/components/List.jsx
@@ -1,81 +1,83 @@
 import React, { PropTypes } from 'react';
-import { contain } from 'thundercats-react';
 import { PanelGroup, Thumbnail, Panel, Well } from 'react-bootstrap';
 import moment from 'moment';
 
-export default contain(
-  {
-  },
-  React.createClass({
-    displayName: 'ListJobs',
+export default React.createClass({
+  displayName: 'ListJobs',
 
-    propTypes: {
-      jobs: PropTypes.array
-    },
+  propTypes: {
+    handleClick: PropTypes.func,
+    jobs: PropTypes.array
+  },
 
-    renderJobs(jobs =[]) {
-      const thumbnailStyle = {
-        backgroundColor: 'white',
-        maxHeight: '100px',
-        maxWidth: '100px'
-      };
-      return jobs.map((
-        {
-          id,
-          company,
-          position,
-          description,
-          logo,
-          city,
-          state,
-          email,
-          phone,
-          postedOn
-        },
-        index
-      ) => {
-        const header = (
-          <div>
-            <h4 style={{ display: 'inline-block' }}>{ company }</h4>
-            <h5
-              className='pull-right hidden-xs hidden-md'
-              style={{ display: 'inline-block' }}>
-              { position }
-            </h5>
-          </div>
-        );
-        return (
-          <Panel
-            collapsible={ true }
-            eventKey={ index }
-            header={ header }
-            key={ id }>
-            <Well>
-              <Thumbnail
-                alt='200x200' 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>
-          </Panel>
-        );
-      });
-    },
+  renderJobs(handleClick, jobs =[]) {
+    const thumbnailStyle = {
+      backgroundColor: 'white',
+      maxHeight: '100px',
+      maxWidth: '100px'
+    };
 
-    render() {
-      const { jobs } = this.props;
+    return jobs.map((
+      {
+        id,
+        company,
+        position,
+        description,
+        logo,
+        city,
+        state,
+        email,
+        phone,
+        postedOn
+      },
+      index
+    ) => {
+      const header = (
+        <div>
+          <h4 style={{ display: 'inline-block' }}>{ company }</h4>
+          <h5
+            className='pull-right hidden-xs hidden-md'
+            style={{ display: 'inline-block' }}>
+            { position }
+          </h5>
+        </div>
+      );
       return (
-        <PanelGroup>
-          { this.renderJobs(jobs) }
-        </PanelGroup>
+        <Panel
+          collapsible={ true }
+          eventKey={ index }
+          header={ header }
+          key={ id }>
+          <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 onClick={ () => handleClick(id) }>{ description }</p>
+          </Well>
+        </Panel>
       );
-    }
-  })
-);
+    });
+  },
+
+  render() {
+    const {
+      handleClick,
+      jobs
+    } = this.props;
+
+    return (
+      <PanelGroup>
+        { this.renderJobs(handleClick, jobs) }
+      </PanelGroup>
+    );
+  }
+});
diff --git a/common/app/routes/Jobs/components/Show.jsx b/common/app/routes/Jobs/components/Show.jsx
@@ -1,59 +1,88 @@
 import React, { PropTypes } from 'react';
-import { Thumbnail, Panel, Well } from 'react-bootstrap';
+import { contain } from 'thundercats-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
-  },
 
-  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>
-    );
+export default contain(
+  {
+    store: 'jobsStore',
+    fetchAction: 'jobActions.getJob',
+    map({ currentJob }) {
+      return { job: currentJob };
+    },
+    getPayload({ params: { id }, job = {} }) {
+      return {
+        id,
+        isPrimed: job.id === id
+      };
+    },
+    // using es6 destructuring
+    shouldContainerFetch({ job = {} }, { params: { id } }
+    ) {
+      return job.id !== id;
+    }
   },
+  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,
-      state,
-      email,
-      phone,
-      postedOn,
-      description
-    } = job;
+    render() {
+      const { job = {} } = this.props;
+      const {
+        logo,
+        position,
+        city,
+        company,
+        state,
+        email,
+        phone,
+        postedOn,
+        description
+      } = job;
 
-    return (
-      <Well>
-        <Thumbnail
-          alt='200x200' 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>
-    );
-  }
-});
+      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>
+      );
+    }
+  })
+);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		require('object.assign').shim();
		require('es6-map/implement');