userScreen.jsx

import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'

import List from '../components/list'

import './userScreen.css'

const repos_per_page = 30;

const frame_types = {
  'repo_list': function () {
    const { page } = this.state;
    const { userInfo } = this.props;

    if (!_.has(this.userRepoList, page))
      this.getUserRepoList(page);
    console.log(this.userRepoList[page]);
    // undefined ici

    return (
    <div>
      <h2>Found {userInfo.public_repos} repositories</h2>
      <List data={this.userRepoList[page]} />
      <ul className="pagination">
        <li key="Previous">Previous</li>
        {_.range(userInfo.public_repos / repos_per_page)
          .map((n) => <li onClick={() => this.setState({page: n})}key={n}>{n}</li>)}
        <li key="Next">Next</li>
      </ul>
    </div>
    )},
}

class UserScreen extends React.Component {
  constructor(props) {
    super(props);
    this.userRepoList = undefined;
    this.state = {
      page: 0,
      currentFrame: this.props.currentFrame
    };
  }

  getUserRepoList(page) {
    fetch(`https://api.github.com/users/${this.props.userInfo.login}/repos`)
      .then((resp) => resp.json())
      .then((repoList) => this.userRepoList[page] = repoList);
    console.log(this.userRepoList);
    // okay ici
  }

  componentWillReceiveProps(nextProps) {
    this.setState({currentFrame: nextProps.currentFrame});
  }

  render () {
    return (
      <div>{frame_types[this.state.currentFrame].call(this)}</div>
    );
  }
}

export default UserScreen;

UserScreen.propTypes = {
  currentFrame: PropTypes.string.isRequired,
  userInfo: PropTypes.object.isRequired
}