lodash#_ JavaScript Examples

filterByTeam(value, allTeams, teamParticipants, allParticipants) {
    // do no filtering if no teams selected.
    if (value.length === 0) {
      return allParticipants;
    }
    // convert from team name to teamID
    const teamID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allTeams.length; j++) {
        if (value[i] === allTeams[j].name) {
          teamID.push(allTeams[j]._id);
        }
      }
    }
    let teamsWithParticipants = [];
    for (let i = 0; i < teamID.length; i++) {
      for (let j = 0; j < teamParticipants.length; j++) {
        if (teamID[i] === teamParticipants[j].teamID) {
          teamsWithParticipants.push(teamParticipants[j].participantID);
        }
      }
    }
    // Ensure there's no duplicate participantIDs
    teamsWithParticipants = _.uniq(teamsWithParticipants);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < teamsWithParticipants.length; i++) {
      for (let j = 0; j < allParticipants.length; j++) {
        if (teamsWithParticipants[i] === allParticipants[j]._id) {
          participants.push(allParticipants[j]);
        }
      }
    }
    return participants;
  }

/**
   *
   * @param data The data we want to sort
   * @param value The value we want to sort by
   * @returns {Array|*} Returns the sorted array
   */
  sortBy(data, value) {
    if (value === 'participants') {
      return _.orderBy(data, ['name'], ['asc']);
    }
    return data;
  }

buildTheFormSchema() {
    const challengeNames = _.map(this.props.challenges, c => c.title);
    const skillNames = _.map(this.props.skills, s => s.name);
    const toolNames = _.map(this.props.tools, t => t.name);
    const schema = new SimpleSchema({
      open: {
        type: String,
        allowedValues: ['Open', 'Close'],
        label: 'Availability',
      },
      name: { type: String, label: 'Team Name' },
      challenge: { type: String, allowedValues: challengeNames },
      skills: { type: Array, label: 'Skills', optional: true },
      'skills.$': { type: String, allowedValues: skillNames },
      tools: { type: Array, label: 'Toolsets', optional: true },
      'tools.$': { type: String, allowedValues: toolNames },
      // participants: { type: String, label: 'participants' },
      description: String,
      devpostPage: { type: String, optional: true },
      affiliation: { type: String, optional: true },

      participants: {
        optional: true,
        type: Array,
        minCount: 0,
      },
      'participants.$': {
        optional: true,
        type: Object,
      },
      'participants.$.email': {
        optional: true,
        type: String,
        min: 3,
      },
    });
    return schema;
  }

/**
   * Updates the given team-participant pair.
   * @param docID {String} the ID of the pair to update.
   * @param team {String} the slug or ID of the team (optional).
   * @param participant {String} the slug or ID of the participant (optional).
   * @throws {Meteor.Error} if docID is undefined.
   */
  update(docID, { team, participant, sentDM }) {
    // console.log({ team, participant, sentDM });
    this.assertDefined(docID);
    const updateData = {};
    if (participant) {
      updateData.participantID = Participants.getID(participant);
    }
    if (team) {
      updateData.teamID = Teams.getID(team);
    }
    if (_.isBoolean(sentDM)) {
      updateData.sentDM = sentDM;
    }
    this._collection.update(docID, { $set: updateData });
  }

/**
   * Supplies all the possible values to make it work with semantic UI's dropdown
   * @param data The values
   * @returns {Array} Returns an array that can be used by semantic UI's dropdown
   */
  dropdownValues(data, mapValue) {
    let values = _.map(data, mapValue);
    const categories = _.flattenDeep(values);
    values = _.uniq(categories);

    let info = [];

    for (let i = 0; i < values.length; i++) {
      info.push({
        key: values[i],
        text: values[i],
        value: values[i],
      });
    }

    info = _.orderBy(info, ['text'], ['asc']);
    return info;
  }

/**
   *
   * @param data The data we want to sort
   * @param value The value we want to sort by
   * @returns {Array|*} Returns the sorted array
   */
  sortBy(data, value) {
    if (value === 'names') {
      return _.orderBy(data, ['name'], ['asc']);
    }
    return data;
  }

constructor(props) {
    super(props);
    // console.log(props.participants);
    this.state = {
      search: '',
      challenges: [],
      tools: [],
      skills: [],
      teams: [],
      noTeamCheckbox: false,
      multipleTeamsCheckbox: false,
      compliantCheckbox: false,
      result: _.orderBy(this.props.participants, ['name'], ['asc']),
    };
  }

/**
   * Supplies all the possible values to make it work with semantic UI's dropdown
   * @param data The values
   * @returns {Array} Returns an array that can be used by semantic UI's dropdown
   */
  dropdownValues(data, mapValue) {
    let values = _.map(data, mapValue);
    const categories = _.flattenDeep(values);
    values = _.uniq(categories);

    let info = [];

    for (let i = 0; i < values.length; i++) {
      info.push({
        key: values[i],
        text: values[i],
        value: values[i],
      });
    }

    info = _.orderBy(info, ['text'], ['asc']);
    return info;
  }

filterMultipleTeams(teamParticipants, allParticipants) {
    const retVal = [];
    allParticipants.forEach((p, i) => {
      const teams = _.uniqBy(_.filter(teamParticipants, { participantID: p._id }), 'teamID');
      if (teams.length > 1) {
        retVal.push(allParticipants[i]);
      }
    });
    return retVal;
  }

