import React from 'react'
import { injectState } from 'freactal'
import app from '../components/app'

const Index = injectState(
  ({ state: { ajaxStatus, githubReposList }, effects }) => {
    const fetchMore = () =>
      effects.fetchGithubReposList(
        githubReposList.username,
        githubReposList.page + 1
      )

    return (
      <div>
        <h1>{`List of @${githubReposList.username}'s repositories`}</h1>

        <table>
          <thead>
            <tr>
              <th>name</th>
              <th>watchers</th>
              <th>stars</th>
              <th>forks</th>
            </tr>
          </thead>
          <tbody>
            {githubReposList.repos.map(repo => (
              <tr key={repo.id}>
                <td>{repo.name}</td>
                <td>{repo.watchers_count}</td>
                <td>{repo.stargazers_count}</td>
                <td>{repo.forks_count}</td>
              </tr>
            ))}
            <tr>
              <td>&nbsp;</td>
              <td colSpan='3'>
                <button onClick={fetchMore} disabled={ajaxStatus}>
                  {ajaxStatus ? 'loading' : 'fetch more'}
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }
)

export default app(Index)