gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remove container from list component

Browse Source
This commit is contained in:
Berkeley Martinez
2015-09-07 23:52:21 -07:00
parent 451c3acb2e
commit f26bb16855
1 changed files with 70 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
common/app/routes/Jobs/components/List.jsx
View File

@ -1,82 +1,77 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { contain } from 'thundercats-react';
import { PanelGroup, Thumbnail, Panel, Well } from 'react-bootstrap'; import { PanelGroup, Thumbnail, Panel, Well } from 'react-bootstrap';
import moment from 'moment'; import moment from 'moment';
export default contain( export default React.createClass({
{ displayName: 'ListJobs',
propTypes: {
jobs: PropTypes.array
}, },
React.createClass({
displayName: 'ListJobs',
propTypes: { renderJobs(jobs =[]) {
jobs: PropTypes.array const thumbnailStyle = {
}, backgroundColor: 'white',
maxHeight: '100px',
renderJobs(jobs =[]) { maxWidth: '100px'
const thumbnailStyle = { };
backgroundColor: 'white', return jobs.map((
maxHeight: '100px', {
maxWidth: '100px' id,
}; company,
return jobs.map(( position,
{ description,
id, logo,
company, city,
position, state,
description, email,
logo, phone,
city, postedOn
state, },
email, index
phone, ) => {
postedOn const header = (
}, <div>
index <h4 style={{ display: 'inline-block' }}>{ company }</h4>
) => { <h5
const header = ( className='pull-right hidden-xs hidden-md'
<div> style={{ display: 'inline-block' }}>
<h4 style={{ display: 'inline-block' }}>{ company }</h4> { position }
<h5 </h5>
className='pull-right hidden-xs hidden-md' </div>
style={{ display: 'inline-block' }}>
{ position }
</h5>
</div>
);
return (
<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>{ description }</p>
</Well>
</Panel>
);
});
},
render() {
const { jobs } = this.props;
return (
<PanelGroup>
{ this.renderJobs(jobs) }
</PanelGroup>
); );
} return (
}) <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>{ description }</p>
</Well>
</Panel>
);
});
},
render() {
const { jobs } = this.props;
return (
<PanelGroup>
{ this.renderJobs(jobs) }
</PanelGroup>
);
}
});