filterNoTeam(teamParticipants, allParticipants) {
    const retVal = [];
    allParticipants.forEach((p, i) => {
      const teams = _.filter(teamParticipants, { participantID: p._id });
      if (teams.length === 0) {
        retVal.push(allParticipants[i]);
      }
    });
    return retVal;
  }

/**
   * Supplies all the possible values to make it work with semantic UI's dropdown
   * @param data The values
   * @returns {Array} Returns an array that can be used by semantic UI's dropdown
   */
  dropdownValues(data, mapValue) {
    let values = _.map(data, mapValue);
    const categories = _.flattenDeep(values);
    values = _.uniq(categories);

    let info = [];

    for (let i = 0; i < values.length; i++) {
      info.push({
        key: values[i],
        text: values[i],
        value: values[i],
      });
    }

    info = _.orderBy(info, ['text'], ['asc']);
    return info;
  }

constructor(props) {
    super(props);
    this.state = {
      search: '',
      challenges: [],
      teams: [],
      tools: [],
      skills: [],
      result: _.orderBy(this.props.participants, ['name'], ['asc']),
    };
  }

/**
   *
   * @param data The data we want to sort
   * @param value The value we want to sort by
   * @returns {Array|*} Returns the sorted array
   */
  sortBy(data, value) {
    if (value === 'participants') {
      return _.orderBy(data, ['name'], ['asc']);
    }
    return data;
  }

/**
   * Updates the given team-participant pair.
   * @param docID {String} the ID of the pair to update.
   * @param team {String} the slug or ID of the team (optional).
   * @param participant {String} the slug or ID of the participant (optional).
   * @param sentJoin {boolean} the new value for sentJoin.
   * @throws {Meteor.Error} if docID is undefined.
   */
  update(docID, { team, participant, sentDM }) {
    this.assertDefined(docID);
    const updateData = {};
    if (participant) {
      updateData.participantID = Participants.getID(participant);
    }
    if (team) {
      updateData.teamID = Teams.getID(team);
    }
    if (_.isBoolean(sentDM)) {
      updateData.sentDM = sentDM;
    }
    this._collection.update(docID, { $set: updateData });
  }

constructor(props) {
    super(props);
    this.state = {
      search: '',
      type: [],
      result: _.orderBy(this.props.suggestions, ['name'], ['asc']),
    };
  }

/**
   * Filters through the data based on the user selection. By default, if no option is selected it
   * returns the original data
   * @param value The inputs given
   * @param allTeams All the available Teams
   * @param participantTeam Each participants' Team(s)
   * @param participant The participants
   * @returns {[]|*} Returns the filtered array
   */
  filterByTeam(value, allTeams, participantTeam, participant) {

    // if there are no tools selected
    if (value.length === 0) {
      return participant;
    }

    // convert from TeamName --> TeamID
    const teamID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allTeams.length; j++) {
        if (value[i] === allTeams[j].title) {
          teamID.push(allTeams[j]._id);
        }
      }
    }

    // get participantIDs for those that have the Teams
    let participantsWithTeam = [];
    for (let i = 0; i < teamID.length; i++) {
      for (let j = 0; j < participantTeam.length; j++) {
        if (teamID[i] === participantTeam[j].TeamID) {
          participantsWithTeam.push(participantTeam[j].participantID);
        }
      }
    }

    // Ensure there's no duplicate teamIDs
    participantsWithTeam = _.uniq(participantsWithTeam);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < participantsWithTeam.length; i++) {
      for (let j = 0; j < participant.length; j++) {
        if (participantsWithTeam[i] === participant[j]._id) {
          participants.push(participant[j]);
        }
      }
    }
    return participants;
  }

/**
   * Filters through the data based on the user selection. By default, if no option is selected it
   * returns the original data
   * @param value The inputs given
   * @param allChallenges All the available challenges
   * @param participantChallenge Each participants' challenge(s)
   * @param participant The participants
   * @returns {[]|*} Returns the filtered array
   */
  filterByChallenge(value, allChallenges, participantChallenge, participant) {

    // if there are no tools selected
    if (value.length === 0) {
      return participant;
    }

    // convert from challengeName --> challengeID
    const challengeID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allChallenges.length; j++) {
        if (value[i] === allChallenges[j].title) {
          challengeID.push(allChallenges[j]._id);
        }
      }
    }

    // get participantIDs for those that have the challenges
    let participantsWithChallenge = [];
    for (let i = 0; i < challengeID.length; i++) {
      for (let j = 0; j < participantChallenge.length; j++) {
        if (challengeID[i] === participantChallenge[j].challengeID) {
          participantsWithChallenge.push(participantChallenge[j].participantID);
        }
      }
    }

    // Ensure there's no duplicate teamIDs
    participantsWithChallenge = _.uniq(participantsWithChallenge);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < participantsWithChallenge.length; i++) {
      for (let j = 0; j < participant.length; j++) {
        if (participantsWithChallenge[i] === participant[j]._id) {
          participants.push(participant[j]);
        }
      }
    }
    return participants;
  }

