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