Proyectos de Subversion LeadersLinked - SPA

import React, { useLayoutEffect } from 'react'

import { useMatch } from 'react-router-dom'

import { useSelector } from 'react-redux'

import { useMediaQuery } from '@hooks'

import 'converse.js'

import './converse.css'

import './chat.css'

export default function Chat() {

  const match = useMatch('/habits/*')

  const isMobile = useMediaQuery('(max-width: 900px)')

  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) {

      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])

  if (match && isMobile) return null

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

}