<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import intersection from 'lodash/intersection';
import sortBy from 'lodash/sortBy';
import { deburrUpper } from 'utils/data';
import Link from 'redux-first-router-link';

import Icon from 'components/ui/icon';
import Button from 'components/ui/button';
import AoICard from 'components/aoi-card';
import Pill from 'components/ui/pill';
import Dropdown from 'components/ui/dropdown';
import Search from 'components/ui/search';

import mapIcon from 'assets/icons/view-map.svg';
import editIcon from 'assets/icons/edit.svg';
import shareIcon from 'assets/icons/share.svg';

import './styles.scss';

class AreasTable extends PureComponent {
  static propTypes = {
    areas: PropTypes.array,
    tags: PropTypes.array,
    viewArea: PropTypes.func,
    setSaveAOISettings: PropTypes.func,
    setShareModal: PropTypes.func
  };

  state = {
    activeTags: [],
    sortBy: '',
    search: ''
  };

  render() {
    const {
      areas,
      tags,
      viewArea,
      setSaveAOISettings,
      setShareModal
    } = this.props;
    const { activeTags, search } = this.state;

    const selectedTags = tags.filter(t => activeTags.includes(t.value));
    const unselectedTags = tags.filter(t => !activeTags.includes(t.value));
    const filteredAreas =
      selectedTags && selectedTags.length && areas && areas.length
        ? areas.filter(a => !!intersection(a.tags, activeTags).length)
        : areas;
    const filterAreasBySearch =
      filteredAreas && filteredAreas.length && search
        ? filteredAreas.filter(a =>
          deburrUpper(a.name).includes(deburrUpper(search))
        )
        : filteredAreas;
    const sortedAreas = sortBy(
      filterAreasBySearch,
      this.state.sortBy || 'name'
    );
    const orderedAreas =
      this.state.sortBy === 'createdAt' ? sortedAreas.reverse() : sortedAreas;

    return (
      <div className="c-areas-table">
        <div className="row filter-row">
          <div className="column small-12 medium-5 filter-group">
            <span className="filter-title">Filter by tag</span>
            <div className="filter-tags">
              {selectedTags &&
                selectedTags.map(tag => (
                  <Pill
                    className="filter-tag"
                    key={tag.value}
                    active
                    label={tag.label}
                    onRemove={() =>
                      this.setState({
                        activeTags: activeTags.filter(t => t !== tag.value)
                      })
                    }
                  />
                ))}
              {unselectedTags &&
                !!unselectedTags.length && (
                <Dropdown
                  className="filter-tag"
                  theme="theme-dropdown-button theme-dropdown-button-small"
                  placeholder={
                    activeTags && activeTags.length > 0
                      ? 'Add more tags'
                      : 'Filter by tags'
                  }
                  noItemsFound="No tags found"
                  noSelectedValue={
                    activeTags && activeTags.length > 0
                      ? 'Add more tags'
                      : 'Filter by tags'
                  }
                  options={unselectedTags}
                  onChange={tag =>
                    tag.value &&
                      this.setState({
                        activeTags: [...activeTags, tag.value]
                      })
                  }
                />
              )}
            </div>
          </div>
          <div className="column small-12 medium-4 filter-group">
            <span className="filter-title">Order by</span>
            <div className="filter-tags">
              <Pill
                className="filter-tag"
                active={this.state.sortBy === 'createdAt'}
                label="Creation date"<commit_msg>hide tags filter section if none available<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import intersection from 'lodash/intersection';
import sortBy from 'lodash/sortBy';
import { deburrUpper } from 'utils/data';
import Link from 'redux-first-router-link';

import Icon from 'components/ui/icon';
import Button from 'components/ui/button';
import AoICard from 'components/aoi-card';
import Pill from 'components/ui/pill';
import Dropdown from 'components/ui/dropdown';
import Search from 'components/ui/search';

import mapIcon from 'assets/icons/view-map.svg';
import editIcon from 'assets/icons/edit.svg';
import shareIcon from 'assets/icons/share.svg';

import './styles.scss';

class AreasTable extends PureComponent {
  static propTypes = {
    areas: PropTypes.array,
    tags: PropTypes.array,
    viewArea: PropTypes.func,
    setSaveAOISettings: PropTypes.func,
    setShareModal: PropTypes.func
  };

  state = {
    activeTags: [],
    sortBy: '',
    search: ''
  };

  render() {
    const {
      areas,
      tags,
      viewArea,
      setSaveAOISettings,
      setShareModal
    } = this.props;
    const { activeTags, search } = this.state;

    const selectedTags = tags.filter(t => activeTags.includes(t.value));
    const unselectedTags = tags.filter(t => !activeTags.includes(t.value));
    const filteredAreas =
      selectedTags && selectedTags.length && areas && areas.length
        ? areas.filter(a => !!intersection(a.tags, activeTags).length)
        : areas;
    const filterAreasBySearch =
      filteredAreas && filteredAreas.length && search
        ? filteredAreas.filter(a =>
          deburrUpper(a.name).includes(deburrUpper(search))
        )
        : filteredAreas;
    const sortedAreas = sortBy(
      filterAreasBySearch,
      this.state.sortBy || 'name'
    );
    const orderedAreas =
      this.state.sortBy === 'createdAt' ? sortedAreas.reverse() : sortedAreas;

    const hasSelectedTags = selectedTags && !!selectedTags.length;
    const hasUnselectedTags = unselectedTags && !!unselectedTags.length;

    return (
      <div className="c-areas-table">
        <div className="row filter-row">
          <div className="column small-12 medium-5 filter-group">
            {(hasSelectedTags || hasUnselectedTags) && (
              <span className="filter-title">Filter by tag</span>
            )}
            <div className="filter-tags">
              {hasSelectedTags &&
                selectedTags.map(tag => (
                  <Pill
                    className="filter-tag"
                    key={tag.value}
                    active
                    label={tag.label}
                    onRemove={() =>
                      this.setState({
                        activeTags: activeTags.filter(t => t !== tag.value)
                      })
                    }
                  />
                ))}
              {hasUnselectedTags && (
                <Dropdown
                  className="filter-tag"
                  theme="theme-dropdown-button theme-dropdown-button-small"
                  placeholder={
                    activeTags && activeTags.length > 0
                      ? 'Add more tags'
                      : 'Filter by tags'
                  }
                  noItemsFound="No tags found"
                  noSelectedValue={
                    activeTags && activeTags.length > 0
                      ? 'Add more tags'
                      : 'Filter by tags'
                  }
                  options={unselectedTags}
                  onChange={tag =>
                    tag.value &&
                    this.setState({
                      activeTags: [...activeTags, tag.value]
                    })
                  }
                />
              )}
            </div>
          </div>
          <div className="column small-12 medium-4 filter-group">
            <span className="filter-title">Order by</span>
            <div className="filter-tags">
              <Pill
                className="filter-tag"
                active={this.state.sortBy === 'createdAt'}
                label="Creation date"
{'fraction_non_alphanumeric': 0.11143802868701728, 'fraction_numerical': 0.001961505455437048, 'mean_word_length': 1.672125777923354, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 51, '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': '3833988', 'n_tokens_mistral': 2168, 'n_tokens_neox': 2079, 'n_words': 448}