Serviço de Rotas

[JonasGz]

Closes #119

Feature

Criação do serviço de rotas para gerenciar, navegar e configurar roteamento.

Visual evidences :framed_picture:

Checklist

• [ x ] Issue linked
• [ x ] Build working correctly
• [ x ] Tests created

Additional info

GERAL:

As rotas foram separada em grupos, pensando na abstração para facilitar a manutenção. Cada grupo possui suas rotas, conforme explicado abaixo: a. Grupos: (cadastro-pet), (meus-pets), (rotas-principais) Exemplo de um grupo: Cadastro do pet: Cada rota é uma nova página do processo de cadastro de pet Rota cadastro do pet

TUTORIAL

1. CRIAÇÃO DE ROTAS: Seguirei o exemplo da rota cadastropet já criada da imagem anterior para explicar
2. Importar a biblioteca vanilla-routint, conforme a imagem anterior
3. Importar a sua página, no caso do exemplo é a página NoPetRegisteredPage
4. Explicação de cada linha:

• pathname: recebe a rota;
• routeLocation() - método que informa a rota atual, caso seja necessário, no exemplo coloquei em um log. Obs: precisa importar o routeLocation, conforme exemplo.

A partir de agora será um boilerplate:

• criação de uma div, com a classe 'home__content-page'
• instanciar sua página, no caso do exemplo: const noPetRegirestedPage = new NoPetRegirestedPage();
• adicionar a página a div criada: noPetRegirestedPage.mount($content);
• Retornar a div contendo a página: return $content;
• o método Router.dispose() serve para emitir uma função ao sair da rota atual, no exemplo eu utilizei para emitir um log, mas você pode ter outra necessidade. Obs: precisa importar o routeLocation, conforme exemplo.

2. NAVEGAÇÃO a. Navegação por link: Para navegar entre rotas com links, basta incluir o atributo data-vanilla-route-link` = "spa" e informar a rota no href, conforme abaixo: b. Navegação utilizando métodos: Caso haja necessidade de navegar utilizando um método, como no caso de um botão que ao ser clicado deve levar a uma nova página, para isso, basta utilizar o método go(), que recebe uma string contendo a rota, conforme exemplo abaixo que utilizei um evento de click para chamar o método: c. Outros métodos adicionais: back() é usado para navegar até a página anterior no histórico da sessão. forward() é usado para navegar para a próxima página no histórico da sessão.

Obs: a. Foram criadas apenas as rotas existentes atualmente, conforme o figma, mas acredito que terá outras rotas no andamento do projeto; b. Utilizei apenas as funcionalidades da biblioteca que julguei necessárias.

Referências: https://github.com/jscodelover/vanilla-routing

[JonasGz]

Eu vi alguns detalhes e também tem uma questão, vi muitos logs nos arquivos, eles são realmente necessários pra o roteamento? Alguns eu pontuei mas quando vi que era muito repetitivo parei, se não forem necessários pode tirar todos, e tem uns pathalias pra aplicar também.

os logs não são necessários, coloquei apenas como exemplo de utilização do método, ai o exemplo era emitindo um log, talvez a pessoa que criar a página precise emitir algum evento, ai deixei como exemplo, mas posso deletar

[JonasGz]

Deveria estar funcionando os links laterais?

Tentei aqui e não funcionou

pra funcionar é só incluir o atributo data-vanilla-route-link = "spa" e informar a rota no href do link eu n coloquei pq tínhamos acertado que iriamos deixar pra quem for usar o serviço uma sugestão seria: o cara q criar a página setaria a rota no link ou botao correspondente ou uma task separada só pra linkar

[JonasGz]

Sobre aquilo que falamos sobre o router parameter não é um blocker para sua task! Só precisamos conhecer isso melhor!

É importante vc deixar as rotas como exemplo aqui pra que as pessoas tenham como pegar os exemplos e fazer as rotas com mais falidade!!

Ta muito bom, parabens!

blz, vou dar uma estudada nos routes params tbm pra conseguir auxiliar a galera a utilizar.