From 644737e1c3d06f134fa52a4bb16cb7b80369da89 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Fri, 27 Mar 2020 17:03:48 -0700 Subject: [PATCH] BOD-14 More refactoring for messaging. Styles removed. --- .../chat-conversation-list.component.jsx | 1 - .../chat-conversation.component.jsx | 5 +- .../chat-conversation.container.jsx | 27 +++++++--- .../chat-conversation.styles.scss | 50 +++++++++---------- .../chat-dock/chat-dock.container.jsx | 22 ++++---- .../chat-messages-button.component.jsx | 36 +++++++------ .../chat-messages-button.container.jsx} | 23 ++++++--- client/src/graphql/conversations.queries.js | 24 ++++++++- client/src/graphql/messages.queries.js | 16 ------ 9 files changed, 122 insertions(+), 82 deletions(-) rename client/src/components/{chat-conversation-list/chat-conversation-list.container.jsx => chat-messages-button/chat-messages-button.container.jsx} (53%) delete mode 100644 client/src/graphql/messages.queries.js diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx index b1890772d..6e19b027d 100644 --- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx +++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx @@ -14,7 +14,6 @@ export function ChatConversationListComponent({ conversationList, openConversation }) { - console.log("conversationList", conversationList); return (
diff --git a/client/src/components/chat-conversation/chat-conversation.component.jsx b/client/src/components/chat-conversation/chat-conversation.component.jsx index a04b6b0d7..eb257a56d 100644 --- a/client/src/components/chat-conversation/chat-conversation.component.jsx +++ b/client/src/components/chat-conversation/chat-conversation.component.jsx @@ -7,10 +7,11 @@ import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v export default function ChatConversationComponent({ conversation, messages, - subState + subState, + unreadCount }) { return ( - + {conversation.open ? ( ); } - diff --git a/client/src/components/chat-conversation/chat-conversation.styles.scss b/client/src/components/chat-conversation/chat-conversation.styles.scss index 59fee6569..319582f5d 100644 --- a/client/src/components/chat-conversation/chat-conversation.styles.scss +++ b/client/src/components/chat-conversation/chat-conversation.styles.scss @@ -1,28 +1,28 @@ -.chat-overlay-wrapper { - width: 95vw; -} -.chat-overlay-scroller { - overflow-x: scroll; - overflow-y: hidden; - vertical-align: bottom; -} -.chat-overlay { - margin: 0px 12px; - display: inline-block; -} -.chat-overlay-open { - width: 400px; - height: 33vh; - display: flex; - flex-flow: column; -} -.chat-overlay-closed { - display: flex; - justify-content: space-between; - vertical-align: middle; - width: 150px; - cursor: pointer; -} +// .chat-overlay-wrapper { +// width: 95vw; +// } +// .chat-overlay-scroller { +// overflow-x: scroll; +// overflow-y: hidden; +// vertical-align: bottom; +// } +// .chat-overlay { +// margin: 0px 12px; +// display: inline-block; +// } +// .chat-overlay-open { +// width: 400px; +// height: 33vh; +// display: flex; +// flex-flow: column; +// } +// .chat-overlay-closed { +// display: flex; +// justify-content: space-between; +// vertical-align: middle; +// width: 150px; +// cursor: pointer; +// } // .chat-messages { // height: 80%; diff --git a/client/src/components/chat-dock/chat-dock.container.jsx b/client/src/components/chat-dock/chat-dock.container.jsx index e83c60425..a7d4970d3 100644 --- a/client/src/components/chat-dock/chat-dock.container.jsx +++ b/client/src/components/chat-dock/chat-dock.container.jsx @@ -4,7 +4,7 @@ import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectConversations } from "../../redux/messaging/messaging.selectors"; 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({ activeConversations: selectConversations @@ -13,16 +13,18 @@ const mapStateToProps = createStructuredSelector({ export function ChatOverlayContainer({ activeConversations }) { return ( - +
+ - {activeConversations - ? activeConversations.map(conversation => ( - - )) - : null} + {activeConversations + ? activeConversations.map(conversation => ( + + )) + : null} +
); } diff --git a/client/src/components/chat-messages-button/chat-messages-button.component.jsx b/client/src/components/chat-messages-button/chat-messages-button.component.jsx index 2e6b07e6d..9184cce74 100644 --- a/client/src/components/chat-messages-button/chat-messages-button.component.jsx +++ b/client/src/components/chat-messages-button/chat-messages-button.component.jsx @@ -1,13 +1,12 @@ import { MessageFilled } from "@ant-design/icons"; -import { Card } from "antd"; +import { Badge, Card } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; -import ChatConversationListContainer from "../chat-conversation-list/chat-conversation-list.container"; - import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -import { selectChatVisible } from "../../redux/messaging/messaging.selectors"; 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({ chatVisible: selectChatVisible @@ -16,19 +15,26 @@ const mapDispatchToProps = dispatch => ({ toggleChatVisible: () => dispatch(toggleChatVisible()) }); -export function ChatWindowComponent({ chatVisible, toggleChatVisible }) { +export function ChatWindowComponent({ + chatVisible, + toggleChatVisible, + conversationList, + unreadCount +}) { const { t } = useTranslation(); return ( - - {chatVisible ? ( - - ) : ( -
toggleChatVisible()}> - - {t("messaging.labels.messaging")} -
- )} - + + + {chatVisible ? ( + + ) : ( +
toggleChatVisible()}> + + {t("messaging.labels.messaging")} +
+ )} + + ); } export default connect( diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.container.jsx b/client/src/components/chat-messages-button/chat-messages-button.container.jsx similarity index 53% rename from client/src/components/chat-conversation-list/chat-conversation-list.container.jsx rename to client/src/components/chat-messages-button/chat-messages-button.container.jsx index c82c2bbbf..a8f3ffe88 100644 --- a/client/src/components/chat-conversation-list/chat-conversation-list.container.jsx +++ b/client/src/components/chat-messages-button/chat-messages-button.container.jsx @@ -1,16 +1,27 @@ -import React from "react"; -import ChatConversationListComponent from "./chat-conversation-list.component"; import { useSubscription } from "@apollo/react-hooks"; +import React from "react"; import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries"; -import LoadingSpinner from "../loading-spinner/loading-spinner.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( CONVERSATION_LIST_SUBSCRIPTION ); - if (loading) return ; if (error) return ; - return ; + + return ( + { + return (acc = acc + val.messages_aggregate.aggregate.count); + }, 0)) || + 0 + } + /> + ); } diff --git a/client/src/graphql/conversations.queries.js b/client/src/graphql/conversations.queries.js index 018bd475d..af7d0d138 100644 --- a/client/src/graphql/conversations.queries.js +++ b/client/src/graphql/conversations.queries.js @@ -5,7 +5,29 @@ export const CONVERSATION_LIST_SUBSCRIPTION = gql` conversations { phone_num 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 { count } diff --git a/client/src/graphql/messages.queries.js b/client/src/graphql/messages.queries.js deleted file mode 100644 index f44ebbd4b..000000000 --- a/client/src/graphql/messages.queries.js +++ /dev/null @@ -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 - } - } -`;