Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

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 { uuid } = useParams()
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const getConversations = async () => {
    setLoading(true)
    axios
      .get(window.location.href)
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          return
        }

        const resConversations = data

        const diff1 = conversations.filter(
          ({ uuid }) => !resConversations.some((conv) => conv.uuid === uuid)
        )
        const diff2 = resConversations.filter(
          ({ uuid }) => !conversations.some((conv) => conv.uuid === uuid)
        )

        if (!diff1.concat(diff2).length) {
          return
        }

        setConversations(resConversations)
      })
      .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]
  )

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

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

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

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

  useEffect(() => {
    if (uuid && !currentConversation) {
      const conversation = conversations.find((c) => c.uuid === uuid)
      conversation && setCurrentConversation(conversation)
    }
  }, [conversations, uuid])

  return (
    <>
      <Container>
        <Row>
          <Col
            md="4"
            className={currentConversation ? 'd-none d-md-flex' : 'd-flex'}
          >
            <Contacts>
              <Contacts.Header options={options.current}>
                <h1>Inmail</h1>
              </Contacts.Header>

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

              <Contacts.List
                contacts={filterConversations()}
                onChange={changeConversation}
                currentConversation={currentConversation}
              />
            </Contacts>
          </Col>
          <Col
            md="8"
            className={currentConversation ? 'd-flex' : 'd-none d-md-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