1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-freactal/pages/index.js

47 lines
1.2 KiB
JavaScript
Raw Normal View History

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)