contact list, show receivedfriendrequest, then sent, then friends

js/models/conversations.js

@@ -565,10 +565,11 @@
         title: this.getTitle(),
         unreadCount: this.get('unreadCount') || 0,
         mentionedUs: this.get('mentionedUs') || false,
-        showFriendRequestIndicator: this.isPendingFriendRequest(),
+        isPendingFriendRequest: this.isPendingFriendRequest(),
+        hasReceivedFriendRequest: this.hasReceivedFriendRequest(),
+        hasSentFriendRequest: this.hasSentFriendRequest(),
         isBlocked: this.isBlocked(),
         isSecondary: !!this.get('secondaryStatus'),
-
         phoneNumber: format(this.id, {
           ourRegionCode: regionCode,
         }),

ts/components/ConversationListItem.tsx

@@ -37,7 +37,9 @@ export type PropsData = {
     isRss: boolean;
   };
 
-  showFriendRequestIndicator?: boolean;
+  isPendingFriendRequest?: boolean;
+  hasReceivedFriendRequest?: boolean;
+  hasSentFriendRequest?: boolean;
   isBlocked?: boolean;
   isOnline?: boolean;
   hasNickname?: boolean;
@@ -75,15 +77,15 @@ export class ConversationListItem extends React.PureComponent<Props> {
       phoneNumber,
       profileName,
       isOnline,
-      showFriendRequestIndicator,
+      isPendingFriendRequest,
     } = this.props;
 
 
     let borderColor = undefined;
