<commit_before>import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty';
import Pagination from '../Pagination.jsx';
import { searchUser } from '../../actions/searchUser';

/** Table of search result */
class SearchResultTable extends React.Component {

  constructor(props) {
    super(props);

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

  /**
   * handles click on change of page
   * @param {object} page
   * @returns {void}
   * @memberOf Users
   */
  handlePageClick(page) {
    const selected = page.selected;
    const limit = 1;
    const offset = Math.ceil(selected * limit);
    this.setState({ offset });
    this.props.searchUser({
      offset,
      limit,
      searchQuery: this.props.searchQuery
    });
  }


  /**
   * Render
   * @returns {ReactElement} Search table markup
   */
  render() {
    const users = this.props.searchResult.users;
    let searchResultRow;

    if (!isEmpty(users)) {
      searchResultRow = users.map(user => (
        <tr key={user.id}>
          <td>
            {user.firstName}
          </td>
          <td>
            {user.lastName}
          </td>
          <td>
            {user.email}
          </td>
          <td>
            {user.phoneNumber}
          </td>
          <td>
            {user.groups.map(group => (
              <ul key={group.id}>
                <li>{group.groupName}</li>
              </ul>
            ))}
          </td>
        </tr>
      ));
    }
<commit_msg>Display number of groups in the search result instead of the group names<commit_after>import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty';
import Pagination from '../Pagination.jsx';
import { searchUser } from '../../actions/searchUser';

/** Table of search result */
class SearchResultTable extends React.Component {

  constructor(props) {
    super(props);

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

  /**
   * handles click on change of page
   * @param {object} page
   * @returns {void}
   * @memberOf Users
   */
  handlePageClick(page) {
    const selected = page.selected;
    const limit = 1;
    const offset = Math.ceil(selected * limit);
    this.setState({ offset });
    this.props.searchUser({
      offset,
      limit,
      searchQuery: this.props.searchQuery
    });
  }


  /**
   * Render
   * @returns {ReactElement} Search table markup
   */
  render() {
    const users = this.props.searchResult.users;
    let searchResultRow;

    if (!isEmpty(users)) {
      searchResultRow = users.map(user => (
        <tr key={user.id}>
          <td>
            {user.firstName}
          </td>
          <td>
            {user.lastName}
          </td>
          <td>
            {user.email}
          </td>
          <td>
            {user.phoneNumber}
          </td>
          <td>
            {user.groups.length}
          </td>
        </tr>
      ));
    }

{'fraction_non_alphanumeric': 0.13462168358991156, 'fraction_numerical': 0.0006550933508024893, 'mean_word_length': 1.903041825095057, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 34, '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': '7480995', 'n_tokens_mistral': 918, 'n_tokens_neox': 908, 'n_words': 218}