Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useCallback, useEffect, useRef, useState } from 'react'
import { axios } from '../../utils'
import { useDispatch, useSelector } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import { Col, Container, Row } from 'react-bootstrap'
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'
import SearchIcon from '@mui/icons-material/Search'

import EmptySection from '../../components/UI/EmptySection'
import InmailChat from '../../components/chat/InmailChat'
import Contacts from '../../components/chat/Contacts'
import StartConversationModal from '../../components/modals/StartConversationModal'

const InmailPage = () => {
  const [conversations, setConversations] = useState([])
  const [currentConversation, setCurrentConversation] = useState(null)
  const [search, setSearch] = useState('')
  const [loading, setLoading] = useState(false)
  const [showConversationModal, setShowConversationModal] = useState(false)
  const options = useRef([
    {
      label: 'Iniciar conversación',
      action: () => toggleConversationModal(),
    },
  ])
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const toggleConversationModal = () => {
    setShowConversationModal(!showConversationModal)
  }

  const getConversations = async () => {
    try {
      setLoading(true)
      const { data } = await axios.get(window.location.href)
      if (data.success) setConversations(data.data)
    } catch (error) {
      const errorMessage = new Error(error)
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
    } finally {
      setLoading(false)
    }
  }

  const changeConversation = (conversation) => {
    setCurrentConversation(conversation)
  }

  const filterConversations = useCallback(
    () =>
      conversations.filter((conversation) =>
        conversation.name.toLowerCase().includes(search.toLowerCase())
      ),

    [search, conversations]
  )

  useEffect(() => {
    if (loading) return

    const messagesInterval = setTimeout(() => {
      getConversations()
    }, 2000)

    return () => {
      clearTimeout(messagesInterval)
    }
  }, [loading])

  return (
    <>
      <Container>
        <Row>
          <Col md="4">
            <Contacts>
              <Contacts.Header options={options.current}>
                <h1>Inmail</h1>
              </Contacts.Header>

              <div className="contact__search show">
                <SearchIcon />
                <input
                  type="text"
                  placeholder="Buscar"
                  onChange={(e) => setSearch(e.target.value)}
                />
              </div>

              <Contacts.List
                contacts={filterConversations()}
                onChange={changeConversation}
                currentConversation={currentConversation}
              />
            </Contacts>
          </Col>
          <Col md="8" className="d-flex">
            {currentConversation ? (
              <InmailChat
                conversation={currentConversation}
                changeConversation={changeConversation}
              />
            ) : (
              <EmptySection
                message={labels.select_conversation}
                Icon={<QuestionAnswerRoundedIcon />}
                align="center"
              />
            )}
          </Col>
        </Row>
      </Container>
      <StartConversationModal
        show={showConversationModal}
        setConversation={changeConversation}
        onClose={toggleConversationModal}
      />
    </>
  )
}

export default InmailPage