O problema
Em um projeto em que eu me time estamos trabalhando enfrentamos o desafio de criar um componente para dar a possibilidade do usuário compartilhar algo que ele recebeu pelo email nas principais redes sociais (whatsapp, twitter, facebook e email) além da possibilidade de copiar o link exibido.
Solução
Para resolver este problema, começamos a pensar em como poderíamos pegar algo enviado por emai, abrir a página web daquele email e ativar o compartilhamento. A solução seria no link compartilhar que é recebido por email, adicionar uma query string
indicando que será aberto o modal contendo os links de compartilhamento nas respectivas redes.
O link acima é representado no email pela seguinte tag
<a href="https://linkqualquer.com/nome/id?share=true">
Compartilhe! ->
</a>
Com isso estamos aptos a clicar no link e ser redirecionado para nossa página web que irá receber o parâmetro e realizar alguma ação.
Para verificar os parametros de rota, iremos utilizar hook roteador do NextJS
que iremos importar da seguinte forma na nossa página:
import { useRouter } from 'next/router'
E no componente iremos utilizar a variável query
que o useRouter()
disponibiliza para nós. Para executar a verificação no momento que entramos na página, iremos utilizar o useEffect
e nosso componente ficará da seguinte forma:
const { query } = useRouter()
useEffect(() => {
if (query.share == 'true') {
}
}, [query])
Temos a verificação inicial se tem o parametro share
na query string e com isso podemos implementar a lógica de exibição do modal e definir os dados que serão compartilhados. Mas vamos deixar essa primeira parte guardadinha e começar a trabalhar no nosso componente de share que será um modal.
** Obs: No projeto estamos utilizando o framework de UI chamado Tailwind **
Nosso componente irá receber apenas 3 propriedades, sendo elas a url
do conteúdo que vamos compartilhar, o status
que será responsável por mostrar ou não o modal e a action
que define quando o modal será fechado.
Dentro do componente teremos duas funções onde uma será responável por tratar a ação dos botões de compartilhamento handleSharing()
e a outra será responsável por copiar o link e jogar dentro do clipboard (mesma ação do ctrl + c) chamada de handleCopy
.
Com nosso componente criado, vamos voltar a página onde tem o conteúdo a ser compartilhada e onde fazemos a verificação da query string.
Lá iremos implementar a importação do componente e quando que ele será exebido, nossa página ficará da seguinte forma:
Agora temos a lógica completa de exibição do modal ácima.
Conclusão
Inicialmente pode ser algo assustador para quem ta começando a desenvolver e ter que pensar em resolver esse problema, mas é mais simples do que parece, só precisamos relembrar de alguns conceitos e unificar nessa solução.
Poderíamos refatorar essa solução para algo um pouco melhor, porém nosso objetivo aqui era ser o mais didático possível.
Agradeço a leitura de todos(as).
Top comments (0)