/**
   * Filters through the data based on the user selection. By default, if no option is selected it
   * returns the original data
   * @param value The inputs given
   * @param allTools All the available tools
   * @param participantTools Each teams' tools
   * @param participant The teams
   * @returns {[]|*} Returns the filtered array
   */
  filterByTools(value, allTools, participantTools, participant) {

    // if there are no tools selected
    if (value.length === 0) {
      return participant;
    }

    // convert from toolName --> toolID
    const toolID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allTools.length; j++) {
        if (value[i] === allTools[j].name) {
          toolID.push(allTools[j]._id);
        }
      }
    }

    // get participantIDs for those that have the tools
    let participantsWithTool = [];
    for (let i = 0; i < toolID.length; i++) {
      for (let j = 0; j < participantTools.length; j++) {
        if (toolID[i] === participantTools[j].toolID) {
          participantsWithTool.push(participantTools[j].participantID);
        }
      }
    }

    // Ensure there's no duplicate participantIDs
    participantsWithTool = _.uniq(participantsWithTool);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < participantsWithTool.length; i++) {
      for (let j = 0; j < participant.length; j++) {
        if (participantsWithTool[i] === participant[j]._id) {
          participants.push(participant[j]);
        }
      }
    }
    return participants;
  }

render() {
    const teamID = this.props.team._id;
    const teamChallenges = _.map(TeamChallenges.find({ teamID }).fetch(),
    (tc) => Challenges.findDoc(tc.challengeID).title);
    const teamSkills = _.map(TeamSkills.find({ teamID }).fetch(), (ts) => Skills.findDoc(ts.skillID).name);
    const teamTools = _.map(TeamTools.find({ teamID }).fetch(), (tt) => Tools.findDoc(tt.toolID).name);
    return (
        <Item style={{ padding: '0rem 2rem 0rem 2rem' }}>
          <Item.Content>
            <Item.Header>
              <Header as={'h3'} style={{ color: '#263763', paddingTop: '2rem' }}>
                <Icon name='users' size='tiny' />
                {this.props.team.name}
              </Header>
            </Item.Header>
            <Item.Meta>
              <Grid columns='equal'>
                <Grid.Column>
                  GitHub: {this.props.team.gitHubRepo}<br />
                  DevPost: {this.props.team.devPostPage}
                  <Image src={this.props.team.image} rounded size='large' />
                </Grid.Column>
                <Grid.Column>
                  <Header>Challenges</Header>
                  <List>
                    {teamChallenges.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Skills</Header>
                  <List>
                    {teamSkills.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Tools</Header>
                  <List>
                    {teamTools.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Members</Header>
                  {this.props.teamParticipants.map((participant) => <p key={participant}>
                    {participant.firstName} {participant.lastName}</p>)}
                </Grid.Column>
              </Grid>
            </Item.Meta>
          </Item.Content>
        </Item>
    );
  }

renderPage() {
    let fRef = null;
    const formSchema = new SimpleSchema2Bridge(schema);
    const challengeArr = _.map(this.props.challenges, 'title');
    const skillArr = _.map(this.props.skills, 'name');
    const toolArr = _.map(this.props.tools, 'name');

    return (
        <Grid container centered>
          <Grid.Column>
            <Divider hidden />
            <AutoForm ref={ref => {
              fRef = ref;
            }} schema={formSchema} onSubmit={data => this.submit(data, fRef)}
                      style={{
                        paddingBottom: '40px',
                      }}>
              <Segment style={{
                borderRadius: '10px',
                backgroundColor: '#E5F0FE',
              }} className={'createTeam'}>
                <Grid columns={1} style={{ paddingTop: '20px' }}>
                  <Grid.Column style={{ paddingLeft: '30px', paddingRight: '30px' }}>
                    <Header as="h2" textAlign="center" inverted>Team Information</Header>
                    <Grid className='doubleLine'>
                      <TextField name='name' />
                      <RadioField
                          name='open'
                          inline
                      />
                    </Grid>
                    <TextField name='image' placeholder={'Team Image URL'} />
                    <LongTextField name='description' />
                    <MultiSelectField name='challenges' placeholder={'Challenges'}
                                      allowedValues={challengeArr} required />
                    <MultiSelectField name='skills' placeholder={'Skills'}
                                      allowedValues={skillArr} required />
                    <MultiSelectField name='tools' placeholder={'Toolsets'}
                                      allowedValues={toolArr} required />
                    <TextField name="github" />
                    <TextField name="devpostPage" />
                  </Grid.Column>
                </Grid>
                <div align='center'>
                  <SubmitField value='Submit'
                               style={{
                                 color: 'white', backgroundColor: '#dd000a',
                                 margin: '20px 0px',
                               }} />
                </div>
                <ErrorsField />
              </Segment>
            </AutoForm>
          </Grid.Column>
        </Grid>
    );
  }

/**
   * Filters through the data based on the user selection. By default, if no option is selected it
   * returns the original data
   * @param value The inputs given
   * @param allSkills All the available skills
   * @param participantSkill Each participants' skills
   * @param participant The participants
   * @returns {[]|*} Returns the filtered array
   */
  filterBySkills(value, allSkills, participantSkill, participant) {

    // if there are no skills selected
    if (value.length === 0) {
      return participant;
    }

    // convert from skillName --> skillID
    const skillID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allSkills.length; j++) {
        if (value[i] === allSkills[j].name) {
          skillID.push(allSkills[j]._id);
        }
      }
    }

    // get participantIDs for those that have the skills
    let participantsWithSkill = [];
    for (let i = 0; i < skillID.length; i++) {
      for (let j = 0; j < participantSkill.length; j++) {
        if (skillID[i] === participantSkill[j].skillID) {
          participantsWithSkill.push(participantSkill[j].participantID);
        }
      }
    }

    // Ensure there's no duplicate participantIDs
    participantsWithSkill = _.uniq(participantsWithSkill);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < participantsWithSkill.length; i++) {
      for (let j = 0; j < participant.length; j++) {
        if (participantsWithSkill[i] === participant[j]._id) {
          participants.push(participant[j]);
        }
      }
    }

    return participants;
  }

