<commit_before>/** @jsx React.DOM */

(function() {
  var MasonryMixin = require('../../mixins/masonry_mixin.js');
  var NewsFeedItem = require('./news_feed_item.js.jsx');
  var NewsFeedMixin = require('../../mixins/news_feed_mixin.js.jsx');
  var Spinner = require('../spinner.js.jsx');
  var ActionTypes = require('../../constants').ActionTypes

  var NewsFeed = React.createClass({
    mixins: [MasonryMixin('masonryContainer', {transitionDuration: 0}), NewsFeedMixin],
    propTypes: {
      filter_counts: React.PropTypes.object.isRequired,
      url: React.PropTypes.string.isRequired
    },

    componentDidMount: function() {
      window.analytics.track(
        'news_feed_item.viewed', {
          product: (window.app.currentAnalyticsProduct())
        }
      );

      this.initializeEagerFetching();
    },

    countFor: function(filter) {
      return this.props.filter_counts[filter];
    },

    displayCount: function() {
      var filter = this.state.hoverFilter;

      if (filter) {
        var count = this.countFor(filter);

        return (
          <span className="gray-darker text-large">
            There are about
            <span className="bold">
              {' '}<span className="text-info">{count}</span> {filter}
            </span>
            {' '} bounties
          </span>
        );
      }

      return <span className="text-large">&nbsp;</span>
    },

    fetchMoreNewsFeedItems: _.debounce(this.eagerlyFetchMoreNewsFeedItems, 200),

    filterBy: function(filter, e) {
      this.setState({
        filter: filter
      }, function() {
        var url = window.location.pathname + '?page=' + this.state.page +
          '&filter=' + filter;

        window.xhr.get(url, this._handleFilteredNewsFeedItems);
      }.bind(this));
    },

    filters: function() {
      return (
        <ul className="nav nav-skills bg-white mb2" key="news-feed-filter-list">
          {_.map(_.keys(this.props.filters), this.renderFilterListItem)}
        </ul>
      );
    },

    getDefaultProps: function() {
      var filters = lowerCaseAndReflect([
        'Frontend',
        'Backend',
        'Design',
        'Marketing',
        'Writing',
        'Mobile'
      ]);

      // if (window.app.featureEnabled('hot-updates')) {
      //   filters['Hot'] = 'hot';
      // } else {
      //   filters['Mobile'] = 'mobile';
      // }

      return {
        filters: filters
      };
    },

    getInitialState: function() {
      var queryKey = window.parseUri(window.location).queryKey || {};

      return {
        filter: (queryKey.filter || ''),
        items: this.props.items,
        loading: false,
        page: (queryKey.page || 1)
      };
    },

    handleFilterMouseOver: function(filter, e) {
      this.setState({
        hoverFilter: filter,
      });
    },

    handleFilterMouseOut: function(filter, e) {
      this.setState({
        hoverFilter: null,
      });
    },

    render: function() {
      var disabled = false;

      if (this.state.disableLoadMoreButton) {
        disabled = true;
      }

      return (
        <div>
          {this.filters()}
          {this.spinner()}

          <div className="container" key="news-feed-container">
            <div className="py1 text-center" key="news-feed-filter-count">
              {this.displayCount()}
            </div>
            <div className="clearfix mxn2" ref="masonryContainer" key="news-feed-items">
              {this.renderItems()}
            </div>

            <div className="mb4" key="news-feed-load-more">
              <a href="javascript:void(0);"
                    onClick={this.fetchMoreNewsFeedItems}
                    className="btn btn-default btn-block" disabled={disabled}>
                {this.state.disabled ? <Spinner /> : 'Load more'}
              </a>
            </div>
          </div>
        </div>
      )
    },

    renderEmpty: function() {
      return (
        <div className="well text-center">
          There hasn't been any activity yet. Why not <a href="/chat/meta">jump into chat</a> to see where you can help?
        </div>
      );
    },

    renderFilterListItem: function(filter) {
      var label = this.props.filters[filter];
      var buttonClass = filter === this.state.filter ?
        'active' :
        '';

      // var onClick = this.filterBy.bind(this, filter);
      var onClick = function() {
        window.analytics.track('news_feed_item.filter.clicked', { filter: filter });
      };

      return (
        <li className={buttonClass} key={filter}>
          <a href={"?filter=" + filter}
              onMouseOver={this.handleFilterMouseOver.bind(this, filter)}
              onMouseOut={this.handleFilterMouseOut.bind(this, filter)}>
            {label}
          </a>
        </li>
      );
    },

    renderItems: function() {
      return _.map(this.state.items, function(item) {
        return (
          <div className="sm-col sm-col-6 p2" key={item.id}>
            <NewsFeedItem {...item} />
          </div>
        )
      });
    },

    spinner: function() {
      if (this.state.loading) {
        return (
          <div className="fixed top-0 left-0 z4 full-width" style={{ height: '100%' }}>
            <div className="absolute bg-darken-4 full-width" style={{ opacity: '0.4', height: '100%' }} />
            <div className="relative" style={{ top: '40%' }}>
              <Spinner />
            </div>
          </div>
        );
      }
    },

    _handleFilteredNewsFeedItems: function(err, results) {
      if (err) {
        return console.log(err);
      }

      var items;
      try {
        items = JSON.parse(results);
      } catch (e) {
        return console.log(e);
      }

      this.setState({
        items: items
      });
    }
  });

  function lowerCaseAndReflect(array) {
    var map = {};

    for (var i = 0, l = array.length; i < l; i++) {
      var item = array[i];

      map[item.toLowerCase()] = item;
    }

    return map;
  }

  if (typeof module !== 'undefined') {
    module.exports = NewsFeed;
  }

  window.NewsFeed = NewsFeed;
})();
<commit_msg>Don't render NewsFeedItemIntroductions on the What's Happening page<commit_after>/** @jsx React.DOM */

