import React, { Component } from 'react'
import Link from 'next/link'
import { dispatch } from '@rematch/core'
import { initStore } from '../shared/store'
import withRematch from '../shared/utils/withRematch'
import Header from '../shared/components/header'
import CounterDisplay from '../shared/components/counter-display'

class Github extends Component {
  static async getInitialProps ({ isServer, initialState }) {
    if (isServer) {
      await dispatch.github.fetchUsers()
    }
    return {}
  }
  render () {
    return (
      <div>
        <Header />
        <h1> Github users </h1>
        <p>
          Server rendered github user list. You can also reload the users from
          the api by clicking the <b>Get users</b> button below.
        </p>
        {this.props.isLoading ? <p>Loading ...</p> : null}
        <p>
          <button onClick={this.props.fetchUsers}>Get users</button>
        </p>
        {this.props.userList.map(user => (
          <div key={user.login}>
            <Link href={user.html_url} passHref>
              <a>
                <img height='45' width='45' src={user.avatar_url} />
                <span> Username - {user.login}</span>
              </a>
            </Link>
            <br />
          </div>
        ))}
        <br />

        <CounterDisplay />
      </div>
    )
  }
}

const mapState = state => ({
  userList: state.github.users,
  isLoading: state.github.isLoading
})

const mapDispatch = ({ github: { fetchUsers } }) => ({
  fetchUsers: () => fetchUsers()
})

export default withRematch(initStore, mapState, mapDispatch)(Github)