import React, { Component } from "react"; import { connect } from "react-redux"; import PropTypes from "prop-types"; import { NavDropdown, MenuItem } from "react-bootstrap"; import { setCurrentUser, changeTeam } from "../../actions/TeamsActions"; class TeamSwitch extends Component { constructor(props) { super(props); this.displayTeams = this.displayTeams.bind(this); } changeTeam(team_id) { console.log("clicked"); this.props.changeTeam(team_id); } displayTeams() { return this.props.all_teams.filter(team => !team.current_team).map(team => this.changeTeam(team.id)} key={team.id}> {team.name} ); } render() { return ( {this.displayTeams()} ); } } TeamSwitch.propTypes = { eventKey: PropTypes.number.isRequired, setCurrentUser: PropTypes.func.isRequired, all_teams: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, current_team: PropTypes.bool.isRequired }) ), current_team: PropTypes.shape({ id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, current_team: PropTypes.bool.isRequired }) }; // Map the states from store to component const mapStateToProps = ({ all_teams, current_team }) => { return { all_teams, current_team }; }; // Map the fetch activity action to component const mapDispatchToProps = dispatch => ({ setCurrentUser() { dispatch(setCurrentUser()); }, changeTeam(team_id) { dispatch(changeTeam(team_id)); } }); export default connect(mapStateToProps, mapDispatchToProps)(TeamSwitch);