componentWillReceiveProps(nextProps) {
    // eslint-disable-next-line max-len
    if ((_.orderBy(nextProps.suggestions, ['name'], ['asc'])) !== (_.orderBy(this.props.suggestions, ['name'], ['asc']))) {
      this.setState({
        result: _.orderBy(nextProps.suggestions, ['name'], ['asc']),
      });
    }
  }

/**
   * Filters through the data based on the user selection. By default, if no option is selected it
   * returns the original data
   * @param value The inputs given
   * @param allChallenges All the available challenges
   * @param participantChallenge Each participants' challenge(s)
   * @param participant The participants
   * @returns {[]|*} Returns the filtered array
   */
  filterByChallenge(value, allChallenges, participantChallenge, participant) {

    // if there are no tools selected
    if (value.length === 0) {
      return participant;
    }

    // convert from challengeName --> challengeID
    const challengeID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allChallenges.length; j++) {
        if (value[i] === allChallenges[j].title) {
          challengeID.push(allChallenges[j]._id);
        }
      }
    }

    // get participantIDs for those that have the challenges
    let participantsWithChallenge = [];
    for (let i = 0; i < challengeID.length; i++) {
      for (let j = 0; j < participantChallenge.length; j++) {
        if (challengeID[i] === participantChallenge[j].challengeID) {
          participantsWithChallenge.push(participantChallenge[j].participantID);
        }
      }
    }

    // Ensure there's no duplicate teamIDs
    participantsWithChallenge = _.uniq(participantsWithChallenge);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < participantsWithChallenge.length; i++) {
      for (let j = 0; j < participant.length; j++) {
        if (participantsWithChallenge[i] === participant[j]._id) {
          participants.push(participant[j]);
        }
      }
    }
    return participants;
  }

/**
   * Filters through the data based on the user selection. By default, if no option is selected it
   * returns the original data
   * @param value The inputs given
   * @param allTools All the available tools
   * @param participantTools Each teams' tools
   * @param participant The teams
   * @returns {[]|*} Returns the filtered array
   */
  filterByTools(value, allTools, participantTools, participant) {

    // if there are no tools selected
    if (value.length === 0) {
      return participant;
    }

    // convert from toolName --> toolID
    const toolID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allTools.length; j++) {
        if (value[i] === allTools[j].name) {
          toolID.push(allTools[j]._id);
        }
      }
    }

    // get participantIDs for those that have the tools
    let participantsWithTool = [];
    for (let i = 0; i < toolID.length; i++) {
      for (let j = 0; j < participantTools.length; j++) {
        if (toolID[i] === participantTools[j].toolID) {
          participantsWithTool.push(participantTools[j].participantID);
        }
      }
    }

    // Ensure there's no duplicate participantIDs
    participantsWithTool = _.uniq(participantsWithTool);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < participantsWithTool.length; i++) {
      for (let j = 0; j < participant.length; j++) {
        if (participantsWithTool[i] === participant[j]._id) {
          participants.push(participant[j]);
        }
      }
    }
    return participants;
  }

/**
   * Filters through the data based on the user selection. By default, if no option is selected it
   * returns the original data
   * @param value The inputs given
   * @param allSkills All the available skills
   * @param participantSkill Each participants' skills
   * @param participant The participants
   * @returns {[]|*} Returns the filtered array
   */
  filterBySkills(value, allSkills, participantSkill, participant) {

    // if there are no skills selected
    if (value.length === 0) {
      return participant;
    }

    // convert from skillName --> skillID
    const skillID = [];
    for (let i = 0; i < value.length; i++) {
      for (let j = 0; j < allSkills.length; j++) {
        if (value[i] === allSkills[j].name) {
          skillID.push(allSkills[j]._id);
        }
      }
    }

    // get participantIDs for those that have the skills
    let participantsWithSkill = [];
    for (let i = 0; i < skillID.length; i++) {
      for (let j = 0; j < participantSkill.length; j++) {
        if (skillID[i] === participantSkill[j].skillID) {
          participantsWithSkill.push(participantSkill[j].participantID);
        }
      }
    }

    // Ensure there's no duplicate participantIDs
    participantsWithSkill = _.uniq(participantsWithSkill);

    // Get the filtered participants
    const participants = [];
    for (let i = 0; i < participantsWithSkill.length; i++) {
      for (let j = 0; j < participant.length; j++) {
        if (participantsWithSkill[i] === participant[j]._id) {
          participants.push(participant[j]);
        }
      }
    }

    return participants;
  }

