WIP: Adding message requests using existing convo list item.

ts/components/session/LeftPaneMessageSection.tsx

@@ -51,7 +51,7 @@ export type SessionGroupType = SessionComposeToType;
 
 interface State {
   loading: boolean;
-  overlay: false | SessionComposeToType;
+  overlay: false | SessionClosableOverlayType;
   valuePasted: string;
 }
 
@@ -144,7 +144,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
     return (
       <div className="session-left-pane-section-content">
         {this.renderHeader()}
-        {overlay ? this.renderClosableOverlay(overlay) : this.renderConversations()}
+        {overlay ? this.renderClosableOverlay() : this.renderConversations()}
       </div>
     );
   }
@@ -157,12 +157,18 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
           onChange={this.updateSearch}
           placeholder={window.i18n('searchFor...')}
         />
+        <div onClick={this.handleMessageRequestsClick}>message requests</div>
         {this.renderList()}
         {this.renderBottomButtons()}
       </div>
     );
   }
 
+  private handleMessageRequestsClick() {
+    console.warn('handle msg req clicked');
+    this.handleToggleOverlay(SessionClosableOverlayType.MessageRequests);
+  }
+
   public updateSearch(searchTerm: string) {
     if (!searchTerm) {
       window.inboxStore?.dispatch(clearSearch());
@@ -201,9 +207,9 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
     );
   }
 
-  private renderClosableOverlay(overlay: SessionComposeToType) {
+  private renderClosableOverlay() {
     const { searchTerm, searchResults } = this.props;
-    const { loading } = this.state;
+    const { loading, overlay } = this.state;
 
     const openGroupElement = (
       <SessionClosableOverlay
@@ -251,16 +257,37 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
       />
     );
 
+    const messageRequestsElement = (
+      <SessionClosableOverlay
+        overlayMode={SessionClosableOverlayType.MessageRequests}
+        onChangeSessionID={this.handleOnPaste}
+        onCloseClick={() => {
+          this.handleToggleOverlay(undefined);
+        }}
+        onButtonClick={this.handleMessageButtonClick}
+        searchTerm={searchTerm}
+        searchResults={searchResults}
+        showSpinner={loading}
+        updateSearch={this.updateSearch}
+      />
+    );
+
     let overlayElement;
     switch (overlay) {
-      case SessionComposeToType.OpenGroup:
+      case SessionClosableOverlayType.OpenGroup:
         overlayElement = openGroupElement;
         break;
-      case SessionComposeToType.ClosedGroup:
+      case SessionClosableOverlayType.ClosedGroup:
         overlayElement = closedGroupElement;
         break;
-      default:
+      case SessionClosableOverlayType.Message:
         overlayElement = messageElement;
+        break;
+      case SessionClosableOverlayType.MessageRequests:
+        overlayElement = messageRequestsElement;
+        break;
+      default:
+        overlayElement = false;
     }
 
     return overlayElement;
@@ -277,7 +304,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
           buttonType={SessionButtonType.SquareOutline}
           buttonColor={SessionButtonColor.Green}
           onClick={() => {
-            this.handleToggleOverlay(SessionComposeToType.OpenGroup);
+            this.handleToggleOverlay(SessionClosableOverlayType.OpenGroup);
           }}
         />
         <SessionButton
@@ -285,15 +312,15 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
           buttonType={SessionButtonType.SquareOutline}
           buttonColor={SessionButtonColor.White}
           onClick={() => {
-            this.handleToggleOverlay(SessionComposeToType.ClosedGroup);
+            this.handleToggleOverlay(SessionClosableOverlayType.ClosedGroup);
           }}
         />
       </div>
     );
   }
 
