show current friends and pending friend request in contact lists

ts/components/LeftPane.tsx

@@ -7,7 +7,6 @@ import { PropsData as ConversationListItemPropsType } from './ConversationListIt
 import { PropsData as SearchResultsProps } from './SearchResults';
 import { SearchOptions } from '../types/Search';
 import { LeftPaneSectionHeader } from './session/LeftPaneSectionHeader';
-import { LeftPaneContactSection } from './session/LeftPaneContactSection';
 import {
   SessionIconButton,
   SessionIconSize,
@@ -20,6 +19,8 @@ import {
   SessionButtonColor,
   SessionButtonType,
 } from './session/SessionButton';
+import { ConversationType } from '../state/ducks/conversations';
+import { LeftPaneContactSection } from './session/LeftPaneContactSection';
 
 // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5
 export type RowRendererParamsType = {
@@ -36,11 +37,12 @@ interface State {
 }
 
 interface Props {
-  conversations?: Array<ConversationListItemPropsType>;
+  conversations: Array<ConversationListItemPropsType>;
+  friends: Array<ConversationType>;
   searchResults?: SearchResultsProps;
   searchTerm: string;
   isSecondaryDevice: boolean;
-
+  
   openConversationInternal: (id: string, messageId?: string) => void;
   updateSearchTerm: (searchTerm: string) => void;
   search: (query: string, options: SearchOptions) => void;
@@ -111,9 +113,12 @@ export class LeftPane extends React.Component<Props, State> {
     );
   }
 
+
+
   private renderContactSection() {
     const {
       openConversationInternal,
+      friends,
       conversations,
       searchResults,
       searchTerm,
@@ -127,6 +132,7 @@ export class LeftPane extends React.Component<Props, State> {
       <LeftPaneContactSection
         openConversationInternal={openConversationInternal}
         conversations={conversations}
+        friends={friends}
         searchResults={searchResults}
         searchTerm={searchTerm}
         isSecondaryDevice={isSecondaryDevice}

ts/components/session/ActionsPanel.tsx

@@ -184,6 +184,9 @@ export class ActionsPanel extends React.Component<Props, State> {
     let unreadCount = 0;
     if (conversations !== undefined) {
       conversations.some(function (conversation) {
+        if (conversation.showFriendRequestIndicator) {
+          return false;
+        }
         unreadCount += conversation.unreadCount;
         if (unreadCount > 9) {
             return true;

ts/components/session/LeftPaneContactSection.tsx

@@ -17,12 +17,14 @@ import {
 import { AutoSizer, List } from 'react-virtualized';
 import { validateNumber } from '../../types/PhoneNumber';
 import { ActionsPanel } from './ActionsPanel';
+import { ConversationType } from '../../state/ducks/conversations';
 
 export interface Props {
   searchTerm: string;
   isSecondaryDevice: boolean;
 
-  conversations?: Array<ConversationListItemPropsType>;
+  conversations: Array<ConversationListItemPropsType>;
+  friends: Array<ConversationType>;
 
   searchResults?: SearchResultsProps;
 
@@ -64,7 +66,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
   public renderHeader(): JSX.Element | undefined {
     const labels = [window.i18n('contactsHeader'), window.i18n('lists')];
     const friendRequestCount = ActionsPanel.getFriendRequestsCount(this.props.conversations);
-    
+
     return LeftPane.renderHeader(
       labels,
       this.handleTabSelected,
@@ -160,30 +162,47 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     );
   }
 
-  public getCurrentConversations():
-    | Array<ConversationListItemPropsType>
-    | undefined {
-    const { conversations } = this.props;
+  public getCurrentFriends():
+    | Array<ConversationType> {
+    const { friends } = this.props;
 
-    let conversationList = conversations;
-    if (conversationList !== undefined) {
-      conversationList = conversationList.filter(
-        conversation =>
-          !conversation.isSecondary && conversation.showFriendRequestIndicator
+    let friendList = friends;
+    console.log('friends:', friendList);
+    if (friendList !== undefined) {
+      friendList = friendList.filter(
+        friend =>
+        friend.type ==='direct' && !friend.isMe
       );
     }
 
-    return conversationList;
+    return friendList;
+  }
+
+
+  public getFriendRequests(): Array<ConversationListItemPropsType> {
+    const { conversations } = this.props;
+
+    let conversationsList = conversations;
+    console.log('conversations:', conversationsList);
+    if (conversationsList !== undefined) {
+      conversationsList = conversationsList.filter(
+        conversation => conversation.showFriendRequestIndicator
+      );
+    }
+
+    return conversationsList;
   }
 
   private renderList() {
-    const conversations = this.getCurrentConversations();
+    const friends = this.getCurrentFriends();
+    const friendsRequest = this.getFriendRequests();
 
-    if (!conversations) {
+    if (!friends) {
       throw new Error(
-        'render: must provided conversations if no search results are provided'
+        '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
@@ -195,7 +214,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
             <List
               className="module-left-pane__virtual-list"
               height={height}
-              rowCount={conversations.length}
+              rowCount={length}
               rowHeight={64}
               rowRenderer={this.renderRow}
               width={width}
@@ -216,19 +235,22 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
   }: RowRendererParamsType): JSX.Element | undefined => {
     const { openConversationInternal } = this.props;
 
-    const conversations = this.getCurrentConversations();
+    const friends = this.getCurrentFriends();
+    const friendRequest = this.getFriendRequests();
 
-    if (!conversations) {
-      throw new Error('renderRow: Tried to render without conversations');
+    let item;
+    if(index<friendRequest.length) {
+      item = friendRequest[index];
+    }
+    else {
+      item = friends[index-friendRequest.length];
     }
-
-    const conversation = conversations[index];
 
     return (
       <ConversationListItem
         key={key}
         style={style}
-        {...conversation}
+        {...item}
         onClick={openConversationInternal}
         i18n={window.i18n}
       />