render() {

    if (this.props.interestedDevs.length === 0) {
      return (
          <div align={'center'}>
            <Header as='h2' icon>
              <Icon name='users'/>
              There are no interested partcipants at the moment.
              <Header.Subheader>
                Please check back later.
              </Header.Subheader>
            </Header>
          </div>
      );
    }

    const universalSkills = this.props.skills;

    function getDeveloperSkills(developerID, developerSkills) {
      const data = [];
      const skills = _.filter(developerSkills, { developerID: developerID });
      for (let i = 0; i < skills.length; i++) {
        for (let j = 0; j < universalSkills.length; j++) {
          if (skills[i].skillID === universalSkills[j]._id) {
            data.push({ name: universalSkills[j].name });
          }
        }
      }
      // console.log(data);
      return data;
    }

    const universalDevs = this.props.developers;

    function getInterestedDevelopers(devs) {
      const data = [];
      for (let i = 0; i < devs.length; i++) {
        for (let j = 0; j < universalDevs.length; j++) {
          if (devs[i].participantID === universalDevs[j]._id) {
            data.push(universalDevs[j]);
          }
        }
      }
      // console.log(data);
      return data;
    }

    const universalTools = this.props.tools;

    function getDeveloperTools(developerID, developerTools) {
      const data = [];
      const tools = _.filter(developerTools, { developerID: developerID });
      for (let i = 0; i < tools.length; i++) {
        for (let j = 0; j < universalTools.length; j++) {
          if (tools[i].toolID === universalTools[j]._id) {
            data.push({ name: universalTools[j].name });
          }
        }
      }
      // console.log(data);
      return data;
    }

    const universalChallenges = this.props.challenges;

    function getDeveloperChallenges(developerID, developerChallenges) {
      const data = [];
      const challenges = _.filter(developerChallenges, { developerID: developerID });
      for (let i = 0; i < challenges.length; i++) {
        for (let j = 0; j < universalChallenges.length; j++) {
          if (challenges[i].challengeID === universalChallenges[j]._id) {
            data.push(universalChallenges[j].title);
          }
        }
      }
      return data;
    }

    return (
        <Grid container doubling relaxed stackable style={{ marginBottom: '2rem' }}>
          <Grid.Row centered>
            <Header as={'h2'} style={{ paddingTop: '2rem' }}>
              Interested Participants for Team: {this.props.teams[0].name}
            </Header>
          </Grid.Row>
          <Grid.Row>
            <Grid.Column>
              <Item.Group divided>
                {/* eslint-disable-next-line max-len */}
                {getInterestedDevelopers(this.props.interestedDevs).map((developers) => <InterestedParticipantCard key={developers._id} developers={developers} teams={this.props.teams}
                                               skills={getDeveloperSkills(developers._id, this.props.developerSkills)}
                                               tools={getDeveloperTools(developers._id, this.props.developerTools)}
                                               challenges={getDeveloperChallenges(developers._id, this.props.developerChallenges)}
                />)}
              </Item.Group>
            </Grid.Column>
          </Grid.Row>
        </Grid>
    );
  }

/** On submit, insert the data.
   * @param formData {Object} the results from the form.
   * @param formRef {FormRef} reference to the form.
   */
  // eslint-disable-next-line no-unused-vars
  submit(formData, formRef) {
    this.setState({ isRegistered: [] });
    this.setState({ notRegistered: [] });
    const owner = this.props.participant.username;
    const { name, description, challenge, skills, tools, participants } = formData;
    if (/^[a-zA-Z0-9-]*$/.test(name) === false) {
      swal('Error', 'Sorry, no special characters or space allowed.', 'error');
      return;
    }
    let partArray = [];

    if (typeof (participants) !== 'undefined') {
      partArray = participants;
    }

    const currPart = Participants.find({}).fetch();
    const isRegistered = [];
    const notRegistered = [];

    for (let i = 0; i < partArray.length; i++) {
      let registered = false;
      for (let j = 0; j < currPart.length; j++) {
        if (currPart[j].username === partArray[i].email) {
          registered = true;
          this.setState({
            isRegistered: this.state.isRegistered.concat([`-${partArray[i].email}`]),
          });
          isRegistered.push(partArray[i].email);
        }
      }
      if (!registered) {
        this.setState({
          notRegistered: this.state.notRegistered.concat([`-${partArray[i].email}`]),
        });
        notRegistered.push(partArray[i].email);
      }
    }
    if (notRegistered.length !== 0) {
      this.setState({ errorModal: true });
    }

    let { open } = formData;
    if (open === 'Open') {
      open = true;
    } else {
      open = false;
    }

    const skillsArr = _.map(skills, n => {
      const doc = Skills.findDoc({ name: n });
      return Slugs.getNameFromID(doc.slugID);
    });
    const toolsArr = _.map(tools, t => {
      const doc = Tools.findDoc({ name: t });
      return Slugs.getNameFromID(doc.slugID);
    });
    const challengeDoc = Challenges.findDoc({ title: challenge });
    const challengeSlug = Slugs.getNameFromID(challengeDoc.slugID);
    const challengesArr = [challengeSlug];

    const collectionName = Teams.getCollectionName();
    const definitionData = {
      name,
      description,
      owner,
      open,
      challenges: challengesArr,
      skills: skillsArr,
      tools: toolsArr,
    };
    defineMethod.call(
        {
          collectionName,
          definitionData,
        },
        error => {
          if (error) {
            swal('Error', error.message, 'error');
          } else {
            if (!this.state.errorModal) {
              swal('Success', 'Team created successfully', 'success');
            }
            formRef.reset();
          }
        },
    );

    // sending invites out to registered members
    for (let i = 0; i < isRegistered.length; i++) {
      const newTeamID = Teams.find({ name: name }).fetch();
      const teamDoc = Teams.findDoc(newTeamID[0]._id);
      const team = Slugs.getNameFromID(teamDoc.slugID);
      const inviteCollection = TeamInvitations.getCollectionName();
      const inviteData = { team: team, participant: isRegistered[i] };
      defineMethod.call({ collectionName: inviteCollection, definitionData: inviteData },
          (error) => {
            if (error) {
              console.error(error.message);
            } else {
              console.log('Success');
            }
          });
    }
  }

