<commit_before>import React from 'react';
import {History, Link} from 'react-router';

import ApiMixin from '../mixins/apiMixin';
import DateTime from '../components/dateTime';
import Gravatar from '../components/gravatar';
import GroupState from '../mixins/groupState';
import LoadingError from '../components/loadingError';
import LoadingIndicator from '../components/loadingIndicator';
import Pagination from '../components/pagination';
import SearchBar from '../components/searchBar.jsx';
import {t} from '../locale';

const GroupEvents = React.createClass({
  mixins: [
    ApiMixin,
    GroupState,
    History
  ],

  getInitialState() {
    let queryParams = this.props.location.query;
    return {
      eventList: [],
      loading: true,
      error: false,
      pageLinks: '',
      query: queryParams.query || '',
    };
  },

  componentWillMount() {
    this.fetchData();
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.params.groupId !== this.props.params.groupId ||
        nextProps.location.search !== this.props.location.search) {
      let queryParams = nextProps.location.query;
      this.setState({
        query: queryParams.query
      }, this.fetchData);
    }
  },

  onSearch(query) {
    let targetQueryParams = {};
    if (query !== '')
      targetQueryParams.query = query;

    let {groupId, orgId, projectId} = this.props.params;
    this.history.pushState(null, `/${orgId}/${projectId}/issues/${groupId}/events/`, targetQueryParams);
  },

  getEndpoint() {
    let params = this.props.params;
    let queryParams = {
      ...this.props.location.query,
      limit: 50,
      query: this.state.query
    };

    return `/issues/${params.groupId}/events/?${jQuery.param(queryParams)}`;
  },

  fetchData() {
    let queryParams = this.props.location.query;

    this.setState({
      loading: true,
      error: false
    });

    this.api.request(this.getEndpoint(), {
      method: 'GET',
      data: queryParams,
      success: (data, _, jqXHR) => {
        this.setState({
          eventList: data,
          error: false,
          loading: false,
          pageLinks: jqXHR.getResponseHeader('Link')
        });
      },
      error: (error) => {
        this.setState({
          error: true,
          loading: false
        });
      }
    });
  },

  getEventTitle(event) {
    return event.message.split('\n')[0].substr(0, 100);
  },

  renderNoQueryResults() {
    return (
      <div className="box empty-stream">
        <span className="icon icon-exclamation" />
        <p>{t('Sorry, no events match your search query.')}</p>
      </div>
    );
  },

  renderEmpty() {
    return (
      <div className="box empty-stream">
        <span className="icon icon-exclamation" />
        <p>{t('There don\'t seem to be any events yet.')}</p>
      </div>
    );
  },

  renderResults() {
    let group = this.getGroup();
    let tagList = group.tags.filter((tag) => {
      return tag.key !== 'user';
    });

    let hasUser = false;
    for (let i = 0; i < this.state.eventList.length; i++) {
      if (this.state.eventList[i].user) {
        hasUser = true;
        break;
      }
    }

    let {orgId, projectId, groupId} = this.props.params;

    let children = this.state.eventList.map((event, eventIdx) => {
      let tagMap = {};
      event.tags.forEach((tag) => {
        tagMap[tag.key] = tag.value;
      });

      return (
        <tr key={eventIdx}>
          <td>
            <h5>
              <Link to={`/${orgId}/${projectId}/issues/${groupId}/events/${event.id}/`}>
                <DateTime date={event.dateCreated} />
              </Link>
              <small>{this.getEventTitle(event)}</small>
            </h5>
          </td>
          {tagList.map((tag) => {
            return (
              <td key={tag.key}>
                {tagMap[tag.key]}
              </td>
            );
          })}
          {hasUser &&
            <td className="event-user table-user-info">
              {event.user ?
                <div>
                  <Gravatar email={event.user.email} size={64} className="avatar" />
                  {event.user.email}
                </div>
              :
                <span>&mdash;</span>
              }
            </td>
          }
        </tr>
      );<commit_msg>Use event ID for React key<commit_after>import React from 'react';
import {History, Link} from 'react-router';

import ApiMixin from '../mixins/apiMixin';
import DateTime from '../components/dateTime';
import Gravatar from '../components/gravatar';
import GroupState from '../mixins/groupState';
import LoadingError from '../components/loadingError';
import LoadingIndicator from '../components/loadingIndicator';
import Pagination from '../components/pagination';
import SearchBar from '../components/searchBar.jsx';
import {t} from '../locale';

const GroupEvents = React.createClass({
  mixins: [
    ApiMixin,
    GroupState,
    History
  ],

  getInitialState() {
    let queryParams = this.props.location.query;
    return {
      eventList: [],
      loading: true,
      error: false,
      pageLinks: '',
      query: queryParams.query || '',
    };
  },

  componentWillMount() {
    this.fetchData();
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.params.groupId !== this.props.params.groupId ||
        nextProps.location.search !== this.props.location.search) {
      let queryParams = nextProps.location.query;
      this.setState({
        query: queryParams.query
      }, this.fetchData);
    }
  },

  onSearch(query) {
    let targetQueryParams = {};
    if (query !== '')
      targetQueryParams.query = query;

    let {groupId, orgId, projectId} = this.props.params;
    this.history.pushState(null, `/${orgId}/${projectId}/issues/${groupId}/events/`, targetQueryParams);
  },

  getEndpoint() {
    let params = this.props.params;
    let queryParams = {
      ...this.props.location.query,
      limit: 50,
      query: this.state.query
    };

    return `/issues/${params.groupId}/events/?${jQuery.param(queryParams)}`;
  },

  fetchData() {
    let queryParams = this.props.location.query;

    this.setState({
      loading: true,
      error: false
    });

    this.api.request(this.getEndpoint(), {
      method: 'GET',
      data: queryParams,
      success: (data, _, jqXHR) => {
        this.setState({
          eventList: data,
          error: false,
          loading: false,
          pageLinks: jqXHR.getResponseHeader('Link')
        });
      },
      error: (error) => {
        this.setState({
          error: true,
          loading: false
        });
      }
    });
  },

  getEventTitle(event) {
    return event.message.split('\n')[0].substr(0, 100);
  },

  renderNoQueryResults() {
    return (
      <div className="box empty-stream">
        <span className="icon icon-exclamation" />
        <p>{t('Sorry, no events match your search query.')}</p>
      </div>
    );
  },

  renderEmpty() {
    return (
      <div className="box empty-stream">
        <span className="icon icon-exclamation" />
        <p>{t('There don\'t seem to be any events yet.')}</p>
      </div>
    );
  },

  renderResults() {
    let group = this.getGroup();
    let tagList = group.tags.filter((tag) => {
      return tag.key !== 'user';
    });

    let hasUser = false;
    for (let i = 0; i < this.state.eventList.length; i++) {
      if (this.state.eventList[i].user) {
        hasUser = true;
        break;
      }
    }

    let {orgId, projectId, groupId} = this.props.params;

    let children = this.state.eventList.map((event) => {
      let tagMap = {};
      event.tags.forEach((tag) => {
        tagMap[tag.key] = tag.value;
      });

      return (
        <tr key={event.id}>
          <td>
            <h5>
              <Link to={`/${orgId}/${projectId}/issues/${groupId}/events/${event.id}/`}>
                <DateTime date={event.dateCreated} />
              </Link>
              <small>{this.getEventTitle(event)}</small>
            </h5>
          </td>
          {tagList.map((tag) => {
            return (
              <td key={tag.key}>
                {tagMap[tag.key]}
              </td>
            );
          })}
          {hasUser &&
            <td className="event-user table-user-info">
              {event.user ?
                <div>
                  <Gravatar email={event.user.email} size={64} className="avatar" />
                  {event.user.email}
                </div>
              :
                <span>&mdash;</span>
              }
            </td>
          }
        </tr>
      );
{'fraction_non_alphanumeric': 0.15772944050250087, 'fraction_numerical': 0.0027916715133185993, 'mean_word_length': 1.9587061252580866, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 75, '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': '2645861', 'n_tokens_mistral': 2630, 'n_tokens_neox': 2561, 'n_words': 506}