Tópicos abordados nesta aula:
- Finalizando página do mapa
- Abstraindo componentes
- Conectando Front-End e Back-End
- Listando orfanatos no mapa
- Detalhe do orfanato
- Criação de um orfanato
Primeira coisa que iremos fazer é adicionar um Marker de nossa localização no mapa. Na página OrphanageMap.tsx import o leaftlet que havíamos instalado juntamente com o react-leaflet, dessa biblioteca iremos importar o Marker e o Popup. Mais abaixo iremos definir a imagem do ícone (map-marker.svg) e determinar o seu tamanho com IconSize e seu posicionamento em relação ao ponto fixado no mapa com o iconAnchor.
Ao incluirmos o componente Marker dentro do Map já podemos visualizar o nosso marcador. Se clicarmos no marcador aparece um balão de mensagem do componente Popup.
Foi fornecido o conteúdo das páginas CreateOrphanage.tsx e Orphanage.tsx juntamente com seus estilos. Que ficaram dessa maneira:
A chamada para as duas será feita na página OrphanageMap.tsx e é preciso incluir as rotas nos arquivo routes.tsx.
Componentes são conjuntos isolados de HTML, CSS e Javascript que podem ser reaproveitados. Como podemos ver nas telas anteriores é possível criar um componente para o sidebar pois são idênticos. Crie uma pasta components e dentro dela um arquivo Sidebar.tsx e na pasta styles inclua o sidebar.css.
Utilizando componentes você pode reduzir bastante os códigos repetidos tanto nos HTML da páginas quanto nos estilos do css.
Crie também um arquivo chamado mapIcon.ts dentro da pasta utils, pois vamos substituir o ícone que se encontra em 3 telas da aplicação.
Assim eliminamos repetição de código e a aplicação do mapicon no componente permanece igual.
Para facilitar a integração, precisamos instalar outra biblioteca que facilita o consumo de API externas pela aplicação. Quase todo projeto precisa fazer interface com uma API REST em algum estágio. Axios é um cliente HTTP leve baseado no serviço $ http em Angular.js v1.x e semelhante à API nativa Fetch.
Axios é um cliente HTTP, que funciona tanto no browser quanto em node.js. A biblioteca é basicamente uma API que sabe interagir tanto com XMLHttpRequest quanto com a interface http do node. Isso significa que o mesmo código utilizado para fazer requisições ajax no browser também funciona no servidor. Além disso, as requisições feitas através da biblioteca retornam uma promise, compatível com a nova versão do JavaScript - ES6 e, portanto, podemos aproveitar as vantagens do assíncrono e aguardar por um código assíncrono mais legível. Também podemos interceptar e cancelar solicitações, e há proteção integrada do lado do cliente contra falsificação de solicitação entre sites.
npm install axios
Criamos uma nova pasta services com um arquivo api.tsx onde definimos a URL base com o seguinte código:
Obrigatório colocar o URL de baseURL em maiúsculas e indicar a base do endereço. Vamos adicionar as informações primeiro na página Landing, vamos precisar novamente utilizar dos Estados. Para facilitar a inclusão das referências é possível teclar Crtl + . (ponto):
Desde a versão 16.8 do React foram introduzidos os Hooks, que são uma nova proposta que irá nos permitir utilizar estado, ciclo de vida, entre outras funcionalidades sem a necessidade de escrevermos componentes com classe. Os Hooks resolvem uma grande variedade de problemas encontrados durante o desenvolvimento de componentes:
- Reutilização de lógica de estado entre components.
- Wrapper Hell (HOC, Render props — React DevTools).
- Componentes complexos e difíceis de se compreender.
- Componentes contendo grandes responsabilidades.
- Confusão ao utilizar classes (this, classes).
O Hook useEffect diz ao React que o componente precisa fazer algo apenas depois da renderização. O React ira se lembrar da função que você passou, e chamá-la depois que realizar as atualizações do DOM. Podemos mudar o título do documento, realizar busca de dados ou chamar alguma API imperativa.
Colocando useEffect dentro do componente nos permite acessar o qualquer prop direto do efeito. Nós não precisamos de uma API especial para lê-los — já está no escopo da função. Hooks adotam as closures do JavaScript e evitam APIs especificas do React onde o JavaScript já provê uma solução. O useEffect tem a seguinte construção:
useEffect(() => { }, []);Nas chaves irá a função de executará quando houver mudança de estado um algum elemento que estiver no segundo parâmetro, um array. Se não for passar um vetor vazio, ele adotará o comportamento padrão, ele roda depois da primeira renderização e depois de toda atualização. Em vez de pensar em termos de “montando” (“mounting”) e “atualizando” (“updating”), você pode achar mais fácil pensar que o useEffect acontecem “depois da renderização”. React garante que o DOM foi atualizado na hora de executar os efeitos. Ou seja, não poderímos adotar uma abordagem de Javascript tradicional para carregar uma lista na tela no React, como implementado abaixo:
Isso por que uma variável tradicional não causa no componente um novo ciclo de renderização, não sendo possível carregar as atualizações de informações. Para isso precisamos o useState para que o componente de atualize quando houver modificação na variável. Com estes conceitos de Hooks e estados já conseguimos carregar os dados de nosso Back-End e garantir que eles serão atualizados:
E dentro do componente Map vamos iterar nossa lista de orfanatos para fazermos as marcações de localização:
Utilizamos o map invés de foreach pois o map ele retorna algo e o foreach só percorre os elementos. Repare que sempre que usarmos map na tela, tem que setar a propriedade key. Senão dá erro no navegador.
Com isso, terminamos a parte de listarmos os orfanatos criados no mapa.
Na tela de detalhes Orphanage.tsx utilizamos a mesma estratégia combinada de useEfecct que faz uma requisição GET para recuperar o orfanato selecionado e o useState com uma interface para atualizar os campos na tela.
Uma diferença aqui é que vamos utilizar o Hook UseParams do react-router-dom que será o responsável pela passagem entre telas de parâmetro, no caso aqui, do id do orfanato. Veja que devemos declarar uma interface para definir os parâmetros e tipos que iremos receber. Outro ponto comentando é sobre o params.id que está sendo utilizado dentro do useEffect então é necessário passa-lo no array de dependências (valores monitorados para determinar a re-execução da função). Isso é necessário pois, caso não colocasse, se houvesse algum link dentro da aplicação que atualizasse o valor no params.id ele não seria atualizado nesta tela.
Para ativar a funcionalidade de abriro mapa do Google Maps incluímos um redirecionamento do link como abaixo:
<footer>
<a target="_blank"
rel="noopener noreferrer"
href={`https://www.google.com/maps/dir/?api=1&destination=${orphanage.latitude},${orphanage.longitude}`}>
Ver rotas no Google Maps
</a>
</footer>
O atributo rel="noopener noreferrer" é uma garantia a mais para evitar ataques.
A primeira ação que iremos trabalhar é com o clique do mouse sobre o mapa para definir a localização do orfanato:
Utilizamos o evento LeafletMouseEvent da biblioteca leaftlet que retorna as latitude e longitude do clique do mapa. Para verificar a assinatura de eventos dos componentes do React basta colocar o mouse em cima.
Se pressionar o Ctrl em cima do evento e clicar com o mouse é aberto o arquivo que faz a declaração do evento:
Na página de CreateOrphanage.tsx vamos adicione inicie as outras constates com o useState para mapear os campos do formulário.
Depois relacionamos com o atributo value e adicionamos o método Onchange:
Criamos o método handleSubmit e para testa-lo emitimos um console.log com os dados da tela. O parâmetro e: FormEvent é necessário pois como a função está fora do HTML, precisamos dessa classe do React para especificar o tipo dos argumentos. O e.preventDefalt é colocado para interromper o POST de direcionamento da página que é o comportamento padrão do botão submit.
Ao preencher os campos e clicar o botão deve voltar os dados:
O HTML para inclusão de imagens fica como aseguir:
O atributo mutiple define que podemos adicionar mais de uma foto por vez.
O createObjectURL cria um novo objeto URL, cujo tempo de vida está ligado ao document na janela na qual este objeto foi criado. O novo objeto URL representa o objeto File ou o objeto Blob passado como argumento.
Cada vez que a função createObjectURL() é chamada, um novo objeto URL é criado, mesmo se você já tiver criado um objeto URL para esse mesmo arquivo. Cada objeto URL criado precisa ser liberado por meio de uma chamada a window.URL.revokeObjectURL() quando este não for mais necessário. Os navegadores liberarão os objetos URL criados automaticamente quando o documento for descarregado; no entanto, para um desempenho e um gerenciamento de memória ótimos, é recomendado liberar estes recursos explicitamente sempre que possível.