Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

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

import styled from 'styled-components'

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

import Contacts from './Contacts'

import ContactsModal from '../modals/ContactsModal'

import CreateGroupModal from '../modals/CreateGroupModal'

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

const StyledTab = styled(Tab)`

  flex-grow: 1;

  color: var(--subtitle-color) !important;

  font-weight: bold !important;

  padding: 0.5rem 1rem !important;

  min-height: auto !important;

  &.Mui-selected {

    color: var(--font-color) !important;

  }

`

const ChatContacts = ({ 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 (

    <>

      <Contacts>

        <Contacts.Header options={options}>

          <h1>Chat</h1>

        </Contacts.Header>

        <Tabs

          value={tab}

          onChange={(e, newValue) => setTab(newValue)}

          sx={{

            width: '100%',

            minHeight: 'auto',

            '& .MuiTabs-indicator': {

              backgroundColor: 'var(--font-color)',

            },

          }}

        >

          <StyledTab label="Personas" value="user" disableRipple />

          <StyledTab label="Grupos" value="group" disableRipple />

        </Tabs>

        <div className="contact__search show">

          <SearchIcon />

          <input

            type="text"

            placeholder="Buscar"

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

          />

        </div>

        <Contacts.List

          contacts={filterConversations(getConversations())}

          onChange={changeConversation}

          currentConversation={selectedConversation}

        />

      </Contacts>

      <ContactsModal

        show={showContactModal}

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

        onComplete={onCreateConversation}

      />

      <CreateGroupModal

        isOpen={showGroupModal}

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

      />

    </>

  )

}

export default ChatContacts