Source: surfaces/OpenToast.js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { appActions } from "../../redux";
import { useToastContext } from "../../_core";
import { Loading } from "../";
import { Template } from "../templates";

/**
 * Componente que muestra un Toast con un contenido sincrónico, mientras asincrónicamente se llama a una operación.
 * El Toast se mostrará durante un tiempo determinado o hasta recibir la respuesta.
 * Mientras se espera la respuesta se va a renderizar un Spinner.
 * @name Reactor.Components.Surfaces.Toast
 * @param {string} href Nombre de la operación que se va a llamar
 * @param {string} token Token si hay un flujo en ejecución
 * @param {number} [time = "4000"] Tiempo en ms que aparecerá el Toast
 * @class
 * @example
 *  <toast href="MostrarResultadoDeposito" token="{{tokenOperacion}}" time="5000">
 *    <div>Aguarde mientras procesamos la operación</div>
 *  </toast>
 */

const _OpenToast = ({getAsyncContent, token, href, children, time = 4000}) => {
  const { show, hide } = useToastContext();
  const [ data, setData ] = useState()
  
  useEffect(()=>{
    show({content: children});

    getAsyncContent(href, token, null).then(response => {
      setData(response.data.data);
      hide();
    })

    const timer = setTimeout(()=>hide(), time)
    return clearTimeout(timer);
  }, [])

  return <>{data ? <Template content={data}/> : <Loading/>}</>;
}

const mapStateToProps = (state) => {
  return state.app;
}

export const OpenToast = connect(mapStateToProps, appActions)(_OpenToast)