Proyectos de Subversion LeadersLinked - SPA

import React, { useLayoutEffect } from 'react'

import { useSelector } from 'react-redux'

import 'converse.js'

import './converse.css'

import './chat.css'

export function Chat() {

  const { xmpp_hostname, xmpp_username, xmpp_password, xmpp_domain } =

    useSelector((state) => state.auth)

  const isAuth = useSelector((state) => state.auth.isAuth)

  useLayoutEffect(() => {

    if (!xmpp_hostname || !xmpp_username || !xmpp_password || !xmpp_domain)

      return

    const converse = window.converse

    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: false,

      view_mode: 'overlayed',

      i18n: 'es',

      assets_path: '/public/'

    })

    return () => {

      converse.connection?.disconnect()

    }

  }, [xmpp_hostname, xmpp_password, xmpp_username])

  return isAuth ? <div id='converse-container'></div> : null

}