alexzherdev/foosballtracker

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { array, func, number, object } from 'prop-types';

import TeamGeneral from '../components/teamStats/general';
import TeamScoring from '../components/teamStats/scoring';
import TeamStreaks from '../components/teamStats/streaks';
import TeamRecentScores from '../components/teamStats/recentScores';
import TeamHeadToHead from '../components/teamStats/headToHead';
import { loadH2HOpponents } from '../actions/teamActions';
import { loadTeamStats, loadH2HMatches } from '../actions/statsActions';


class TeamStatsContainer extends React.Component {
  static propTypes = {
    teamId: number.isRequired,
    loadTeamStats: func.isRequired,
    loadH2HOpponents: func.isRequired,
    loadH2HMatches: func.isRequired,
    stats: object,
    teams: array,
    h2hMatches: array
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.props.loadTeamStats(this.props.teamId);
    this.props.loadH2HOpponents(this.props.teamId);
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.h2hTeamId) {
      this.setState({ h2hStats: nextProps.teamStats[this.state.h2hTeamId] });
    }
  }

  onH2HTeamSelect(id) {
    this.setState({ h2hTeamId: id});
    this.props.loadTeamStats(id);
    this.props.loadH2HMatches(this.props.teamId, id);
  }

  render() {
    const stats = this.props.stats;
    if (!stats) {
      return (<div>Loading...</div>);
    }
    return (
      <div className="team-stats">
        <div className="container-fluid">
          <h4>{stats.team.name} Stats</h4>
          <Link to="/stats">Back to Stats</Link>
        </div>

        <div className="col-md-3">
          <TeamGeneral stats={stats.stats} />
          <TeamScoring stats={stats.stats} />
          <TeamStreaks stats={stats.stats} />
        </div>
        <div className="col-md-3">
          <TeamRecentScores scores={stats.scores} team={stats.team} />
        </div>
        <div className="col-md-6">
          <TeamHeadToHead
            stats={stats}
            teams={this.props.teams}
            onTeamSelect={this.onH2HTeamSelect.bind(this)}
            h2hStats={this.state.h2hStats}
            h2hMatches={this.props.h2hMatches} />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    stats: state.teamStats && state.teamStats[ownProps.teamId],
    teams: state.h2hOpponents,
    teamStats: state.teamStats,
    h2hMatches: state.h2hMatches
  };
}

function mapDispatchToProps(dispatch) {
  return {
    loadTeamStats: (teamId) => {
      dispatch(loadTeamStats(teamId));
    },

    loadH2HOpponents: (teamId) => {
      dispatch(loadH2HOpponents(teamId));
    },

    loadH2HMatches: (team1Id, team2Id) => {
      dispatch(loadH2HMatches(team1Id, team2Id));
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(TeamStatsContainer);