metamaps--metamaps/frontend/src/components/Maps/MapCard.js

75 lines
2.6 KiB
JavaScript
Raw Normal View History

import React, { Component, PropTypes } from 'react'
class MapCard extends Component {
render = () => {
const { map, currentUser } = this.props
2016-10-07 16:31:32 +00:00
function capitalize (string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
const n = map.get('name')
const d = map.get('desc')
const maxNameLength = 32
const maxDescLength = 118
const truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : ''
const truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : ''
const editPermission = map.authorizeToEdit(currentUser) ? 'canEdit' : 'cannotEdit'
2016-10-07 16:31:32 +00:00
return (
<div className="map" id={ map.id }>
<a href={ '/maps/' + map.id } data-router="true">
<div className={ 'permission ' + editPermission }>
2016-10-07 16:31:32 +00:00
<div className="mapCard">
<span className="title" title={ map.get('name') }>
{ truncatedName }
</span>
<div className="mapScreenshot">
<img src={ map.get('screenshot_url') } />
</div>
<div className="scroll">
<div className="desc">
{ truncatedDesc }
<div className="clearfloat"></div>
</div>
</div>
<div className="mapMetadata">
<div className="metadataSection">
<span className="cCountColor">
{ map.get('contributor_count') }
</span>
{ map.get('contributor_count') === 1 ? ' contributor' : ' contributors' }
</div>
<div className="metadataSection">
<span className="tCountColor">
{ map.get('topic_count') }
</span>
{ map.get('topic_count') === 1 ? ' topic' : ' topics' }
2016-10-07 16:31:32 +00:00
</div>
<div className="metadataSection mapPermission">
{ map.get('permission') ? capitalize(map.get('permission')) : 'Commons' }
</div>
<div className="metadataSection">
<span className="sCountColor">
{ map.get('synapse_count') }
</span>
{ map.get('synapse_count') === 1 ? ' synapse' : ' synapses' }
</div>
<div className="clearfloat"></div>
2016-10-07 16:31:32 +00:00
</div>
</div>
</div>
</a>
</div>
)
}
}
MapCard.propTypes = {
map: PropTypes.object.isRequired,
currentUser: PropTypes.object
}
export default MapCard