<commit_before>import React, { PropTypes } from 'react';
import ClassPanel from './ClassPanel';
import CSSModules from 'react-css-modules';

import css from './ResultsLoader.css';

// Home page component
class ResultsLoader extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      show: 0,
      visibleObjects: [],
    };

    this.alreadyLoadedAt = {};

    this.handleInfiniteLoad = this.handleInfiniteLoad.bind(this);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleInfiniteLoad);
    this.handleInfiniteLoad();
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleInfiniteLoad);
  }

  addMoreObjects() {

    var delta
    // When the user is typing in the search box we only need to render enough to go past the bottom of the screen
    // want to render as few as possible between key presses in the search box. 
    if (this.state.show === 0) {
      delta = 4
    }
    else {
      delta = 10
    }

    const newObjects = [];

    const toLoad = this.props.results.slice(this.state.show, this.state.show + delta);


    toLoad.forEach((result) => {
      if (result.type === 'class') {
        const aClass = this.props.termData.createClass({
          hash: result.ref,
          host: 'neu.edu',
          termId: '201710',
        });

        newObjects.push({
          type: 'class',
          data: aClass,
        });
      } else if (result.type === 'employee') {
        const employee = this.props.employeeMap[result.ref];

        newObjects.push({
          type: 'employee',
          data: employee,
        });
      } else {
        console.error('wtf is type', result.type);
      }
    });

    // console.log('adding ', newObjects.length, 'now at ', this.state.show, toLoad.length, 'hi')

    this.setState({
      show: this.state.show + delta,
      visibleObjects: this.state.visibleObjects.concat(newObjects),
    });
  }

  handleInfiniteLoad() {
    console.log('results loader handleInfiniteLoad', this.props.results.length, this.state.visibleObjects.length);
    if (this.props.results.length === 0) {
      return;
    }

    const resultsBottom = this.refs.elementsContainer.offsetHeight + this.refs.elementsContainer.offsetTop;

    const diff = window.scrollY + 2000 + window.innerHeight - resultsBottom;

    // Assume about 300 px per class
    if (diff > 0 && this.props.results.length > this.state.visibleObjects.length && !this.alreadyLoadedAt[this.state.visibleObjects.length]) {
      this.alreadyLoadedAt[this.state.visibleObjects.length] = true;
      console.log('triggered')

      this.addMoreObjects();
    }
  }

  componentWillReceiveProps(nextProps) {
    console.log('results loader componentWillReceiveProps');
    this.alreadyLoadedAt = {};
    this.setState({
      show: 0,
      visibleObjects: [],
    });
  }


  componentDidUpdate(prevProps, prevState) {
    if (this.state.show === 0) {
      this.addMoreObjects();
    }
  }


  render() {
    if (this.props.results.length === 0) {
      return null;
    }

    return (
      <div className={ `ui container ${css.resultsContainer}` }>
        <div className='five column row' >
          <div className='page-home' ref='elementsContainer'>
            {this.state.visibleObjects.map((obj) => {
              if (obj.type === 'class') {
                return <ClassPanel id = {obj.data._id} aClass={ obj.data } />;
              }
              // else if (obj.type === 'employee') {
              //   return <EmployeePanel id = {obj.data.id} employee = {obj.data} />
              // }
              else {
                // console.log('Uknown type', obj.type)
                return null;
              }
            })}
          </div>
        </div>
      </div>
    );
  }
}

ResultsLoader.PropTypes = {
  results: PropTypes.array.isRequired,
};
<commit_msg>eslint fixes in result loader.<commit_after>import React, { PropTypes } from 'react';
import CSSModules from 'react-css-modules';

import ClassPanel from './ClassPanel';
import css from './ResultsLoader.css';

// Home page component
class ResultsLoader extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      show: 0,
      visibleObjects: [],
    };

    this.alreadyLoadedAt = {};

    this.handleInfiniteLoad = this.handleInfiniteLoad.bind(this);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleInfiniteLoad);
    this.handleInfiniteLoad();
  }


  componentWillReceiveProps() {
    this.alreadyLoadedAt = {};
    this.setState({
      show: 0,
      visibleObjects: [],
    });
  }

  componentDidUpdate() {
    if (this.state.show === 0) {
      this.addMoreObjects();
    }
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleInfiniteLoad);
  }

  handleInfiniteLoad() {
    console.log('results loader handleInfiniteLoad', this.props.results.length, this.state.visibleObjects.length);
    if (this.props.results.length === 0) {
      return;
    }

    const resultsBottom = this.refs.elementsContainer.offsetHeight + this.refs.elementsContainer.offsetTop;

    const diff = window.scrollY + 2000 + window.innerHeight - resultsBottom;

    // Assume about 300 px per class
    if (diff > 0 && this.props.results.length > this.state.visibleObjects.length && !this.alreadyLoadedAt[this.state.visibleObjects.length]) {
      this.alreadyLoadedAt[this.state.visibleObjects.length] = true;
      console.log('triggered');

      this.addMoreObjects();
    }
  }

  addMoreObjects() {
    let delta;
    // When the user is typing in the search box we only need to render enough to go past the bottom of the screen
    // want to render as few as possible between key presses in the search box.
    if (this.state.show === 0) {
      delta = 4;
    } else {
      delta = 10;
    }

    const newObjects = [];

    const toLoad = this.props.results.slice(this.state.show, this.state.show + delta);


    toLoad.forEach((result) => {
      if (result.type === 'class') {
        const aClass = this.props.termData.createClass({
          hash: result.ref,
          host: 'neu.edu',
          termId: '201710',
        });

        newObjects.push({
          type: 'class',
          data: aClass,
        });
      } else if (result.type === 'employee') {
        const employee = this.props.employeeMap[result.ref];

        newObjects.push({
          type: 'employee',
          data: employee,
        });
      } else {
        console.error('wtf is type', result.type);
      }
    });

    // console.log('adding ', newObjects.length, 'now at ', this.state.show, toLoad.length, 'hi')

    this.setState({
      show: this.state.show + delta,
      visibleObjects: this.state.visibleObjects.concat(newObjects),
    });
  }


  render() {
    if (this.props.results.length === 0) {
      return null;
    }

    return (
      <div className={ `ui container ${css.resultsContainer}` }>
        <div className='five column row' >
          <div className='page-home' ref='elementsContainer'>
            {this.state.visibleObjects.map((obj) => {
              if (obj.type === 'class') {
                return <ClassPanel id={ obj.data._id } aClass={ obj.data } />;
              }
              // else if (obj.type === 'employee') {
              //   return <EmployeePanel id = {obj.data.id} employee = {obj.data} />
              // }

                // console.log('Uknown type', obj.type)
              return null;
            })}
          </div>
        </div>
      </div>
    );
  }
}

ResultsLoader.propTypes = {
  results: PropTypes.array.isRequired,
  employeeMap: PropTypes.object.isRequired,
  termData: PropTypes.object.isRequired,
};

{'fraction_non_alphanumeric': 0.1362932369643779, 'fraction_numerical': 0.005937016004130098, 'mean_word_length': 2.301661695781849, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 27, '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': '111952', 'n_tokens_mistral': 2347, 'n_tokens_neox': 2230, 'n_words': 493}