IO-2401 Add prevention of duplicate chat creation by adding loading tracking.

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -8,15 +8,23 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  searchingForConversation: searchingForConversation,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
 });
 
-export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
+export function ChatOpenButton({
+  bodyshop,
+  searchingForConversation,
+  phone,
+  jobid,
+  openChatByPhone,
+}) {
   const { t } = useTranslation();
   if (!phone) return <></>;
 
@@ -29,7 +37,7 @@ export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
       onClick={(e) => {
         e.stopPropagation();
         const p = parsePhoneNumber(phone, "CA");
-
+        if (searchingForConversation) return; //This is to prevent finding the same thing twice.
         if (p && p.isValid()) {
           openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
         } else {

client/src/redux/messaging/messaging.reducer.js

@@ -6,6 +6,7 @@ const INITIAL_STATE = {
   isSending: false,
   error: null,
   message: null,
+  searchingForConversation: false,
 };
 
 const messagingReducer = (state = INITIAL_STATE, action) => {
@@ -17,10 +18,16 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
         ...state,
         visible: !state.visible,
       };
+    case MessagingActionTypes.OPEN_CHAT_BY_PHONE:
+      return {
+        ...state,
+        searchingForConversation: true,
+      };
     case MessagingActionTypes.SET_SELECTED_CONVERSATION:
       return {
         ...state,
         visible: true,
+        searchingForConversation: false,
         selectedConversationId: action.payload,
       };
     case MessagingActionTypes.SEND_MESSAGE:

client/src/redux/messaging/messaging.selectors.js

@@ -26,3 +26,8 @@ export const selectMessage = createSelector(
   [selectMessaging],
   (messaging) => messaging.message
 );
+
+export const searchingForConversation = createSelector(
+  [selectMessaging],
+  (messaging) => messaging.searchingForConversation
+);