From 07f6681aae2bdc9619d366e755543d4d3b5ade15 Mon Sep 17 00:00:00 2001 From: warrickct Date: Mon, 14 Feb 2022 10:50:08 +1100 Subject: [PATCH] Refactoring subcomponents. Adjusting conditional inbox filters to always apply msg request logic. --- .../ConversationRequestButtons.tsx | 83 ++++++++++++++ .../conversation/ConversationRequestInfo.tsx | 34 ++++++ .../conversation/SessionConversation.tsx | 103 +----------------- .../leftpane/MessageRequestsBanner.tsx | 4 +- ts/models/conversation.ts | 10 +- ts/state/selectors/conversations.ts | 17 +-- ts/window.d.ts | 1 - 7 files changed, 136 insertions(+), 116 deletions(-) create mode 100644 ts/components/conversation/ConversationRequestButtons.tsx create mode 100644 ts/components/conversation/ConversationRequestInfo.tsx diff --git a/ts/components/conversation/ConversationRequestButtons.tsx b/ts/components/conversation/ConversationRequestButtons.tsx new file mode 100644 index 000000000..0f5a1f5a9 --- /dev/null +++ b/ts/components/conversation/ConversationRequestButtons.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import styled from 'styled-components'; +import { + acceptConversation, + blockConvoById, + declineConversation, +} from '../../interactions/conversationInteractions'; +import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/syncUtils'; +import { ReduxConversationType } from '../../state/ducks/conversations'; +import { updateConfirmModal } from '../../state/ducks/modalDialog'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; + +export const ConversationMessageRequestButtons = (props: { + selectedConversation: ReduxConversationType; +}) => { + const { selectedConversation } = props; + const { isApproved, type } = selectedConversation; + const showMsgRequestUI = !isApproved && type === 'private'; + + const handleDeclineConversationRequest = async () => { + window.inboxStore?.dispatch( + updateConfirmModal({ + okText: window.i18n('decline'), + cancelText: window.i18n('cancel'), + message: window.i18n('declineRequestMessage'), + onClickOk: async () => { + await declineConversation(selectedConversation.id, false); + await blockConvoById(selectedConversation.id); + await forceSyncConfigurationNowIfNeeded(); + }, + onClickCancel: () => { + window.inboxStore?.dispatch(updateConfirmModal(null)); + }, + onClickClose: () => { + window.inboxStore?.dispatch(updateConfirmModal(null)); + }, + }) + ); + }; + + const handleAcceptConversationRequest = async () => { + const { id } = selectedConversation; + await acceptConversation(id, true); + }; + + if (!showMsgRequestUI) { + return null; + } + + return ( + + + + + + + ); +}; + +const ConversationBannerRow = styled.div` + display: flex; + flex-direction: row; + gap: var(--margins-lg); + justify-content: center; +`; + +const ConversationRequestBanner = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + padding: var(--margins-lg); + gap: var(--margins-lg); +`; diff --git a/ts/components/conversation/ConversationRequestInfo.tsx b/ts/components/conversation/ConversationRequestInfo.tsx new file mode 100644 index 000000000..7d00439a6 --- /dev/null +++ b/ts/components/conversation/ConversationRequestInfo.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import styled from 'styled-components'; +import { ReduxConversationType } from '../../state/ducks/conversations'; + +export const ConversationRequestinfo = (props: { selectedConversation: ReduxConversationType }) => { + const { selectedConversation } = props; + const { isApproved, type } = selectedConversation; + const showMsgRequestUI = !isApproved && type === 'private'; + + if (!showMsgRequestUI) { + return null; + } + + return ( + + + {window.i18n('respondingToRequestWarning')} + + + ); +}; + +const ConversationRequestTextBottom = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + padding: var(--margins-lg); +`; + +const ConversationRequestTextInner = styled.div` + color: var(--color-text-subtle); + text-align: center; + max-width: 390px; +`; diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx index 02f16d99b..7e188c06e 100644 --- a/ts/components/conversation/SessionConversation.tsx +++ b/ts/components/conversation/SessionConversation.tsx @@ -34,7 +34,7 @@ import { addStagedAttachmentsInConversation } from '../../state/ducks/stagedAtta import { MIME } from '../../types'; import { AttachmentTypeWithPath } from '../../types/Attachment'; import { arrayBufferToObjectURL, AttachmentUtil, GoogleChrome } from '../../util'; -import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; +import { SessionButtonColor } from '../basic/SessionButton'; import { MessageView } from '../MainViewController'; import { ConversationHeaderWithDetails } from './ConversationHeader'; import { MessageDetail } from './message/message-item/MessageDetail'; @@ -47,13 +47,8 @@ import { } from '../../types/attachments/VisualAttachment'; import { blobToArrayBuffer } from 'blob-util'; import { MAX_ATTACHMENT_FILESIZE_BYTES } from '../../session/constants'; -import styled from 'styled-components'; -import { - acceptConversation, - blockConvoById, - declineConversation, -} from '../../interactions/conversationInteractions'; -import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/syncUtils'; +import { ConversationMessageRequestButtons } from './ConversationRequestButtons'; +import { ConversationRequestinfo } from './ConversationRequestInfo'; // tslint:disable: jsx-curly-spacing interface State { @@ -228,36 +223,7 @@ export class SessionConversation extends React.Component { return ; } - const isApproved = selectedConversation.isApproved; const selectionMode = selectedMessages.length > 0; - const useMsgRequests = window.inboxStore?.getState().userConfig.messageRequests; - const showMsgRequestUI = useMsgRequests && !isApproved && messagesProps.length > 0; - - const handleDeclineConversationRequest = async () => { - window.inboxStore?.dispatch( - updateConfirmModal({ - okText: window.i18n('decline'), - cancelText: window.i18n('cancel'), - message: window.i18n('declineRequestMessage'), - onClickOk: async () => { - await declineConversation(selectedConversation.id, false); - await blockConvoById(selectedConversation.id); - await forceSyncConfigurationNowIfNeeded(); - }, - onClickCancel: () => { - window.inboxStore?.dispatch(updateConfirmModal(null)); - }, - onClickClose: () => { - window.inboxStore?.dispatch(updateConfirmModal(null)); - }, - }) - ); - }; - - const handleAcceptConversationRequest = async () => { - const { id } = selectedConversation; - await acceptConversation(id, true); - }; return ( @@ -277,24 +243,7 @@ export class SessionConversation extends React.Component { {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
- {showMsgRequestUI && ( - - - - - - - )} + } bottom={ @@ -306,14 +255,7 @@ export class SessionConversation extends React.Component { {isDraggingFile && }
- {showMsgRequestUI && ( - - - {window.i18n('respondingToRequestWarning')} - - - )} - + { if (!MIME.isJPEG(contentType)) { const urlImage = URL.createObjectURL(file); diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index da9f7c3a5..9cb6e90f9 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/ts/components/leftpane/MessageRequestsBanner.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { getConversationRequests } from '../../state/selectors/conversations'; +import { getIsMessageRequestsEnabled } from '../../state/selectors/userConfig'; import { SessionIcon, SessionIconSize, SessionIconType } from '../icon'; const StyledMessageRequestBanner = styled.div` @@ -84,8 +85,9 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess export const MessageRequestsBanner = (props: { handleOnClick: () => any }) => { const { handleOnClick } = props; const conversationRequests = useSelector(getConversationRequests); + const showRequestBannerEnabled = useSelector(getIsMessageRequestsEnabled); - if (!conversationRequests.length) { + if (!conversationRequests.length || !showRequestBannerEnabled) { return null; } diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts index ecb846bd7..262f3ac4d 100644 --- a/ts/models/conversation.ts +++ b/ts/models/conversation.ts @@ -657,11 +657,11 @@ export class ConversationModel extends Backbone.Model { } // TODO: remove once dev-tested - // if (chatMessageParams.body?.includes('unapprove')) { - // await this.setIsApproved(false); - // await this.setDidApproveMe(false); - // // void forceSyncConfigurationNowIfNeeded(); - // } + if (chatMessageParams.body?.includes('unapprove')) { + await this.setIsApproved(false); + await this.setDidApproveMe(false); + // void forceSyncConfigurationNowIfNeeded(); + } if (this.isOpenGroupV2()) { const chatMessageOpenGroupV2 = new OpenGroupVisibleMessage(chatMessageParams); diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 384bfb311..664e79365 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -328,8 +328,7 @@ export const getConversationComparator = createSelector(getIntl, _getConversatio // export only because we use it in some of our tests // tslint:disable-next-line: cyclomatic-complexity export const _getLeftPaneLists = ( - sortedConversations: Array, - isMessageRequestEnabled?: boolean + sortedConversations: Array ): { conversations: Array; contacts: Array; @@ -344,7 +343,7 @@ export const _getLeftPaneLists = ( directConversations.push(conversation); } - if (isMessageRequestEnabled && !conversation.isApproved && !conversation.isBlocked) { + if (!conversation.isApproved && !conversation.isBlocked) { // dont increase unread counter, don't push to convo list. continue; } @@ -424,16 +423,13 @@ export const getSortedConversations = createSelector( /** * * @param sortedConversations List of conversations that are valid for both requests and regular conversation inbox - * @param isMessageRequestEnabled Apply message request filtering. * @returns A list of message request conversations. */ const _getConversationRequests = ( - sortedConversations: Array, - isMessageRequestEnabled?: boolean + sortedConversations: Array ): Array => { return _.filter(sortedConversations, conversation => { return ( - isMessageRequestEnabled && !conversation.isApproved && !conversation.isBlocked && conversation.isPrivate && @@ -449,16 +445,15 @@ export const getConversationRequests = createSelector( ); const _getPrivateContactsPubkeys = ( - sortedConversations: Array, - isMessageRequestEnabled?: boolean + sortedConversations: Array ): Array => { return _.filter(sortedConversations, conversation => { return ( conversation.isPrivate && !conversation.isBlocked && !conversation.isMe && - (conversation.didApproveMe || !isMessageRequestEnabled) && - (conversation.isApproved || !isMessageRequestEnabled) && + conversation.didApproveMe && + conversation.isApproved && Boolean(conversation.activeAt) ); }).map(convo => convo.id); diff --git a/ts/window.d.ts b/ts/window.d.ts index bc3c61b99..f75976172 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -42,7 +42,6 @@ declare global { log: any; lokiFeatureFlags: { useOnionRequests: boolean; - useMessageRequests: boolean; useCallMessage: boolean; }; lokiSnodeAPI: LokiSnodeAPI;