ActionPanel: add notificationcount for friendrequest and unreadMessages

ts/components/LeftPane.tsx

@@ -67,6 +67,7 @@ export class LeftPane extends React.Component<Props, State> {
         <ActionsPanel
           selectedSection={this.state.selectedSection}
           onSectionSelected={this.handleSectionSelected}
+          conversations={this.props.conversations}
         />
         <div className="module-left-pane">{this.renderSection()}</div>
       </div>

ts/components/session/ActionsPanel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 import { Avatar } from '../Avatar';
+import { PropsData as ConversationListItemPropsType } from '../ConversationListItem';
 
 export enum SectionType {
   Profile,
@@ -18,6 +19,7 @@ interface State {
 interface Props {
   onSectionSelected: any;
   selectedSection: SectionType;
+  conversations: Array<ConversationListItemPropsType> | undefined;
 }
 
 const Section = ({
@@ -133,7 +135,10 @@ export class ActionsPanel extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-    const { selectedSection } = this.props;
+    const { selectedSection, conversations } = this.props;
+
+    const friendRequestCount = ActionsPanel.getFriendRequestsCount(conversations);
+    const unreadMessageCount = this.getUnreadMessageCount();
 
     return (
       <div className="module-left-pane__sections-container">
@@ -147,12 +152,13 @@ export class ActionsPanel extends React.Component<Props, State> {
           type={SectionType.Message}
           isSelected={selectedSection === SectionType.Message}
           onSelect={this.handleSectionSelect}
-          notificationCount={0}
+          notificationCount={unreadMessageCount}
         />
         <Section
           type={SectionType.Contact}
           isSelected={selectedSection === SectionType.Contact}
           onSelect={this.handleSectionSelect}
+          notificationCount={friendRequestCount}
         />
         <Section
           type={SectionType.Globe}
@@ -173,6 +179,36 @@ export class ActionsPanel extends React.Component<Props, State> {
     );
   }
 
+  private getUnreadMessageCount(): number {
+    const { conversations } = this.props;
+    let unreadCount = 0;
+    if (conversations !== undefined) {
+      unreadCount = conversations.reduce((accu, conversation) => {
+        return accu + conversation.unreadCount;
+      }, 0);
+    }
+
+    return unreadCount;
+  }
+
+  static getFriendRequestsCount(conversations: Array<ConversationListItemPropsType> | undefined): number {
+    let unreadCount = 0;
+    if (conversations !== undefined) {
+      // We assume a friend request already read is no longer a friend request (has been ignored)
+      unreadCount = conversations.reduce((accu, conversation) => {
+        return (
+          accu +
+          (conversation.showFriendRequestIndicator &&
+          conversation.unreadCount > 0
+            ? 1
+            : 0)
+        );
+      }, 0);
+    }
+    
+    return unreadCount;
+  }
+
   private readonly handleSectionSelect = (section: SectionType): void => {
     this.props.onSectionSelected(section);
   };

ts/components/session/LeftPaneContactSection.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
-import { PropsData as ConversationListItemPropsType } from '../ConversationListItem';
+import {
+  PropsData as ConversationListItemPropsType,
+  ConversationListItem,
+} from '../ConversationListItem';
 import { PropsData as SearchResultsProps } from '../SearchResults';
 import { debounce } from 'lodash';
 import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { SearchOptions } from '../../types/Search';
-import { LeftPane } from '../LeftPane';
+import { LeftPane, RowRendererParamsType } from '../LeftPane';
 import {
   SessionButton,
   SessionButtonType,
@@ -13,6 +16,7 @@ import {
 } from './SessionButton';
 import { AutoSizer, List } from 'react-virtualized';
 import { validateNumber } from '../../types/PhoneNumber';
+import { ActionsPanel } from './ActionsPanel';
 
 export interface Props {
   searchTerm: string;
@@ -59,11 +63,14 @@ 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,
       undefined,
-      null
+      undefined,
+      friendRequestCount
     );
   }
 
@@ -161,7 +168,8 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     let conversationList = conversations;
     if (conversationList !== undefined) {
       conversationList = conversationList.filter(
-        conversation => !conversation.isSecondary
+        conversation =>
+          !conversation.isSecondary && conversation.showFriendRequestIndicator
       );
     }
 
@@ -177,8 +185,6 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
       );
     }
 
-    console.log('conversations length;', conversations.length);
-
     // 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.
@@ -203,37 +209,31 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     return [list];
   }
 
-  public renderRow() {
-    return undefined;
-  }
+  public renderRow = ({
+    index,
+    key,
+    style,
+  }: RowRendererParamsType): JSX.Element | undefined => {
+    const { openConversationInternal } = this.props;
 
-  // public renderRow = ({
-  //   ,
-  // }: // index,
-  // key,
-  // style,
-  // RowRendererParamsType): JSX.Element | undefined => {
-  //   const { openConversationInternal } = this.props;
+    const conversations = this.getCurrentConversations();
 
-  //   const conversations = this.getCurrentConversations();
+    if (!conversations) {
+      throw new Error('renderRow: Tried to render without conversations');
+    }
 
-  //   if (!conversations) {
-  //     throw new Error('renderRow: Tried to render without conversations');
-  //   }
+    const conversation = conversations[index];
 
-  //   const conversation = conversations[index];
-
-  //   return (
-  //     <ConversationListItem
-  //       key={key}
-  //       style={style}
-  //       {...conversation}
-  //       onClick={openConversationInternal}
-  //       i18n={window.i18n}
-  //     />
-  //   );
-  //   return undefined;
-  // };
+    return (
+      <ConversationListItem
+        key={key}
+        style={style}
+        {...conversation}
+        onClick={openConversationInternal}
+        i18n={window.i18n}
+      />
+    );
+  };
 
   public updateSearch(searchTerm: string) {
     const { updateSearchTerm, clearSearch } = this.props;

ts/components/session/LeftPaneSectionHeader.tsx

@@ -84,7 +84,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
         <SessionButton
           text={window.i18n('compose')}
           onClick={buttonClicked}
-          key={window.i18n('compose')}
+          key='compose'
         />
       );
     } else if (notificationCount && notificationCount > 0) {
@@ -93,7 +93,6 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
       children.push(
         <div
           className="contact-notification-count-bubble"
-          onClick={buttonClicked}
         >
           {shortenedNotificationCount}
         </div>