<commit_before>import React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css'
import './UserTable.css';

class UserTable extends React.Component {
  constructor(props) {
    super(props);

    // TODO: Wire up real data.
    this.state = { selected: {}, selectAll: 0, data: makeData() };

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

  toggleRow(email) {
    const newSelected = Object.assign({}, this.state.selected);
    newSelected[email] = !this.state.selected[email];
    this.setState({
      selected: newSelected,
      selectAll: 2,
    });
  }

  toggleSelectAll() {
    let newSelected = {};

    if (this.state.selectAll === 0) {
      this.state.data.forEach(x => {
        newSelected[x.email] = true;
      });
    }

    this.setState({
      selected: newSelected,
      selectAll: this.state.selectAll === 0 ? 1 : 0,
    });
  }

  render() {
    const columns = [
      {
        Header: () => {
          const numSelected = Object.values(this.state.selected).filter(v => !!v).length;
          return `${numSelected} selected`;
        },
        columns: [
          {
            id: 'checkbox',
            accessor: '',
            Cell: ({ original }) => {
              return (
                <input
                  type='checkbox'
                  className='checkbox'
                  checked={this.state.selected[original.email] === true}
                  onChange={() => this.toggleRow(original.email)}
                />
              );
            },
            Header: () => {
              return (
                <input
                  type='checkbox'
                  className='checkbox'
                  checked={this.state.selectAll === 1}
                  ref={input => {
                    if (input) {
                      input.indeterminate = this.state.selectAll === 2;
                    }
                  }}
                  onChange={() => this.toggleSelectAll()}
                />
              );
            },
            sortable: false,
            width: 50,
          },
          {
            Header: 'Name',
            id: 'name',
            accessor: d => d.name,
          },
          {
            Header: 'Email',
            id: 'email',
            accessor: d => d.email,
          },
          {
            Header: 'Role',
            accessor: 'role',
          },
        ],
      }
    ];

    return (
      <div>
        <ReactTable
          data={this.state.data}
          columns={columns}
          defaultSorted={[{ id: 'name', desc: false }]}
          className='user-table'
        />
      </div>
    );
  }
}

export default UserTable;

function makeData() {
  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map(i => {
    return {
      name: 'Dimsum' + i,
      email: i + '@dim<EMAIL>',
      role: 'Admin',
    }
  });
}<commit_msg>Key table by uid instead of email<commit_after>import React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css'
import './UserTable.css';

class UserTable extends React.Component {
  constructor(props) {
    super(props);

    // TODO: Wire up real data.
    this.state = { selected: {}, selectAll: 0, data: makeData() };

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

  toggleRow(uid) {
    const newSelected = Object.assign({}, this.state.selected);
    newSelected[uid] = !this.state.selected[uid];
    this.setState({
      selected: newSelected,
      selectAll: 2,
    });
  }

  toggleSelectAll() {
    let newSelected = {};

    if (this.state.selectAll === 0) {
      this.state.data.forEach(x => {
        newSelected[x.uid] = true;
      });
    }

    this.setState({
      selected: newSelected,
      selectAll: this.state.selectAll === 0 ? 1 : 0,
    });
  }

  render() {
    const columns = [
      {
        Header: () => {
          const numSelected = Object.values(this.state.selected).filter(v => !!v).length;
          return `${numSelected} selected`;
        },
        columns: [
          {
            id: 'checkbox',
            accessor: '',
            Cell: ({ original }) => {
              return (
                <input
                  type='checkbox'
                  className='checkbox'
                  checked={this.state.selected[original.uid] === true}
                  onChange={() => this.toggleRow(original.uid)}
                />
              );
            },
            Header: () => {
              return (
                <input
                  type='checkbox'
                  className='checkbox'
                  checked={this.state.selectAll === 1}
                  ref={input => {
                    if (input) {
                      input.indeterminate = this.state.selectAll === 2;
                    }
                  }}
                  onChange={() => this.toggleSelectAll()}
                />
              );
            },
            sortable: false,
            width: 50,
          },
          {
            Header: 'Name',
            id: 'name',
            accessor: d => d.name,
          },
          {
            Header: 'Email',
            id: 'email',
            accessor: d => d.email,
          },
          {
            Header: 'Role',
            accessor: 'role',
          },
        ],
      }
    ];

    return (
      <div>
        <ReactTable
          data={this.state.data}
          columns={columns}
          defaultSorted={[{ id: 'name', desc: false }]}
          className='user-table'
        />
      </div>
    );
  }
}

export default UserTable;

function makeData() {
  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map(i => {
    return {
      uid: i,
      name: 'Dimsum' + i,
      email: i + '@dim<EMAIL>.<EMAIL>',
      role: 'Admin',
    }
  });
}
{'fraction_non_alphanumeric': 0.1470987444859179, 'fraction_numerical': 0.01493043773328809, 'mean_word_length': 1.3300395256916997, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5689708', 'n_tokens_mistral': 1789, 'n_tokens_neox': 1667, 'n_words': 350}