81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
import { useQuery } from "@apollo/client";
|
|
import axios from "axios";
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import SocketContext from "../../contexts/SocketIO/socketContext";
|
|
import { GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
|
|
import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import ChatConversationComponent from "./chat-conversation.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
selectedConversation: selectSelectedConversation,
|
|
bodyshop: selectBodyshop
|
|
});
|
|
|
|
export default connect(mapStateToProps, null)(ChatConversationContainer);
|
|
|
|
export function ChatConversationContainer({ bodyshop, selectedConversation }) {
|
|
const {
|
|
loading: convoLoading,
|
|
error: convoError,
|
|
data: convoData
|
|
} = useQuery(GET_CONVERSATION_DETAILS, {
|
|
variables: { conversationId: selectedConversation },
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only"
|
|
});
|
|
|
|
const { socket } = useContext(SocketContext);
|
|
|
|
useEffect(() => {
|
|
socket.emit("join-bodyshop-conversation", {
|
|
bodyshopId: bodyshop.id,
|
|
conversationId: selectedConversation
|
|
});
|
|
|
|
return () => {
|
|
socket.emit("leave-bodyshop-conversation", {
|
|
bodyshopId: bodyshop.id,
|
|
conversationId: selectedConversation
|
|
});
|
|
};
|
|
}, [selectedConversation, bodyshop, socket]);
|
|
|
|
// const { loading, error, data } = useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
|
|
// variables: { conversationId: selectedConversation }
|
|
// });
|
|
|
|
const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
|
|
|
|
const unreadCount =
|
|
convoData &&
|
|
convoData.conversations_by_pk &&
|
|
convoData.conversations_by_pk.messages &&
|
|
convoData.conversations_by_pk.messages.reduce((acc, val) => {
|
|
return !val.read && !val.isoutbound ? acc + 1 : acc;
|
|
}, 0);
|
|
|
|
const handleMarkConversationAsRead = async () => {
|
|
if (unreadCount > 0 && !!selectedConversation && !markingAsReadInProgress) {
|
|
setMarkingAsReadInProgress(true);
|
|
// await markConversationRead({});
|
|
await axios.post("/sms/markConversationRead", {
|
|
conversationid: selectedConversation,
|
|
imexshopid: bodyshop.imexshopid
|
|
});
|
|
setMarkingAsReadInProgress(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ChatConversationComponent
|
|
subState={[convoLoading, convoError]}
|
|
conversation={convoData ? convoData.conversations_by_pk : {}}
|
|
messages={convoData ? convoData.conversations_by_pk.messages : []}
|
|
handleMarkConversationAsRead={handleMarkConversationAsRead}
|
|
/>
|
|
);
|
|
}
|