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}>

                <h1>Chat</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