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
}