Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useCallback, useEffect, useState } from 'react'

import { axios } from '../../utils'

import { useSelector } from 'react-redux'

import { Tab, Tabs } from '@mui/material'

import SearchIcon from '@mui/icons-material/Search'

import Options from '../UI/Option'

import EmptySection from '../UI/EmptySection'

import ContactsModal from '../modals/ContactsModal'

import CreateGroupModal from '../modals/CreateGroupModal'

const notifyAudio = new Audio('/audio/chat.mp3')

const Contacts = ({ selectedConversation, changeConversation }) => {

  const [showContactModal, setShowContactModal] = useState(false)

  const [showGroupModal, setShowGroupModal] = useState(false)

  const [conversations, setConversations] = useState([])

  const [search, setSearch] = useState('')

  const [tab, setTab] = useState('user')

  const options = [

    {

      label: 'Iniciar conversación',

      action: () => setShowContactModal(!showContactModal),

    },

    { label: 'Crear grupo', action: () => setShowGroupModal(!showGroupModal) },

  ]

  const onCreateConversation = (url) => {

    const conversation = conversations.find((user) => user.url_send === url)

    changeConversation(conversation)

  }

  const heartBeat = async () => {

    axios.get('/chat/heart-beat').then((response) => {

      const { data: entities, success } = response.data

      if (!success) {

        return

      }

      entities.map(

        (entity) =>

          entity.not_received_messages &&

          playNewMessage(entity.url_mark_received)

      )

      setConversations(entities)

    })

  }

  const playNewMessage = async (url) => {

    notifyAudio.play()

    const { data } = await axios.post(url)

    return data.success

  }

  const getConversations = useCallback(

    () => conversations.filter((conversation) => conversation.type === tab),

    [tab, conversations]

  )

  const filterConversations = useCallback(

    (conversations) =>

      conversations.filter((conversation) =>

        conversation.name.toLowerCase().includes(search.toLowerCase())

      ),

    [search]

  )

  useEffect(() => {

    const heartBeatInterval = setInterval(heartBeat, 3000)

    heartBeat()

    return () => {

      clearInterval(heartBeatInterval)

    }

  }, [])

  return (

    <>

      <aside className="chat_contacts">

        <div className="position-relative">

          <h1>Chat</h1>

          <Options options={options} />

        </div>

        <Tabs value={tab} onChange={(e, newValue) => setTab(newValue)}>

          <Tab label="Personas" value="user" />

          <Tab label="Grupos" value="group" />

        </Tabs>

        <div className="contact__search show">

          <SearchIcon />

          <input

            type="text"

            placeholder="Buscar"

            onChange={(e) => setSearch(e.target.value)}

          />

        </div>

        <Contacts.List

          contacts={filterConversations(getConversations())}

          selectConversation={changeConversation}

        />

      </aside>

      <ContactsModal

        show={showContactModal}

        onClose={() => setShowContactModal(false)}

        onComplete={onCreateConversation}

      />

      <CreateGroupModal

        isOpen={showGroupModal}

        onClose={() => setShowGroupModal(false)}

      />

    </>

  )

}

const List = ({ contacts = [], selectConversation = () => null }) => {

  const labels = useSelector(({ intl }) => intl.labels)

  return (

    <div className="contacts-list">

      <ul>

        {!contacts.length ? (

          <EmptySection message={labels.datatable_szerorecords} />

        ) : (

          contacts.map((contact) => (

            <li key={contact.id}>

              <List.Item contact={contact} onClick={selectConversation} />

            </li>

          ))

        )}

      </ul>

    </div>

  )

}

const Item = ({ contact, onClick }) => {

  const labels = useSelector(({ intl }) => intl.labels)

  return (

    <div className="contacts-list__item">

      <img

        className="chat-image img-circle"

        height="36"

        width="36"

        src={contact.image || '/images/users-group.png'}

        alt="image-image"

      />

      <div className="contacts-list__item-content">

        <span onClick={() => onClick(contact)}>{contact.name}</span>

        {contact.last_message && (

          <p>

            {`${contact.count_not_seen_messages} ${labels.new_messages} |

            ${contact.last_message}`}

          </p>

        )}

      </div>

    </div>

  )

}

List.Item = Item

Contacts.List = List

export default Contacts