diff --git a/src/config/apolloclient.ts b/src/config/apolloclient.ts index 830b2a746..e5eabc816 100644 --- a/src/config/apolloclient.ts +++ b/src/config/apolloclient.ts @@ -1,4 +1,4 @@ -import { ApolloClient, InMemoryCache, createHttpLink, split } from '@apollo/client'; +import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'; import { onError } from '@apollo/link-error'; import { RetryLink } from '@apollo/client/link/retry'; import { TokenRefreshLink } from 'apollo-link-token-refresh'; diff --git a/src/containers/Chat/Chat.tsx b/src/containers/Chat/Chat.tsx index 32ae09a45..40e4c599a 100644 --- a/src/containers/Chat/Chat.tsx +++ b/src/containers/Chat/Chat.tsx @@ -20,6 +20,7 @@ import { setErrorMessage } from '../../common/notification'; import { SEARCH_QUERY_VARIABLES } from '../../common/constants'; import { SIMULATOR_CONTACT } from '../../common/constants'; import { getUserSession } from '../../services/AuthService'; +import { saveConversation } from '../../services/ChatService'; export interface ChatProps { contactId: number; @@ -40,25 +41,8 @@ export const Chat: React.SFC = ({ contactId }) => { const [getContactQuery] = useLazyQuery(SEARCH_QUERY, { onCompleted: (conversation) => { if (conversation) { - const conversations = client.readQuery({ - query: SEARCH_QUERY, - variables: queryVariables, - }); - - const conversationCopy = JSON.parse(JSON.stringify(conversation)); - conversationCopy.search[0].messages - .sort((currentMessage: any, nextMessage: any) => { - return currentMessage.id - nextMessage.id; - }) - .reverse(); - - const conversationsCopy = JSON.parse(JSON.stringify(conversations)); - conversationsCopy.search.unshift(conversationCopy.search[0]); - client.writeQuery({ - query: SEARCH_QUERY, - variables: queryVariables, - data: conversationsCopy, - }); + // save the conversation and update cache + saveConversation(conversation, client, queryVariables); } }, }); diff --git a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx index 23b6efe10..32fec20f3 100644 --- a/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx +++ b/src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx @@ -14,6 +14,7 @@ import { setErrorMessage } from '../../../../common/notification'; import { SEARCH_QUERY_VARIABLES } from '../../../../common/constants'; import styles from './ConversationList.module.css'; import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp'; +import { updateConversations } from '../../../../services/ChatService'; interface ConversationListProps { searchVal: string; @@ -149,21 +150,8 @@ export const ConversationList: React.SFC = (props) => { if (data && data.search.length === 0) { setShowLoadMore(false); } else { - const conversations = client.readQuery({ - query: SEARCH_QUERY, - variables: queryVariables, - }); - - const conversationCopy = JSON.parse(JSON.stringify(data)); - - const conversationsCopy = JSON.parse(JSON.stringify(conversations)); - conversationsCopy.search = [...conversationsCopy.search, ...conversationCopy.search]; - - client.writeQuery({ - query: SEARCH_QUERY, - variables: queryVariables, - data: conversationsCopy, - }); + // save the conversation and update cache + updateConversations(data, client, queryVariables); setLoadingOffset(loadingOffset + 10); } diff --git a/src/containers/Chat/ChatMessages/ChatMessages.tsx b/src/containers/Chat/ChatMessages/ChatMessages.tsx index 8bd05b9c0..b418ed16d 100644 --- a/src/containers/Chat/ChatMessages/ChatMessages.tsx +++ b/src/containers/Chat/ChatMessages/ChatMessages.tsx @@ -21,6 +21,7 @@ import { } from '../../../graphql/mutations/Chat'; import { FILTER_TAGS_NAME } from '../../../graphql/queries/Tag'; import { ReactComponent as TagIcon } from '../../../assets/images/icons/Tags/Selected.svg'; +import { getCachedConverations, updateConversationsCache } from '../../../services/ChatService'; export interface ChatMessagesProps { contactId: number | string; @@ -126,10 +127,9 @@ export const ChatMessages: React.SFC = ({ contactId }) => { if (data.search[0].messages.length === 0) { setShowLoadMore(false); } else { - const conversations = client.readQuery({ - query: SEARCH_QUERY, - variables: queryVariables, - }); + // get the conversations from cache + const conversations = getCachedConverations(client, queryVariables); + const conversationCopy = JSON.parse(JSON.stringify(data)); conversationCopy.search[0].messages .sort((currentMessage: any, nextMessage: any) => { @@ -147,11 +147,9 @@ export const ChatMessages: React.SFC = ({ contactId }) => { return conversation; }); - client.writeQuery({ - query: SEARCH_QUERY, - variables: queryVariables, - data: conversationsCopy, - }); + // update the conversation cache + updateConversationsCache(conversationsCopy, client, queryVariables); + setMessageOffset(messageOffset + 50); } }, diff --git a/src/containers/Group/GroupList/GroupList.tsx b/src/containers/Group/GroupList/GroupList.tsx index 46c2fbe67..c6ca09f59 100644 --- a/src/containers/Group/GroupList/GroupList.tsx +++ b/src/containers/Group/GroupList/GroupList.tsx @@ -3,7 +3,6 @@ import { GET_GROUPS_COUNT, FILTER_GROUPS, GET_GROUPS } from '../../../graphql/qu import { DELETE_GROUP, UPDATE_GROUP_CONTACTS } from '../../../graphql/mutations/Group'; import styles from './GroupList.module.css'; import { ReactComponent as GroupIcon } from '../../../assets/images/icons/Groups/Dark.svg'; -import { ReactComponent as AutomationIcon } from '../../../assets/images/icons/Automations/Selected.svg'; import { ReactComponent as AutomationDarkIcon } from '../../../assets/images/icons/Automations/Dark.svg'; import { ReactComponent as ChatDarkIcon } from '../../../assets/images/icons/Chat/UnselectedDark.svg'; import ChatDarkIconSVG from '../../../assets/images/icons/Chat/UnselectedDark.svg'; @@ -82,7 +81,7 @@ export const GroupList: React.SFC = (props) => { client, `${numberDeleted} contact${ numberDeleted === 1 ? '' : 's were' - } removed and ${numberAdded} contact${numberAdded == 1 ? '' : 's were'} added` + } removed and ${numberAdded} contact${numberAdded === 1 ? '' : 's were'} added` ); } else if (numberDeleted > 0) { setNotification( @@ -90,7 +89,10 @@ export const GroupList: React.SFC = (props) => { `${numberDeleted} contact${numberDeleted === 1 ? '' : 's were'} removed` ); } else { - setNotification(client, `${numberAdded} contact${numberAdded == 1 ? '' : 's were'} added`); + setNotification( + client, + `${numberAdded} contact${numberAdded === 1 ? '' : 's were'} added` + ); } setAddContactsDialogShow(false); }, @@ -243,7 +245,7 @@ export const GroupList: React.SFC = (props) => { , + icon: , title: 'Send a message', onClick: () => setSendMessageDialogShow(true), }, diff --git a/src/services/ChatService.ts b/src/services/ChatService.ts new file mode 100644 index 000000000..9ce161539 --- /dev/null +++ b/src/services/ChatService.ts @@ -0,0 +1,56 @@ +// This service includes all the actions related to conversations storing + +import { SEARCH_QUERY } from '../graphql/queries/Search'; + +// write conversation to cache +export const updateConversations = (conversation: any, client: any, queryVariables: any) => { + // get the current conversations from the cache + const conversations = getCachedConverations(client, queryVariables); + + // make a copy of current conversation + const conversationCopy = JSON.parse(JSON.stringify(conversation)); + + // make a copy of current conversations + const conversationsCopy = JSON.parse(JSON.stringify(conversations)); + + // add new conversation to conversations + conversationsCopy.search = [...conversationsCopy.search, ...conversationCopy.search]; + + // update conversations + updateConversationsCache(conversationsCopy, client, queryVariables); +}; + +export const saveConversation = (conversation: any, client: any, queryVariables: any) => { + // parse the conversation + const conversationCopy = JSON.parse(JSON.stringify(conversation)); + + // TODOS: need to check why we need this. + conversationCopy.search[0].messages + .sort((currentMessage: any, nextMessage: any) => { + return currentMessage.id - nextMessage.id; + }) + .reverse(); + + updateConversations(conversation, client, queryVariables); +}; + +// read the conversation from cache +export const getCachedConverations = (client: any, queryVariables: any) => { + // fetch conversations from the cache + const conversations = client.readQuery({ + query: SEARCH_QUERY, + variables: queryVariables, + }); + + return conversations; +}; + +// update the conversations cache +export const updateConversationsCache = (conversations: any, client: any, queryVariables: any) => { + // write the updated conversations to cached + client.writeQuery({ + query: SEARCH_QUERY, + variables: queryVariables, + data: conversations, + }); +};