Source: templates/LoaderOperation.js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom";
import { appActions } from "../../redux";
import { useSpinnerContext } from "../../_core";
import { Template } from "./Template";
import { useReactorNavigation } from "../..";

/**
 * Componente que renderiza un template y una operación asincrónicamente, mientras espera la respuesta del servidor bloquea la pantalla con un spinner, no cuenta con la opción de auto refresco.
 * @name Reactor.Components.Templates.LoaderOperation
 * @param {string} href Nombre de la operación que se va a llamar (como page)
 * @param {string} operation Nombre de la operación que se va a llamar (al terminar de cargar la page)
 * @param {JsonString?} data Datos que se quieran pasar a la operación (se va a mandar a la operación no a la page)
 * @param {string?} token El token permite mantener un flujo en ejecución (el token se envía a la operación no a la page)
 * @class
 * @example
<loader_operation href="AppHome" operation="ProductoDepositar" data='{"idProducto":{{idProducto}}}' token="{{token}}"/>
 */
const _LoaderOperation = ({iframe = false, href, operation, token = null, data = null, getAsyncContent, getAsyncContentUntoken}) => {

  const [ content, setContent ] = useState();
  const [ result, setResult ] = useState();

  const spinner = useSpinnerContext();
  const navigation = useReactorNavigation({target: "navigate"});
  const navigate = useNavigate();

  useEffect(() => {
    if(iframe) return;
    spinner.show();
    ///console.log("LoaderOperation", "Entro a LoaderOperation")
    getAsyncContentUntoken(href)
      .then(response => {
        if(response.data.data.error) {
          navigation.ToError(response.data.data, true);
        }else{
          setContent(response.data.data);
        }
      })
      .catch(err => {
        navigation.ToError(err.response.data, true);
      })  
      .finally(()=>{
        spinner.hide();
      })
  }, [href, iframe]);

  useEffect(() => {
    if(!iframe && (!content || !operation)) return;
    spinner.show();
    getAsyncContent(operation, token, data ? JSON.parse(data) : null)
      .then(response => {
        if(response.data.data.error) {
          navigation.ToError(response.data.data, !iframe);
        }else{
          setResult(response.data.data);
        }
      })
      .catch(err => {
        navigation.ToError(err.response.data, !iframe);
      })  
      .finally(()=>{
        spinner.hide();
      })
  }, [content, operation]);

  useEffect(()=>{
    if(iframe) return;
    if(!result) return;
    navigate(`${window.config.BASE_NAME}${href}`, {replace: true});
  }, [result, iframe]);

  return (
    <>
      {content && 
        <Template content={content} />
      }
      {result && 
        <Template content={result} />
      }
    </>
  )
}

export const LoaderOperation = connect(null, appActions)(_LoaderOperation);