Forma de mostrar notificação | React | Alura

Boa tarde, estou fazendo esse projeto e quero que ao enviar para o backend apareça uma notificação na tela confirmando o envio ou relatando algum erro e após um tempo desapareça da tela. Tem alguma forma de botar um timer para isso como botar duas ações no onClick do botão de enviar? Segue o código da página:

import React, { useState } from 'react'
import styles from './Add.module.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

function Add() {
    const [produto, setProduto] = useState({
        nome: '',
        descricao: '',
        preco: null,
        tag: '',
        quantidade: null,
        imagem: ''
    })
    const [resposta, setResposta] = useState('')
    const [showResposta, setShowResposta] = useState(false)

    const nav = useNavigate()

    const handleChange = (e) => {
        setProduto((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    };

    const handleClick = async (e) => {
        e.preventDefault();

        try {
            await axios.post('http://localhost:8800/add', produto);
            nav('/estoque');
        } catch (err) {
            err ? setResposta(err) : setResposta('Produto adicionado com sucesso!');
        }
    };

    return (
        <form className={styles.formulario}>
            <label htmlFor="nome" className={styles.label}>
                Nome
                <input type="text" id='nome' placeholder='Insira o novo nome.' name='nome' onChange={handleChange}/>
            </label>
            <label htmlFor="descricao" className={styles.label}>
                Descrição
                <input type="text" id='descricao' placeholder='Insira a nova descrição.' name='descricao' onChange={handleChange}/>
            </label>
            <label htmlFor="preco" className={styles.label}>
                Preço
                <input type="number" id='preco' placeholder='Insira o novo preço.' name='preco' onChange={handleChange}/>
            </label>
            <label htmlFor="tag" className={styles.label}>
                Tag
                <input type="text" id='tag' placeholder='Insira a nova tag.' name='tag' onChange={handleChange}/>
            </label>
            <label htmlFor="quantidade" className={styles.label}>
                Quantidade
                <input type="number" id='quantidade' placeholder='Insira a nova quantidade.' name='quantidade' onChange={handleChange}/>
            </label>
            <label htmlFor="imagem" className={styles.label}>
                Imagem
                <input type="url" id='imagem' placeholder='Insira a nova imagem.' name='imagem' onChange={handleChange}/>
            </label>

            <div className={styles.botoes}>
                <button on onClick={() => nav('/estoque')}>Cancelar</button>
                <button className={styles.att} onClick={handleClick, showResposta}>Adicionar</button>
            </div>
            {showResposta ? <spam>{resposta}</spam> : //timer para da toggle de showResposta para false}
        </form>
        
    )
}

export default Add

Olá, João! Tudo ok contigo?

Pelo código que você compartilhou, vejo que você está utilizando React para criar um formulário de adição de produtos. E você gostaria de exibir uma notificação na tela confirmando o envio ou relatando algum erro ao enviar os dados para o backend, e que essa notificação desapareça após um tempo.

Uma forma de fazer isso é utilizando o estado showResposta que você já está utilizando. Você pode definir um temporizador para alterar o valor desse estado após um determinado tempo.

Aqui está um exemplo de como você pode fazer isso:

const handleClick = async (e) => {
    e.preventDefault();

    try {
        await axios.post('http://localhost:8800/add', produto);
        setResposta('Produto adicionado com sucesso!');
        setShowResposta(true);

        setTimeout(() => {
            setShowResposta(false);
        }, 3000); // 3000 milissegundos = 3 segundos
    } catch (err) {
        setResposta(err);
        setShowResposta(true);

        setTimeout(() => {
            setShowResposta(false);
        }, 3000); // 3000 milissegundos = 3 segundos
    }
};

Nesse exemplo, após o envio dos dados para o backend, você define a mensagem de resposta e mostra a notificação definindo setShowResposta(true). Em seguida, você utiliza a função setTimeout para alterar o valor de showResposta para false após 3 segundos.

Lembre-se de ajustar o tempo do temporizador de acordo com o tempo que você deseja que a notificação permaneça visível.

Espero ter ajudado! Abraços e bons estudos!

Em caso de reply

Passo 1: Instalação da Biblioteca

Primeiro, você precisa instalar a biblioteca react-toastify. Você pode fazer isso executando o seguinte comando no terminal:

npm install react-toastify

Passo 2: Importando e Configurando a Biblioteca

No início do seu arquivo, após as importações existentes, você deve importar a biblioteca e também os estilos associados a ela. Adicione as seguintes linhas:

import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Depois disso, é importante adicionar o <ToastContainer /> em algum lugar no topo do seu componente para que as notificações possam ser renderizadas. Pode ser no retorno da função Add() mesmo:

function Add() {
    // ...seu código existente

    return (
        <div>
            <ToastContainer />
            {/* ...seu código restante */}
        </div>
    );
}

Passo 3: Mostrando Notificações

Agora, vamos utilizar a biblioteca para mostrar notificações sempre que necessário. Você pode modificar a função handleClick para exibir a notificação após o sucesso do envio ou em caso de erro:

const handleClick = async (e) => {
    e.preventDefault();

    try {
        await axios.post('http://localhost:8800/add', produto);
        nav('/estoque');

        // Notificação de sucesso
        toast.success('Produto adicionado com sucesso!', {
            autoClose: 3000, // Tempo em milissegundos que a notificação ficará visível
        });
    } catch (err) {
        // Notificação de erro
        toast.error('Ocorreu um erro ao adicionar o produto.', {
            autoClose: 3000,
        });
    }
};

Aqui, estamos usando toast.success para exibir uma notificação de sucesso e toast.error para exibir uma notificação de erro. O parâmetro autoClose determina quanto tempo a notificação ficará visível.

Passo 4: Exibindo/Escondendo a Notificação

Agora, em relação à sua pergunta sobre esconder a notificação após um tempo, a react-toastify faz isso automaticamente. No entanto, se você quiser controlar manualmente a exibição/esconderijo da notificação com um botão, você pode fazer o seguinte:

<div className={styles.botoes}>
    <button on onClick={() => nav('/estoque')}>Cancelar</button>
    <button
        className={styles.att}
        onClick={() => {
            handleClick();
            setShowResposta(true);
            setTimeout(() => {
                setShowResposta(false);
            }, 3000); // Defina o tempo desejado
        }}
    >
        Adicionar
    </button>
</div>

No exemplo acima, após clicar no botão "Adicionar", a função handleClick será chamada, e a notificação será exibida utilizando a biblioteca react-toastify. Além disso, definimos manualmente setShowResposta(true) para mostrar a resposta e, em seguida, utilizamos setTimeout para esconder a resposta após um determinado tempo.