{"size": 2094, "ext": "js", "max_stars_repo_path": "client/src/components/FightFlow/TeamSelection/index.js", "max_stars_repo_name": "agtravis/superhero-battle", "max_stars_repo_stars_event_min_datetime": "2020-05-21T18:34:36.000Z", "max_stars_repo_stars_event_max_datetime": "2020-05-21T18:34:36.000Z", "max_issues_repo_path": "client/src/components/FightFlow/TeamSelection/index.js", "max_issues_repo_name": "agtravis/superhero-battle", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/FightFlow/TeamSelection/index.js", "max_forks_repo_name": "agtravis/superhero-battle", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.1948051948, "max_line_length": 77, "alphanum_fraction": 0.6160458453}
import React, { Component } from "react";
import SuperHeroAPI from "../../../utils/SuperHeroAPI";
import FilterForm from "../FilterForm";

class TeamSelection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filteredResults: [],
      roster: [],
      searchField: ``,
      teamMember: {},
    };
  }

  componentDidMount() {
    this.setState({ roster: this.props.roster });
  }

  changeTeamMember = () =>
    this.setState({ teamMember: {}, filteredResults: [], filtered: false });

  clearForm = () => {
    document.getElementById(`team-member-search`).value = ``;
    this.setState({ searchField: ``, filteredResults: [], filtered: false });
  };

  confirmTeamMember = () => {
    this.props.addToTeam(this.state.teamMember);
    this.props.toggleTeamSelector();
  };

  getTeamMember = id => {
    SuperHeroAPI.loadContender(id)
      .then(response => this.setState({ teamMember: response.data }))
      .catch(err => console.error(err));
  };

  handleChange = (event, stateKey) => {
    this.setState({ [stateKey]: event.target.value });
  };

  handleSubmit = () => {
    const filtered = this.state.roster.filter(character =>
      character.name
        .toLowerCase()
        .includes(this.state.searchField.toLowerCase())
    );
    this.setState({ filteredResults: filtered, filtered: true });
  };

  render() {
    return (
      <div>
        <FilterForm
          title={`Team Member`}
          character={this.state.teamMember}
          clearForm={this.clearForm}
          fieldName={`searchField`}
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
          id={`team-member-search`}
          confirmCharacter={this.confirmTeamMember}
          changeCharacter={this.changeTeamMember}
          filteredResults={this.state.filteredResults}
          filtered={this.state.filtered}
          roster={this.props.roster}
          getCharacter={this.getTeamMember}
          toggleTeamSelector={this.props.toggleTeamSelector}
        />
      </div>
    );
  }
}

export default TeamSelection;
