| 6911 |
stevensc |
1 |
import React, { useState } from 'react'
|
|
|
2 |
import { useSelector } from 'react-redux'
|
|
|
3 |
import { Col, Container, Row } from 'react-bootstrap'
|
|
|
4 |
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'
|
|
|
5 |
|
|
|
6 |
import ChatBox from '../../components/chat/ChatBox'
|
|
|
7 |
import Contacts from '../../components/chat/Contacts'
|
|
|
8 |
import EmptySection from '../../components/UI/EmptySection'
|
|
|
9 |
|
|
|
10 |
const ChatPage = () => {
|
|
|
11 |
const [selectedConversation, setSelectedConversation] = useState(null)
|
|
|
12 |
const labels = useSelector(({ intl }) => intl.labels)
|
|
|
13 |
|
|
|
14 |
const changeConversation = (conversation) => {
|
|
|
15 |
setSelectedConversation(conversation)
|
|
|
16 |
}
|
|
|
17 |
|
|
|
18 |
return (
|
|
|
19 |
<Container>
|
|
|
20 |
<Row>
|
|
|
21 |
<Col md="4" hidden={!!selectedConversation}>
|
|
|
22 |
<Contacts
|
|
|
23 |
selectedConversation={selectedConversation}
|
|
|
24 |
changeConversation={changeConversation}
|
|
|
25 |
/>
|
|
|
26 |
</Col>
|
|
|
27 |
<Col md="8" hidden={!selectedConversation}>
|
|
|
28 |
{selectedConversation ? (
|
|
|
29 |
<ChatBox entity={selectedConversation} />
|
|
|
30 |
) : (
|
|
|
31 |
<EmptySection
|
|
|
32 |
message={labels.select_conversation}
|
|
|
33 |
Icon={<QuestionAnswerRoundedIcon />}
|
|
|
34 |
/>
|
|
|
35 |
)}
|
|
|
36 |
</Col>
|
|
|
37 |
</Row>
|
|
|
38 |
</Container>
|
|
|
39 |
)
|
|
|
40 |
}
|
|
|
41 |
|
|
|
42 |
export default ChatPage
|