55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import { Affix, Badge } from "antd";
|
|
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
|
|
import {
|
|
selectChatVisible,
|
|
selectConversations
|
|
} from "../../redux/messaging/messaging.selectors";
|
|
import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
|
|
import ChatOverlayComponent from "./chat-overlay.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
chatVisible: selectChatVisible,
|
|
activeConversations: selectConversations
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
toggleChatVisible: () => dispatch(toggleChatVisible())
|
|
});
|
|
|
|
export function ChatOverlayContainer({
|
|
chatVisible,
|
|
toggleChatVisible,
|
|
activeConversations
|
|
}) {
|
|
return (
|
|
<Affix offsetBottom={0}>
|
|
<div className={`chat-overlay-wrapper`}>
|
|
<div className={`chat-overlay-scroller`}>
|
|
<Badge count={10}>
|
|
<ChatOverlayComponent
|
|
chatVisible={chatVisible}
|
|
toggleChatVisible={toggleChatVisible}
|
|
/>
|
|
</Badge>
|
|
{activeConversations
|
|
? activeConversations.map(conversation => (
|
|
<ChatConversationContainer
|
|
conversation={conversation}
|
|
key={conversation.id}
|
|
/>
|
|
))
|
|
: null}
|
|
</div>
|
|
</div>
|
|
</Affix>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ChatOverlayContainer);
|