<commit_before>import React, { Component } from 'react';
import PropTypes from 'proptypes';

class Categories extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newCategoryName: '',
      selectedCategory: this.props.selectedCategory
    };
  }

  static propTypes = {
    categories: PropTypes.array,
    addCategory: PropTypes.func,
    changeCategory: PropTypes.func,
    deleteCategory: PropTypes.func,
    selectedCategory: PropTypes.string
  }

  changeCategoryName = (event) => {
    this.setState({ newCategoryName: event.target.value });
  }

  addCategory = () => {
    if(this.state.newCategoryName) {
      this.props.addCategory({ name: this.state.newCategoryName });
      this.setState({ newCategoryName: '' });
    }
  }

  setSelectedCategory = (selectedCategory) => {
    return () => {
      this.props.changeCategory(selectedCategory);
    };
  }

  componentWillReceiveProps(props) {
    this.setState({ selectedCategory: props.selectedCategory });
  }

  renderCategoryList = () => {
    const categories = [{ name: 'All Recipes' }, ...this.props.categories];
    return categories.map((category, index) => {
      category.key = (index > 0) ? category.name : '';
      // const buttonStyle = (category.key === this.props.selectedCategory) ? 'btn btn-sm  btn-main' : 'btn btn-sm btn-secondary';
      const buttonStyle = (category.key === this.props.selectedCategory) ? 'active' : 'inactive';
      return <li className={"list-group-item " + buttonStyle} key={index}>
        {/* <input className={buttonStyle} type="button" value={category.name} onClick={this.setSelectedCategory(category.key)} /> */}
        <div className={buttonStyle} onClick={this.setSelectedCategory(category.key)}>{category.name} {index > 0 && <button type="button" className="btn btn-delete" onClick={() => this.props.deleteCategory(category.name)}><i className="fa fa-lg fa-trash-o pull-right"></i></button>}</div>
      </li>;
    });
  }

  render() {
    return (
      <ul className="list-group">
        {this.renderCategoryList()}
        <li className="list-group-item" >
          <input className="form-control"
            type="text"
            placeholder="Add Category"
            value={this.state.newCategoryName}
            onChange={this.changeCategoryName} />
          <input className="btn btn-sm btn-main" type="button" value="+" onClick={this.addCategory} />
        </li>
      </ul>
    );
  }
}
export default Categories;
<commit_msg>category sidebar active when clicked and style button<commit_after>import React, { Component } from 'react';
import PropTypes from 'proptypes';

class Categories extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newCategoryName: '',
      selectedCategory: this.props.selectedCategory
    };
  }

  static propTypes = {
    categories: PropTypes.array,
    addCategory: PropTypes.func,
    changeCategory: PropTypes.func,
    deleteCategory: PropTypes.func,
    selectedCategory: PropTypes.string
  }

  changeCategoryName = (event) => {
    this.setState({ newCategoryName: event.target.value });
  }

  addCategory = () => {
    if(this.state.newCategoryName) {
      this.props.addCategory({ name: this.state.newCategoryName });
      this.setState({ newCategoryName: '' });
    }
  }

  setSelectedCategory = (selectedCategory) => {
    return () => {
      this.props.changeCategory(selectedCategory);
    };
  }

  componentWillReceiveProps(props) {
    this.setState({ selectedCategory: props.selectedCategory });
  }

  renderCategoryList = () => {
    const categories = [{ name: 'All Recipes' }, ...this.props.categories];
    return categories.map((category, index) => {
      category.key = (index > 0) ? category.name : '';
      // const buttonStyle = (category.key === this.props.selectedCategory) ? 'btn btn-sm  btn-main' : 'btn btn-sm btn-secondary';
      const buttonStyle = (category.key === this.props.selectedCategory) ? 'active' : 'inactive';
      return <li className={'list-group-item ' + buttonStyle} key={index}>
        {/* <input className={buttonStyle} type="button" value={category.name} onClick={this.setSelectedCategory(category.key)} /> */}
        <div className='category-item d-flex justify-content-between' onClick={this.setSelectedCategory(category.key)}>{category.name} {index > 0 && <button type="button" className="btn btn-delete" onClick={() => this.props.deleteCategory(category.name)}><i className="fa fa-lg fa-trash-o pull-right"></i></button>}</div>
      </li>;
    });
  }

  render() {
    return (
      <ul className="list-group d-flex justify-content-between">
        {this.renderCategoryList()}
        <li className="list-group-item" >
          <input className="form-control"
            type="text"
            placeholder="New Category"
            value={this.state.newCategoryName}
            onChange={this.changeCategoryName} />
          <input className="btn btn-block btn-sm btn-main" type="button" value="Add" onClick={this.addCategory} />
        </li>
      </ul>
    );
  }
}
export default Categories;

{'fraction_non_alphanumeric': 0.15250587314017228, 'fraction_numerical': 0.0007830853563038371, 'mean_word_length': 3.261050875729775, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 51, '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': '4289239', 'n_tokens_mistral': 1455, 'n_tokens_neox': 1460, 'n_words': 278}