<commit_before>import React from 'react';
import ReactDOM from 'react-dom'
import _ from 'underscore';
import icon from '../../img/question_icon.svg';
import revise from '../../img/revise_orange_icon.svg';
import multiple from '../../img/multiple_choice_icon.svg';
import success  from '../../img/check-mark.svg';
import TransitionGroup from 'react-transition-group/TransitionGroup'
import anime from 'animejs'
import getAnswerState from './answerState';
import {Response} from 'quill-marking-logic';

// let currentAnimation

// const clearCurrentAnimation = () => {
//   // not sure if this does anything/is necessary?
//   if (currentAnimation) currentAnimation.pause()
// }

// const animateIn = (gridContainer) => {
//   console.log("Animate in")
//   clearCurrentAnimation()
//   const cards = gridContainer.querySelectorAll('.student-feedback-container')
//   currentAnimation = anime.timeline()
//   .add({
//     targets: cards,
//     opacity: 0,
//     duration: 1
//   })
//   .add({
//     targets: gridContainer,
//     translateX: [-1000, 0],
//     opacity: [0, 1],
//     duration: 400
//   })
//   .add({
//     targets: cards,
//     duration: 800,
//     opacity: [0, 1],
//     translateY: [-30, 0],
//     delay: function (el, i, l) {
//       return i * 100
//     }
//   })
// }

// const animateOut = (gridContainer, callback) => {
//   console.log("Animate out")
//   clearCurrentAnimation()

//   const cards = gridContainer.querySelectorAll('.student-feedback-container')
//   currentAnimation = anime.timeline()
//   .add({
//     targets: cards,
//     duration: 700,
//     opacity: [1, 0],
//     translateY: -30,
//     delay: function (el, i, l) {
//       return i * 100
//     }
//   })
//   .add({
//     targets: gridContainer,
//     translateX: 1000,
//     opacity: [1, 0],
//     duration: 1000,
//     complete: callback,
//     offset: '-=200'
//   })
// }

class Feedback extends React.Component<any, any> {
  constructor(props){
    super(props)
  }

  // componentDidAppear() {
  //   console.log("Appeared")
  //   animateIn(ReactDOM.findDOMNode(this))
  // }

  // componentDidEnter() {
  //   console.log("Entered")
  //   animateIn(ReactDOM.findDOMNode(this))
  // }

  // componentWillLeave(callback) {
  //   console.log("Left")
  //   animateOut(ReactDOM.findDOMNode(this), callback)
  // }

  getFeedbackType(data?): string {
    if (data) {
      const latestAttempt = getLatestAttempt(data.question.attempts);
      if (latestAttempt) {
        if (data.override) {
          return "override"
        } else if (latestAttempt.response.feedback !== undefined) {
          const state = getAnswerState(latestAttempt);
          console.log("state: ", state, latestAttempt);
          return state ? 'correct-matched' : 'revise-matched'
        } else {
          return "revise-unmatched"
        }
      } else {
        if(!!data.question.instructions) {
          return "instructions"
        }
        else if(data.getQuestion && data.getQuestion().instructions!=="") {
          return "getQuestion-instructions"
        }
        else if (data.getQuestion && data.getQuestion().cues && data.getQuestion().cues.length > 0 && data.getQuestion().cues[0] !== "") {
          return "default-with-cues"
        } else {
          return "default"
        }
      }
    }
    return "default"
  }

  getFeedbackClassName(data): string {
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
      case "revise-matched":
        returnVal = "revise"
        break;
      case "correct-matched":
        returnVal = "success"
        break;
      case "override":
      case "instructions":
      case "getQuestion-instructions":
      case "default-with-cues":
      case "default":
        returnVal = "default"
        break;
      default: 
        returnVal = "default"
    }
    return returnVal
  }

  getIconClassName(data): string {
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
      case "revise-matched":
        returnVal = "revise"
        break;
      case "correct-matched":
        returnVal = "success"
        break;
      case "override":
        returnVal = "multiple"
        break;
      case "instructions":
      case "getQuestion-instructions":
      case "default-with-cues":
      case "default":
        returnVal = "info"
        break;
      default: 
        returnVal = "info"
    }
    return returnVal
  }

  getFeedbackIcon(data): string {
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
      case "revise-matched":
        returnVal = revise;
        break;
      case "correct-matched":
        returnVal = success;
        break;
      case "override":
        returnVal = multiple;
        break;
      case "instructions":
      case "getQuestion-instructions":
      case "default-with-cues":
      case "default":
        returnVal = icon;
        break;
      default: 
        returnVal = icon;
    }
    return returnVal;
  } 

  getFeedbackCopy(data): string {
    const latestAttempt = getLatestAttempt(data.question.attempts);
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
        returnVal = (<p>{data.sentence}</p>);
        break;
      case "revise-matched":
      case "correct-matched":
        returnVal = data.renderFeedbackStatements(latestAttempt);
        break;
      case "override":
        returnVal = (<p>{data.sentence}</p>);
        break;
      case "instructions":
        returnVal = (<p>{data.question.instructions}</p>);
        break;
      case "getQuestion-instructions":
        returnVal = (<p>{data.getQuestion().instructions}</p>);
        break;
      case "default-with-cues":
        returnVal = (<p>Combine the sentences using {data.listCuesAsString(data.getQuestion().cues)}</p>);
        break;
      case "default":
        returnVal = (<p>Combine the sentences into one sentence.</p>)
        break;
      default: 
        returnVal = (<p>Combine the sentences into one sentence.</p>)
    }
    return returnVal
  } 

  renderFeedback(): JSX.Element {
    const data = this.props;
    const latestAttempt = getLatestAttempt(data.question.attempts);
    const key:number = data.question.attempts.length;
    return (
      <div className={`feedback-row student-feedback-inner-container`} key={key}>
        <img className={this.getIconClassName(data)} src={this.getFeedbackIcon(data)}/>
        {this.getFeedbackCopy(data)}
      </div>
    )
  }

  render() {
    const activeClass = "student-feedback-container " + (this.props ? this.getFeedbackClassName(this.props) : "");
    const key:number = this.props ? this.props.question.attempts.length : 0;
    return (
      <div className={activeClass} key={key}>
        {this.renderFeedback()}
      </div>
    )
  }
}

