admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BOD-14 More refactoring for messaging. Styles removed.

Browse Source
This commit is contained in:
Patrick Fic
2020-03-27 17:03:48 -07:00
parent c0be80b42e
commit 644737e1c3
9 changed files with 122 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
View File

@@ -14,7 +14,6 @@ export function ChatConversationListComponent({
conversationList, conversationList,
openConversation openConversation
}) { }) {
console.log("conversationList", conversationList);
return ( return (
<div className='chat-overlay-open'> <div className='chat-overlay-open'>

5
client/src/components/chat-conversation/chat-conversation.component.jsx
View File

@@ -7,10 +7,11 @@ import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
export default function ChatConversationComponent({ export default function ChatConversationComponent({
conversation, conversation,
messages, messages,
subState subState,
unreadCount
}) { }) {
return ( return (
<Badge count={messages.length}> <Badge count={unreadCount}>
<Card className='chat-overlay' size='small'> <Card className='chat-overlay' size='small'>
{conversation.open ? ( {conversation.open ? (
<ChatConversationOpenComponent <ChatConversationOpenComponent

27
client/src/components/chat-conversation/chat-conversation.container.jsx
View File

@@ -1,19 +1,34 @@
import { useSubscription } from "@apollo/react-hooks"; import { useSubscription } from "@apollo/react-hooks";
import React from "react"; import React from "react";
import { MESSAGES_SUBSCRIPTION } from "../../graphql/messages.queries"; import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
import ChatConversationComponent from "./chat-conversation.component"; import ChatConversationComponent from "./chat-conversation.component";
export default function ChatConversationContainer({ conversation }) { export default function ChatConversationContainer({ conversation }) {
const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, { const { loading, error, data } = useSubscription(
variables: { conversationId: conversation.id } CONVERSATION_SUBSCRIPTION_BY_PK,
}); {
variables: { conversationId: conversation.id }
}
);
return ( return (
<ChatConversationComponent <ChatConversationComponent
subState={[loading, error]} subState={[loading, error]}
conversation={conversation} conversation={conversation}
messages={(data && data.messages) || []} unreadCount={
(data &&
data.conversations_by_pk &&
data.conversations_by_pk.messages_aggregate &&
data.conversations_by_pk.messages_aggregate.aggregate &&
data.conversations_by_pk.messages_aggregate.aggregate.count) ||
0
}
messages={
(data &&
data.conversations_by_pk &&
data.conversations_by_pk.messages) ||
[]
}
/> />
); );
} }

50
client/src/components/chat-conversation/chat-conversation.styles.scss
View File

@@ -1,28 +1,28 @@
.chat-overlay-wrapper { // .chat-overlay-wrapper {
width: 95vw; // width: 95vw;
} // }
.chat-overlay-scroller { // .chat-overlay-scroller {
overflow-x: scroll; // overflow-x: scroll;
overflow-y: hidden; // overflow-y: hidden;
vertical-align: bottom; // vertical-align: bottom;
} // }
.chat-overlay { // .chat-overlay {
margin: 0px 12px; // margin: 0px 12px;
display: inline-block; // display: inline-block;
} // }
.chat-overlay-open { // .chat-overlay-open {
width: 400px; // width: 400px;
height: 33vh; // height: 33vh;
display: flex; // display: flex;
flex-flow: column; // flex-flow: column;
} // }
.chat-overlay-closed { // .chat-overlay-closed {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
vertical-align: middle; // vertical-align: middle;
width: 150px; // width: 150px;
cursor: pointer; // cursor: pointer;
} // }
// .chat-messages { // .chat-messages {
// height: 80%; // height: 80%;

22
client/src/components/chat-dock/chat-dock.container.jsx
View File

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectConversations } from "../../redux/messaging/messaging.selectors"; import { selectConversations } from "../../redux/messaging/messaging.selectors";
import ChatConversationContainer from "../chat-conversation/chat-conversation.container"; import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
import ChatMessagesButton from "../chat-messages-button/chat-messages-button.component"; import ChatMessagesButtoContainer from "../chat-messages-button/chat-messages-button.container";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
activeConversations: selectConversations activeConversations: selectConversations
@@ -13,16 +13,18 @@ const mapStateToProps = createStructuredSelector({
export function ChatOverlayContainer({ activeConversations }) { export function ChatOverlayContainer({ activeConversations }) {
return ( return (
<Affix offsetBottom={0}> <Affix offsetBottom={0}>
<ChatMessagesButton /> <div className='chat-dock'>
<ChatMessagesButtoContainer />
{activeConversations {activeConversations
? activeConversations.map(conversation => ( ? activeConversations.map(conversation => (
<ChatConversationContainer <ChatConversationContainer
conversation={conversation} conversation={conversation}
key={conversation.id} key={conversation.id}
/> />
)) ))
: null} : null}
</div>
</Affix> </Affix>
); );
} }

36
client/src/components/chat-messages-button/chat-messages-button.component.jsx
View File

@@ -1,13 +1,12 @@
import { MessageFilled } from "@ant-design/icons"; import { MessageFilled } from "@ant-design/icons";
import { Card } from "antd"; import { Badge, Card } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ChatConversationListContainer from "../chat-conversation-list/chat-conversation-list.container";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
import { toggleChatVisible } from "../../redux/messaging/messaging.actions"; import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
chatVisible: selectChatVisible chatVisible: selectChatVisible
@@ -16,19 +15,26 @@ const mapDispatchToProps = dispatch => ({
toggleChatVisible: () => dispatch(toggleChatVisible()) toggleChatVisible: () => dispatch(toggleChatVisible())
}); });
export function ChatWindowComponent({ chatVisible, toggleChatVisible }) { export function ChatWindowComponent({
chatVisible,
toggleChatVisible,
conversationList,
unreadCount
}) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Card size='small'> <Badge count={unreadCount}>
{chatVisible ? ( <Card size='small'>
<ChatConversationListContainer /> {chatVisible ? (
) : ( <ChatConversationListComponent conversationList={conversationList} />
<div onClick={() => toggleChatVisible()}> ) : (
<MessageFilled /> <div onClick={() => toggleChatVisible()}>
<strong>{t("messaging.labels.messaging")}</strong> <MessageFilled />
</div> <strong>{t("messaging.labels.messaging")}</strong>
)} </div>
</Card> )}
</Card>
</Badge>
); );
} }
export default connect( export default connect(

23
client/src/components/chat-conversation-list/chat-conversation-list.container.jsx → client/src/components/chat-messages-button/chat-messages-button.container.jsx
View File

@@ -1,16 +1,27 @@
import React from "react";
import ChatConversationListComponent from "./chat-conversation-list.component";
import { useSubscription } from "@apollo/react-hooks"; import { useSubscription } from "@apollo/react-hooks";
import React from "react";
import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries"; import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import ChatMessagesButtonComponent from "./chat-messages-button.component";
export default function ChatConversationListContainer() { export default function ChatMessagesButtonContainer() {
const { loading, error, data } = useSubscription( const { loading, error, data } = useSubscription(
CONVERSATION_LIST_SUBSCRIPTION CONVERSATION_LIST_SUBSCRIPTION
); );
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 <ChatConversationListComponent conversationList={data.conversations || []} />;
return (
<ChatMessagesButtonComponent
conversationList={(data && data.conversations) || []}
unreadCount={
(data &&
data.conversations.reduce((acc, val) => {
return (acc = acc + val.messages_aggregate.aggregate.count);
}, 0)) ||
0
}
/>
);
} }

24
client/src/graphql/conversations.queries.js
View File

@@ -5,7 +5,29 @@ export const CONVERSATION_LIST_SUBSCRIPTION = gql`
conversations { conversations {
phone_num phone_num
id id
messages_aggregate(where: { read: { _eq: false } }) { messages_aggregate(
where: { read: { _eq: false }, isoutbound: { _eq: false } }
) {
aggregate {
count
}
}
}
}
`;
export const CONVERSATION_SUBSCRIPTION_BY_PK = gql`
subscription CONVERSATION_SUBSCRIPTION_BY_PK($conversationId: uuid!) {
conversations_by_pk(id: $conversationId) {
messages {
id
status
text
isoutbound
}
messages_aggregate(
where: { read: { _eq: false }, isoutbound: { _eq: false } }
) {
aggregate { aggregate {
count count
} }

16
client/src/graphql/messages.queries.js
View File

@@ -1,16 +0,0 @@
import { gql } from "apollo-boost";
export const MESSAGES_SUBSCRIPTION = gql`
subscription MESSAGES_SUBSCRIPTION($conversationId: uuid!) {
messages(
where: { conversationid: { _eq: $conversationId } }
order_by: { created_at: asc }
) {
text
created_at
id
status
isoutbound
}
}
`;