GoStack 10.0 || Desafio 05

• 1. Conceitos abordados
• 2. Descrição do projeto
• 3. Iniciando o Projeto
• 4. Enunciado do Projeto
• 5. Criando o projeto

1. Conceitos abordados

1. Iniciar um projeto react-app.
2. Incluir ESLint, Prettier & EditorConfig.
3. Criar routes, pages (index e styles).
4. Utilizar Styled components para a estilização.
5. Criação de componentes.
6. state = {}, e render() {};
7. funções handleInputChange, handleSubmit
8. Utilizar a biblioteca axios para fazer requisições API e criar a baseURL.
9. Utilizar localStorage do browser.
10. componentDidMount e componentDidUpdate (Carregar e Salvar no LocalStorage, respectivamente).
11. Utilizar o { Link } from 'react-router-dom'.

Novos:

1. check repositorio não encontrado e duplicado.
2. Filtro de estado de repositorio: Todos / Abertos / Encerrados.
3. PAginação da lista de issues.

2. Descrição do projeto

Projeto base para o desafio: https://github.com/MaisDennis/GoStack10.0-Modulo-05

Um site para buscar repositórios no Github, retornando o nome, a descrição e issues atuais presentes no repositório. A pagina principal cria uma lista de repositórios procurados, e em cada item, traz um link.

Main

Repo

Issue

3. Iniciando o projeto

yarn start

4. Enunciado do Projeto

Desafio 5: Primeiro projeto com ReactJS

“Para quem fica melhor a cada dia, ficar pronto é utopia”!

Sobre o desafio   |    Entrega   |    Licença

🚀 Sobre o desafio

Nesse desafio você adicionará novas funcionalidades na aplicação que desenvolvemos ao longo desse módulo.

Funcionalidades

1. Captando erros

Adicione um try/catch por volta do código presente na função handleSubmit presente no componente Main e caso um repositório não seja encontrado na API do Github adicione uma borda vermelha por volta do input em que o usuário digitou o nome do repositório.

2. Repositório duplicado

Antes de fazer a chamada à API na função handleSubmit faça uma verificação para ver se o repositório não está duplicado, ou seja, se ele ainda não existe no estado de repositories.

Caso exista, dispare um erro, e com isso o código cairá no catch do try/catch criado na funcionalidade anterior.

throw new Error('Repositório duplicado');

3. Filtro de estado

Adicione um filtro de estado na listagem de Issues que criamos no detalhe do repositório. O estado representa se a issue está em aberto, fechada ou uma opção para exibir todas.

Exemplos de requisição:

https://api.github.com/repos/rocketseat/unform/issues?state=all
https://api.github.com/repos/rocketseat/unform/issues?state=open
https://api.github.com/repos/rocketseat/unform/issues?state=closed

Você pode encontrar a documentação nesse link;

4. Paginação

Adicione paginação nas issues listadas no detalhe do repositório. A API do Github lista no máximo 30 issues por página e você pode controlar o número da página atual por um parâmetro no endereço da requisição:

https://api.github.com/repos/rocketseat/unform/issues?page=2

Adicione apenas um botão de próxima página e página anterior. O botão de página anterior deve ficar desativado na primeira página.

📅 Entrega

Esse desafio não precisa ser entregue e não receberá correção, mas você pode ver o resultado do código do desafio aqui. Após concluir o desafio, adicionar esse código ao seu Github é uma boa forma de demonstrar seus conhecimentos para oportunidades futuras.

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com ♥ by Rocketseat 👋 Entre na nossa comunidade!

5. Criando o projeto

1. (1. e 2.) Criando a borda vermelha para repositorios não-encontrados e duplicados na pesquisa.

   1. Main/index.js:
      1. Incluir no state:

      border: false,

      2. Adicione try/catch na função handleSubmit com o checkRepoExists
      3. Form recebe a propriedade "border={border}". Estilizar props.border com a condicional border: red;

2. Filtro de estado:

   1. Repository/index.js
      1. Incluir no state:

         filter: {},

      2. Incluir o componente IssueFilter com select / option (all / open / closed) dentro.
      3. Estilizar Issue Filter, select.
      4. Criar as funções handleFilter e loadIssues. loadIssues: recarregar a lista, conforme componentDidMount.
         1. loadIssues params:

         params: {
          state: this.state.filter,
          page: this.state.page,
          per_page: 5,
         },

3. Paginação:

   1. Repository/index.js
      1. Incluir no state:

         page: 1,

      2. Incluir o componente PageActions com 2 buttons dentro: 'Anterior' e 'Próximo'.
      3. Estilizar.
      4. Criar a função handlePage.
         1. Vide IF para impedir a página "0".