Refactoring subcomponents. Adjusting conditional inbox filters to always apply msg request logic.

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 (
+    <ConversationRequestBanner>
+      <ConversationBannerRow>
+        <SessionButton
+          buttonColor={SessionButtonColor.Green}
+          buttonType={SessionButtonType.BrandOutline}
+          onClick={handleAcceptConversationRequest}
+          text={window.i18n('accept')}
+        />
+        <SessionButton
+          buttonColor={SessionButtonColor.Danger}
+          buttonType={SessionButtonType.BrandOutline}
+          text={window.i18n('decline')}
+          onClick={handleDeclineConversationRequest}
+        />
+      </ConversationBannerRow>
+    </ConversationRequestBanner>
+  );
+};
+
+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);
+`;

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 (
+    <ConversationRequestTextBottom>
+      <ConversationRequestTextInner>
+        {window.i18n('respondingToRequestWarning')}
+      </ConversationRequestTextInner>
+    </ConversationRequestTextBottom>
+  );
+};
+
+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;
+`;

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 { ConversationMessageRequestButtons } from './ConversationRequestButtons';
-import {
+import { ConversationRequestinfo } from './ConversationRequestInfo';
-  acceptConversation,
-  blockConvoById,
-  declineConversation,
-} from '../../interactions/conversationInteractions';
-import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/syncUtils';
 // tslint:disable: jsx-curly-spacing
 
 interface State {
@@ -228,36 +223,7 @@ export class SessionConversation extends React.Component<Props, State> {
       return <MessageView />;
     }
 
-    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 (
       <SessionTheme>
@@ -277,24 +243,7 @@ export class SessionConversation extends React.Component<Props, State> {
           {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
 
           <div className="conversation-messages">
-            {showMsgRequestUI && (
+            <ConversationMessageRequestButtons selectedConversation={selectedConversation} />
-              <ConversationRequestBanner>
-                <ConversationBannerRow>
-                  <SessionButton
-                    buttonColor={SessionButtonColor.Green}
-                    buttonType={SessionButtonType.BrandOutline}
-                    onClick={handleAcceptConversationRequest}
-                    text={window.i18n('accept')}
-                  />
-                  <SessionButton
-                    buttonColor={SessionButtonColor.Danger}
-                    buttonType={SessionButtonType.BrandOutline}
-                    text={window.i18n('decline')}
-                    onClick={handleDeclineConversationRequest}
-                  />
-                </ConversationBannerRow>
-              </ConversationRequestBanner>
-            )}
             <SplitViewContainer
               top={<InConversationCallContainer />}
               bottom={
@@ -306,14 +255,7 @@ export class SessionConversation extends React.Component<Props, State> {
             {isDraggingFile && <SessionFileDropzone />}
           </div>
 
-          {showMsgRequestUI && (
+          <ConversationRequestinfo selectedConversation={selectedConversation} />
-            <ConversationRequestTextBottom>
-              <ConversationRequestTextInner>
-                {window.i18n('respondingToRequestWarning')}
-              </ConversationRequestTextInner>
-            </ConversationRequestTextBottom>
-          )}
-
           <CompositionBox
             sendMessage={this.sendMessageFn}
             stagedAttachments={this.props.stagedAttachments}
@@ -568,41 +510,6 @@ const renderVideoPreview = async (contentType: string, file: File, fileName: str
   }
 };
 
-const ConversationBannerRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: var(--margins-lg);
-  justify-content: center;
-`;
-
-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;
-`;
-
-const ConversationRequestBanner = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--margins-lg);
-  gap: var(--margins-lg);
-
-  .conversation-request-banner__row {
-    display: flex;
-    flex-direction: row;
-    gap: var(--margins-lg);
-    justify-content: center;
-  }
-`;
-
 const renderImagePreview = async (contentType: string, file: File, fileName: string) => {
   if (!MIME.isJPEG(contentType)) {
     const urlImage = URL.createObjectURL(file);

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;
   }
 

ts/models/conversation.ts

@@ -657,11 +657,11 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
       }
 
       // TODO: remove once dev-tested
-      // if (chatMessageParams.body?.includes('unapprove')) {
+      if (chatMessageParams.body?.includes('unapprove')) {
-      //   await this.setIsApproved(false);
+        await this.setIsApproved(false);
-      //   await this.setDidApproveMe(false);
+        await this.setDidApproveMe(false);
-      //   // void forceSyncConfigurationNowIfNeeded();
+        // void forceSyncConfigurationNowIfNeeded();
-      // }
+      }
 
       if (this.isOpenGroupV2()) {
         const chatMessageOpenGroupV2 = new OpenGroupVisibleMessage(chatMessageParams);

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<ReduxConversationType>,
+  sortedConversations: Array<ReduxConversationType>
-  isMessageRequestEnabled?: boolean
 ): {
   conversations: Array<ReduxConversationType>;
   contacts: Array<ReduxConversationType>;
@@ -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<ReduxConversationType>,
+  sortedConversations: Array<ReduxConversationType>
-  isMessageRequestEnabled?: boolean
 ): Array<ReduxConversationType> => {
   return _.filter(sortedConversations, conversation => {
     return (
-      isMessageRequestEnabled &&
       !conversation.isApproved &&
       !conversation.isBlocked &&
       conversation.isPrivate &&
@@ -449,16 +445,15 @@ export const getConversationRequests = createSelector(
 );
 
 const _getPrivateContactsPubkeys = (
-  sortedConversations: Array<ReduxConversationType>,
+  sortedConversations: Array<ReduxConversationType>
-  isMessageRequestEnabled?: boolean
 ): Array<string> => {
   return _.filter(sortedConversations, conversation => {
     return (
       conversation.isPrivate &&
       !conversation.isBlocked &&
       !conversation.isMe &&
-      (conversation.didApproveMe || !isMessageRequestEnabled) &&
+      conversation.didApproveMe &&
-      (conversation.isApproved || !isMessageRequestEnabled) &&
+      conversation.isApproved &&
       Boolean(conversation.activeAt)
     );
   }).map(convo => convo.id);

ts/window.d.ts

@@ -42,7 +42,6 @@ declare global {
     log: any;
     lokiFeatureFlags: {
       useOnionRequests: boolean;
-      useMessageRequests: boolean;
       useCallMessage: boolean;
     };
     lokiSnodeAPI: LokiSnodeAPI;