text: 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)
  