<commit_before>import React from "react";
import "./JoinGroupModal.scss";
import { Header, Segment, Button, Message, Modal } from 'semantic-ui-react';
import _ from 'lodash';
import Autocomplete from 'react-autocomplete';
import classNames from 'classnames';

class JoinGroupModal extends React.Component {

  constructor() {
    super();
    this.state = {
      searchValue: "",
      open: false,
      sent: false
    };
    _.bindAll(this,
      "handleSearch",
      "handleSend",
      "close");
  }

  handleSearch(event, value) {
    this.setState({
      searchValue: value
    });
    if (value !== "") {
      this.props.searchGroups(value);
    }
  }

  handleSend() {
    this.props.joinRequest(this.state.searchValue).then(() => {
      this.setState({searchValue: "", sent: true});
    });
  }

  open() {
    this.setState({ open: true });
  }

  close() {
    this.setState({
      open: false,
      searchValue: ""
    });
  }

  render() {
    const message = this.state.sent && (
      <Message positive>
        Your request has been sent! You will be added to the group once its leader approves your request.
      </Message>
    );

    return (
      <Modal className="join-request" open={this.state.open} onClose={this.close}>
        <Modal.Header>
          Make a Join Request
        </Modal.Header>
        <Modal.Content>
          <div className="ui input fluid">
            <Autocomplete
              inputProps={{className: "search-input", placeholder: "Search groups"}}
              items={this.props.groupSearchResults}
              getItemValue={(group) => group.name}
              renderItem={(item, isHighlighted) => {
                return <div
                  key={item.abbr}
                  className={classNames("menuItem", {"highlighted": isHighlighted})}
                  id={item.abbr}>
                  {item.name}
                </div>
              }}
              onSelect={(value, item) => {
                this.setState({ searchValue: value });
              }}
              value={this.state.searchValue}
              onChange={this.handleSearch}
            />
          </div>
          <Button className="send-btn" primary onClick={this.handleSend}>Send request</Button>
          {message}
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={this.close}>
            Cancel
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

export default JoinGroupModal;<commit_msg>Unknown issue with input<commit_after>import React from "react";
// import "./JoinGroupModal.scss";
import { Header, Segment, Button, Message, Modal, Select } from 'semantic-ui-react';
import _ from 'lodash';
import Autocomplete from 'react-autocomplete';
import classNames from 'classnames';

class JoinGroupModal extends React.Component {

  constructor() {
    super();
    this.state = {
      searchValue: "",
      selectedGroup: null,
      open: false,
      sent: false,
      loading: false
    };
    _.bindAll(this,
      "handleSearch",
      "handleSend",
      "handleSelectGroup",
      "close");
  }

  handleSearch(event, value) {
    this.setState({
      searchValue: value,
      loading: true
    });
    if (value !== "") {
      this.props.searchGroups(value).then(() => {
        this.setState({
          loading: false
        });
      });
    } else {
      this.setState({
        loading: false
      });
    }
  }

  handleSend() {
    this.props.joinRequest(this.state.selectedGroup.name).then(() => {
      this.setState({
        searchValue: "",
        sent: true,
        selectedGroup: null
      });
    });
  }

  handleSelectGroup(group) {
    this.setState({
      selectedGroup: group
    });
  }

  getOptions() {
    return this.props.groupSearchResults.map((group) => {
      return {
        value: group,
        label: group.name
      }
    });
  }

  open() {
    this.setState({ open: true });
  }

  close() {
    this.setState({
      open: false,
      searchValue: "",
      loading: false,
      selectedGroup: null
    });
  }

  render() {
    const message = this.state.sent && (
      <Message positive>
        Your request has been sent! You will be added to the group once its leader approves your request.
      </Message>
    );

    return (
      <Modal className="join-request" open={this.state.open} onClose={this.close}>
        <Modal.Header>
          Make a Join Request
        </Modal.Header>
        <Modal.Content>
          <Select
            name="group-search"
            multi={false}
            placeholder="Search groups..."
            isLoading={this.state.loading}
            value={this.state.searchValue}
            options={this.getOptions()}
            onInputChange={this.handleSearch}
            onChange={this.handleSelectGroup}
          />
          <Button className="send-btn" primary onClick={this.handleSend}>Send request</Button>
          {message}
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={this.close}>
            Cancel
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

export default JoinGroupModal;
{'fraction_non_alphanumeric': 0.1342763030420461, 'fraction_numerical': 0.0, 'mean_word_length': 1.9530892448512587, 'pattern_counts': {'":': 1, '<': 37, '<?xml version=': 0, '>': 44, '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': '5553923', 'n_tokens_mistral': 1459, 'n_tokens_neox': 1438, 'n_words': 312}