<commit_before>import { Callout, Intent } from '@blueprintjs/core';
import { Layout } from '@shopify/polaris';
import * as React from 'react';
import { connect } from 'react-redux';
import { blockListsAreEmpty } from 'selectors/blocklists';
import { RootState } from '../../types';
import EmptyBlocklist from '../Blocklists/EmptyBlocklist';
import RequesterBlocklistView from '../Blocklists/RequesterBlocklistView';
import HitBlocklistView from '../Blocklists/HitBlocklistView';

interface Props {
  readonly empty: boolean;
}

class BlocklistsTab extends React.Component<Props, never> {
  public render() {
    return this.props.empty ? (
      <EmptyBlocklist />
    ) : (
      <Layout>
        <Layout.Section>
          <RequesterBlocklistView />
        </Layout.Section>
        <Layout.Section>
          <HitBlocklistView />
        </Layout.Section>
        <Layout.Section>
          <Callout intent={Intent.SUCCESS} icon="info-sign">
            Large blocklists do not slow down Mturk Engine. Feel free to grow
            them as large as you like.
          </Callout>
        </Layout.Section>
      </Layout>
    );
  }
}

const mapState = (state: RootState): Props => ({
  empty: blockListsAreEmpty(state)
});

export default connect(mapState)(BlocklistsTab);<commit_msg>BlocklistsTab no longer renders components when the blocklist tab is not active.<commit_after>import { Callout, Intent } from '@blueprintjs/core';
import { Layout } from '@shopify/polaris';
import * as React from 'react';
import { connect } from 'react-redux';
import { blockListsAreEmpty } from 'selectors/blocklists';
import { RootState } from '../../types';
import EmptyBlocklist from '../Blocklists/EmptyBlocklist';
import RequesterBlocklistView from '../Blocklists/RequesterBlocklistView';
import HitBlocklistView from '../Blocklists/HitBlocklistView';
import { TabIndex } from 'constants/enums';

interface Props {
  readonly blocklistIsActiveTab: boolean;
  readonly empty: boolean;
}

class BlocklistsTab extends React.Component<Props, never> {
  public render() {
    if (!this.props.blocklistIsActiveTab) {
      return null;
    }

    return this.props.empty ? (
      <EmptyBlocklist />
    ) : (
      <Layout>
        <Layout.Section>
          <RequesterBlocklistView />
        </Layout.Section>
        <Layout.Section>
          <HitBlocklistView />
        </Layout.Section>
        <Layout.Section>
          <Callout intent={Intent.SUCCESS} icon="info-sign">
            Large blocklists do not slow down Mturk Engine. Feel free to grow
            them as large as you like.
          </Callout>
        </Layout.Section>
      </Layout>
    );
  }
}

const mapState = (state: RootState): Props => ({
  blocklistIsActiveTab: state.tab === TabIndex.BLOCKLIST,
  empty: blockListsAreEmpty(state)
});

export default connect(mapState)(BlocklistsTab);
{'fraction_non_alphanumeric': 0.11962224554039874, 'fraction_numerical': 0.0, 'mean_word_length': 3.097421203438395, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 33, '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': '1361763', 'n_tokens_mistral': 808, 'n_tokens_neox': 806, 'n_words': 214}