<commit_before>import React from "react";
import Moment from "moment-timezone";
import Service from "../../js/backend.js";
import DataCard from "../components/data-card/data-card.jsx";

import DebounceInput from 'react-debounce-input';

export default React.createClass({
  componentWillMount: function () {
    this.loadPosts(1);
    this.loadCategories();
  },
  loadPosts: function (page, category=``, search=``) {
    Service.blogPosts
      .get(page, category, search)
      .then((posts) => {
        this.setState({
          posts: this.state.posts.concat(posts),
          pagesLoaded: page
        });
      })
      .catch((reason) => { console.error(reason); });
  },
  loadCategories: function() {
    Service.blogCategories
      .get()
      .then((categories) => {
        this.setState({
          categories: categories
        });
      })
      .catch((reason) => { console.error(reason); });
  },
  handleCategoryInput: function(event) {
    this.setState({
      activeCategory: event.target.value,
      posts: [],
      pagesLoaded: 0
    });
    this.loadPosts(1, event.target.value, this.state.search);
  },
  handleSearchInput: function(event) {
    this.setState({
      search: event.target.value,
      posts: [],
      pagesLoaded: 0
    });
    this.loadPosts(1, this.state.activeCategory, event.target.value);
  },
  getInitialState: function () {
    return {
      posts: [],
      pagesLoaded: 0,
      categories: [
      ],
      activeCategory: ``,
      search: ``
    };
  },
  onMoreClick: function () {
    this.loadPosts(this.state.pagesLoaded + 1, this.state.activeCategory, this.state.search);
  },
  render() {
    let posts = this.state.posts.map((post, index) => {
      let terms = post.terms.category.filter((item) => {
        return item.slug !== `uncategorized`;
      }).map((item) => {
        return item.slug;
      });

      return (
        <DataCard key={index} className={index < 2 ? `col-xs-12 col-sm-6` : `col-xs-12`} showPicture={!!post.featured_image && index < 2} picture={post.featured_image && index < 2 ? post.featured_image.source : null} categories={terms}>
          <h3><a href={`/blog/${post.slug}`} dangerouslySetInnerHTML={{__html: post.title}}></a></h3>
          <p>by {post.author.name} on {new Moment(post.date).format(`MMM D, YYYY`)}</p>
          <p dangerouslySetInnerHTML={{__html: post.excerpt}}></p>
        </DataCard>
      );
    });

    return (
      <div id="blog">
        <div className="jumbotron container text-xs-center mb-0 pb-1">
          <h2>Latest News</h2>
        </div>
        <div className="container-dynamic">
          <div className="row flex-items-xs-center my-1">
            <div className="col-xs-12 col-sm-6 col-md-4 mb-1">
              <DebounceInput debounceTimeout={400} type="search" onChange={this.handleSearchInput} className="form-control" placeholder="search"/>
            </div>
            <div className="col-xs-12 col-sm-6 col-md-4 mb-1">
              <select name="category" id="category" onChange={this.handleCategoryInput} className="c-select form-control wide">
                <option value="">All Categories</option>
                {this.state.categories.map(category => {
                  if(category.slug !== `uncategorized`) {
                    return <option key={category.ID} value={category.slug}>{category.name}</option>;
                  }
                })}
              </select>
            </div>
          </div>
          <div className="row">
            {posts}
          </div>
          <div className="text-xs-center">
            <button className="btn btn-outline-info mb-3" onClick={this.onMoreClick}>See More</button>
          </div>
        </div>
      </div>
    );
  }
});
<commit_msg>Blog: Make es6 migrations in the blog page<commit_after>import React from "react";
import Moment from "moment-timezone";
import Service from "../../js/backend.js";
import DataCard from "../components/data-card/data-card.jsx";

import DebounceInput from 'react-debounce-input';

export default class BlogList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      pagesLoaded: 0,
      categories: [
      ],
      activeCategory: ``,
      search: ``
    };
  }

  componentWillMount = () => {
    this.loadPosts(1);
    this.loadCategories();
  }

  loadPosts = (page, category=``, search=``) => {
    Service.blogPosts
      .get(page, category, search)
      .then((posts) => {
        this.setState({
          posts: this.state.posts.concat(posts),
          pagesLoaded: page
        });
      })
      .catch((reason) => { console.error(reason); });
  }

  loadCategories = () => {
    Service.blogCategories
      .get()
      .then((categories) => {
        this.setState({
          categories: categories
        });
      })
      .catch((reason) => { console.error(reason); });
  }

  handleCategoryInput = (event) => {
    this.setState({
      activeCategory: event.target.value,
      posts: [],
      pagesLoaded: 0
    });
    this.loadPosts(1, event.target.value, this.state.search);
  }

  handleSearchInput = (event) => {
    this.setState({
      search: event.target.value,
      posts: [],
      pagesLoaded: 0
    });
    this.loadPosts(1, this.state.activeCategory, event.target.value);
  }

  onMoreClick = () => {
    this.loadPosts(this.state.pagesLoaded + 1, this.state.activeCategory, this.state.search);
  }

  render() {
    let posts = this.state.posts.map((post, index) => {
      let terms = post.terms.category.filter((item) => {
        return item.slug !== `uncategorized`;
      }).map((item) => {
        return item.slug;
      });

      return (
        <DataCard key={index} className={index < 2 ? `col-xs-12 col-sm-6` : `col-xs-12`} showPicture={!!post.featured_image && index < 2} picture={post.featured_image && index < 2 ? post.featured_image.source : null} categories={terms}>
          <h3><a href={`/blog/${post.slug}`} dangerouslySetInnerHTML={{__html: post.title}}></a></h3>
          <p>by {post.author.name} on {new Moment(post.date).format(`MMM D, YYYY`)}</p>
          <p dangerouslySetInnerHTML={{__html: post.excerpt}}></p>
        </DataCard>
      );
    });

    return (
      <div id="blog">
        <div className="jumbotron container text-xs-center mb-0 pb-1">
          <h2>Latest News</h2>
        </div>
        <div className="container-dynamic">
          <div className="row flex-items-xs-center my-1">
            <div className="col-xs-12 col-sm-6 col-md-4 mb-1">
              <DebounceInput debounceTimeout={400} type="search" onChange={this.handleSearchInput} className="form-control" placeholder="search"/>
            </div>
            <div className="col-xs-12 col-sm-6 col-md-4 mb-1">
              <select name="category" id="category" onChange={this.handleCategoryInput} className="c-select form-control wide">
                <option value="">All Categories</option>
                {this.state.categories.map(category => {
                  if(category.slug !== `uncategorized`) {
                    return <option key={category.ID} value={category.slug}>{category.name}</option>;
                  }
                })}
              </select>
            </div>
          </div>
          <div className="row">
            {posts}
          </div>
          <div className="text-xs-center">
            <button className="btn btn-outline-info mb-3" onClick={this.onMoreClick}>See More</button>
          </div>
        </div>
      </div>
    );
  }
}

{'fraction_non_alphanumeric': 0.16499073829055305, 'fraction_numerical': 0.009658639851812648, 'mean_word_length': 2.2638169257340244, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 99, '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': '1426107', 'n_tokens_mistral': 2349, 'n_tokens_neox': 2298, 'n_words': 420}