diff --git a/ts/components/conversation/message/reactions/Reaction.tsx b/ts/components/conversation/message/reactions/Reaction.tsx index 7e8b7f492..416c86389 100644 --- a/ts/components/conversation/message/reactions/Reaction.tsx +++ b/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 || []; diff --git a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx b/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx index 0be8a66e4..d5358a073 100644 --- a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx +++ b/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 { - PropsForAttachment, - closeMessageInfoView, - closeRightPanel, -} from '../../../../../state/ducks/conversations'; +import { PropsForAttachment, 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; attachments: Array; }; -async function getPropsForMessageDetail( +async function getPropsForMessageInfo( messageId: string | undefined, attachments: Array -): Promise { +): Promise { 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 { - const [details, setDetails] = useState(null); +function useMessageInfo(messageId: string | undefined) { + const [details, setDetails] = useState(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 ( -
{ - dispatch(closeRightPanel()); - dispatch(resetRightOverlayMode()); - dispatch(closeMessageInfoView()); - }} - > +
{window.i18n('messageInfo')}
@@ -292,7 +282,7 @@ export const OverlayMessageInfo = () => { )} - + { ipcRenderer.send('show-debug-log'); }; -export const MessageInfo = ({ messageId, errors }: { messageId: string; errors: Array }) => { +export const MessageInfo = ({ messageId, errors }: { messageId: string; errors: Array }) => { const sender = useMessageSender(messageId); const direction = useMessageDirection(messageId); const sentAt = useMessageTimestamp(messageId); diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 18800917b..35040ccde 100644 --- a/ts/state/ducks/conversations.ts +++ b/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) { if (state.selectedMessageIds.some(id => id === action.payload)) { @@ -1119,7 +1115,6 @@ export const { markConversationFullyRead, // layout stuff showMessageInfoView, - closeMessageInfoView, openRightPanel, closeRightPanel, addMessageIdToSelection, diff --git a/ts/state/selectors/section.ts b/ts/state/selectors/section.ts index eda5b7f44..9599f3586 100644 --- a/ts/state/selectors/section.ts +++ b/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; };