text: import React, { Component, PropTypes } from 'react';
  import { connect } from 'react-redux';
  import { loadUser, loadStarred } from '../actions';
  import User from '../components/User';
  import Repo from '../components/Repo';
  import List from '../components/List';
  import zip from 'lodash/array/zip';
  
  function loadData(props) {
    const { login } = props;
    props.loadUser(login, ['name']);
    props.loadStarred(login);
  }
  
  class UserPage extends Component {
    constructor(props) {
      super(props);
      this.renderRepo = this.renderRepo.bind(this);
      this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
    }
  
    componentWillMount() {
      loadData(this.props);
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.login !== this.props.login) {
        loadData(nextProps);
      }
    }
  
    render() {
      const { user, login } = this.props;
      if (!user) {
        return <h1><i>Loading {login}’s profile...</i></h1>;
      }
  
      const { starredRepos, starredRepoOwners, starredPagination } = this.props;
      return (
        <div>
          <User user={user} />
          <hr />
          <List renderItem={this.renderRepo}
                items={zip(starredRepos, starredRepoOwners)}
                onLoadMoreClick={this.handleLoadMoreClick}
                loadingLabel={`Loading ${login}’s starred...`}
                {...starredPagination} />
        </div>
      );
    }
  
    renderRepo([repo, owner]) {
      return (
        <Repo repo={repo}
              owner={owner}
              key={repo.fullName} />
      );
    }
  
    handleLoadMoreClick() {
      this.props.loadStarred(this.props.login, true);
    }
  }
  
  UserPage.propTypes = {
    login: PropTypes.string.isRequired,
    user: PropTypes.object,
    starredPagination: PropTypes.object,
    starredRepos: PropTypes.array.isRequired,
    starredRepoOwners: PropTypes.array.isRequired,
    loadUser: PropTypes.func.isRequired,
    loadStarred: PropTypes.func.isRequired
  };
  
  function mapStateToProps(state, ownProps) {
    const { login } = ownProps.params;
    const {
      pagination: { starredByUser },
      entities: { users, repos }
    } = state;
  
    const starredPagination = starredByUser[login] || { ids: [] };
    const starredRepos = starredPagination.ids.map(id => repos[id]);
    const starredRepoOwners = starredRepos.map(repo => users[repo.owner]);
  
    return {
      login,
      starredRepos,
      starredRepoOwners,
      starredPagination,
      user: users[login]
    };
  }
  
  export default connect(
    mapStateToProps,
    { loadUser, loadStarred }
  )(UserPage);
  