Está é a terceira parte de uma série. Caso queira ver os artigos anteriores:

  1. Iniciando
  2. Evoluindo o código

Antes de avançarmos, vamos fazer algo crucial quando estamos trabalhando em equipe, e até solo. Configurar o ESLint no projeto.

Configurando o ESLint

Se você ainda não conhece, o ESLint é um analisador estático de código. Com ele conseguimos tanto usar styleguides de mercado, como nós mesmos configurar as regras. Essas regras podem ser tanto de estilo, como também de potenciais erros.

Para configurar crie o arquivo .eslintrc.json na raíz do projeto e cole o conteúdo abaixo:

Estamos usando o style guide do Airbnb, que é um dos mais usados pela comunidade JS e o padrão aqui na Vizir também. Além dele, usamos algumas regras específicas de React, através do plugin plugin:react/recommended. Portanto instale as seguintes dependências para rodar o eslint: yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react

Agora falta só configurarmos as tasks para rodar o eslint. Entre no package.json e adicione as seguintes linhas na sessão scripts:

"lint": "eslint .",
"lint:fix": "eslint . --fix"

Agora rode no terminal yarn run lint (caso não tenha o yarn, instale seguindo esses passos – ou rode com npm, usando npm run lint), feche os olhos, respire fundo e não se assuste com o resultado, que deve ter sido conforme o print abaixo.

Bom que nem preciso explicar, porquê disse que é crucial termos um lint configurado, e como visto, é bom configurarmos logo no início. No nosso caso, se tivéssemos utilizado logo no início, não teríamos deixado tantos erros para traz, ao realizar as refatorações do artigo anterior. Tais erros são comuns em refatorações, e por isso uma ferramenta como o ESLint, assim como testes automatizados (iremos cobrir num artigo mais a frente), dão o suporte para refatorarmos sem preocupação de quebrar o código.

Para arrumar essa bagunça, use como referência esse commit e caso prefira, clone o repositório a partir da tag v0.1git clone --branch v0.1 git@github.com:FabricioFFC/world-cup-2018.git. Uma vez que o seu código estiver atualizado, prossiga para o próximo tópico.

Consumindo mais um endpoint

Hoje já estamos consumindo o endpoint /teams da nossa API mockada no Apiary. Agora vamos adicionar uma nova função para consumir o endpoint /teams/:team-code,  ela tratá mais dados sobre uma seleção específica. Para isso atualize o src/api/TeamsApi.js:

No código acima, há espaço para uma refatoração: a única diferença entre o get e o getAll é o endpoint. Há várias formas de removermos essa duplicação, a que iremos utilizar é criar um service, cuja responsabilidade será realizar requests HTTP, por isso crie o arquivo src/services/httpRequest. Após a sua criação, altere o TeamsApi.js como apresentado abaixo.

O resultado dessa refatoração foi excelente, nosso TeamsApi.js ficou mínimo.

Navegando entre telas

O usuário irá acessar a tela com os novos dados da API, clicando no país na Home. Para isso ocorrer implementaremos essa navegação entre telas.

Vamos usar o react-navigation, que é uma das principais libs que nos fornece os recursos para criar a navegação.

Para adicionar, basta executar: yarn add react-navigation

Agora que teremos mais de uma tela, vamos fazer novas refatorações, com os objetivos de organizar melhor o código, e fazer uso do react-navigation.

O primeiro passo é transferir parte do código que está em App.js para src/screens/Home.js:

Nesta nova home, tiramos o código do header, já que o react-navigation já nós dá um “header”.

Já o segundo passo é uma das melhores coisas na programação, apagar código. Apague o src/components/Header.js, uma vez que não precisamos mais dele.

Por fim atualize o App.js, com o seguinte código:

Agora o entrypoint da nossa aplicação é a função createStackNavigator, que como o nome já sugere, será responsável pela navegação da nossa app, bastando nós, passar como primeiro argumento as telas existentes (rotas), e como segundo argumento, opções de configuração.

Apresentando os dados da seleção

Com a navegação já estruturada, vamos criar o componente para apresentar os dados de uma seleção, em src/components/TeamDetails.js:

Observe que estamos usando o react-native-parallax-scroll-view, para criar um efeito de parallax na imagem principal da seleção, portanto adicione ele com yarn add react-native-parallax-scroll-view. Outro detalhe, é que este componente ficou gigante (mais de 100 linhas), mas iremos quebrar ele em menores mais para frente.

Fora o componente ParallaxScrollView, todos os demais já são conhecidos, e do ParallaxScrollView é importante entender  que estamos passando para o renderBackground uma função que contém o background que iremos apresentar, a imagem principal, e para a função renderStickyHeader, passamos o sticky, que é o nome da seleção que ocupará a imagem quando o usuário der scroll.

Agora que temos o componente com os detalhes da seleção, vamos criar a tela que irá usar-lo. Crie o arquivo src/screens/TeamDetails.js:

Nesta tela que estamos fazendo uso da função get que criamos lá no começo do artigo no TeamsApi.js, e apresentamos um loading, até termos os dados retornados, para então mostrar o componente TeamDetails.

Voltamos agora no App.js, para incluir nossa nova tela:

Por fim, precisamos alterar o TeamItem.js, para finalmente adicionar a navegação para os detalhes da seleção:

No TeamItem.js fazemos uso do withNavigation, para recebermos o objeto navigation via props e assim poder realizar a navegação.

Pronto, agora ao abrir a app, e clicar no Brazil, você deve ver a seguinte tela:

O código completo pode ser visto entrando no Expo abaixo:

Assim, chegamos ao fim da parte 3 desta série, mas ainda temos muito o que falar. Afinal, deixamos alguns pontos descobertos:

  • Nossa API tem apenas os dados do Brasil, e não fizemos o tratamento de erro quando o usuário acessa os detalhes de outra seleção;
  • Faltou quebrarmos o componente TeamDetails, em componentes menores;
  • Precisamos localizar a aplicação, pois na home por exemplo, os dados vêem em inglês da API, e nos detalhes estamos mostrando os dados em português;
  • Estamos com 0 testes automatizados.

Todos esses pontos e mais, serão cobertos no próximo artigo, até lá!