Conversation restructuring

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';

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<ChatProps> = ({ 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);
       }
     },
   });

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<ConversationListProps> = (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);
       }

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<ChatMessagesProps> = ({ 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<ChatMessagesProps> = ({ contactId }) => {
           return conversation;
         });
 
-        client.writeQuery({
-          query: SEARCH_QUERY,
-          variables: queryVariables,
-          data: conversationsCopy,
-        });
+        // update the conversation cache
+        updateConversationsCache(conversationsCopy, client, queryVariables);
+
         setMessageOffset(messageOffset + 50);
       }
     },

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,15 +81,18 @@ export const GroupList: React.SFC<GroupListProps> = (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(
           client,
           `${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<GroupListProps> = (props) => {
     <Menu
       menus={[
         {
-          icon: <ChatDarkIcon className={styles.Icon}  />,
+          icon: <ChatDarkIcon className={styles.Icon} />,
           title: 'Send a message',
           onClick: () => setSendMessageDialogShow(true),
         },

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,
+  });
+};