render() {
    // console.log(this.props);
    // console.log(this.state.result);
    if (this.props.participants.length === 0) {
      return (
        <div align={'center'}>
          <Header as='h2' icon>
            <Icon name='users' />
            There are no participants at the moment.
            <Header.Subheader>
              Please check back later.
            </Header.Subheader>
          </Header>
        </div>
      );
    }

    const sticky = {
      position1: '-webkit-sticky',
      position: 'sticky',
      top: '6.5rem',
    };

    const filters = new ListParticipantsFilterAdmin();

    const setFilters = () => {
      const searchResults = filters.filterBySearch(this.props.participants, this.state.search);
      const skillResults = filters.filterBySkills(this.state.skills,
        this.props.skills, this.props.participantSkills, searchResults);
      const toolResults = filters.filterByTools(this.state.tools,
        this.props.tools, this.props.participantTools, skillResults);
      const challengeResults = filters.filterByChallenge(this.state.challenges,
        this.props.challenges, this.props.participantChallenges, toolResults);
      const teamResults = filters.filterByTeam(this.state.teams, this.props.teams,
        this.props.teamParticipants, challengeResults);
      // const noTeamResults = filters.filterNoTeam(this.props.teamParticipants, teamResults);
      const sorted = _.uniqBy(filters.sortBy(teamResults, 'participants'), 'username');
      // console.log(sorted);
      this.setState({
        result: sorted,
      }, () => {
      });
    };

    const handleSearchChange = (event) => {
      this.setState({
        search: event.target.value,
      }, () => {
        setFilters();
      });
    };

    const getSkills = (event, { value }) => {
      this.setState({
        skills: value,
      }, () => {
        setFilters();
      });
    };

    const getTools = (event, { value }) => {
      this.setState({
        tools: value,
      }, () => {
        setFilters();
      });
    };

    const getChallenge = (event, { value }) => {
      this.setState({
        challenges: value,
      }, () => {
        setFilters();
      });
    };

    const getTeam = (event, { value }) => {
      this.setState({
        teams: value,
      }, () => {
        setFilters();
      });
    };

    const universalSkills = this.props.skills;

    function getParticipantSkills(participantID, participantSkills) {
      const data = [];
      const skills = _.filter(participantSkills, { participantID: participantID });
      for (let i = 0; i < skills.length; i++) {
        for (let j = 0; j < universalSkills.length; j++) {
          if (skills[i].skillID === universalSkills[j]._id) {
            data.push({ name: universalSkills[j].name });
          }
        }
      }
      // console.log(data);
      return data;
    }

    const universalTools = this.props.tools;

    function getParticipantTools(participantID, participantTools) {
      const data = [];
      const tools = _.filter(participantTools, { participantID: participantID });
      for (let i = 0; i < tools.length; i++) {
        for (let j = 0; j < universalTools.length; j++) {
          if (tools[i].toolID === universalTools[j]._id) {
            data.push({ name: universalTools[j].name });
          }
        }
      }
      return data;
    }

    const universalChallenges = this.props.challenges;

    function getParticipantChallenges(participantID, participantChallenges) {
      const data = [];
      const challenges = _.filter(participantChallenges, { participantID: participantID });
      for (let i = 0; i < challenges.length; i++) {
        for (let j = 0; j < universalChallenges.length; j++) {
          if (challenges[i].challengeID === universalChallenges[j]._id) {
            data.push(universalChallenges[j].title);
          }
        }
      }
      return data;
    }

    const universalTeams = this.props.teams;
    function getParticipantTeams(participantID, teamParticipants) {
      const data = [];
      const teams = _.filter(teamParticipants, { participantID: participantID });
      for (let i = 0; i < teams.length; i++) {
        for (let j = 0; j < universalTeams.length; j++) {
          if (teams[i].teamID === universalTeams[j]._id) {
            data.push(universalTeams[j].name);
          }
        }
      }
      return data;
    }

    const handleDownload = () => {
      const zip = new ZipZap();
      const dir = 'hacchui-participants';
      const fileName = `${dir}/${moment().format(databaseFileDateFormat)}-participants.txt`;
      const participants = this.state.result;
      const emails = participants.map(p => p.username);
      zip.file(fileName, emails.join('\n'));
      zip.saveAs(`${dir}.zip`);
    };

    const handleMultipleTeams = () => {
      if (!this.state.multipleTeamsCheckbox) {
        const participants = this.state.result;
        const results = filters.filterMultipleTeams(this.props.teamParticipants, participants);
        const sorted = _.uniqBy(filters.sortBy(results, 'participants'), 'username');
        this.setState({
          result: sorted,
        }, () => {
        });
      } else {
        this.setState({
          result: this.props.participants,
        }, () => {
        });

      }
      const checked = this.state.multipleTeamsCheckbox;
      this.setState({ multipleTeamsCheckbox: !checked });
    };

    const handleNoTeam = () => {
      if (!this.state.noTeamCheckbox) {
        const participants = this.state.result;
        const results = filters.filterNoTeam(this.props.teamParticipants, participants);
        const sorted = _.uniqBy(filters.sortBy(results, 'participants'), 'username');
        this.setState({
          result: sorted,
        }, () => {
        });
      } else {
        this.setState({
          result: this.props.participants,
        }, () => {
        });
      }
      const checked = this.state.noTeamCheckbox;
      this.setState({ noTeamCheckbox: !checked });
    };

    const handleNotCompliant = () => {
      if (!this.state.compliantCheckbox) {
        const participants = this.state.result;
        const results = participants.filter(p => !p.isCompliant);
        const sorted = _.uniqBy(filters.sortBy(results, 'participants'), 'username');
        this.setState({
          result: sorted,
        }, () => {
        });
      } else {
        this.setState({
          result: this.props.participants,
        }, () => {
        });
      }
      const checked = this.state.compliantCheckbox;
      this.setState({ compliantCheckbox: !checked });
    };

    const filterStyle = {
      paddingTop: 4,
    };
    // console.log(this.state.result);
    return (
      <div style={{ paddingBottom: '50px' }}>
        <Grid container doubling relaxed stackable centered>
          <Grid.Row centered>
            <Grid.Column width={16}>
              <div style={{
                backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
                borderRadius: '2rem',
              }}>
                <Header as={'h2'} textAlign="center">
                  All Participants
                </Header>
              </div>
            </Grid.Column>
          </Grid.Row>
          <Grid.Row centered>
            <Grid.Column>
              <Button onClick={handleDownload}>Download emails</Button>
            </Grid.Column>
          </Grid.Row>
          <Grid.Column width={4}>
            <Segment style={sticky}>
              <div style={filterStyle}>
                <Header>
                  <Header.Content>
                    Filter Participants
                    <Header.Subheader>Total Participants: {this.state.result.length}</Header.Subheader>
                  </Header.Content>
                </Header>
                <Checkbox onChange={handleNoTeam} label="No Team"/>
                <Checkbox onChange={handleMultipleTeams} label="Multiple Teams"/>
                <Checkbox onChange={handleNotCompliant} label="Not Compliant"/>
              </div>
              <div style={filterStyle}>
                <Input icon='search'
                       iconPosition='left'
                       placeholder='Search by participants name...'
                       onChange={handleSearchChange}
                       fluid
                />

                <div style={filterStyle}>
                  <Header>Teams</Header>
                  <Dropdown
                    placeholder='Teams'
                    fluid
                    multiple
                    search
                    selection
                    options={filters.dropdownValues(this.props.teams, 'name')}
                    onChange={getTeam}
                  />
                </div>

                <div style={filterStyle}>
                  <Header>Challenges</Header>
                  <Dropdown
                    placeholder='Challenges'
                    fluid
                    multiple
                    search
                    selection
                    options={filters.dropdownValues(this.props.challenges, 'title')}
                    onChange={getChallenge}
                  />
                </div>
              </div>
              <div style={filterStyle}>
                <Header>Skills</Header>
                <Dropdown placeholder='Skills'
                          fluid
                          multiple
                          search
                          selection
                          options={filters.dropdownValues(this.props.skills, 'name')}
                          onChange={getSkills}
                />
              </div>
              <div style={filterStyle}>
                <Header>Tools</Header>
                <Dropdown
                  placeholder='Tools'
                  fluid
                  multiple
                  search
                  selection
                  options={filters.dropdownValues(this.props.tools, 'name')}
                  onChange={getTools}
                />
              </div>
            </Segment>
          </Grid.Column>
          <Grid.Column width={12}>
            <Item.Group divided>
              {this.state.result.map((participants) => <ListParticipantCardAdmin
                key={participants._id}
                participantID={participants._id}
                participants={participants}
                skills={getParticipantSkills(participants._id, this.props.participantSkills)}
                tools={getParticipantTools(participants._id, this.props.participantTools)}
                challenges={getParticipantChallenges(participants._id, this.props.participantChallenges)}
                teams={getParticipantTeams(participants._id, this.props.teamParticipants)}
              />)}
            </Item.Group>
          </Grid.Column>
        </Grid>
      </div>
    );
  }

