{"size": 1293, "ext": "js", "max_stars_repo_path": "src/components/local_components/AddEvent/CurrentParticipants.js", "max_stars_repo_name": "ftcksu/FTC_Mobile_Client", "max_stars_repo_stars_event_min_datetime": "2019-01-20T11:36:53.000Z", "max_stars_repo_stars_event_max_datetime": "2020-02-27T09:30:44.000Z", "max_issues_repo_path": "src/components/local_components/AddEvent/CurrentParticipants.js", "max_issues_repo_name": "ftcksu/FTC_Mobile_Client", "max_issues_repo_issues_event_min_datetime": "2019-01-17T18:49:19.000Z", "max_issues_repo_issues_event_max_datetime": "2019-06-28T12:08:36.000Z", "max_forks_repo_path": "src/components/local_components/AddEvent/CurrentParticipants.js", "max_forks_repo_name": "ftcksu/FTC_Mobile_Client", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 23.5090909091, "max_line_length": 73, "alphanum_fraction": 0.6218097448}
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { FlatGrid } from 'react-native-super-grid'
import { GridItem } from './GridItem'

/*
If max participant is set to a number, say 3, then adding
3 participants won't affect anything. When a fourth member
is added, max participant is then incrementd to 4.
*/

export class CurrentParticipants extends Component {



  _removeItem = (item) => {
    // remove from currecntParticipants[] and add to memebers[]
    // let filteredArray = this.props.items.filter(i => i.id !== item.id)
    this.props.onRemovedEnrolledUser(item);
  }

  _renderItem = ({ item }) => {
    return (
      <GridItem
        item={item}
        removeItem={(item) => this._removeItem(item)}
      />
    )
  }

  render() {
    return (
      this.props.enrolledUsers.length ? 
      <FlatGrid
        fixed={true}
        items={this.props.enrolledUsers}
        renderItem={(item) => this._renderItem(item)}
        style={[styles.container, this.props.containerStyle]}
      />
      :
      null
    )
  }
}

const styles = {
  container: {
    flex:1,
    flexDirection: 'row-reverse', // (?) applied to only first row
    margin: 15,
    marginBottom: 15,
    backgroundColor: '#eeeeee',
    // alignItems:'flex-end',
  },
}