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 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 { uuid } = useParams()

  const labels = useSelector(({ intl }) => intl.labels)

  const dispatch = useDispatch()

  const toggleConversationModal = () => {

    setShowConversationModal(!showConversationModal)

  }

  const getConversations = async () => {

    setLoading(true)

    axios

      .get(window.location.href)

      .then((response) => {

        const { data, success } = response.data

        if (!success) {

          return

        }

        const resConversations = data

        const newConversations = resConversations.reduce(

          (acum, conversation) => {

            const messageIndex = conversations.findIndex(

              ({ uuid }) => uuid === conversation.uuid

            )

            if (messageIndex === -1) {

              acum = [...acum, conversation]

            }

            return acum

          },

          []

        )

        if (!newConversations.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]

  )

  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>

              <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={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