<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import './Problems.css';
import Problem from '../components/Problem';
import NavBar from '../components/NavBar';
import { getProblems } from '../actions/problems';
import { addLike } from '../actions/problems';

class Problems extends Component {

  componentDidMount(){
    this.props.getProblems()
  }

   handleClick = (event) => {
    event.preventDefault()
    let problem = this.props.problems.find(function(problem){return problem.id == event.target.value})
    this.props.addLike(problem)

  }


  render(){
    return(
      <div className="Wrapper">
        <NavBar/>
        <div className="ProblemsContainer">
          <h3>Choose from existing problems:</h3>
            {this.props.problems.map(problem =>
              <div key={problem.id} className="ProblemCard">
                <Problem
                  problem={problem}
                  key={problem.id}
                  />
                <button value={problem.id} onClick={this.handleClick}>Like</button>
              </div>
            )}
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  state.problems.sort((a,b)=>{
    return b.likes - a.likes
  })
  return ({
    problems: state.problems
  })
}

export default connect(mapStateToProps, {getProblems, addLike})(Problems);<commit_msg>Moved sorting action to where the view is rendering instead of sorting the state<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import './Problems.css';
import Problem from '../components/Problem';
import NavBar from '../components/NavBar';
import { getProblems } from '../actions/problems';
import { addLike } from '../actions/problems';

class Problems extends Component {

  componentDidMount(){
    this.props.getProblems()
  }

   handleClick = (event) => {
    event.preventDefault()
    let problem = this.props.problems.find(function(problem){return problem.id == event.target.value})
    this.props.addLike(problem)
  }


  render(){
    return(
      <div className="Wrapper">
        <NavBar/>
        <div className="ProblemsContainer">
          <h3>Choose from existing problems:</h3>
            {this.props.problems.sort((a,b)=>{return b.likes - a.likes}).map(problem =>
              <div key={problem.id} className="ProblemCard">
                <Problem
                  problem={problem}
                  key={problem.id}
                  />
                <button value={problem.id} onClick={this.handleClick}>Like</button>
              </div>
            )}
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {

  return ({
    problems: state.problems
  })
}

export default connect(mapStateToProps, {getProblems, addLike})(Problems);
{'fraction_non_alphanumeric': 0.14331210191082802, 'fraction_numerical': 0.0014154281670205238, 'mean_word_length': 2.472972972972973, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 35, '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': '3365773', 'n_tokens_mistral': 869, 'n_tokens_neox': 791, 'n_words': 172}