Source: data/WatcherOqt.js

import React, { useContext, useEffect } from "react";
import { useReactorNavigation, booleanString, SignalRContext, useHooks } from "../..";
import { useCallback } from "react";
const signalR = require("@microsoft/signalr");

/**
 * Componente que crea una subscripcion SignalR al renderizarse y la desubscripcion al desmontarse del DOM, 
 * y llama a uno o varios hooks al producirse un cambio en el monitor que va a observar
 * @name Reactor.Components.Data.WatcherOqt
 * @param {string} monitor Nombre del monitor
 * @param {string} hooks Nombre de los hooks que se van a llamar al producirse un cambio
 * @param {string} [delay = null] Tiempo de espera antes de subscribirse en ms 
 * @param {BooleanString} [silent = "true"] Establece modo silencioso (no usa spinner) 
 * @param {BooleanString} [debug = "false"] 
 * @class
 * @example
<signalr url="http://www.orquesta.com.ar/signalr"> 
  <watcher monitor="mensajes" hooks="ActualizarMensajes"></watcher>
  <div>
    ...lista de mensajes
  </div>
</signalr>
*/

const WatcherOqt = ({monitor, hooks, silent = "true", delay = "", debug = "false", children}) => {

  const { subscribe, unsubscribe } = useContext(SignalRContext);
  const { procesarHooks } = useHooks({silent, hooks, debug});

  const callback = useCallback(() => {
    booleanString(debug) && console.log("Watcher", {event: "execute callback", delay, monitor, hooks})
    procesarHooks();
  }, [procesarHooks]);

  const reconnectCallback = useCallback(() => {
    booleanString(debug) && console.log("Watcher", {event: "execute reconnect callback", delay, monitor, hooks})
    subscribe({monitor, callback, reconnectCallback});
  }, [monitor, callback]);

  useEffect(()=>{
    booleanString(debug) && console.log("Watcher", {event: "subscribe", delay, monitor, hooks})
    let timer = 0;
    if (delay !== undefined && delay !== 0 && delay !== "0"){
      timer = setTimeout(
        () => subscribe({monitor, callback, reconnectCallback}), 
        delay * 1
      );
    }else{
      subscribe({monitor, callback, reconnectCallback});
    }
    return () => {
      booleanString(debug) && console.log("Watcher", {event: "unsubscribe", delay, monitor, hooks})
      unsubscribe({monitor});
      clearTimeout(timer);
    }
  }, [debug, monitor, delay, reconnectCallback, callback]);

  return (
    <> 
      {children}
    </>
  );
}

export default WatcherOqt;