<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import CardComments from './Card_Comments';
import CardAssignees from './Card_Assignees';
import styles from './issueCards.css';
import { closeUserIssue } from '../../actions/githubActions/closeIssueAction';
import { fetchUserComments } from '../../actions/githubActions/getIssueCommentsAction';
import ModalIssueComment from '../Modal/comment_modal';
import { addUserComment } from '../../actions/githubActions/addCommentAction';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Card, CardActions, CardHeader, CardTitle, CardText } from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

class IssueCard extends Component {
  state = {
    isShowingModal: false,
    issuesLoaded: false,
    commentsLoaded: false,
    issues: null,
    issueComments: null,
    newCommentText: '',
    currentIssueNumber: '',
    expandedCards: {},
  }
  handleCardExpansionChange = (issueNum) => {
    const expansionValue = !this.state.expandedCards[issueNum].expanded;
    let newObjGroup = this.state.expandedCards;
    newObjGroup = Object.assign({}, newObjGroup, { [issueNum]: { expanded: expansionValue } });
    this.setState({ expandedCards: newObjGroup });
  }
  handleCardExpansion = () => {
    let objGroup = {};
    this.props.issues.map((issue) => {
      objGroup = Object.assign({}, objGroup, { [issue.number]: { expanded: false } });
    });
    this.setState({ expandedCards: objGroup });
  }
  componentDidMount() {
    // console.log('INTIAL COMMENTS DATA TO SEND OFF ', this.props.repoOwner, this.props.repoName);
    this.props.issues.map((issue) => {
      this.props.fetchUserComments(this.props.repoOwner, this.props.repoName, issue.number, this.props.git_token);
    });
    this.handleCardExpansion();
  }
  componentWillReceiveProps(nextProps) {
    // console.log(' WHEN DO WE GET NEW ISSUES?', nextProps.issueComments);
    // console.log("this should show projects connected in state", nextProps.currentProject);
    const { issueComments, issues, repoName, repoOwner } = nextProps;
    // this.setState({ issueComments });
    // console.log('Here are next props in Issue card', repoName, repoOwner);
    const commentsLength = Object.keys(issueComments).length;
    const issuesLength = issues.length;
    if (this.state.issues !== null) {
      if (this.state.issues.length !== issues.length) {
        this.setState({ issues });
      }
    }
    if (commentsLength === issuesLength) {
      // console.log('Issues in Issue Card from next props', issues);
      this.setState({ issueComments, issues, commentsLoaded: true, issuesLoaded: true });
    }
    if (this.state.issueComments !== null) {
      if (issueComments.length !== this.state.issueComments.length) {
        this.setState({ issueComments });
      }
    }
  }
modifyTextState = (event) => {
  this.setState({ newCommentText: event.target.value });
}
handleAddNewComment = () => {
  const { currentIssue } = this.state;
  this.props.addUserComment(this.props.repoOwner, this.props.repoName, currentIssue, this.state.newCommentText, this.props.git_token);
  this.setState({ newCommentText: '' });
  this.handleClose();
}
handleClick = (currentIssue) => this.setState({ isShowingModal: true, currentIssue })
handleClose = () => this.setState({ isShowingModal: false })
handleCloseIssue = (login, repoName, issueNum, token) => {
// console.log('PASSING TO CLOSE ISSUE', login, repoName, issueNum, token);
  this.props.closeUserIssue(login, repoName, issueNum, token);
}
shouldComponentUpdate(nextProps, nextState) {
  return true;
}
render() {
  console.log('Expanded card State', this.state.expandedCards);
  const { issuesLoaded, commentsLoaded, issues, issueComments, isShowingModal } = this.state;
  const assigneeData = this.props.issues.map((issue, i) => issue.assignees);
  if (issuesLoaded && commentsLoaded) {
    // console.log(this.state.issues, 'THESE ARE MY ISSUES PASSED TO ISSUE CARD RENDER AREA');
    if (isShowingModal) {
      return (
        <div>
          <ModalIssueComment
            changeHandler={this.modifyTextState}
            handleClick={this.handleClick}
            handleClose={this.handleClose}
            isShowingModal={this.state.isShowingModal}
            value={this.state.newCommentText}
            handleAddComment={this.handleAddNewComment}
          />
        </div>
      );
    }
    return (
      <div className={styles.mainCont}>
        {issues.map((issue) => (

          <MuiThemeProvider key={issue.id}>
            <Card style={{ width: 350, height: 'auto', margin: 10 }} expanded={this.state.expandedCards[issue.number].expanded} onExpandChange={() => this.handleCardExpansionChange(issue.number)}>
              <CardHeader
                title={issue.title}
                subtitle={`Issue #${issue.number} Opened By ${issue.user.login}`}
                avatar={issue.user.avatar_url}
                actAsExpander={true}
                showExpandableButton={true}
              />
              <CardComments expandable={true} issueComments={issueComments[issue.number]} />

              <CardActions expandable={true}>
                <FlatButton label="Action1" />
                <FlatButton label="Action2" />
              </CardActions><commit_msg>comment and close buttons are working, unfortunately I am still getting the re render error I got before, looks like this could have been all for naught but it looks prettier, super sad panda face....<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import CardComments from './Card_Comments';
import CardAssignees from './Card_Assignees';
import styles from './issueCards.css';
import { closeUserIssue } from '../../actions/githubActions/closeIssueAction';
import { fetchUserComments } from '../../actions/githubActions/getIssueCommentsAction';
import ModalIssueComment from '../Modal/comment_modal';
import { addUserComment } from '../../actions/githubActions/addCommentAction';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Card, CardActions, CardHeader, CardTitle, CardText } from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

class IssueCard extends Component {
  state = {
    isShowingModal: false,
    issuesLoaded: false,
    commentsLoaded: false,
    issues: null,
    issueComments: null,
    newCommentText: '',
    currentIssueNumber: '',
    expandedCards: {},
  }
  handleCardExpansionChange = (issueNum) => {
    const expansionValue = !this.state.expandedCards[issueNum].expanded;
    let newObjGroup = this.state.expandedCards;
    newObjGroup = Object.assign({}, newObjGroup, { [issueNum]: { expanded: expansionValue } });
    this.setState({ expandedCards: newObjGroup });
  }
  handleCardExpansion = () => {
    let objGroup = {};
    this.props.issues.map((issue) => {
      objGroup = Object.assign({}, objGroup, { [issue.number]: { expanded: false } });
    });
    this.setState({ expandedCards: objGroup });
  }
  componentDidMount() {
    // console.log('INTIAL COMMENTS DATA TO SEND OFF ', this.props.repoOwner, this.props.repoName);
    this.props.issues.map((issue) => {
      this.props.fetchUserComments(this.props.repoOwner, this.props.repoName, issue.number, this.props.git_token);
    });
    this.handleCardExpansion();
  }
  componentWillReceiveProps(nextProps) {
    // console.log(' WHEN DO WE GET NEW ISSUES?', nextProps.issueComments);
    // console.log("this should show projects connected in state", nextProps.currentProject);
    const { issueComments, issues, repoName, repoOwner } = nextProps;
    // this.setState({ issueComments });
    // console.log('Here are next props in Issue card', repoName, repoOwner);
    const commentsLength = Object.keys(issueComments).length;
    const issuesLength = issues.length;
    if (this.state.issues !== null) {
      if (this.state.issues.length !== issues.length) {
        this.setState({ issues });
      }
    }
    if (commentsLength === issuesLength) {
      // console.log('Issues in Issue Card from next props', issues);
      this.setState({ issueComments, issues, commentsLoaded: true, issuesLoaded: true });
    }
    if (this.state.issueComments !== null) {
      if (issueComments.length !== this.state.issueComments.length) {
        this.setState({ issueComments });
      }
    }
  }
modifyTextState = (event) => {
  this.setState({ newCommentText: event.target.value });
}
handleAddNewComment = () => {
  const { currentIssue } = this.state;
  this.props.addUserComment(this.props.repoOwner, this.props.repoName, currentIssue, this.state.newCommentText, this.props.git_token);
  this.setState({ newCommentText: '' });
  this.handleClose();
}
handleClick = (currentIssue) => this.setState({ isShowingModal: true, currentIssue })
handleClose = () => this.setState({ isShowingModal: false })
handleCloseIssue = (login, repoName, issueNum, token) => {
// console.log('PASSING TO CLOSE ISSUE', login, repoName, issueNum, token);
  this.props.closeUserIssue(login, repoName, issueNum, token);
}
shouldComponentUpdate(nextProps, nextState) {
  return true;
}
render() {
  console.log('Expanded card State', this.state.expandedCards);
  const { issuesLoaded, commentsLoaded, issues, issueComments, isShowingModal } = this.state;
  const assigneeData = this.props.issues.map((issue, i) => issue.assignees);
  if (issuesLoaded && commentsLoaded) {
    // console.log(this.state.issues, 'THESE ARE MY ISSUES PASSED TO ISSUE CARD RENDER AREA');
    if (isShowingModal) {
      return (
        <div>
          <ModalIssueComment
            changeHandler={this.modifyTextState}
            handleClick={this.handleClick}
            handleClose={this.handleClose}
            isShowingModal={this.state.isShowingModal}
            value={this.state.newCommentText}
            handleAddComment={this.handleAddNewComment}
          />
        </div>
      );
    }
    return (
      <div className={styles.mainCont}>
        {issues.map((issue) => (

          <MuiThemeProvider key={issue.id}>
            <Card style={{ width: 350, height: 'auto', margin: 10 }} expanded={this.state.expandedCards[issue.number].expanded} onExpandChange={() => this.handleCardExpansionChange(issue.number)}>
              <CardHeader
                title={issue.title}
                subtitle={`Issue #${issue.number} Opened By ${issue.user.login}`}
                avatar={issue.user.avatar_url}
                actAsExpander={true}
                showExpandableButton={true}
              />
              <CardComments expandable={true} issueComments={issueComments[issue.number]} />

              <CardActions expandable={true}>
                <FlatButton label='Comment' onClick={() => this.handleClick(issue.number)} />
                <FlatButton label='Close'
                    onClick={() => this.handleCloseIssue(this.props.repoOwner, this.props.repoName, issue.number, this.props.git_token)} />
              </CardActions>
{'fraction_non_alphanumeric': 0.1354891157077048, 'fraction_numerical': 0.0010839129256616385, 'mean_word_length': 3.372827804107425, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1760474', 'n_tokens_mistral': 3231, 'n_tokens_neox': 3136, 'n_words': 676}