Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useCallback, useEffect, useState } from 'react'
import { axios } from '../../utils'
import { Button, Row } from 'react-bootstrap'
import { useSelector } from 'react-redux'
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(true) },
  ]

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

  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>

        <Row>
          <Button
            className={tab === 'user' && 'active-tab'}
            onClick={() => setTab('user')}
          >
            Personas
          </Button>
          <Button
            className={tab === 'group' && 'active-tab'}
            onClick={() => setTab('group')}
          >
            Grupos
          </Button>
        </Row>
        <div className="contact__search show">
          <SearchIcon />
          <input
            type="text"
            placeholder="Buscar"
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>

        <Contacts.List
          conversations={filterConversations(getConversations())}
          selectedConversation={selectedConversation}
          onClick={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