[#1713] Fix crash conversation from search (#1720)

airyhq · May 5, 2021 · 53b3e0a · 53b3e0a
1 parent fe4e14c
commit 53b3e0a
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 28 deletions.
diff --git a/frontend/ui/src/actions/conversationsFilter/index.ts b/frontend/ui/src/actions/conversationsFilter/index.ts
@@ -99,7 +99,7 @@ const filterToLuceneSyntax = (filter: ConversationFilter): string | null => {
     filterQuery.push('unread_count:0');
   }
   if (filter.displayName) {
-    filterQuery.push('display_name:*' + filter.displayName + '*');
+    filterQuery.push('display_name=*' + filter.displayName + '*');
   }
   if (filter.byTags && filter.byTags.length > 0) {
     filterQuery.push('tag_ids:(' + filter.byTags.join(' AND ') + ')');

diff --git a/frontend/ui/src/pages/Inbox/ConversationList/index.tsx b/frontend/ui/src/pages/Inbox/ConversationList/index.tsx
@@ -45,7 +45,7 @@ const ConversationList = (props: ConversationListProps) => {
     const {currentConversationId} = props;
     if (conversation == null) {
       return (
-        <div className="conversationListLoading" style={style}>
+        <div className="conversationListLoading" style={{...style, textAlignLast: 'center', marginTop: '24px'}}>
           <SimpleLoader />
         </div>
       );

diff --git a/frontend/ui/src/pages/Inbox/MessageInput/index.tsx b/frontend/ui/src/pages/Inbox/MessageInput/index.tsx
@@ -22,7 +22,7 @@ import {ReactComponent as ChevronDownIcon} from 'assets/images/icons/chevron-dow
 import {ConversationRouteProps} from '../index';
 import {StateModel} from '../../../reducers';
 import {listTemplates} from '../../../actions/templates';
-import {getCurrentConversation} from '../../../selectors/conversations';
+import {getConversation} from '../../../selectors/conversations';
 import {getCurrentMessages} from '../../../selectors/conversations';
 import {isTextMessage} from '../../../services/types/messageTypes';
 
@@ -33,7 +33,7 @@ const mapDispatchToProps = {sendMessages};
 
 const mapStateToProps = (state: StateModel, ownProps: ConversationRouteProps) => {
   return {
-    conversation: getCurrentConversation(state, ownProps),
+    conversation: getConversation(state, ownProps),
     messages: getCurrentMessages(state, ownProps),
     listTemplates,
   };

diff --git a/frontend/ui/src/pages/Inbox/Messenger/ConversationHeader/index.tsx b/frontend/ui/src/pages/Inbox/Messenger/ConversationHeader/index.tsx
@@ -6,12 +6,12 @@ import {Avatar} from 'render';
 import ConversationStatus from '../ConversationStatus';
 
 import styles from './index.module.scss';
-import {getCurrentConversation} from '../../../../selectors/conversations';
+import {getConversation} from '../../../../selectors/conversations';
 import IconChannel from '../../../../components/IconChannel';
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    conversation: getCurrentConversation(state, ownProps),
+    conversation: getConversation(state, ownProps),
   };
 };
 

diff --git a/frontend/ui/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx b/frontend/ui/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
@@ -13,15 +13,15 @@ import {StateModel} from '../../../../reducers';
 import styles from './index.module.scss';
 import Tag from '../../../../components/Tag';
 import {Button, Input, LinkButton} from 'components';
-import {getCurrentConversation} from '../../../../selectors/conversations';
+import {getConversation} from '../../../../selectors/conversations';
 import {ConversationRouteProps} from '../../index';
 
 import {cyShowTagsDialog, cyTagsDialogInput, cyTagsDialogButton} from 'handles';
 import difference from 'lodash/difference';
 
 const mapStateToProps = (state: StateModel, ownProps: ConversationRouteProps) => {
   return {
-    conversation: getCurrentConversation(state, ownProps),
+    conversation: getConversation(state, ownProps),
     tags: state.data.tags.all,
   };
 };

diff --git a/frontend/ui/src/pages/Inbox/Messenger/ConversationStatus/index.tsx b/frontend/ui/src/pages/Inbox/Messenger/ConversationStatus/index.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import {connect, ConnectedProps} from 'react-redux';
 import {withRouter, RouteComponentProps} from 'react-router-dom';
 import styles from './index.module.scss';
-import {getCurrentConversation} from '../../../../selectors/conversations';
+import {getConversation} from '../../../../selectors/conversations';
 import {conversationState} from '../../../../actions/conversations';
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    conversation: getCurrentConversation(state, ownProps),
+    conversation: getConversation(state, ownProps),
   };
 };
 

diff --git a/frontend/ui/src/pages/Inbox/Messenger/MessageList/index.tsx b/frontend/ui/src/pages/Inbox/Messenger/MessageList/index.tsx
@@ -15,7 +15,7 @@ import {listMessages, listPreviousMessages} from '../../../../actions/messages';
 
 import styles from './index.module.scss';
 import {formatDateOfMessage} from '../../../../services/format/date';
-import {getCurrentConversation, getCurrentMessages} from '../../../../selectors/conversations';
+import {getConversation, getCurrentMessages} from '../../../../selectors/conversations';
 import {ConversationRouteProps} from '../../index';
 import {MessageInfoWrapper} from 'render/components/MessageInfoWrapper';
 import {formatTime, isSameDay} from 'dates';
@@ -27,7 +27,7 @@ type MessageListProps = ConnectedProps<typeof connector> & {
 const mapStateToProps = (state: StateModel, ownProps: ConversationRouteProps) => {
   return {
     messages: getCurrentMessages(state, ownProps),
-    conversation: getCurrentConversation(state, ownProps),
+    conversation: getConversation(state, ownProps),
   };
 };
 

diff --git a/frontend/ui/src/pages/Inbox/Messenger/MessengerContainer/index.tsx b/frontend/ui/src/pages/Inbox/Messenger/MessengerContainer/index.tsx
@@ -1,6 +1,6 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import _, {connect, ConnectedProps} from 'react-redux';
-import {withRouter} from 'react-router-dom';
+import {RouteComponentProps, withRouter} from 'react-router-dom';
 
 import {StateModel} from '../../../../reducers';
 import MessageList from '../MessageList';
@@ -9,21 +9,37 @@ import styles from './index.module.scss';
 import ConversationMetadata from '../ConversationMetadata';
 import ConversationHeader from '../ConversationHeader';
 import MessageInput from '../../MessageInput';
-import {allConversations, getCurrentConversation} from '../../../../selectors/conversations';
+import {allConversations, getConversation} from '../../../../selectors/conversations';
 import {Source, Suggestions} from 'model';
+import {getConversationInfo} from '../../../../actions';
 
 const mapStateToProps = (state: StateModel, ownProps) => ({
   conversations: allConversations(state),
-  currentConversation: getCurrentConversation(state, ownProps),
+  currentConversation: getConversation(state, ownProps),
 });
 
-const connector = connect(mapStateToProps);
+const mapDispatchToProps = {
+  getConversationInfo,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
 
-type MessengerContainerProps = ConnectedProps<typeof connector>;
+type MessengerContainerProps = ConnectedProps<typeof connector> & RouteComponentProps<{conversationId: string}>;
 
-const MessengerContainer = ({conversations, currentConversation}: MessengerContainerProps) => {
+const MessengerContainer = ({
+  conversations,
+  currentConversation,
+  getConversationInfo,
+  match,
+}: MessengerContainerProps) => {
   const [suggestions, showSuggestedReplies] = useState<Suggestions>(null);
 
+  useEffect(() => {
+    if (!currentConversation) {
+      getConversationInfo(match.params.conversationId);
+    }
+  }, [conversations]);
+
   const hideSuggestedReplies = () => {
     showSuggestedReplies(null);
   };
@@ -39,15 +55,17 @@ const MessengerContainer = ({conversations, currentConversation}: MessengerConta
           </div>
         ) : (
           <div className={styles.messageDisplay}>
-            {currentConversation && <ConversationHeader />}
-            <MessageList showSuggestedReplies={showSuggestedReplies} />
             {currentConversation && (
-              <MessageInput
-                suggestions={suggestions}
-                showSuggestedReplies={showSuggestedReplies}
-                hideSuggestedReplies={hideSuggestedReplies}
-                source={currentConversation.channel.source as Source}
-              />
+              <>
+                <ConversationHeader />
+                <MessageList showSuggestedReplies={showSuggestedReplies} />
+                <MessageInput
+                  suggestions={suggestions}
+                  showSuggestedReplies={showSuggestedReplies}
+                  hideSuggestedReplies={hideSuggestedReplies}
+                  source={currentConversation.channel.source as Source}
+                />
+              </>
             )}
           </div>
         )}

diff --git a/frontend/ui/src/reducers/data/conversations/index.ts b/frontend/ui/src/reducers/data/conversations/index.ts
@@ -172,6 +172,7 @@ const lastMessageOf = (messages: Message[]): Message => {
 
 const mergeMessages = (state: AllConversationsState, conversationId: string, messages: Message[]) => {
   const conversation: Conversation = state.items[conversationId];
+
   if (conversation) {
     return {
       ...state,
@@ -209,7 +210,7 @@ function allReducer(
       };
 
     case getType(metadataActions.setMetadataAction):
-      if (action.payload.subject !== 'conversation') {
+      if (action.payload.subject !== 'conversation' || !state.items[action.payload.identifier]) {
         return state;
       }
 

diff --git a/frontend/ui/src/selectors/conversations.ts b/frontend/ui/src/selectors/conversations.ts
@@ -8,6 +8,19 @@ import {ConversationRouteProps} from '../pages/Inbox';
 export const getCurrentConversation = (state: StateModel, props: ConversationRouteProps) =>
   state.data.conversations.all.items[props.match.params.conversationId];
 
+export const getCurrentFilteredConversation = (state: StateModel, props: ConversationRouteProps) =>
+  state.data.conversations.filtered.items[props.match.params.conversationId];
+
+export const getConversation = createSelector(
+  getCurrentConversation,
+  getCurrentFilteredConversation,
+  (conversation, filteredConversation) => {
+    if (!conversation && !filteredConversation) return undefined;
+    const mergedConversation = {...conversation, ...filteredConversation};
+    return mergedConversation;
+  }
+);
+
 export const getCurrentMessages = (state: StateModel, props: ConversationRouteProps) =>
   state.data.messages.all[props.match.params.conversationId];