fix: rename useConversationInteractionState to useConversationInteractionPropsById

extracted useLastMessageFromConvo to param selectors and renamed to useLastMessage, moved InteractionItem into MessageItem

ts/components/dialog/SessionConfirm.tsx

@@ -14,7 +14,7 @@ import {
   ConversationInteractionType,
   updateConversationInteractionState,
 } from '../../interactions/conversationInteractions';
-import { useConversationInteractionState } from '../../hooks/useParamSelector';
+import { useConversationInteractionPropsById } from '../../hooks/useParamSelector';
 
 // NOTE could be other confirmation statuses and types in future
 export type ConfirmationStatus = ConversationInteractionStatus | undefined;
@@ -71,7 +71,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
     conversationId,
   } = props;
 
-  const interactionProps = useConversationInteractionState(conversationId);
+  const interactionProps = useConversationInteractionPropsById(conversationId);
 
   const [isLoading, setIsLoading] = useState(false);
 

ts/components/leftpane/conversation-list-item/ConversationListItem.tsx

@@ -15,7 +15,6 @@ import { updateUserDetailsModal } from '../../../state/ducks/modalDialog';
 import _, { isNil } from 'lodash';
 import {
   useAvatarPath,
-  useConversationInteractionState,
   useConversationUsername,
   useHasUnread,
   useIsBlocked,
@@ -28,7 +27,6 @@ import { MemoConversationListItemContextMenu } from '../../menu/ConversationList
 import { ContextConversationProvider, useConvoIdFromContext } from './ConvoIdContext';
 import { ConversationListItemHeaderItem } from './HeaderItem';
 import { MessageItem } from './MessageItem';
-import { InteractionItem } from './InteractionItem';
 
 // tslint:disable-next-line: no-empty-interface
 export type ConversationListItemProps = Pick<ReduxConversationType, 'id'>;
@@ -82,7 +80,6 @@ const ConversationListItem = (props: Props) => {
   let isBlocked = useIsBlocked(conversationId);
   const isSearch = useSelector(isSearching);
   const selectedConvo = useSelectedConversationKey();
-  const interactionProps = useConversationInteractionState(conversationId);
 
   const isSelectedConvo = conversationId === selectedConvo && !isNil(selectedConvo);
 
@@ -132,7 +129,7 @@ const ConversationListItem = (props: Props) => {
           <AvatarItem />
           <div className="module-conversation-list-item__content">
             <ConversationListItemHeaderItem />
-            {interactionProps ? <InteractionItem {...interactionProps} /> : <MessageItem />}
+            <MessageItem />
           </div>
         </div>
         <Portal>

ts/components/leftpane/conversation-list-item/MessageItem.tsx

@@ -3,10 +3,11 @@ import { isEmpty } from 'lodash';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import {
-  useConversationPropsById,
+  useConversationInteractionPropsById,
   useHasUnread,
   useIsPrivate,
   useIsTyping,
+  useLastMessage,
 } from '../../../hooks/useParamSelector';
 import { isSearching } from '../../../state/selectors/search';
 import { getIsMessageRequestOverlayShown } from '../../../state/selectors/section';
@@ -14,18 +15,11 @@ import { TypingAnimation } from '../../conversation/TypingAnimation';
 import { MessageBody } from '../../conversation/message/message-content/MessageBody';
 import { OutgoingMessageStatus } from '../../conversation/message/message-content/OutgoingMessageStatus';
 import { useConvoIdFromContext } from './ConvoIdContext';
-
-function useLastMessageFromConvo(convoId: string) {
-  const convoProps = useConversationPropsById(convoId);
-  if (!convoProps) {
-    return null;
-  }
-  return convoProps.lastMessage;
-}
+import { InteractionItem } from './InteractionItem';
 
 export const MessageItem = () => {
   const conversationId = useConvoIdFromContext();
-  const lastMessage = useLastMessageFromConvo(conversationId);
+  const lastMessage = useLastMessage(conversationId);
   const isGroup = !useIsPrivate(conversationId);
 
   const hasUnread = useHasUnread(conversationId);
@@ -34,6 +28,12 @@ export const MessageItem = () => {
 
   const isSearchingMode = useSelector(isSearching);
 
+  const interactionProps = useConversationInteractionPropsById(conversationId);
+
+  if (!isConvoTyping && interactionProps) {
+    return <InteractionItem {...interactionProps} />;
+  }
+
   if (!lastMessage && !isConvoTyping) {
     return null;
   }

ts/hooks/useParamSelector.ts

@@ -269,7 +269,15 @@ export function useIsTyping(conversationId?: string): boolean {
   return useConversationPropsById(conversationId)?.isTyping || false;
 }
 
-export function useConversationInteractionState(
+export function useLastMessage(convoId: string) {
+  const convoProps = useConversationPropsById(convoId);
+  if (!convoProps) {
+    return null;
+  }
+  return convoProps.lastMessage;
+}
+
+export function useConversationInteractionPropsById(
   conversationId?: string
 ): ConversationInteractionProps | null {
   if (!conversationId) {
@@ -277,19 +285,13 @@ export function useConversationInteractionState(
   }
 
   const convoProps = useConversationPropsById(conversationId);
-  if (!convoProps) {
+
+  if (!convoProps || !convoProps.interactionType || !convoProps.interactionStatus) {
     return null;
   }
 
   const interactionType = convoProps.interactionType;
   const interactionStatus = convoProps.interactionStatus;
 
-  if (!interactionType || !interactionStatus) {
-    window.log.warn(
-      `useConversationInteractionState() missing interactionType or interactionStatus`
-    );
-    return null;
-  }
-
   return { conversationId, interactionType, interactionStatus };
 }