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,
openConversation
}) {
console.log("conversationList", conversationList);
return (
<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({
conversation,
messages,
subState
subState,
unreadCount
}) {
return (
<Badge count={messages.length}>
<Badge count={unreadCount}>
<Card className='chat-overlay' size='small'>
{conversation.open ? (
<ChatConversationOpenComponent

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

@@ -1,19 +1,34 @@
import { useSubscription } from "@apollo/react-hooks";
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";
export default function ChatConversationContainer({ conversation }) {
const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, {
variables: { conversationId: conversation.id }
});
const { loading, error, data } = useSubscription(
CONVERSATION_SUBSCRIPTION_BY_PK,
{
variables: { conversationId: conversation.id }
}
);
return (
<ChatConversationComponent
subState={[loading, error]}
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 {
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%;

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 { 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 (
<Affix offsetBottom={0}>
<ChatMessagesButton />
<div className='chat-dock'>
<ChatMessagesButtoContainer />
{activeConversations
? activeConversations.map(conversation => (
<ChatConversationContainer
conversation={conversation}
key={conversation.id}
/>
))
: null}
{activeConversations
? activeConversations.map(conversation => (
<ChatConversationContainer
conversation={conversation}
key={conversation.id}
/>
))
: null}
</div>
</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 { 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 (
<Card size='small'>
{chatVisible ? (
<ChatConversationListContainer />
) : (
<div onClick={() => toggleChatVisible()}>
<MessageFilled />
<strong>{t("messaging.labels.messaging")}</strong>
</div>
)}
</Card>
<Badge count={unreadCount}>
<Card size='small'>
{chatVisible ? (
<ChatConversationListComponent conversationList={conversationList} />
) : (
<div onClick={() => toggleChatVisible()}>
<MessageFilled />
<strong>{t("messaging.labels.messaging")}</strong>
</div>
)}
</Card>
</Badge>
);
}
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 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 <LoadingSpinner />;
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 {
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
}

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
}
}
`;