-  private handleToggleOverlay(conversationType?: SessionComposeToType) {
-    const overlayState = conversationType || false;
+  private handleToggleOverlay(overlayType?: SessionClosableOverlayType) {
+    const overlayState = overlayType || false;
 
     this.setState({ overlay: overlayState });
 
@@ -403,6 +430,6 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
   }
 
   private handleNewSessionButtonClick() {
-    this.handleToggleOverlay(SessionComposeToType.Message);
+    this.handleToggleOverlay(SessionClosableOverlayType.Message);
   }
 }

ts/components/session/SessionClosableOverlay.tsx

@@ -9,11 +9,18 @@ import { SessionSpinner } from './SessionSpinner';
 import { ConversationTypeEnum } from '../../models/conversation';
 import { SessionJoinableRooms } from './SessionJoinableDefaultRooms';
 import { SpacerLG, SpacerMD } from '../basic/Text';
+import { useSelector } from 'react-redux';
+import { getLeftPaneLists } from '../../state/selectors/conversations';
+import {
+  ConversationListItemProps,
+  MemoConversationListItemWithDetails,
+} from '../ConversationListItem';
 
 export enum SessionClosableOverlayType {
   Message = 'message',
   OpenGroup = 'open-group',
   ClosedGroup = 'closed-group',
+  MessageRequests = 'message-requests',
 }
 
 interface Props {
@@ -106,6 +113,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
     const isMessageView = overlayMode === SessionClosableOverlayType.Message;
     const isOpenGroupView = overlayMode === SessionClosableOverlayType.OpenGroup;
     const isClosedGroupView = overlayMode === SessionClosableOverlayType.ClosedGroup;
+    const isMessageRequestView = overlayMode === SessionClosableOverlayType.MessageRequests;
 
     let title;
     let buttonText;
@@ -133,6 +141,12 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
         subtitle = window.i18n('createClosedGroupNamePrompt');
         placeholder = window.i18n('createClosedGroupPlaceholder');
         break;
+      case SessionClosableOverlayType.MessageRequests:
+        title = 'Message Requests';
+        buttonText = 'requests done';
+        subtitle = 'Pending Requests';
+        placeholder = 'placeholder';
+        break;
       default:
     }
 
@@ -172,14 +186,25 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
               onPressEnter={() => onButtonClick(groupName, selectedMembers)}
             />
           </div>
-        ) : (
+        ) : null}
+
+        {isMessageView ? (
           <SessionIdEditable
             ref={this.inputRef}
             editable={!showLoadingSpinner}
             placeholder={placeholder}
             onChange={onChangeSessionID}
           />
-        )}
+        ) : null}
+
+        {isMessageRequestView ? (
+          <>
+            <SpacerLG />
+            <div className="message-request-list__container"></div>
+            <MessageRequestList />
+            <SpacerLG />
+          </>
+        ) : null}
 
         <SessionSpinner loading={showLoadingSpinner} />
 
@@ -266,3 +291,80 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
     }
   }
 }