/** Render the form. Use Uniforms: https://github.com/vazco/uniforms */

  render() {

    if (this.props.participants.length === 0) {
      return (
          <div align={'center'}>
            <Header as='h2' icon>
              <Icon name='users' />
              There are no participants at the moment.
              <Header.Subheader>
                Please check back later.
              </Header.Subheader>
            </Header>
          </div>
      );
    }

    const sticky = {
      position1: '-webkit-sticky',
      position: 'sticky',
      top: '6.5rem',
    };

    const filters = new ListParticipantsFilter();

    const setFilters = () => {
      const searchResults = filters.filterBySearch(this.props.participants, this.state.search);
      const skillResults = filters.filterBySkills(this.state.skills,
          this.props.skills, this.props.participantSkills, searchResults);
      const toolResults = filters.filterByTools(this.state.tools,
          this.props.tools, this.props.participantTools, skillResults);
      const challengeResults = filters.filterByChallenge(this.state.challenges,
          this.props.challenges, this.props.participantChallenges, toolResults);
      const sorted = filters.sortBy(challengeResults, 'participants');
      this.setState({
        result: sorted,
      }, () => {
      });
    };

    const handleSearchChange = (event) => {
      this.setState({
        search: event.target.value,
      }, () => {
        setFilters();
      });
    };

    const getSkills = (event, { value }) => {
      this.setState({
        skills: value,
      }, () => {
        setFilters();
      });
    };

    const getTools = (event, { value }) => {
      this.setState({
        tools: value,
      }, () => {
        setFilters();
      });
    };

    const getChallenge = (event, { value }) => {
      this.setState({
        challenges: value,
      }, () => {
        setFilters();
      });
    };

    const getTeam = (event, { value }) => {
      this.setState({
        teams: value,
      }, () => {
        setFilters();
      });
    };

    const universalSkills = this.props.skills;

    function getParticipantSkills(participantID, participantSkills) {
      const data = [];
      const skills = _.filter(participantSkills, { participantID: participantID });
      for (let i = 0; i < skills.length; i++) {
        for (let j = 0; j < universalSkills.length; j++) {
          if (skills[i].skillID === universalSkills[j]._id) {
            data.push({ name: universalSkills[j].name });
          }
        }
      }
      // console.log(data);
      return data;
    }

    const universalTools = this.props.tools;

    function getParticipantTools(participantID, participantTools) {
      const data = [];
      const tools = _.filter(participantTools, { participantID: participantID });
      for (let i = 0; i < tools.length; i++) {
        for (let j = 0; j < universalTools.length; j++) {
          if (tools[i].toolID === universalTools[j]._id) {
            data.push({ name: universalTools[j].name });
          }
        }
      }
      return data;
    }

    const universalChallenges = this.props.challenges;

    function getParticipantChallenges(participantID, participantChallenges) {
      const data = [];
      const challenges = _.filter(participantChallenges, { participantID: participantID });
      for (let i = 0; i < challenges.length; i++) {
        for (let j = 0; j < universalChallenges.length; j++) {
          if (challenges[i].challengeID === universalChallenges[j]._id) {
            data.push(universalChallenges[j].title);
          }
        }
      }
      return data;
    }

    return (
        <div style={{ paddingBottom: '50px' }}>
          <Grid container doubling relaxed stackable centered>
            <Grid.Row centered>
              <Grid.Column width={16}>
                <div style={{
                  backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
                  borderRadius: '2rem',
                }}>
                  <Header as={'h2'} textAlign="center">
                    All Participants
                  </Header>
                </div>
              </Grid.Column>
            </Grid.Row>
            <Grid.Column width={4}>
              <Segment style={sticky}>
                <div style={{ paddingTop: '2rem' }}>
                  <Header>
                    <Header.Content>
                      Total Participants: {this.state.result.length}
                    </Header.Content>
                  </Header>
                </div>
                <div style={{ paddingTop: '2rem' }}>
                  <Input icon='search'
                         iconPosition='left'
                         placeholder='Search by participants name...'
                         onChange={handleSearchChange}
                         fluid
                  />
                  <div style={{ paddingTop: '2rem' }}>
                    <Header>Teams</Header>
                    <Dropdown
                      placeholder='Teams'
                      fluid
                      multiple
                      search
                      selection
                      options={filters.dropdownValues(this.props.teams, 'name')}
                      onChange={getTeam}
                    />
                  </div>

                  <div style={{ paddingTop: '2rem' }}>
                    <Header>Challenges</Header>
                    <Dropdown
                        placeholder='Challenges'
                        fluid
                        multiple
                        search
                        selection
                        options={filters.dropdownValues(this.props.challenges, 'title')}
                        onChange={getChallenge}
                    />
                  </div>
                </div>
                <div style={{ paddingTop: '2rem' }}>
                  <Header>Skills</Header>
                  <Dropdown placeholder='Skills'
                            fluid
                            multiple
                            search
                            selection
                            options={filters.dropdownValues(this.props.skills, 'name')}
                            onChange={getSkills}
                  />
                </div>
                <div style={{ paddingTop: '2rem' }}>
                  <Header>Tools</Header>
                  <Dropdown
                      placeholder='Tools'
                      fluid
                      multiple
                      search
                      selection
                      options={filters.dropdownValues(this.props.tools, 'name')}
                      onChange={getTools}
                  />
                </div>
              </Segment>
            </Grid.Column>
            <Grid.Column width={12}>
              <Item.Group divided>
                {this.state.result.map((participants) => <ListParticipantsCard
                    key={participants._id}
                    participantID={participants._id}
                    participants={participants}
                    skills={getParticipantSkills(participants._id, this.props.participantSkills)}
                    tools={getParticipantTools(participants._id, this.props.participantTools)}
                    challenges={getParticipantChallenges(participants._id, this.props.participantChallenges)}
                />)}
              </Item.Group>
            </Grid.Column>
          </Grid>
        </div>
    );
  }