chore: address pr reviews

ts/components/conversation/message/reactions/Reaction.tsx

@@ -1,10 +1,9 @@
 import React, { ReactElement, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useMouse } from 'react-use';
 import styled from 'styled-components';
+import { useRightOverlayMode } from '../../../../hooks/useUI';
 import { isUsAnySogsFromCache } from '../../../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 import { UserUtils } from '../../../../session/utils';
-import { getRightOverlayMode } from '../../../../state/selectors/section';
 import { useIsMessageSelectionMode } from '../../../../state/selectors/selectedConversation';
 import { THEME_GLOBALS } from '../../../../themes/globals';
 import { SortedReactionList } from '../../../../types/Reaction';
@@ -79,7 +78,7 @@ export const Reaction = (props: ReactionProps): ReactElement => {
     handlePopupClick,
   } = props;
 
-  const rightOverlayMode = useSelector(getRightOverlayMode);
+  const rightOverlayMode = useRightOverlayMode();
   const isMessageSelection = useIsMessageSelectionMode();
   const reactionsMap = (reactions && Object.fromEntries(reactions)) || {};
   const senders = reactionsMap[emoji]?.senders || [];

ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx

@@ -4,17 +4,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
-import {
+import { PropsForAttachment, closeRightPanel } from '../../../../../state/ducks/conversations';
-  PropsForAttachment,
-  closeMessageInfoView,
-  closeRightPanel,
-} from '../../../../../state/ducks/conversations';
 import { resetRightOverlayMode, setRightOverlayMode } from '../../../../../state/ducks/section';
 import { getMessageInfoId } from '../../../../../state/selectors/conversations';
 import { Flex } from '../../../../basic/Flex';
 import { Header, HeaderTitle, StyledScrollContainer } from '../components';
 
 import { Data } from '../../../../../data/data';
