Proyectos de Subversion LeadersLinked - SPA

import React, { useLayoutEffect } from 'react';
import { useMatch } from 'react-router-dom';
import { useSelector } from 'react-redux';

import 'converse.js';
import './converse.css';
import './chat.css';

export default function Chat() {
  const match = useMatch('/habits/*');

  const {
    xmpp_hostname,
    xmpp_username,
    xmpp_password,
    xmpp_domain
    // xmpp_port
  } = useSelector((state) => state.auth);

  useLayoutEffect(() => {
    const converse = window.converse;

    if (!xmpp_hostname || !xmpp_username || !xmpp_password || !xmpp_domain || match) {
      return;
    }

    if (match && converse.connection) {
      converse.connection?.disconnect();
      return;
    }

    converse.initialize({
      bosh_service_url: `https://${xmpp_hostname}:${17443}/http-bind/`,
      authentication: 'login',
      jid: `${xmpp_username}@${xmpp_domain}.com`,
      password: xmpp_password,
      discover_connection_methods: false,
      allow_adhoc_commands: false,
      allow_registration: false,
      allow_logout: false,
      auto_login: true,
      auto_reconnect: true,
      debug: true,
      view_mode: 'overlayed',
      i18n: 'es',
      emojis: true,
      clear_cache_on_logout: true,
      persistent_store: 'localStorage',
      assets_path: '/'
    });

    return () => {
      converse.connection?.disconnect();
    };
  }, [xmpp_hostname, xmpp_password, xmpp_username, xmpp_domain, match]);

  return <div id='converse-container'></div>;
}