M2A_68.md

#M2#A68 - Adicionando parâmetros de paginação para os repositórios

Adicionando estados iniciais em App.js

Adicionando estados iniciais independetes para página e repositórios mostrados.

Precisamos separar os estados das páginas para cada tipo de repositório para quando trocarmos as páginas fiquem independentes. Assim trocamos o array repos por objeto repos para sempre guardar essa informacões e o estado inicial da pagina ativa e total serão 1

class App extends Component {
  constructor () {
    super()
    this.state = {
      userinfo: null,
      repos: [],
      starred: [],
      isFetching: false
    }
	...
  }

class App extends Component {
  constructor () {
    super()
    this.state = {
      userinfo: null,
      repos: {
        repos: [],
        pagination: {
		  total: 1,
          activePage: 1
		}
      },
      starred: {
        repos: [],
        pagination: {
		  total: 1,
          activePage: 1
		}
      },
      isFetching: false
    }
	...
  }

Alterando handleSearch para receber novo estado dos objetos repos e starred

Antes repos e starred eram arrays e agora passaram a virar objetos. Nessa funcão é necessários zerarmos sempre essas popriedades então alteramos ela para:

if (keyCode === ENTER) {
      this.setState({ isFetching: true })
      ajax().get(this.getGithubApiUrl(value))
      .then((result) => {
        this.setState({
          userinfo: {
            username: result.name,
            photo: result.avatar_url,
            login: result.login,
            repos: result.public_repos,
            followers: result.followers,
            following: result.following
          },
          repos: {}, // alteramos aqui
          starred: {} // alteramos aqui
        })
      })

Alterando estado na função getRepos para receber objetos

Aqui repos era um array:

...
.then((result) => {
	this.setState({
		[type]: result.map((repo) => ({
		name: repo.name,
		link: repo.html_url
		}))
	})
})
...

Agora alteramos para objeto

...
.then((result) => {
	this.setState({
		[type]: {
		repos: result.map((repo) => ({
			name: repo.name,
			link: repo.html_url
		})),
		pagination: this.state[type].pagination
		}
	})
})

Atualizado código em app-content/index segundo os novos tipos objetos

Mostrando repositórios app-content/index

Antes repos era um array e checavamos se tinha algo assim repos.length mais agora como se transformou em um objeto e precisamos alterar sua chamada para repos.repos.length sendo assim conseguirmos utilizar a propriedade length

...
<div className='repos-container'>
	{!!repos.repos.length &&
		<Repos
		clasName='repos'
		title='Repositórios:'
		repos={repos}
		handlePagination={(clicked) => handlePagination('repos', clicked)}
		/>
	}

	{!!starred.repos.length &&
		<Repos
		clasName='starred'
		title='Favoritos:'
		repos={starred}
		handlePagination={(clicked) => handlePagination(`starred`, clicked)}
		/>
	}
</div>
...

Alterando propTypes

AppContent.propTypes = {
	...
  repos: PropTypes.object.isRequired,
  starred: PropTypes.object.isRequired,
  ...
}

Igualando estados iniciais do objeto repos em App.js

Como vamos ter um estado inicial e teremos que zera sempre ele quando fizermos uma nova busca, vamos criar uma referência, passar ela no ponto inicial e zerar antes de fazer uma busca.

Criando referência

const initialReposState = {
  repos: [],
  pagination: {}
}

Passando inicialmente

class App extends Component {
  constructor () {
    super()
    this.state = {
      userinfo: null,
      repos: initialReposState,
      starred: initialReposState,
      isFetching: false
    }
...

Zerando quando realizamos uma nova busca

  handleSearch (e) {
    ...
        this.setState({
          userinfo: {
            username: result.name,
            photo: result.avatar_url,
            login: result.login,
            repos: result.public_repos,
            followers: result.followers,
            following: result.following
          },
          repos: initialReposState,
          starred: initialReposState
        })
      })
	  ...

  }