+import { useRightOverlayMode } from '../../../../../hooks/useUI';
 import {
   replyToMessage,
   resendMessage,
@@ -30,7 +27,6 @@ import {
   useMessageText,
   useMessageTimestamp,
 } from '../../../../../state/selectors';
-import { getRightOverlayMode } from '../../../../../state/selectors/section';
 import { useSelectedConversationKey } from '../../../../../state/selectors/selectedConversation';
 import { canDisplayImage } from '../../../../../types/Attachment';
 import { isAudio } from '../../../../../types/MIME';
@@ -95,15 +91,15 @@ const StyledMessageDetail = styled.div`
   padding: var(--margins-sm) var(--margins-2xl) var(--margins-lg);
 `;
 
-type MessagePropsDetails = {
+type MessageInfoProps = {
   errors: Array<Error>;
   attachments: Array<PropsForAttachment>;
 };
 
-async function getPropsForMessageDetail(
+async function getPropsForMessageInfo(
   messageId: string | undefined,
   attachments: Array<PropsForAttachment>
-): Promise<MessagePropsDetails | null> {
+): Promise<MessageInfoProps | null> {
   if (!messageId) {
     return null;
   }
@@ -149,7 +145,7 @@ async function getPropsForMessageDetail(
       return error;
     });
 
-    const toRet: MessagePropsDetails = {
+    const toRet: MessageInfoProps = {
       errors,
       attachments: attachmentsWithMediaDetails,
     };
@@ -159,8 +155,8 @@ async function getPropsForMessageDetail(
   return null;
 }
 
-function useMessageDetailProps(messageId: string | undefined): MessagePropsDetails | null {
+function useMessageInfo(messageId: string | undefined) {
-  const [details, setDetails] = useState<MessagePropsDetails | null>(null);
+  const [details, setDetails] = useState<MessageInfoProps | null>(null);
 
   const fromState = useMessageAttachments(messageId);
 
@@ -169,7 +165,7 @@ function useMessageDetailProps(messageId: string | undefined): MessagePropsDetai
   useEffect(() => {
     let mounted = true;
     // eslint-disable-next-line more/no-then
-    void getPropsForMessageDetail(messageId, fromState || [])
+    void getPropsForMessageInfo(messageId, fromState || [])
       .then(result => {
         if (mounted) {
           setDetails(result);
@@ -188,40 +184,41 @@ function useMessageDetailProps(messageId: string | undefined): MessagePropsDetai
 export const OverlayMessageInfo = () => {
   const dispatch = useDispatch();
 
-  const rightOverlayMode = useSelector(getRightOverlayMode);
+  const rightOverlayMode = useRightOverlayMode();
   const messageId = useSelector(getMessageInfoId);
-  const messageDetailProps = useMessageDetailProps(messageId);
+  const messageInfo = useMessageInfo(messageId);
   const isDeletable = useMessageIsDeletable(messageId);
   const direction = useMessageDirection(messageId);
   const timestamp = useMessageTimestamp(messageId);
   const serverTimestamp = useMessageServerTimestamp(messageId);
   const sender = useMessageSender(messageId);
 
-  // we close the right panel when switching conversation so the convoId of the convoId of that message
+  // we close the right panel when switching conversation so the convoId of that message is always the selectedConversationKey
   // is always the currently selected conversation
   const convoId = useSelectedConversationKey();
 
   const closePanel = useCallback(() => {
     dispatch(closeRightPanel());
     dispatch(resetRightOverlayMode());
-    dispatch(closeMessageInfoView());
   }, [dispatch]);
 
   useKey('Escape', closePanel);
 
+  // close the panel if the messageInfo is associated with a deleted message
   useEffect(() => {
     if (!sender) {
       closePanel();
     }
   }, [sender, closePanel]);
-  if (!rightOverlayMode || !messageDetailProps || !convoId || !messageId || !sender) {
+
+  if (!rightOverlayMode || !messageInfo || !convoId || !messageId || !sender) {
     return null;
   }
 
   const { params } = rightOverlayMode;
   const visibleAttachmentIndex = params?.visibleAttachmentIndex || 0;
 
-  const { errors, attachments } = messageDetailProps;
+  const { errors, attachments } = messageInfo;
 
   const hasAttachments = attachments && attachments.length > 0;
   const supportsAttachmentCarousel = canDisplayImage(attachments);
@@ -254,14 +251,7 @@ export const OverlayMessageInfo = () => {
   return (
     <StyledScrollContainer>
       <Flex container={true} flexDirection={'column'} alignItems={'center'}>
-        <Header
+        <Header hideBackButton={true} closeButtonOnClick={closePanel}>
-          hideBackButton={true}
-          closeButtonOnClick={() => {
-            dispatch(closeRightPanel());
-            dispatch(resetRightOverlayMode());
-            dispatch(closeMessageInfoView());
-          }}
-        >
           <HeaderTitle>{window.i18n('messageInfo')}</HeaderTitle>
         </Header>
         <StyledMessageDetailContainer>
@@ -292,7 +282,7 @@ export const OverlayMessageInfo = () => {
                 <SpacerMD />
               </>
             )}
-            <MessageInfo messageId={messageId} errors={messageDetailProps.errors} />
+            <MessageInfo messageId={messageId} errors={messageInfo.errors} />
             <SpacerLG />
             <PanelButtonGroup style={{ margin: '0' }}>
               <PanelIconButton

ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx

@@ -57,7 +57,7 @@ const showDebugLog = () => {
   ipcRenderer.send('show-debug-log');
 };
 
-export const MessageInfo = ({ messageId, errors }: { messageId: string; errors: Array<any> }) => {
+export const MessageInfo = ({ messageId, errors }: { messageId: string; errors: Array<Error> }) => {
   const sender = useMessageSender(messageId);
   const direction = useMessageDirection(messageId);
   const sentAt = useMessageTimestamp(messageId);

ts/state/ducks/conversations.ts

@@ -669,10 +669,6 @@ const conversationsSlice = createSlice({
       return { ...state, messageInfoId: action.payload, showRightPanel: false };
     },
 
-    closeMessageInfoView(state: ConversationsStateType) {
-      return { ...state, messageInfoId: undefined };
-    },
-
     openRightPanel(state: ConversationsStateType) {
       if (
         state.selectedConversation === undefined ||
@@ -690,7 +686,7 @@ const conversationsSlice = createSlice({
       return state;
     },
     closeRightPanel(state: ConversationsStateType) {
-      return { ...state, showRightPanel: false };
+      return { ...state, showRightPanel: false, messageInfoId: undefined };
     },
     addMessageIdToSelection(state: ConversationsStateType, action: PayloadAction<string>) {
       if (state.selectedMessageIds.some(id => id === action.payload)) {
@@ -1119,7 +1115,6 @@ export const {
   markConversationFullyRead,
   // layout stuff
   showMessageInfoView,
-  closeMessageInfoView,
   openRightPanel,
   closeRightPanel,
   addMessageIdToSelection,

ts/state/selectors/section.ts

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 
 import { SessionSettingCategory } from '../../components/settings/SessionSettings';
-import { LeftOverlayMode, RightOverlayMode, SectionStateType, SectionType } from '../ducks/section';
+import { LeftOverlayMode, SectionStateType, SectionType } from '../ducks/section';
 import { StateType } from '../reducer';
 
 export const getSection = (state: StateType): SectionStateType => state.section;
@@ -30,7 +30,7 @@ export const getLeftOverlayMode = createSelector(
   (state: SectionStateType): LeftOverlayMode | undefined => state.leftOverlayMode
 );
 
-export const getRightOverlayMode = (state: StateType): RightOverlayMode | undefined => {
+export const getRightOverlayMode = (state: StateType) => {
   return state.section.rightOverlayMode;
 };