Exibindo Mensagens de Erro do Backend de Forma Dinâmica com Flash Messenger em Aplicações Web

Em um mundo cada vez mais digital, a experiência do usuário desempenha um papel crucial no sucesso de qualquer aplicação web. Uma parte essencial dessa experiência é fornecer feedback claro e dinâmico para os usuários durante sua interação com a aplicação. Neste artigo, vamos explorar como podemos utilizar o flash messenger de maneira dinâmica para exibir mensagens de erro provenientes do backend, melhorando assim a experiência do usuário e facilitando a compreensão dos problemas que podem ocorrer durante o uso da aplicação.

Implementando o Flash Messenger

Para começar, vamos dar uma olhada no código que implementa o flash messenger. Em nossa aplicação React, utilizamos um componente chamado Message e um hook chamado useFlashMessage.

// Message.js
import { useEffect, useState } from 'react'
import styles from './Message.module.css'
import bus from '../../utils/bus'

function Message() {
    const [visibility, setVisibility] = useState(false)
    const [message, setMessage] = useState('')
    const [type, setType] = useState('')

    useEffect(() => {
        bus.addListener('flash', ({ message, type }) => {
            setVisibility(true)
            setMessage(message)
            setType(type)

            setTimeout(() => {
                setVisibility(false)
            }, 3000)
        })
    })

    return (
        visibility && (
            <div className={`${styles.message} ${styles[type]}`}>{message}</div>
        )
    )
}

export default Message
        

O componente Message é responsável por exibir as mensagens na interface do usuário. Ele fica visível apenas quando há uma mensagem para exibir, e desaparece automaticamente após alguns segundos.

// useFlashMessage.js
import bus from "../utils/bus";

export default function useFlashMessage() {
    function setFlashMessage(msg, type) {
        bus.emit('flash', {
            message: msg,
            type: type,
        })
    }

    return { setFlashMessage }
}
        

O hook useFlashMessage fornece uma maneira de enviar mensagens para o flash messenger a partir de qualquer parte da nossa aplicação.

Uso do Flash Messenger no Backend

Agora que temos nosso flash messenger implementado, podemos utilizá-lo para exibir mensagens de erro provenientes do backend. Vamos dar uma olhada em um exemplo prático disso.

// useAuth.js
import api from '../utils/api'
import { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import useFlashMessage from './useFlashMessage'

export default function useAuth() {
    const { setFlashMessage } = useFlashMessage()

    async function register(user) {
        let msgText = 'Cadastro realizado com sucesso!'
        let msgType = 'success'

        try {
            const data = await api.post('/users/register', user).then((response) => {
                return response.data
            })
            console.log(data)
        } catch (error) {
            msgText = error.response.data.message
            msgType = 'error'
        }

        setFlashMessage(msgText, msgType)
    }

    return { register }
}        

Neste exemplo, quando ocorre um erro durante o registro de um usuário, uma mensagem de erro é enviada para o flash messenger, que então a exibe dinamicamente na interface do usuário.

Conclusão

Utilizar um flash messenger para exibir mensagens de erro provenientes do backend de forma dinâmica é uma prática importante para melhorar a experiência do usuário em aplicações web. Ao fornecer feedback claro e imediato, os usuários são capazes de entender melhor o que deu errado e como resolver o problema. Espero que este artigo tenha sido útil para entender como implementar e utilizar um flash messenger em sua própria aplicação. Experimente incorporar essa funcionalidade em seus projetos e veja como ela pode melhorar a experiência do usuário!