<commit_before>import { Component } from "react";
import { connect } from "react-apollo";
import { withRouter } from "react-router";
import gql from "graphql-tag";

import Loading from "../../../components/loading";
import Forms from "../../../components/forms";

import Tag from "../components/Tag";

const mapQueriesToProps = () => ({
  attributes: {
    query: gql`
      query GetGroupAttributes {
        tags: groupAttributes {
          id
          description
          value
        }
      }
    `,
  },
});
const mapStateToProps = (state) => ({ location: state.routing.location });
let defaultTags = [];
@withRouter
@connect({ mapQueriesToProps, mapStateToProps })
export default class Filter extends Component {

  state = { query: null }

  findByQuery = (e) => {
    if (e && e.preventDefault) e.preventDefault();

    const { query } = this.state;
    let { router, location } = this.props;

    if (!location.query) location.query = {};
    if (query) location.query.q = query;

    // reset state
    this.setState({ query: null });
    router.push(location);
  }

  removeQuery = (e) => {
    if (e && e.preventDefault) e.preventDefault();

    this.props.toggleSearch();

    const { query } = this.state;
    let { router, location } = this.props;

    if (location.query && location.query.q) delete location.query.q;
    // reset state
    this.setState({ query: null });
    router.push(location);

  }

  inputOnChange = (value) => {
    this.setState({ query: value });
  }

  render() {
    const {
      attributes,
      showSearch,
      toggleSearch,
      showTags,
      toggleTags,
      q,
    } = this.props;
    let tags = attributes.tags ? attributes.tags : defaultTags;
    return (
      <div>

        {/* filter internals */}
        {(() => {
          if (!showTags) return null; // hidden
          if (!tags.length) return null; // XXX loading....
          return (
            <div className="outlined--light outlined--bottom soft-half-sides soft-ends soft-double-ends@anchored text-center background--light-primary">
              <h4 className="soft-half-bottom flush-bottom">
                Featured Tags
              </h4>
              <div className="two-thirds@anchored display-inline-block soft-ends@anchored">
                {tags.map((tag, key) => <Tag key={key} val={tag.value} />)}
              </div>
            </div>
          );
        })()}

        {(() => {
          if (!showSearch) return null;
          return (
            <div className="outlined--light outlined--bottom soft-half-sides@handheld soft soft-double@anchored text-left background--light-primary">

              <Forms.Form
                  classes={["hard", "display-inline-block", "one-whole" ]}
                  submit={(e) => this.findByQuery(e)}
              >
                <i className="icon-search locked-left soft-half-left" />
                <span
                    style={{zIndex: 1, padding: "20px 0px", "marginTop": "-15px", "cursor": "pointer"}}
                    onClick={this.removeQuery}
                    className="h7 locked-right flush-bottom"
                >Cancel</span>
                <Forms.Input
                    hideLabel
                    classes={["hard-bottom", "soft-right", "push-double-right"]}
                    inputClasses="soft-double-left soft-half-bottom"
                    placeholder="Type your search here..."
                    type="text"
                    defaultValue={q}
                    onChange={(e) => this.inputOnChange(e)}
                />

              <div className="one-whole text-left">
                  <h6><em>Find a group by zipcode, name, campus, or description</em></h6>
                </div>
              </Forms.Form>

            </div>
          );
        })()}
      </div>
    );
  }

}<commit_msg>remove focus on group filter search and add serach button to keyboard (#1070)<commit_after>import { Component } from "react";
import { connect } from "react-apollo";
import { withRouter } from "react-router";
import gql from "graphql-tag";

import Loading from "../../../components/loading";
import Forms from "../../../components/forms";

import Tag from "../components/Tag";

const mapQueriesToProps = () => ({
  attributes: {
    query: gql`
      query GetGroupAttributes {
        tags: groupAttributes {
          id
          description
          value
        }
      }
    `,
  },
});
const mapStateToProps = (state) => ({ location: state.routing.location });
let defaultTags = [];
@withRouter
@connect({ mapQueriesToProps, mapStateToProps })
export default class Filter extends Component {

  state = { query: null }

  findByQuery = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    document.getElementById("search").blur();

    const { query } = this.state;
    let { router, location } = this.props;

    if (!location.query) location.query = {};
    if (query) location.query.q = query;

    // reset state
    this.setState({ query: null });
    router.push(location);
  }

  removeQuery = (e) => {
    if (e && e.preventDefault) e.preventDefault();

    this.props.toggleSearch();

    const { query } = this.state;
    let { router, location } = this.props;

    if (location.query && location.query.q) delete location.query.q;
    // reset state
    this.setState({ query: null });
    router.push(location);

  }

  inputOnChange = (value) => {
    this.setState({ query: value });
  }

  render() {
    const {
      attributes,
      showSearch,
      toggleSearch,
      showTags,
      toggleTags,
      q,
    } = this.props;
    let tags = attributes.tags ? attributes.tags : defaultTags;
    return (
      <div>

        {/* filter internals */}
        {(() => {
          if (!showTags) return null; // hidden
          if (!tags.length) return null; // XXX loading....
          return (
            <div className="outlined--light outlined--bottom soft-half-sides soft-ends soft-double-ends@anchored text-center background--light-primary">
              <h4 className="soft-half-bottom flush-bottom">
                Featured Tags
              </h4>
              <div className="two-thirds@anchored display-inline-block soft-ends@anchored">
                {tags.map((tag, key) => <Tag key={key} val={tag.value} />)}
              </div>
            </div>
          );
        })()}

        {(() => {
          if (!showSearch) return null;
          return (
            <div className="outlined--light outlined--bottom soft-half-sides@handheld soft soft-double@anchored text-left background--light-primary">

              <Forms.Form
                  classes={["hard", "display-inline-block", "one-whole" ]}
                  submit={(e) => this.findByQuery(e)}
                  action
              >
                <i className="icon-search locked-left soft-half-left" />
                <span
                    style={{zIndex: 1, padding: "20px 0px", "marginTop": "-15px", "cursor": "pointer"}}
                    onClick={this.removeQuery}
                    className="h7 locked-right flush-bottom"
                >Cancel</span>
                <Forms.Input
                    id="search"
                    name="search"
                    ref="searchInput"
                    hideLabel
                    classes={["hard-bottom", "soft-right", "push-double-right"]}
                    inputClasses="soft-double-left soft-half-bottom"
                    placeholder="Type your search here..."
                    type="text"
                    defaultValue={q}
                    onChange={(e) => this.inputOnChange(e)}
                />

              <div className="one-whole text-left">
                  <h6><em>Find a group by zipcode, name, campus, or description</em></h6>
                </div>
              </Forms.Form>

            </div>
          );
        })()}
      </div>
    );
  }

}
{'fraction_non_alphanumeric': 0.14419074050712755, 'fraction_numerical': 0.0032799293553677305, 'mean_word_length': 1.7681564245810055, 'pattern_counts': {'":': 4, '<': 49, '<?xml version=': 0, '>': 69, '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': '2872275', 'n_tokens_mistral': 2233, 'n_tokens_neox': 2156, 'n_words': 497}