<commit_before>import Chip from '@material-ui/core/Chip';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import React from 'react';
import { injectIntl } from 'react-intl';
import { withRouter } from 'react-router-dom';
import { Field, reduxForm } from 'redux-form';
import styled from 'styled-components';
import SmallTextField from '../formHelpers/smallTextField.jsx';
import { ProductCategoryPropType } from '../propTypes';
import { laMinSize, mdMaxSize, mdMinSize } from '../theme';

export const formName = 'productFilter';

const FilterContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #FFF;
  padding: 12px 20px;
  box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.3);
  max-height: 68px;
  overflow-x: auto;
  
  @media screen and (max-width: ${mdMaxSize}) {
    justify-content: space-between;
  }
  
  @media screen and (min-width: ${mdMinSize}) {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2;
  }
  
  @media screen and (min-width: ${laMinSize}) {
    padding-left: 276px;
  }
`;

const SearchField = styled(Field)`
  min-width: 100px;
`;

const ChipContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
`;

const CategoryChip = styled(Chip)`
  margin-left: 10px !important;
`;

let timeoutId;

function debounce(fn, millis = 200) {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(fn, millis);
}

const ProductFilter = ({
  categories,
  removeCategoryFromFilter,
  history,
  intl,
}) => (
  <FilterContainer>
    <SearchField
      component={SmallTextField}
      name="search"
      label={intl.formatMessage({ id: 'PRODUCT_FILTER.FILTERSTRING_PLACEHOLDER' })}
      onKeyUp={({ target }) => debounce(() => {
        const query = queryString.parse(history.location.search);
        query.search = target.value;

        history.push(`?${queryString.stringify(query)}`);
      })}
      type="text"
    />
    <ChipContainer>
      {categories.map(category => (
        <CategoryChip
          key={category._id}
          onDelete={() => removeCategoryFromFilter(category._id)}
          label={category.de.name}
        />
      ))}
    </ChipContainer>
  </FilterContainer>
);

ProductFilter.propTypes = {
  categories: PropTypes.arrayOf(ProductCategoryPropType).isRequired,
  removeCategoryFromFilter: PropTypes.func.isRequired,
  history: PropTypes.shape({
    location: PropTypes.shape({
      search: PropTypes.string.isRequired,
    }).isRequired,
    push: PropTypes.func.isRequired,
  }).isRequired,
  intl: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};

export default reduxForm({
  form: formName,
  destroyOnUnmount: false,
})(withRouter(injectIntl(ProductFilter)));
<commit_msg>don't wrap productfilter row<commit_after>import Chip from '@material-ui/core/Chip';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import React from 'react';
import { injectIntl } from 'react-intl';
import { withRouter } from 'react-router-dom';
import { Field, reduxForm } from 'redux-form';
import styled from 'styled-components';
import SmallTextField from '../formHelpers/smallTextField.jsx';
import { ProductCategoryPropType } from '../propTypes';
import { laMinSize, mdMaxSize, mdMinSize } from '../theme';

export const formName = 'productFilter';

const FilterContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  background: #FFF;
  padding: 12px 20px;
  box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.3);
  max-height: 68px;
  overflow-x: auto;
  
  @media screen and (max-width: ${mdMaxSize}) {
    justify-content: space-between;
  }
  
  @media screen and (min-width: ${mdMinSize}) {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2;
  }
  
  @media screen and (min-width: ${laMinSize}) {
    padding-left: 276px;
  }
`;

const SearchField = styled(Field)`
  min-width: 100px;
`;

const ChipContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
`;

const CategoryChip = styled(Chip)`
  margin-left: 10px !important;
`;

let timeoutId;

function debounce(fn, millis = 200) {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(fn, millis);
}

const ProductFilter = ({
  categories,
  removeCategoryFromFilter,
  history,
  intl,
}) => (
  <FilterContainer>
    <SearchField
      component={SmallTextField}
      name="search"
      label={intl.formatMessage({ id: 'PRODUCT_FILTER.FILTERSTRING_PLACEHOLDER' })}
      onKeyUp={({ target }) => debounce(() => {
        const query = queryString.parse(history.location.search);
        query.search = target.value;

        history.push(`?${queryString.stringify(query)}`);
      })}
      type="text"
    />
    <ChipContainer>
      {categories.map(category => (
        <CategoryChip
          key={category._id}
          onDelete={() => removeCategoryFromFilter(category._id)}
          label={category.de.name}
        />
      ))}
    </ChipContainer>
  </FilterContainer>
);

ProductFilter.propTypes = {
  categories: PropTypes.arrayOf(ProductCategoryPropType).isRequired,
  removeCategoryFromFilter: PropTypes.func.isRequired,
  history: PropTypes.shape({
    location: PropTypes.shape({
      search: PropTypes.string.isRequired,
    }).isRequired,
    push: PropTypes.func.isRequired,
  }).isRequired,
  intl: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};

export default reduxForm({
  form: formName,
  destroyOnUnmount: false,
})(withRouter(injectIntl(ProductFilter)));

{'fraction_non_alphanumeric': 0.13972408914043155, 'fraction_numerical': 0.010611956137247965, 'mean_word_length': 3.639048400328138, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 25, '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': '4876308', 'n_tokens_mistral': 1872, 'n_tokens_neox': 1816, 'n_words': 397}