Dynamically show messaging based on presence of msid BOD-322

This commit is contained in:
Patrick Fic
2020-08-27 14:41:25 -07:00
parent 661241091a
commit 6e611fbc7c
2 changed files with 30 additions and 15 deletions

View File

@@ -6,27 +6,42 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import ChatAffixComponent from "./chat-affix.component"; import ChatAffixComponent from "./chat-affix.component";
import { Affix } from "antd"; import { Affix } from "antd";
import "./chat-affix.styles.scss"; import "./chat-affix.styles.scss";
export default function ChatAffixContainer() {
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function ChatAffixContainer({ bodyshop }) {
const { loading, error, data } = useSubscription( const { loading, error, data } = useSubscription(
CONVERSATION_LIST_SUBSCRIPTION CONVERSATION_LIST_SUBSCRIPTION,
{
skip: !bodyshop || (bodyshop && !bodyshop.messagingservicesid),
}
); );
if (loading) return <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type='error' />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<Affix className='chat-affix'> <Affix className="chat-affix">
<div> <div>
<ChatAffixComponent {bodyshop && bodyshop.messagingservicesid ? (
conversationList={(data && data.conversations) || []} <ChatAffixComponent
unreadCount={ conversationList={(data && data.conversations) || []}
(data && unreadCount={
data.conversations.reduce((acc, val) => { (data &&
return (acc = acc + val.messages_aggregate.aggregate.count); data.conversations.reduce((acc, val) => {
}, 0)) || return (acc = acc + val.messages_aggregate.aggregate.count);
0 }, 0)) ||
} 0
/> }
/>
) : null}
</div> </div>
</Affix> </Affix>
); );
} }
export default connect(mapStateToProps, null)(ChatAffixContainer);

View File

@@ -6,7 +6,7 @@ export default function ProfilePage() {
return ( return (
<div> <div>
<ProfileMyComponent /> <ProfileMyComponent />
<ProfileShopsContainer />; <ProfileShopsContainer />
</div> </div>
); );
} }