Proyectos de Subversion LeadersLinked - Antes de SPA

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