diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index 8c6e155fe..64901a3b7 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -25,17 +25,17 @@ export default class AppContainer extends Component { uri: process.env.REACT_APP_GRAPHQL_ENDPOINT_WS, options: { //lazy: true, - reconnect: true - // connectionParams: () => { - // const token = localStorage.getItem("token"); - // if (token) { - // return { - // headers: { - // authorization: token ? `Bearer ${token}` : "" - // } - // }; - // } - // } + reconnect: true, + connectionParams: () => { + const token = localStorage.getItem("token"); + if (token) { + return { + headers: { + authorization: token ? `Bearer ${token}` : "" + } + }; + } + } } }); const subscriptionMiddleware = { 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 new file mode 100644 index 000000000..07ea5ef02 --- /dev/null +++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx @@ -0,0 +1,60 @@ +import { ShrinkOutlined } from "@ant-design/icons"; +import { Avatar, Badge, Col, List, Row } from "antd"; +import React from "react"; +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { openConversation, toggleChatVisible } from "../../redux/messaging/messaging.actions"; + +const mapStateToProps = createStructuredSelector({ + //currentUser: selectCurrentUser +}); +const mapDispatchToProps = dispatch => ({ + toggleChatVisible: () => dispatch(toggleChatVisible()), + openConversation: number => dispatch(openConversation(number)) +}); + +export function ChatConversationListComponent({ + toggleChatVisible, + conversationList, + openConversation +}) { + console.log("conversationList", conversationList); + + return ( +
+ + Title + + toggleChatVisible()} /> + + + + ( + + + openConversation({ phone_num: item.phone_num, id: item.id }) + }> + + } + title={item.phone_num} + description='Some sort of RO info? ' + /> + + + )} + /> + +
+ ); +} +export default connect( + mapStateToProps, + mapDispatchToProps +)(ChatConversationListComponent); diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.container.jsx b/client/src/components/chat-conversation-list/chat-conversation-list.container.jsx new file mode 100644 index 000000000..c82c2bbbf --- /dev/null +++ b/client/src/components/chat-conversation-list/chat-conversation-list.container.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import ChatConversationListComponent from "./chat-conversation-list.component"; +import { useSubscription } from "@apollo/react-hooks"; +import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries"; +import LoadingSpinner from "../loading-spinner/loading-spinner.component"; +import AlertComponent from "../alert/alert.component"; + +export default function ChatConversationListContainer() { + const { loading, error, data } = useSubscription( + CONVERSATION_LIST_SUBSCRIPTION + ); + + if (loading) return ; + if (error) return ; + return ; +} diff --git a/client/src/components/chat-conversation/chat-conversation.closed.component.jsx b/client/src/components/chat-conversation/chat-conversation.closed.component.jsx index 298bd41ca..13df9d252 100644 --- a/client/src/components/chat-conversation/chat-conversation.closed.component.jsx +++ b/client/src/components/chat-conversation/chat-conversation.closed.component.jsx @@ -1,7 +1,11 @@ import { Button } from "antd"; import React from "react"; import { connect } from "react-redux"; -import { closeConversation, sendMessage, toggleConversationVisible } from "../../redux/messaging/messaging.actions"; +import { + closeConversation, + sendMessage, + toggleConversationVisible +} from "../../redux/messaging/messaging.actions"; import PhoneFormatter from "../../utils/PhoneFormatter"; const mapDispatchToProps = dispatch => ({ @@ -18,13 +22,13 @@ function ChatConversationClosedComponent({ }) { return (
-
toggleConversationVisible(conversation.phone)}> - {conversation.phone} +
toggleConversationVisible(conversation.phone_num)}> + {conversation.phone_num}
diff --git a/client/src/components/chat-conversation/chat-conversation.component.jsx b/client/src/components/chat-conversation/chat-conversation.component.jsx index 662a8c9f3..a9415c466 100644 --- a/client/src/components/chat-conversation/chat-conversation.component.jsx +++ b/client/src/components/chat-conversation/chat-conversation.component.jsx @@ -1,4 +1,4 @@ -import { Button, Card } from "antd"; +import { Button, Card, Badge } from "antd"; import React from "react"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -25,24 +25,26 @@ const mapDispatchToProps = dispatch => ({ export function ChatConversationComponent({ conversation, toggleConversationVisible, - closeConversation + closeConversation, + messages, + subState }) { - const messages = []; - return ( -
+
toggleConversationVisible(conversation.phone)}> - {conversation.phone} + onClick={() => + toggleConversationVisible(conversation.phone_num) + }> + {conversation.phone_num}
@@ -57,12 +59,13 @@ export function ChatConversationComponent({ ) : ( )} -
+ ); } diff --git a/client/src/components/chat-conversation/chat-conversation.container.jsx b/client/src/components/chat-conversation/chat-conversation.container.jsx index bce58d405..8500fdb4e 100644 --- a/client/src/components/chat-conversation/chat-conversation.container.jsx +++ b/client/src/components/chat-conversation/chat-conversation.container.jsx @@ -1,17 +1,33 @@ +import { useSubscription } from "@apollo/react-hooks"; import React from "react"; -import ChatConversationComponent from "./chat-conversation.component"; - import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; +import { MESSAGES_SUBSCRIPTION } from "../../graphql/messages.queries"; +import ChatConversationComponent from "./chat-conversation.component"; + const mapStateToProps = createStructuredSelector({ //currentUser: selectCurrentUser }); const mapDispatchToProps = dispatch => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); + +export function ChatConversationContainer({ conversation }) { + console.log("conversation", conversation); + const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, { + variables: { conversationId: conversation.id } + }); + + return ( + + ); +} + export default connect( mapStateToProps, mapDispatchToProps -)(function ChatConversationContainer({ conversation }) { - return ; -}); +)(ChatConversationContainer); diff --git a/client/src/components/chat-conversation/chat-conversation.open.component.jsx b/client/src/components/chat-conversation/chat-conversation.open.component.jsx index 1d99de63f..4e148c349 100644 --- a/client/src/components/chat-conversation/chat-conversation.open.component.jsx +++ b/client/src/components/chat-conversation/chat-conversation.open.component.jsx @@ -1,10 +1,16 @@ import React from "react"; +import AlertComponent from "../alert/alert.component"; import ChatSendMessage from "../chat-send-message/chat-send-message.component"; +import LoadingSpinner from "../loading-spinner/loading-spinner.component"; + export default function ChatConversationOpenComponent({ conversation, - messages + messages, + subState }) { - if (!!!messages) return
No Messages
; + const [loading, error] = subState; + if (loading) return ; + if (error) return ; return (
@@ -12,11 +18,13 @@ export default function ChatConversationOpenComponent({
    {messages.map(item => (
  • -

    {item.body}

    + key={item.id} + className={`${item.isoutbound ? "replies" : "sent"}`}> +
    +

    + {item.text}
    {item.status} +

    +
    • ))}
diff --git a/client/src/components/chat-overlay/chat-overlay.component.jsx b/client/src/components/chat-overlay/chat-overlay.component.jsx index 599a694df..b40750fdb 100644 --- a/client/src/components/chat-overlay/chat-overlay.component.jsx +++ b/client/src/components/chat-overlay/chat-overlay.component.jsx @@ -2,6 +2,8 @@ import { Badge, Card } from "antd"; import { MessageFilled } from "@ant-design/icons"; import React from "react"; import { useTranslation } from "react-i18next"; +import ChatConversationListContainer from "../chat-conversation-list/chat-conversation-list.container"; + export default function ChatWindowComponent({ chatVisible, toggleChatVisible @@ -11,19 +13,19 @@ export default function ChatWindowComponent({
toggleChatVisible()} style={{ width: chatVisible ? "300px" : "125px", margin: "0px 10px" }} - size="small" - > + size='small'> {chatVisible ? ( -
- List of chats here. +
+
) : ( -
+
toggleChatVisible()}> {t("messaging.labels.messaging")} diff --git a/client/src/components/chat-overlay/chat-overlay.container.jsx b/client/src/components/chat-overlay/chat-overlay.container.jsx index 6302bad0d..ea0db264c 100644 --- a/client/src/components/chat-overlay/chat-overlay.container.jsx +++ b/client/src/components/chat-overlay/chat-overlay.container.jsx @@ -12,19 +12,17 @@ import ChatOverlayComponent from "./chat-overlay.component"; const mapStateToProps = createStructuredSelector({ chatVisible: selectChatVisible, - conversations: selectConversations + activeConversations: selectConversations }); const mapDispatchToProps = dispatch => ({ toggleChatVisible: () => dispatch(toggleChatVisible()) }); -export default connect( - mapStateToProps, - mapDispatchToProps -)(function ChatWindowContainer({ + +export function ChatOverlayContainer({ chatVisible, toggleChatVisible, - conversations + activeConversations }) { return ( @@ -35,14 +33,20 @@ export default connect( toggleChatVisible={toggleChatVisible} /> - {conversations - ? conversations.map((conversation, idx) => ( - - - + {activeConversations + ? activeConversations.map(conversation => ( + )) : null}
); -}); +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(ChatOverlayContainer); diff --git a/client/src/components/chat-send-message/chat-send-message.component.jsx b/client/src/components/chat-send-message/chat-send-message.component.jsx index 0da482dc7..24bff6664 100644 --- a/client/src/components/chat-send-message/chat-send-message.component.jsx +++ b/client/src/components/chat-send-message/chat-send-message.component.jsx @@ -19,11 +19,12 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage }) { const handleEnter = () => { sendMessage({ - to: conversation.phone, + to: conversation.phone_num, body: message, messagingServiceSid: bodyshop.messagingservicesid, conversationid: conversation.id }); + setMessage(""); }; return ( @@ -31,6 +32,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage }) { setMessage(e.target.value)} diff --git a/client/src/graphql/apollo-error-handling.js b/client/src/graphql/apollo-error-handling.js index ccd1b7aef..827b5de17 100644 --- a/client/src/graphql/apollo-error-handling.js +++ b/client/src/graphql/apollo-error-handling.js @@ -9,7 +9,9 @@ const errorLink = onError( `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` ) ); - if (networkError) console.log(`[Network error]: ${networkError}`); + if (networkError) + console.log(`[Network error]: ${JSON.stringify(networkError)}`); + console.log(operation.getContext()); } ); diff --git a/client/src/graphql/conversations.queries.js b/client/src/graphql/conversations.queries.js new file mode 100644 index 000000000..018bd475d --- /dev/null +++ b/client/src/graphql/conversations.queries.js @@ -0,0 +1,15 @@ +import { gql } from "apollo-boost"; + +export const CONVERSATION_LIST_SUBSCRIPTION = gql` + subscription CONVERSATION_LIST_SUBSCRIPTION { + conversations { + phone_num + id + messages_aggregate(where: { read: { _eq: false } }) { + aggregate { + count + } + } + } + } +`; diff --git a/client/src/graphql/messages.queries.js b/client/src/graphql/messages.queries.js new file mode 100644 index 000000000..83dc52d12 --- /dev/null +++ b/client/src/graphql/messages.queries.js @@ -0,0 +1,13 @@ +import { gql } from "apollo-boost"; + +export const MESSAGES_SUBSCRIPTION = gql` + subscription MESSAGES_SUBSCRIPTION($conversationId: uuid!) { + messages(where: { conversationid: { _eq: $conversationId } }) { + text + created_at + id + status + isoutbound + } + } +`; diff --git a/client/src/redux/messaging/messaging.reducer.js b/client/src/redux/messaging/messaging.reducer.js index 200875dec..123b88d95 100644 --- a/client/src/redux/messaging/messaging.reducer.js +++ b/client/src/redux/messaging/messaging.reducer.js @@ -2,18 +2,20 @@ import MessagingActionTypes from "./messaging.types"; const INITIAL_STATE = { visible: false, + unread: 0, conversations: [ { - phone: "6049992002", + phone_num: "6049992002", id: "519ba10d-6467-4fa5-9c22-59ae891edeb6", open: false }, { - phone: "6049992991", + phone_num: "6049992991", id: "ab57deba-eeb9-40db-b5ae-23f3ce8d7c7b", open: false } - ] + ], + error: null }; const messagingReducer = (state = INITIAL_STATE, action) => { @@ -29,11 +31,13 @@ const messagingReducer = (state = INITIAL_STATE, action) => { visible: true }; case MessagingActionTypes.OPEN_CONVERSATION: - if (state.conversations.find(c => c.phone === action.payload)) + if ( + state.conversations.find(c => c.phone_num === action.payload.phone_num) + ) return { ...state, conversations: state.conversations.map(c => - c.phone === action.payload ? { ...c, open: true } : c + c.phone_num === action.payload.phone_num ? { ...c, open: true } : c ) }; else @@ -41,23 +45,29 @@ const messagingReducer = (state = INITIAL_STATE, action) => { ...state, conversations: [ ...state.conversations, - { phone: action.payload, open: true } + { + phone_num: action.payload.phone_num, + id: action.payload.id, + open: true + } ] }; case MessagingActionTypes.CLOSE_CONVERSATION: return { ...state, conversations: state.conversations.filter( - c => c.phone !== action.payload + c => c.phone_num !== action.payload ) }; case MessagingActionTypes.TOGGLE_CONVERSATION_VISIBLE: return { ...state, conversations: state.conversations.map(c => - c.phone === action.payload ? { ...c, open: !c.open } : c + c.phone_num === action.payload ? { ...c, open: !c.open } : c ) }; + case MessagingActionTypes.SEND_MESSAGE_FAILURE: + return { ...state, error: action.payload }; default: return state; } diff --git a/hasura/migrations/1585181593575_alter_table_public_messages_add_column_read/down.yaml b/hasura/migrations/1585181593575_alter_table_public_messages_add_column_read/down.yaml new file mode 100644 index 000000000..338899b1f --- /dev/null +++ b/hasura/migrations/1585181593575_alter_table_public_messages_add_column_read/down.yaml @@ -0,0 +1,5 @@ +- args: + cascade: false + read_only: false + sql: ALTER TABLE "public"."messages" DROP COLUMN "read"; + type: run_sql diff --git a/hasura/migrations/1585181593575_alter_table_public_messages_add_column_read/up.yaml b/hasura/migrations/1585181593575_alter_table_public_messages_add_column_read/up.yaml new file mode 100644 index 000000000..a5ba54045 --- /dev/null +++ b/hasura/migrations/1585181593575_alter_table_public_messages_add_column_read/up.yaml @@ -0,0 +1,6 @@ +- args: + cascade: false + read_only: false + sql: ALTER TABLE "public"."messages" ADD COLUMN "read" boolean NOT NULL DEFAULT + false; + type: run_sql diff --git a/hasura/migrations/1585181603176_update_permission_user_public_table_messages/down.yaml b/hasura/migrations/1585181603176_update_permission_user_public_table_messages/down.yaml new file mode 100644 index 000000000..1d1eaa297 --- /dev/null +++ b/hasura/migrations/1585181603176_update_permission_user_public_table_messages/down.yaml @@ -0,0 +1,38 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_insert_permission +- args: + permission: + check: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + columns: + - id + - created_at + - updated_at + - msid + - conversationid + - text + - image + - image_path + - isoutbound + - status + localPresets: + - key: "" + value: "" + set: {} + role: user + table: + name: messages + schema: public + type: create_insert_permission diff --git a/hasura/migrations/1585181603176_update_permission_user_public_table_messages/up.yaml b/hasura/migrations/1585181603176_update_permission_user_public_table_messages/up.yaml new file mode 100644 index 000000000..108df6204 --- /dev/null +++ b/hasura/migrations/1585181603176_update_permission_user_public_table_messages/up.yaml @@ -0,0 +1,39 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_insert_permission +- args: + permission: + check: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + columns: + - id + - created_at + - updated_at + - msid + - conversationid + - text + - image + - image_path + - isoutbound + - status + - read + localPresets: + - key: "" + value: "" + set: {} + role: user + table: + name: messages + schema: public + type: create_insert_permission diff --git a/hasura/migrations/1585181608761_update_permission_user_public_table_messages/down.yaml b/hasura/migrations/1585181608761_update_permission_user_public_table_messages/down.yaml new file mode 100644 index 000000000..cfc1aa1a4 --- /dev/null +++ b/hasura/migrations/1585181608761_update_permission_user_public_table_messages/down.yaml @@ -0,0 +1,36 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_select_permission +- args: + permission: + allow_aggregations: false + columns: + - conversationid + - created_at + - id + - image + - image_path + - isoutbound + - msid + - status + - text + - updated_at + computed_fields: [] + filter: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + role: user + table: + name: messages + schema: public + type: create_select_permission diff --git a/hasura/migrations/1585181608761_update_permission_user_public_table_messages/up.yaml b/hasura/migrations/1585181608761_update_permission_user_public_table_messages/up.yaml new file mode 100644 index 000000000..27dca1b45 --- /dev/null +++ b/hasura/migrations/1585181608761_update_permission_user_public_table_messages/up.yaml @@ -0,0 +1,37 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_select_permission +- args: + permission: + allow_aggregations: false + columns: + - image + - isoutbound + - read + - image_path + - msid + - status + - text + - created_at + - updated_at + - conversationid + - id + computed_fields: [] + filter: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + role: user + table: + name: messages + schema: public + type: create_select_permission diff --git a/hasura/migrations/1585181614380_update_permission_user_public_table_messages/down.yaml b/hasura/migrations/1585181614380_update_permission_user_public_table_messages/down.yaml new file mode 100644 index 000000000..11ebdccfd --- /dev/null +++ b/hasura/migrations/1585181614380_update_permission_user_public_table_messages/down.yaml @@ -0,0 +1,38 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_update_permission +- args: + permission: + columns: + - image + - isoutbound + - image_path + - msid + - status + - text + - created_at + - updated_at + - conversationid + - id + filter: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + localPresets: + - key: "" + value: "" + set: {} + role: user + table: + name: messages + schema: public + type: create_update_permission diff --git a/hasura/migrations/1585181614380_update_permission_user_public_table_messages/up.yaml b/hasura/migrations/1585181614380_update_permission_user_public_table_messages/up.yaml new file mode 100644 index 000000000..990a7e935 --- /dev/null +++ b/hasura/migrations/1585181614380_update_permission_user_public_table_messages/up.yaml @@ -0,0 +1,39 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_update_permission +- args: + permission: + columns: + - image + - isoutbound + - read + - image_path + - msid + - status + - text + - created_at + - updated_at + - conversationid + - id + filter: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + localPresets: + - key: "" + value: "" + set: {} + role: user + table: + name: messages + schema: public + type: create_update_permission diff --git a/hasura/migrations/1585182358098_update_permission_user_public_table_messages/down.yaml b/hasura/migrations/1585182358098_update_permission_user_public_table_messages/down.yaml new file mode 100644 index 000000000..27dca1b45 --- /dev/null +++ b/hasura/migrations/1585182358098_update_permission_user_public_table_messages/down.yaml @@ -0,0 +1,37 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_select_permission +- args: + permission: + allow_aggregations: false + columns: + - image + - isoutbound + - read + - image_path + - msid + - status + - text + - created_at + - updated_at + - conversationid + - id + computed_fields: [] + filter: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + role: user + table: + name: messages + schema: public + type: create_select_permission diff --git a/hasura/migrations/1585182358098_update_permission_user_public_table_messages/up.yaml b/hasura/migrations/1585182358098_update_permission_user_public_table_messages/up.yaml new file mode 100644 index 000000000..779d52c21 --- /dev/null +++ b/hasura/migrations/1585182358098_update_permission_user_public_table_messages/up.yaml @@ -0,0 +1,37 @@ +- args: + role: user + table: + name: messages + schema: public + type: drop_select_permission +- args: + permission: + allow_aggregations: true + columns: + - image + - isoutbound + - read + - image_path + - msid + - status + - text + - created_at + - updated_at + - conversationid + - id + computed_fields: [] + filter: + conversation: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + role: user + table: + name: messages + schema: public + type: create_select_permission diff --git a/hasura/migrations/1585182522250_update_permission_user_public_table_conversations/down.yaml b/hasura/migrations/1585182522250_update_permission_user_public_table_conversations/down.yaml new file mode 100644 index 000000000..3d7279640 --- /dev/null +++ b/hasura/migrations/1585182522250_update_permission_user_public_table_conversations/down.yaml @@ -0,0 +1,30 @@ +- args: + role: user + table: + name: conversations + schema: public + type: drop_select_permission +- args: + permission: + allow_aggregations: false + columns: + - phone_num + - created_at + - updated_at + - bodyshopid + - id + computed_fields: [] + filter: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + role: user + table: + name: conversations + schema: public + type: create_select_permission diff --git a/hasura/migrations/1585182522250_update_permission_user_public_table_conversations/up.yaml b/hasura/migrations/1585182522250_update_permission_user_public_table_conversations/up.yaml new file mode 100644 index 000000000..9c9dd4ce0 --- /dev/null +++ b/hasura/migrations/1585182522250_update_permission_user_public_table_conversations/up.yaml @@ -0,0 +1,30 @@ +- args: + role: user + table: + name: conversations + schema: public + type: drop_select_permission +- args: + permission: + allow_aggregations: true + columns: + - phone_num + - created_at + - updated_at + - bodyshopid + - id + computed_fields: [] + filter: + bodyshop: + associations: + _and: + - user: + authid: + _eq: X-Hasura-User-Id + - active: + _eq: true + role: user + table: + name: conversations + schema: public + type: create_select_permission