(function() {
  var MasonryMixin = require('../../mixins/masonry_mixin.js');
  var NewsFeedItem = require('./news_feed_item.js.jsx');
  var NewsFeedMixin = require('../../mixins/news_feed_mixin.js.jsx');
  var Spinner = require('../spinner.js.jsx');
  var ActionTypes = require('../../constants').ActionTypes

  var NewsFeed = React.createClass({
    mixins: [MasonryMixin('masonryContainer', {transitionDuration: 0}), NewsFeedMixin],
    propTypes: {
      filter_counts: React.PropTypes.object.isRequired,
      url: React.PropTypes.string.isRequired
    },

    componentDidMount: function() {
      window.analytics.track(
        'news_feed_item.viewed', {
          product: (window.app.currentAnalyticsProduct())
        }
      );

      this.initializeEagerFetching();
    },

    countFor: function(filter) {
      return this.props.filter_counts[filter];
    },

    displayCount: function() {
      var filter = this.state.hoverFilter;

      if (filter) {
        var count = this.countFor(filter);

        return (
          <span className="gray-darker text-large">
            There are about
            <span className="bold">
              {' '}<span className="text-info">{count}</span> {filter}
            </span>
            {' '} bounties
          </span>
        );
      }

      return <span className="text-large">&nbsp;</span>
    },

    fetchMoreNewsFeedItems: _.debounce(this.eagerlyFetchMoreNewsFeedItems, 200),

    filterBy: function(filter, e) {
      this.setState({
        filter: filter
      }, function() {
        var url = window.location.pathname + '?page=' + this.state.page +
          '&filter=' + filter;

        window.xhr.get(url, this._handleFilteredNewsFeedItems);
      }.bind(this));
    },

    filters: function() {
      return (
        <ul className="nav nav-skills bg-white mb2" key="news-feed-filter-list">
          {_.map(_.keys(this.props.filters), this.renderFilterListItem)}
        </ul>
      );
    },

    getDefaultProps: function() {
      var filters = lowerCaseAndReflect([
        'Frontend',
        'Backend',
        'Design',
        'Marketing',
        'Writing',
        'Mobile'
      ]);

      // if (window.app.featureEnabled('hot-updates')) {
      //   filters['Hot'] = 'hot';
      // } else {
      //   filters['Mobile'] = 'mobile';
      // }

      return {
        filters: filters
      };
    },

    getInitialState: function() {
      var queryKey = window.parseUri(window.location).queryKey || {};

      return {
        filter: (queryKey.filter || ''),
        items: this.props.items,
        loading: false,
        page: (queryKey.page || 1)
      };
    },

    handleFilterMouseOver: function(filter, e) {
      this.setState({
        hoverFilter: filter,
      });
    },

    handleFilterMouseOut: function(filter, e) {
      this.setState({
        hoverFilter: null,
      });
    },

    render: function() {
      var disabled = false;

      if (this.state.disableLoadMoreButton) {
        disabled = true;
      }

      return (
        <div>
          {this.filters()}
          {this.spinner()}

          <div className="container" key="news-feed-container">
            <div className="py1 text-center" key="news-feed-filter-count">
              {this.displayCount()}
            </div>
            <div className="clearfix mxn2" ref="masonryContainer" key="news-feed-items">
              {this.renderItems()}
            </div>

            <div className="mb4" key="news-feed-load-more">
              <a href="javascript:void(0);"
                    onClick={this.fetchMoreNewsFeedItems}
                    className="btn btn-default btn-block" disabled={disabled}>
                {this.state.disabled ? <Spinner /> : 'Load more'}
              </a>
            </div>
          </div>
        </div>
      )
    },

    renderEmpty: function() {
      return (
        <div className="well text-center">
          There hasn't been any activity yet. Why not <a href="/chat/meta">jump into chat</a> to see where you can help?
        </div>
      );
    },

    renderFilterListItem: function(filter) {
      var label = this.props.filters[filter];
      var buttonClass = filter === this.state.filter ?
        'active' :
        '';

      // var onClick = this.filterBy.bind(this, filter);
      var onClick = function() {
        window.analytics.track('news_feed_item.filter.clicked', { filter: filter });
      };

      return (
        <li className={buttonClass} key={filter}>
          <a href={"?filter=" + filter}
              onMouseOver={this.handleFilterMouseOver.bind(this, filter)}
              onMouseOut={this.handleFilterMouseOut.bind(this, filter)}>
            {label}
          </a>
        </li>
      );
    },

    renderItems: function() {
      return _.map(this.state.items, function(item) {
        var target = item.target;

        if (target.type === 'team_membership') {
          return null;
        }

        return (
          <div className="sm-col sm-col-6 p2" key={item.id}>
            <NewsFeedItem {...item} />
          </div>
        )
      });
    },

    spinner: function() {
      if (this.state.loading) {
        return (
          <div className="fixed top-0 left-0 z4 full-width" style={{ height: '100%' }}>
            <div className="absolute bg-darken-4 full-width" style={{ opacity: '0.4', height: '100%' }} />
            <div className="relative" style={{ top: '40%' }}>
              <Spinner />
            </div>
          </div>
        );
      }
    },

    _handleFilteredNewsFeedItems: function(err, results) {
      if (err) {
        return console.log(err);
      }

      var items;
      try {
        items = JSON.parse(results);
      } catch (e) {
        return console.log(e);
      }

      this.setState({
        items: items
      });
    }
  });

  function lowerCaseAndReflect(array) {
    var map = {};

    for (var i = 0, l = array.length; i < l; i++) {
      var item = array[i];

      map[item.toLowerCase()] = item;
    }

    return map;
  }

  if (typeof module !== 'undefined') {
    module.exports = NewsFeed;
  }

  window.NewsFeed = NewsFeed;
})();

{'fraction_non_alphanumeric': 0.1511290322580645, 'fraction_numerical': 0.004354838709677419, 'mean_word_length': 1.9014974262985493, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 83, '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': '1085784', 'n_tokens_mistral': 3765, 'n_tokens_neox': 3683, 'n_words': 713}