<commit_before>import React, { Component, PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import marked from 'marked';
import { DragSource, DropTarget } from 'react-dnd';
import constants from '../constants';
import CheckList from './CheckList';
import {Link} from 'react-router';
import CardActionCreators from '../actions/CardActionCreators';
import { connect } from 'react-redux';

let titlePropType = (props, propName, componentName) => {
  if (props[propName]) {
    let value = props[propName];
    if (typeof value !== 'string' || value.length > 80) {
      return new Error(
        `${propName} in ${componentName} is longer than 80 characters`
      );
    }
  }
};

const cardDragSpec = {
  beginDrag(props) {
    return {
      id: props.id,
      status: props.status
    };
  },
  endDrag(props) {
    props.persistCardDrag(props);
  }
}

const cardDropSpec = {
  hover(props, monitor) {
    const draggedId = monitor.getItem().id;
    if(props.id !== draggedId){
      props.updateCardPosition(draggedId, props.id);
    }

  }
} 

let collectDrag = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource()
  };
}

let collectDrop = (connect, monitor) => {
  return {
    connectDropTarget: connect.dropTarget(),
  };
}

class Card extends Component {
  toggleDetails() {
    this.props.toggleCardDetails(this.props.id);
  }
  
  render() {
    const { connectDragSource, connectDropTarget } = this.props;

    let cardDetails;
    if (this.props.showDetails !== false) {
      cardDetails = (
        <div className="card__details">
          <span dangerouslySetInnerHTML={{__html:marked(this.props.description)}} />
            <CheckList cardId={this.props.id}
                       tasks={this.props.tasks}/>
        </div>
      );
    }

    let sideColor = {
      position: 'absolute',
      zIndex: -1,
      top: 0,
      bottom: 0,
      left: 0,
      width: 7,
      backgroundColor: this.props.color
    };

    return connectDropTarget(connectDragSource(
      <div className="card">
        <div style={sideColor} />
        <div className="card__edit"><Link to={'/edit/'+this.props.id}>✎</Link></div>
        <div className={
            this.props.showDetails !== false? "card__title card__title--is-open" : "card__title"
          } onClick={this.toggleDetails.bind(this)}>
          {this.props.title}
        </div>
        <ReactCSSTransitionGroup transitionName="toggle"
                                 transitionEnterTimeout={250}
                                 transitionLeaveTimeout={250}>
          {cardDetails}
        </ReactCSSTransitionGroup>
      </div>
    ));
  }
}
Card.propTypes = {
  id: PropTypes.number,
  title: titlePropType,
  description: PropTypes.string,
  color: PropTypes.string,
  tasks: PropTypes.arrayOf(PropTypes.object),
  connectDragSource: PropTypes.func.isRequired,
  connectDropTarget: PropTypes.func.isRequired
};

function mapDispatchToProps(dispatch) {
  return {
    persistCardDrag: (props) => CardActionCreators.persistCardDrag(props),
    updateCardPosition: (draggedId, id) => CardActionCreators.updateCardPosition(draggedId, id),
    toggleCardDetails: (id) => CardActionCreators.toggleCardDetails(id)
  }
}


const dragHighOrderCard = DragSource(constants.CARD, cardDragSpec, collectDrag)(Card);
const dragDropHighOrderCard = DropTarget(constants.CARD, cardDropSpec, collectDrop)(dragHighOrderCard);
export default connect(
  null,
  mapDispatchToProps
)(dragDropHighOrderCard);<commit_msg>Fixed bug. forgot dispatch<commit_after>import React, { Component, PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import marked from 'marked';
import { DragSource, DropTarget } from 'react-dnd';
import constants from '../constants';
import CheckList from './CheckList';
import {Link} from 'react-router';
import CardActionCreators from '../actions/CardActionCreators';
import { connect } from 'react-redux';

let titlePropType = (props, propName, componentName) => {
  if (props[propName]) {
    let value = props[propName];
    if (typeof value !== 'string' || value.length > 80) {
      return new Error(
        `${propName} in ${componentName} is longer than 80 characters`
      );
    }
  }
};

const cardDragSpec = {
  beginDrag(props) {
    return {
      id: props.id,
      status: props.status
    };
  },
  endDrag(props) {
    props.persistCardDrag(props);
  }
}

const cardDropSpec = {
  hover(props, monitor) {
    const draggedId = monitor.getItem().id;
    if(props.id !== draggedId){
      props.updateCardPosition(draggedId, props.id);
    }

  }
} 

let collectDrag = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource()
  };
}

let collectDrop = (connect, monitor) => {
  return {
    connectDropTarget: connect.dropTarget(),
  };
}

class Card extends Component {
  toggleDetails() {
    this.props.toggleCardDetails(this.props.id);
  }
  
  render() {
    const { connectDragSource, connectDropTarget } = this.props;

    let cardDetails;
    if (this.props.showDetails !== false) {
      cardDetails = (
        <div className="card__details">
          <span dangerouslySetInnerHTML={{__html:marked(this.props.description)}} />
            <CheckList cardId={this.props.id}
                       tasks={this.props.tasks}/>
        </div>
      );
    }

    let sideColor = {
      position: 'absolute',
      zIndex: -1,
      top: 0,
      bottom: 0,
      left: 0,
      width: 7,
      backgroundColor: this.props.color
    };

    return connectDropTarget(connectDragSource(
      <div className="card">
        <div style={sideColor} />
        <div className="card__edit"><Link to={'/edit/'+this.props.id}>✎</Link></div>
        <div className={
            this.props.showDetails !== false? "card__title card__title--is-open" : "card__title"
          } onClick={this.toggleDetails.bind(this)}>
          {this.props.title}
        </div>
        <ReactCSSTransitionGroup transitionName="toggle"
                                 transitionEnterTimeout={250}
                                 transitionLeaveTimeout={250}>
          {cardDetails}
        </ReactCSSTransitionGroup>
      </div>
    ));
  }
}
Card.propTypes = {
  id: PropTypes.number,
  title: titlePropType,
  description: PropTypes.string,
  color: PropTypes.string,
  tasks: PropTypes.arrayOf(PropTypes.object),
  connectDragSource: PropTypes.func.isRequired,
  connectDropTarget: PropTypes.func.isRequired
};

function mapDispatchToProps(dispatch) {
  return {
    persistCardDrag: (props) => dispatch(CardActionCreators.persistCardDrag(props)),
    updateCardPosition: (draggedId, id) => dispatch(CardActionCreators.updateCardPosition(draggedId, id)),
    toggleCardDetails: (id) => dispatch(CardActionCreators.toggleCardDetails(id))
  }
}

const dragHighOrderCard = DragSource(constants.CARD, cardDragSpec, collectDrag)(Card);
const dragDropHighOrderCard = DropTarget(constants.CARD, cardDropSpec, collectDrop)(dragHighOrderCard);
export default connect(
  null,
  mapDispatchToProps
)(dragDropHighOrderCard);
{'fraction_non_alphanumeric': 0.12867544105292636, 'fraction_numerical': 0.004200504060487258, 'mean_word_length': 3.1432714617169375, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '122064', 'n_tokens_mistral': 2150, 'n_tokens_neox': 2132, 'n_words': 428}