/* global $ */ import React, { PropTypes, Component } from 'react' import MetacodeSelect from '../MetacodeSelect' import Permission from './Permission' class Links extends Component { constructor(props) { super(props) this.state = { showMetacodeTitle: false, showMetacodeSelect: false, showInMaps: false, showMoreMaps: false, hoveringMapCount: false, hoveringSynapseCount: false } } handleMetacodeSelect = metacodeId => { this.setState({ showMetacodeSelect: false }) this.props.updateTopic({ metacode_id: metacodeId }) this.props.redrawCanvas() } toggleShowMoreMaps = e => { e.stopPropagation() e.preventDefault() this.setState({ showMoreMaps: !this.state.showMoreMaps }) } updateState = (key, value) => () => { this.setState({ [key]: value }) } inMaps = (topic) => { const inmapsArray = topic.get('inmaps') || [] const inmapsLinks = topic.get('inmapsLinks') || [] let firstFiveLinks = [] let extraLinks = [] for (let i = 0; i < inmapsArray.length; i ++) { if (i < 5) { firstFiveLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] }) } else { extraLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] }) } } let output = [] firstFiveLinks.forEach(obj => { output.push(
  • {obj.mapName}
  • ) }) if (extraLinks.length > 0) { if (this.state.showMoreMaps) { extraLinks.forEach(obj => { output.push(
  • {obj.mapName}
  • ) }) } const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...` output.push(
  • {text}
  • ) } return output } handleMetacodeBarClick = () => { if (this.state.showMetacodeTitle) { this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect }) } } render = () => { const { topic, ActiveMapper } = this.props const authorizedToEdit = topic.authorizeToEdit(ActiveMapper) const authorizedPermissionChange = topic.authorizePermissionChange(ActiveMapper) const metacode = topic.getMetacode() return (
    this.setState({ showMetacodeTitle: false, showMetacodeSelect: false })} onClick={this.handleMetacodeBarClick} >
    {metacode.get('name')}
    this.setState({ showMetacodeTitle: true })} />
    {topic.get('user_name')}
    {topic.get('map_count').toString()} {!this.state.showInMaps && this.state.hoveringMapCount && (
    Click to see which maps topic appears on
    )} {this.state.showInMaps &&
      {this.inMaps(topic)}
    }
    {topic.get('synapse_count').toString()} {this.state.hoveringSynapseCount &&
    Click to see this topics synapses
    }
    ) } } Links.propTypes = { topic: PropTypes.object, // backbone object ActiveMapper: PropTypes.object, updateTopic: PropTypes.func, metacodeSets: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, metacodes: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, icon_path: PropTypes.string, // url name: PropTypes.string })) })), redrawCanvas: PropTypes.func } export default Links