export default Feedback;

const getLatestAttempt = function (attempts: Array<any> = []): any {
  const lastIndex = attempts.length - 1;
  return attempts[lastIndex]
}
<commit_msg>Clean up after fixing animations<commit_after>import React from 'react';
import ReactDOM from 'react-dom'
import _ from 'underscore';
import icon from '../../img/question_icon.svg';
import revise from '../../img/revise_orange_icon.svg';
import multiple from '../../img/multiple_choice_icon.svg';
import success  from '../../img/check-mark.svg';
import getAnswerState from './answerState';
import {Response} from 'quill-marking-logic';

class Feedback extends React.Component<any, any> {
  constructor(props){
    super(props)
  }

  getFeedbackType(data?): string {
    if (data) {
      const latestAttempt = getLatestAttempt(data.question.attempts);
      if (latestAttempt) {
        if (data.override) {
          return "override"
        } else if (latestAttempt.response.feedback !== undefined) {
          const state = getAnswerState(latestAttempt);
          console.log("state: ", state, latestAttempt);
          return state ? 'correct-matched' : 'revise-matched'
        } else {
          return "revise-unmatched"
        }
      } else {
        if(!!data.question.instructions) {
          return "instructions"
        }
        else if(data.getQuestion && data.getQuestion().instructions!=="") {
          return "getQuestion-instructions"
        }
        else if (data.getQuestion && data.getQuestion().cues && data.getQuestion().cues.length > 0 && data.getQuestion().cues[0] !== "") {
          return "default-with-cues"
        } else {
          return "default"
        }
      }
    }
    return "default"
  }

  getFeedbackClassName(data): string {
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
      case "revise-matched":
        returnVal = "revise"
        break;
      case "correct-matched":
        returnVal = "success"
        break;
      case "override":
      case "instructions":
      case "getQuestion-instructions":
      case "default-with-cues":
      case "default":
        returnVal = "default"
        break;
      default: 
        returnVal = "default"
    }
    return returnVal
  }

  getIconClassName(data): string {
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
      case "revise-matched":
        returnVal = "revise"
        break;
      case "correct-matched":
        returnVal = "success"
        break;
      case "override":
        returnVal = "multiple"
        break;
      case "instructions":
      case "getQuestion-instructions":
      case "default-with-cues":
      case "default":
        returnVal = "info"
        break;
      default: 
        returnVal = "info"
    }
    return returnVal
  }

  getFeedbackIcon(data): string {
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
      case "revise-matched":
        returnVal = revise;
        break;
      case "correct-matched":
        returnVal = success;
        break;
      case "override":
        returnVal = multiple;
        break;
      case "instructions":
      case "getQuestion-instructions":
      case "default-with-cues":
      case "default":
        returnVal = icon;
        break;
      default: 
        returnVal = icon;
    }
    return returnVal;
  } 

  getFeedbackCopy(data): string {
    const latestAttempt = getLatestAttempt(data.question.attempts);
    let returnVal;
    switch (this.getFeedbackType(data)) {
      case "revise-unmatched":
        returnVal = (<p>{data.sentence}</p>);
        break;
      case "revise-matched":
      case "correct-matched":
        returnVal = data.renderFeedbackStatements(latestAttempt);
        break;
      case "override":
        returnVal = (<p>{data.sentence}</p>);
        break;
      case "instructions":
        returnVal = (<p>{data.question.instructions}</p>);
        break;
      case "getQuestion-instructions":
        returnVal = (<p>{data.getQuestion().instructions}</p>);
        break;
      case "default-with-cues":
        returnVal = (<p>Combine the sentences using {data.listCuesAsString(data.getQuestion().cues)}</p>);
        break;
      case "default":
        returnVal = (<p>Combine the sentences into one sentence.</p>)
        break;
      default: 
        returnVal = (<p>Combine the sentences into one sentence.</p>)
    }
    return returnVal
  } 

  renderFeedback(): JSX.Element {
    const data = this.props;
    const latestAttempt = getLatestAttempt(data.question.attempts);
    const key:number = data.question.attempts.length;
    return (
      <div className={`feedback-row student-feedback-inner-container`} key={key}>
        <img className={this.getIconClassName(data)} src={this.getFeedbackIcon(data)}/>
        {this.getFeedbackCopy(data)}
      </div>
    )
  }

  render() {
    const activeClass = "student-feedback-container " + (this.props ? this.getFeedbackClassName(this.props) : "");
    const key:number = this.props ? this.props.question.attempts.length : 0;
    return (
      <div className={activeClass} key={key}>
        {this.renderFeedback()}
      </div>
    )
  }
}

export default Feedback;

const getLatestAttempt = function (attempts: Array<any> = []): any {
  const lastIndex = attempts.length - 1;
  return attempts[lastIndex]
}

{'fraction_non_alphanumeric': 0.1389678992279561, 'fraction_numerical': 0.004388459975619667, 'mean_word_length': 2.362295081967213, 'pattern_counts': {'":': 64, '<': 45, '<?xml version=': 0, '>': 50, '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': '2971029', 'n_tokens_mistral': 3788, 'n_tokens_neox': 3642, 'n_words': 782}