diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index e55f11744..3a4c50bbd 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -67,6 +67,7 @@ export class LeftPane extends React.Component {
{this.renderSection()}
diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 4a1308f33..1bb48f5cf 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/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 | undefined; } const Section = ({ @@ -133,7 +135,10 @@ export class ActionsPanel extends React.Component { } public render(): JSX.Element { - const { selectedSection } = this.props; + const { selectedSection, conversations } = this.props; + + const friendRequestCount = ActionsPanel.getFriendRequestsCount(conversations); + const unreadMessageCount = this.getUnreadMessageCount(); return (
@@ -147,12 +152,13 @@ export class ActionsPanel extends React.Component { type={SectionType.Message} isSelected={selectedSection === SectionType.Message} onSelect={this.handleSectionSelect} - notificationCount={0} + notificationCount={unreadMessageCount} />
{ ); } + 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 | 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); }; diff --git a/ts/components/session/LeftPaneContactSection.tsx b/ts/components/session/LeftPaneContactSection.tsx index adc514ff6..4c7abb4d5 100644 --- a/ts/components/session/LeftPaneContactSection.tsx +++ b/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 { 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 { 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 { ); } - 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 { return [list]; } - public renderRow() { - return undefined; - } + public renderRow = ({ + index, + key, + style, + }: RowRendererParamsType): JSX.Element | undefined => { + const { openConversationInternal } = this.props; + + const conversations = this.getCurrentConversations(); - // public renderRow = ({ - // , - // }: // index, - // key, - // style, - // RowRendererParamsType): JSX.Element | undefined => { - // const { openConversationInternal } = this.props; - - // const conversations = this.getCurrentConversations(); - - // if (!conversations) { - // throw new Error('renderRow: Tried to render without conversations'); - // } - - // const conversation = conversations[index]; - - // return ( - // - // ); - // return undefined; - // }; + if (!conversations) { + throw new Error('renderRow: Tried to render without conversations'); + } + + const conversation = conversations[index]; + + return ( + + ); + }; public updateSearch(searchTerm: string) { const { updateSearchTerm, clearSearch } = this.props; diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index aa229b0d6..ca34395cf 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/ts/components/session/LeftPaneSectionHeader.tsx @@ -84,7 +84,7 @@ export class LeftPaneSectionHeader extends React.Component { ); } else if (notificationCount && notificationCount > 0) { @@ -93,7 +93,6 @@ export class LeftPaneSectionHeader extends React.Component { children.push(
{shortenedNotificationCount}