-    if (!showFriendRequestIndicator) {
+    if (!isPendingFriendRequest) {
       borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE;
     }
-    const iconSize = showFriendRequestIndicator ? 28 : 48;
+    const iconSize = isPendingFriendRequest ? 28 : 48;
 
     return (
       <div className="module-conversation-list-item__avatar-container">
@@ -123,7 +125,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
   }
 
   public renderHeader() {
-    const { unreadCount, i18n, isMe, lastUpdated, isFriendItem, showFriendRequestIndicator } = this.props;
+    const { unreadCount, i18n, isMe, lastUpdated, isFriendItem, hasReceivedFriendRequest } = this.props;
 
     return (
       <div className="module-conversation-list-item__header">
@@ -137,7 +139,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
         >
           {isMe ? i18n('noteToSelf') : this.renderUser()}
         </div>
-        {showFriendRequestIndicator || this.renderUnread()}
+        {hasReceivedFriendRequest || this.renderUnread()}
         {!isFriendItem && (
           <div
             className={classNames(
@@ -147,7 +149,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
                 : null
             )}
           >
-            {showFriendRequestIndicator || (<Timestamp
+            {!hasReceivedFriendRequest && (<Timestamp
               timestamp={lastUpdated}
               extended={false}
               module="module-conversation-list-item__header__timestamp"
@@ -219,7 +221,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
       unreadCount,
       i18n,
       isFriendItem,
-      showFriendRequestIndicator,
+      isPendingFriendRequest,
     } = this.props;
 
     if (isFriendItem) {
@@ -237,7 +239,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
       text = text.replace(/<[^>]*>?/gm, '');
     }
 
-    if (showFriendRequestIndicator) {
+    if (isPendingFriendRequest) {
       text = text.replace('Friend Request: ', '');
     }
 
@@ -298,7 +300,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
       onClick,
       id,
       isSelected,
-      showFriendRequestIndicator,
+      hasReceivedFriendRequest,
       isBlocked,
       style,
       mentionedUs,
@@ -327,7 +329,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
                 ? 'module-conversation-list-item--mentioned-us'
                 : null,
               isSelected ? 'module-conversation-list-item--is-selected' : null,
-              showFriendRequestIndicator
+              hasReceivedFriendRequest
                 ? 'module-conversation-list-item--has-friend-request'
                 : null,
               isBlocked ? 'module-conversation-list-item--is-blocked' : null
@@ -338,7 +340,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
               {this.renderHeader()}
               {this.renderMessage()}
             </div>
-            {showFriendRequestIndicator && this.renderFriendRequestButtons()}
+            {hasReceivedFriendRequest && this.renderFriendRequestButtons()}
           </div>
         </ContextMenuTrigger>
         <Portal>{this.renderContextMenu(triggerId)}</Portal>

ts/components/session/ActionsPanel.tsx

@@ -184,7 +184,7 @@ export class ActionsPanel extends React.Component<Props, State> {
     let unreadCount = 0;
     if (conversations !== undefined) {
       conversations.some(function (conversation) {
-        if (conversation.showFriendRequestIndicator) {
+        if (conversation.isPendingFriendRequest) {
           return false;
         }
         unreadCount += conversation.unreadCount;
@@ -204,11 +204,7 @@ export class ActionsPanel extends React.Component<Props, State> {
       // We assume a friend request already read is still a friend valid request
       conversations.some(function (conversation) {
         // Ignore friend request with lastmessage status as sent as this is a friend request we made ourself
-        const isValidFriendRequest = conversation.showFriendRequestIndicator
-          && conversation.lastMessage
-          && conversation.lastMessage.status !== 'sent'
-          && conversation.lastMessage.status !== 'sending';
-        friendRequestCount += isValidFriendRequest ? 1 : 0;
+        friendRequestCount += conversation.hasReceivedFriendRequest ? 1 : 0;
         if (friendRequestCount > 9) {
           return true;
         }

ts/components/session/LeftPaneContactSection.tsx

@@ -167,7 +167,6 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     const { friends } = this.props;
 
     let friendList = friends;
-    console.log('friends:', friendList);
     if (friendList !== undefined) {
       friendList = friendList.filter(
         friend =>
@@ -178,35 +177,33 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     return friendList;
   }
 
-
-  public getFriendRequests(): Array<ConversationListItemPropsType> {
+  // true: received only, false: sent only
+  private getFriendRequests(received:boolean): Array<ConversationListItemPropsType> {
     const { conversations } = this.props;
 
     let conversationsList = conversations;
-    console.log('conversations:', conversationsList);
     if (conversationsList !== undefined) {
-      // ignore friend request we made ourself
-      conversationsList = conversationsList.filter(
-        conversation => conversation.showFriendRequestIndicator && conversation.lastMessage && conversation.lastMessage.status !== 'sent' && conversation.lastMessage.status !== 'sending'
-      );
+      if (received) {
+        conversationsList = conversationsList.filter(
+          conversation => (conversation.hasReceivedFriendRequest));
+      } else {
+        conversationsList = conversationsList.filter(
+          conversation => (conversation.hasSentFriendRequest));
+      }
     }
 
     return conversationsList;
   }
 
   private renderList() {
+    const receivedFriendsRequest = this.getFriendRequests(true);
+    const sentFriendsRequest = this.getFriendRequests(false);
     const friends = this.getCurrentFriends();
-    const friendsRequest = this.getFriendRequests();
 
-    if (!friends) {
-      throw new Error(
-        'render: must provided friends if no search results are provided'
-      );
-    }
-    const length = friends.length + (friendsRequest ? friendsRequest.length : 0);
-    // Note: conversations is not a known prop for List, but it is required to ensure that
-    //   it re-renders when our conversation data changes. Otherwise it would just render
-    //   on startup and scroll.
+    const combined = [...receivedFriendsRequest, ...sentFriendsRequest, ...friends];
+
+    const length = combined.length;
+
     const list = (
       <div className="module-left-pane__list" key={0}>
         <AutoSizer>
@@ -234,23 +231,24 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     style,
   }: RowRendererParamsType): JSX.Element | undefined => {
 
+    const receivedFriendsRequest = this.getFriendRequests(true);
+    const sentFriendsRequest = this.getFriendRequests(false);
     const friends = this.getCurrentFriends();
-    const friendRequest = this.getFriendRequests();
 
-    let item;
-    if(index<friendRequest.length) {
-      item = friendRequest[index];
-    }
-    else {
-      item = friends[index-friendRequest.length];
-    }
+    const combined = [...receivedFriendsRequest, ...sentFriendsRequest, ...friends];
 
+    const item = combined[index];
+    let onClick = undefined;
+    if (index >= receivedFriendsRequest.length) {
+      onClick = this.props.openConversationInternal;
+    }
     return (
       <ConversationListItem
         key={key}
         style={style}
         {...item}
         i18n={window.i18n}
+        onClick={onClick}
       />
     );
   };

ts/components/session/LeftPaneMessageSection.tsx

@@ -61,7 +61,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
     if (conversationList !== undefined) {
       conversationList = conversationList.filter(
         conversation => !conversation.isSecondary 
-        && !conversation.showFriendRequestIndicator
+        && !conversation.isPendingFriendRequest
       );
     }