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: '/public/'
    })

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

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