Serviço de Rotas

[JonasGz]

Closes #119

Feature

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

Visual evidences 🖼️

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

[zoldyzdk]

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.

[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

[Alecell]

Deveria estar funcionando os links laterais?

Tentei aqui e não funcionou

[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

[Alecell]

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!

[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.