Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7262 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import { Col, Container, Row } from 'react-bootstrap'
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'

import ChatBox from '../../components/chat/ChatBox'
import Contacts from '../../components/chat/ChatContacts'
import EmptySection from '../../components/UI/EmptySection'
import AddMember from '../../components/chat/AddMember'
import GroupMembers from '../../components/chat/GroupMembers'

const CHAT_TABS = {
  CHAT: 'CHAT',
  DEFAULT: 'DEFAULT',
  GROUP_MEMBERS: 'GROUP_MEMBERS',
  ADD_GROUP_MEMBER: 'ADD_GROUP_MEMBER',
}

const ChatPage = () => {
  const [selectedConversation, setSelectedConversation] = useState(null)
  const [activeTab, setActiveTab] = useState(CHAT_TABS.DEFAULT)
  const labels = useSelector(({ intl }) => intl.labels)

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

  const changeTab = (tab) => {
    setActiveTab(tab)
  }

  return (
    <Container>
      <Row>
        <Col md="4">
          <Contacts
            selectedConversation={selectedConversation}
            changeConversation={changeConversation}
          />
        </Col>
        <Col md="8" className="d-flex">
          {!selectedConversation && (
            <EmptySection
              message={labels.select_conversation}
              Icon={<QuestionAnswerRoundedIcon />}
              align="center"
            />
          )}
          {selectedConversation && activeTab === CHAT_TABS.DEFAULT && (
            <ChatBox
              entity={selectedConversation}
              changeConversation={changeConversation}
              changeTab={changeTab}
            />
          )}
          {activeTab === CHAT_TABS.ADD_GROUP_MEMBER && (
            <AddMember group={selectedConversation} changeTab={changeTab} />
          )}
          {activeTab === CHAT_TABS.GROUP_MEMBERS && (
            <GroupMembers group={selectedConversation} changeTab={changeTab} />
          )}
        </Col>
      </Row>
    </Container>
  )
}

export default ChatPage