+
+const MessageRequestList = () => {
+  // get all conversations with (accepted / known)
+  // const convos = useSelector(getConversationLookup);
+
+  const lists = useSelector(getLeftPaneLists);
+  const conversationx = lists?.conversations as Array<ConversationListItemProps>;
+  console.warn({ conversationx });
+
+  // console.warn({ convos });
+  // const allConversations = getConversationController().getConversations();
+  // const messageRequests = allConversations.filter(convo => convo.get('isApproved') !== true);
+
+  return (
+    <>
+      {/* {messageRequests.map(convoOfMessage => { */}
+      {conversationx.map(convoOfMessage => {
+        return <MessageRequestListItem conversation={convoOfMessage} />;
+      })}
+    </>
+  );
+};
+
+// const MessageRequestListItem = (props: { conversation: ConversationModel }) => {
+const MessageRequestListItem = (props: { conversation: ConversationListItemProps }) => {
+  const { conversation } = props;
+  // const { id: conversationId } = conversation;
+
+  // TODO: add hovering
+  // TODO: add styling
+
+  /**
+   * open the conversation selected
+   */
+  // const openConvo = useCallback(
+  //   async (e: React.MouseEvent<HTMLDivElement>) => {
+  //     // mousedown is invoked sooner than onClick, but for both right and left click
+  //     if (e.button === 0) {
+  //       await openConversationWithMessages({ conversationKey: conversationId });
+  //     }
+  //   },
+  //   [conversationId]
+  // );
+
+  // /**
+  //  * show basic highlight animation
+  //  */
+  // const handleMouseOver = () => {
+  //   console.warn('hovered');
+  // };
+
+  return (
+    // <div
+    //   onMouseOver={handleMouseOver}
+    //   onMouseDown={openConvo}
+    //   onMouseUp={e => {
+    //     e.stopPropagation();
+    //     e.preventDefault();
+    //   }}
+    //   // className="message-request__item"
+
+    //   // className={classNames(
+    //   //     'module-conversation-list-item',
+    //   //     unreadCount && unreadCount > 0 ? 'module-conversation-list-item--has-unread' : null,
+    //   //     unreadCount && unreadCount > 0 && mentionedUs
+    //   //       ? 'module-conversation-list-item--mentioned-us'
+    //   //       : null,
+    //   //     isSelected ? 'module-conversation-list-item--is-selected' : null,
+    //   //     isBlocked ? 'module-conversation-list-item--is-blocked' : null
+    //   //   )}
+    // >
+    //   {conversation.getName()}
+    // </div>
+
+    <MemoConversationListItemWithDetails {...conversation}></MemoConversationListItemWithDetails>
+  );
+};

ts/models/conversation.ts

@@ -104,6 +104,7 @@ export interface ConversationAttributes {
   triggerNotificationsFor: ConversationNotificationSettingType;
   isTrustedForAttachmentDownload: boolean;
   isPinned: boolean;
+  isApproved: boolean;
 }
 
 export interface ConversationAttributesOptionals {
@@ -144,6 +145,7 @@ export interface ConversationAttributesOptionals {
   triggerNotificationsFor?: ConversationNotificationSettingType;
   isTrustedForAttachmentDownload?: boolean;
   isPinned: boolean;
+  isApproved: boolean;
 }
 
 /**
@@ -433,6 +435,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     const isBlocked = this.isBlocked();
     const subscriberCount = this.get('subscriberCount');
     const isPinned = this.isPinned();
+    const isApproved = this.isApproved();
     const hasNickname = !!this.getNickname();
     const isKickedFromGroup = !!this.get('isKickedFromGroup');
     const left = !!this.get('left');
@@ -508,6 +511,9 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     if (isPinned) {
       toRet.isPinned = isPinned;
     }
+    if (isApproved) {
+      toRet.isApproved = isApproved;
+    }
     if (subscriberCount) {
       toRet.subscriberCount = subscriberCount;
     }
@@ -1375,6 +1381,15 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     }
   }
 
+  public async setIsApproved(value: boolean) {
+    if (value !== this.get('isApproved')) {
+      this.set({
+        isApproved: true,
+      });
+      await this.commit();
+    }
+  }
+
   public async setGroupName(name: string) {
     const profileName = this.get('name');
     if (profileName !== name) {
@@ -1482,6 +1497,10 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     return this.get('isPinned');
   }
 
+  public isApproved() {
+    return this.get('isApproved');
+  }
+
   public getTitle() {
     if (this.isPrivate()) {
       const profileName = this.getProfileName();

ts/state/ducks/conversations.ts

@@ -243,6 +243,7 @@ export interface ReduxConversationType {
   currentNotificationSetting?: ConversationNotificationSettingType;
 
   isPinned?: boolean;
+  isApproved?: boolean;
 }
 
 export interface NotificationForConvoOption {

ts/test/test-utils/utils/message.ts

@@ -95,6 +95,7 @@ export class MockConversation {
       triggerNotificationsFor: 'all',
       isTrustedForAttachmentDownload: false,
       isPinned: false,
+      isApproved: false,
     };
   }