lint code

stylesheets/_session_theme_dark_left_pane.scss

@@ -320,8 +320,6 @@ $session-compose-margin: 20px;
       line-height: 50px;
     }
   }
-
-  
 }
 
 .panel-text-divider {

ts/components/ConversationListItem.tsx

@@ -80,8 +80,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
       isPendingFriendRequest,
     } = this.props;
 
-
+    let borderColor;
-    let borderColor = undefined;
     if (!isPendingFriendRequest) {
       borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE;
     }
@@ -125,7 +124,14 @@ export class ConversationListItem extends React.PureComponent<Props> {
   }
 
   public renderHeader() {
-    const { unreadCount, i18n, isMe, lastUpdated, isFriendItem, hasReceivedFriendRequest } = this.props;
+    const {
+      unreadCount,
+      i18n,
+      isMe,
+      lastUpdated,
+      isFriendItem,
+      hasReceivedFriendRequest,
+    } = this.props;
 
     return (
       <div className="module-conversation-list-item__header">
@@ -139,7 +145,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
         >
           {isMe ? i18n('noteToSelf') : this.renderUser()}
         </div>
-        {hasReceivedFriendRequest || this.renderUnread()}
+        {hasReceivedFriendRequest || this.renderUnread()}
         {!isFriendItem && (
           <div
             className={classNames(
@@ -149,13 +155,14 @@ export class ConversationListItem extends React.PureComponent<Props> {
                 : null
             )}
           >
-            {!hasReceivedFriendRequest && (<Timestamp
+            {!hasReceivedFriendRequest && (
-              timestamp={lastUpdated}
+              <Timestamp
-              extended={false}
+                timestamp={lastUpdated}
-              module="module-conversation-list-item__header__timestamp"
+                extended={false}
-              i18n={i18n}
+                module="module-conversation-list-item__header__timestamp"
-            />)
+                i18n={i18n}
-            }
+              />
+            )}
           </div>
         )}
       </div>
@@ -283,12 +290,19 @@ export class ConversationListItem extends React.PureComponent<Props> {
   }
 
   public renderFriendRequestButtons() {
-
     const { acceptFriendRequest, declineFriendRequest } = this.props;
+
     return (
       <div className="module-conversation-list-item__buttons">
-        <SessionButton text={window.i18n('decline')} buttonColor={SessionButtonColor.None} onClick={declineFriendRequest}/>
+        <SessionButton
-        <SessionButton text={window.i18n('accept')} onClick={acceptFriendRequest}/>
+          text={window.i18n('decline')}
+          buttonColor={SessionButtonColor.None}
+          onClick={declineFriendRequest}
+        />
+        <SessionButton
+          text={window.i18n('accept')}
+          onClick={acceptFriendRequest}
+        />
       </div>
     );
   }
@@ -306,7 +320,6 @@ export class ConversationListItem extends React.PureComponent<Props> {
       mentionedUs,
     } = this.props;
 
-
     const triggerId = `${phoneNumber}-ctxmenu-${Date.now()}`;
 
     return (

ts/components/LeftPane.tsx

@@ -59,92 +59,8 @@ export class LeftPane extends React.Component<Props, State> {
     this.handleSectionSelected = this.handleSectionSelected.bind(this);
   }
 
-  public handleSectionSelected(section: SectionType) {
-    this.setState({ selectedSection: section });
-  }
-
-  public render(): JSX.Element {
-    return (
-      <div className="module-left-pane-session">
-        <ActionsPanel
-          selectedSection={this.state.selectedSection}
-          onSectionSelected={this.handleSectionSelected}
-          conversations={this.props.conversations}
-        />
-        <div className="module-left-pane">{this.renderSection()}</div>
-      </div>
-    );
-  }
-
-  private renderSection(): JSX.Element | undefined {
-    switch (this.state.selectedSection) {
-      case SectionType.Message:
-        return this.renderMessageSection();
-      case SectionType.Contact:
-        return this.renderContactSection();
-      default:
-        return undefined;
-    }
-  }
-
-  private renderMessageSection() {
-    const {
-      openConversationInternal,
-      conversations,
-      searchResults,
-      searchTerm,
-      isSecondaryDevice,
-      updateSearchTerm,
-      search,
-      clearSearch,
-    } = this.props;
-
-    return (
-      <LeftPaneMessageSection
-        openConversationInternal={openConversationInternal}
-        conversations={conversations}
-        searchResults={searchResults}
-        searchTerm={searchTerm}
-        isSecondaryDevice={isSecondaryDevice}
-        updateSearchTerm={updateSearchTerm}
-        search={search}
-        clearSearch={clearSearch}
-      />
-    );
-  }
-
-
-
-  private renderContactSection() {
-    const {
-      openConversationInternal,
-      friends,
-      conversations,
-      searchResults,
-      searchTerm,
-      isSecondaryDevice,
-      updateSearchTerm,
-      search,
-      clearSearch,
-    } = this.props;
-
-    return (
-      <LeftPaneContactSection
-        openConversationInternal={openConversationInternal}
-        conversations={conversations}
-        friends={friends}
-        searchResults={searchResults}
-        searchTerm={searchTerm}
-        isSecondaryDevice={isSecondaryDevice}
-        updateSearchTerm={updateSearchTerm}
-        search={search}
-        clearSearch={clearSearch}
-      />
-    );
-  }
-
   // this static function is set here to be used by all subsections (message, contacts,...) to render their headers
-  static renderHeader(
+  public static RENDER_HEADER(
     labels: Array<string>,
     onTabSelected?: any,
     buttonLabel?: string,
@@ -163,7 +79,7 @@ export class LeftPane extends React.Component<Props, State> {
     );
   }
 
-  static renderClosableOverlay(
+  public static RENDER_CLOSABLE_OVERLAY(
     isAddContactView: boolean,
     onChangeSessionID: any,
     onCloseClick: any,
@@ -237,4 +153,86 @@ export class LeftPane extends React.Component<Props, State> {
       </div>
     );
   }
+
+  public handleSectionSelected(section: SectionType) {
+    this.setState({ selectedSection: section });
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="module-left-pane-session">
+        <ActionsPanel
+          selectedSection={this.state.selectedSection}
+          onSectionSelected={this.handleSectionSelected}
+          conversations={this.props.conversations}
+        />
+        <div className="module-left-pane">{this.renderSection()}</div>
+      </div>
+    );
+  }
+
+  private renderSection(): JSX.Element | undefined {
+    switch (this.state.selectedSection) {
+      case SectionType.Message:
+        return this.renderMessageSection();
+      case SectionType.Contact:
+        return this.renderContactSection();
+      default:
+        return undefined;
+    }
+  }
+
+  private renderMessageSection() {
+    const {
+      openConversationInternal,
+      conversations,
+      searchResults,
+      searchTerm,
+      isSecondaryDevice,
+      updateSearchTerm,
+      search,
+      clearSearch,
+    } = this.props;
+
+    return (
+      <LeftPaneMessageSection
+        openConversationInternal={openConversationInternal}
+        conversations={conversations}
+        searchResults={searchResults}
+        searchTerm={searchTerm}
+        isSecondaryDevice={isSecondaryDevice}
+        updateSearchTerm={updateSearchTerm}
+        search={search}
+        clearSearch={clearSearch}
+      />
+    );
+  }
+
+  private renderContactSection() {
+    const {
+      openConversationInternal,
+      friends,
+      conversations,
+      searchResults,
+      searchTerm,
+      isSecondaryDevice,
+      updateSearchTerm,
+      search,
+      clearSearch,
+    } = this.props;
+
+    return (
+      <LeftPaneContactSection
+        openConversationInternal={openConversationInternal}
+        conversations={conversations}
+        friends={friends}
+        searchResults={searchResults}
+        searchTerm={searchTerm}
+        isSecondaryDevice={isSecondaryDevice}
+        updateSearchTerm={updateSearchTerm}
+        search={search}
+        clearSearch={clearSearch}
+      />
+    );
+  }
 }

ts/components/session/ActionsPanel.tsx

@@ -121,6 +121,27 @@ export class ActionsPanel extends React.Component<Props, State> {
       avatarPath: '',
     };
   }
+
+  public static GET_FRIEND_REQUESTS_COUNT(
+    conversations: Array<ConversationListItemPropsType> | undefined
+  ): number {
+    let friendRequestCount = 0;
+    if (conversations !== undefined) {
+      // We assume a friend request already read is still a friend valid request
+      conversations.some(conversation => {
+        // Ignore friend request with lastmessage status as sent as this is a friend request we made ourself
+        friendRequestCount += conversation.hasReceivedFriendRequest ? 1 : 0;
+        if (friendRequestCount > 9) {
+          return true;
+        }
+
+        return false;
+      });
+    }
+
+    return friendRequestCount;
+  }
+
   public componentDidMount() {
     // tslint:disable-next-line: no-backbone-get-set-outside-model
     const ourNumber = window.storage.get('primaryDevicePubKey');
@@ -137,42 +158,51 @@ export class ActionsPanel extends React.Component<Props, State> {
   public render(): JSX.Element {
     const { selectedSection, conversations } = this.props;
 
-    const friendRequestCount = ActionsPanel.getFriendRequestsCount(conversations);
+    const friendRequestCount = ActionsPanel.GET_FRIEND_REQUESTS_COUNT(
+      conversations
+    );
     const unreadMessageCount = this.getUnreadMessageCount();
 
+    const isProfilePageSelected = selectedSection === SectionType.Profile;
+    const isMessagePageSelected = selectedSection === SectionType.Message;
+    const isContactPageSelected = selectedSection === SectionType.Contact;
+    const isGlobePageSelected = selectedSection === SectionType.Globe;
+    const isSettingsPageSelected = selectedSection === SectionType.Settings;
+    const isMoonPageSelected = selectedSection === SectionType.Moon;
+
     return (
       <div className="module-left-pane__sections-container">
         <Section
           type={SectionType.Profile}
           avatarPath={this.state.avatarPath}
-          isSelected={selectedSection === SectionType.Profile}
+          isSelected={isProfilePageSelected}
           onSelect={this.handleSectionSelect}
         />
         <Section
           type={SectionType.Message}
-          isSelected={selectedSection === SectionType.Message}
+          isSelected={isMessagePageSelected}
           onSelect={this.handleSectionSelect}
           notificationCount={unreadMessageCount}
         />
         <Section
           type={SectionType.Contact}
-          isSelected={selectedSection === SectionType.Contact}
+          isSelected={isContactPageSelected}
           onSelect={this.handleSectionSelect}
           notificationCount={friendRequestCount}
         />
         <Section
           type={SectionType.Globe}
-          isSelected={selectedSection === SectionType.Globe}
+          isSelected={isGlobePageSelected}
           onSelect={this.handleSectionSelect}
         />
         <Section
           type={SectionType.Settings}
-          isSelected={selectedSection === SectionType.Settings}
+          isSelected={isSettingsPageSelected}
           onSelect={this.handleSectionSelect}
         />
         <Section
           type={SectionType.Moon}
-          isSelected={selectedSection === SectionType.Moon}
+          isSelected={isMoonPageSelected}
           onSelect={this.handleSectionSelect}
         />
       </div>
@@ -183,36 +213,21 @@ export class ActionsPanel extends React.Component<Props, State> {
     const { conversations } = this.props;
     let unreadCount = 0;
     if (conversations !== undefined) {
-      conversations.some(function (conversation) {
+      conversations.some(conversation => {
         if (conversation.isPendingFriendRequest) {
           return false;
         }
         unreadCount += conversation.unreadCount;
         if (unreadCount > 9) {
-            return true;
-        }
-        return false;
-    });
-    }
 
-    return unreadCount;
-  }
-
-  static getFriendRequestsCount(conversations: Array<ConversationListItemPropsType> | undefined): number {
-    let friendRequestCount = 0;
-    if (conversations !== undefined) {
-      // 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
-        friendRequestCount += conversation.hasReceivedFriendRequest ? 1 : 0;
-        if (friendRequestCount > 9) {
           return true;
         }
+
         return false;
       });
     }
 
-    return friendRequestCount;
+    return unreadCount;
   }
 
   private readonly handleSectionSelect = (section: SectionType): void => {

ts/components/session/LeftPaneContactSection.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {
-  PropsData as ConversationListItemPropsType,
   ConversationListItem,
+  PropsData as ConversationListItemPropsType
 } from '../ConversationListItem';
 import { PropsData as SearchResultsProps } from '../SearchResults';
 import { debounce } from 'lodash';
@@ -11,8 +11,8 @@ import { SearchOptions } from '../../types/Search';
 import { LeftPane, RowRendererParamsType } from '../LeftPane';
 import {
   SessionButton,
-  SessionButtonType,
   SessionButtonColor,
+  SessionButtonType,
 } from './SessionButton';
 import { AutoSizer, List } from 'react-virtualized';
 import { validateNumber } from '../../types/PhoneNumber';
@@ -65,9 +65,11 @@ 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);
+    const friendRequestCount = ActionsPanel.GET_FRIEND_REQUESTS_COUNT(
+      this.props.conversations
+    );
 
-    return LeftPane.renderHeader(
+    return LeftPane.RENDER_HEADER(
       labels,
       this.handleTabSelected,
       undefined,
@@ -81,7 +83,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
       <div className="left-pane-contact-section">
         {this.renderHeader()}
         {this.state.showAddContactView
-          ? LeftPane.renderClosableOverlay(
+          ? LeftPane.RENDER_CLOSABLE_OVERLAY(
               true,
               this.handleRecipientSessionIDChanged,
               this.handleToggleOverlay,
@@ -93,6 +95,99 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     );
   }
 
+  public getCurrentFriends(): Array<ConversationType> {
+    const { friends } = this.props;
+
+    let friendList = friends;
+    if (friendList !== undefined) {
+      friendList = friendList.filter(
+        friend => friend.type === 'direct' && !friend.isMe
+      );
+    }
+
+    return friendList;
+  }
+
+  public renderRow = ({
+    index,
+    key,
+    style,
+  }: RowRendererParamsType): JSX.Element | undefined => {
+    const receivedFriendsRequest = this.getFriendRequests(true);
+    const sentFriendsRequest = this.getFriendRequests(false);
+    const friends = this.getCurrentFriends();
+
+    const combined = [
+      ...receivedFriendsRequest,
+      ...sentFriendsRequest,
+      ...friends,
+    ];
+
+    const item = combined[index];
+    let onClick;
+    if (index >= receivedFriendsRequest.length) {
+      onClick = this.props.openConversationInternal;
+    }
+
+    return (
+      <ConversationListItem
+        key={key}
+        style={style}
+        {...item}
+        i18n={window.i18n}
+        onClick={onClick}
+      />
+    );
+  };
+
+  public updateSearch(searchTerm: string) {
+    const { updateSearchTerm, clearSearch } = this.props;
+
+    if (!searchTerm) {
+      clearSearch();
+
+      return;
+    }
+    // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
+    this.setState({ pubKeyPasted: '' }, () => {
+      window.Session.emptyContentEditableDivs();
+    });
+
+    if (updateSearchTerm) {
+      updateSearchTerm(searchTerm);
+    }
+
+    if (searchTerm.length < 2) {
+      return;
+    }
+
+    const cleanedTerm = cleanSearchTerm(searchTerm);
+    if (!cleanedTerm) {
+      return;
+    }
+
+    this.debouncedSearch(cleanedTerm);
+  }
+
+  public clearSearch() {
+    this.props.clearSearch();
+    //this.setFocus();
+  }
+
+  public search() {
+    const { search } = this.props;
+    const { searchTerm, isSecondaryDevice } = this.props;
+
+    if (search) {
+      search(searchTerm, {
+        noteToSelf: window.i18n('noteToSelf').toLowerCase(),
+        ourNumber: window.textsecure.storage.user.getNumber(),
+        regionCode: '',
+        isSecondaryDevice,
+      });
+    }
+  }
+
   private handleToggleOverlay() {
     this.setState((prevState: { showAddContactView: any }) => ({
       showAddContactView: !prevState.showAddContactView,
@@ -136,6 +231,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     const edit = window.i18n('edit');
     const addContact = window.i18n('addContact');
     const createGroup = window.i18n('createGroup');
+
     return (
       <div className="left-pane-contact-bottom-buttons">
         <SessionButton
@@ -162,33 +258,23 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     );
   }
 
-  public getCurrentFriends():
-    | Array<ConversationType> {
-    const { friends } = this.props;
-
-    let friendList = friends;
-    if (friendList !== undefined) {
-      friendList = friendList.filter(
-        friend =>
-        friend.type ==='direct' && !friend.isMe
-      );
-    }
-
-    return friendList;
-  }
 
   // true: received only, false: sent only
-  private getFriendRequests(received:boolean): Array<ConversationListItemPropsType> {
+  private getFriendRequests(
+    received: boolean
+  ): Array<ConversationListItemPropsType> {
     const { conversations } = this.props;
 
     let conversationsList = conversations;
     if (conversationsList !== undefined) {
       if (received) {
         conversationsList = conversationsList.filter(
-          conversation => (conversation.hasReceivedFriendRequest));
+          conversation => conversation.hasReceivedFriendRequest
+        );
       } else {
         conversationsList = conversationsList.filter(
-          conversation => (conversation.hasSentFriendRequest));
+          conversation => conversation.hasSentFriendRequest
+        );
       }
     }
 
@@ -200,7 +286,11 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     const sentFriendsRequest = this.getFriendRequests(false);
     const friends = this.getCurrentFriends();
 
-    const combined = [...receivedFriendsRequest, ...sentFriendsRequest, ...friends];
+    const combined = [
+      ...receivedFriendsRequest,
+      ...sentFriendsRequest,
+      ...friends,
+    ];
 
     const length = combined.length;
 
@@ -224,80 +314,4 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
 
     return [list];
   }
-
-  public renderRow = ({
-    index,
-    key,
-    style,
-  }: RowRendererParamsType): JSX.Element | undefined => {
-
-    const receivedFriendsRequest = this.getFriendRequests(true);
-    const sentFriendsRequest = this.getFriendRequests(false);
-    const friends = this.getCurrentFriends();
-
-    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}
-      />
-    );
-  };
-
-  public updateSearch(searchTerm: string) {
-    const { updateSearchTerm, clearSearch } = this.props;
-
-    if (!searchTerm) {
-      clearSearch();
-
-      return;
-    }
-    // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
-    this.setState({ pubKeyPasted: '' }, () => {
-      window.Session.emptyContentEditableDivs();
-    });
-
-    if (updateSearchTerm) {
-      updateSearchTerm(searchTerm);
-    }
-
-    if (searchTerm.length < 2) {
-      return;
-    }
-
-    const cleanedTerm = cleanSearchTerm(searchTerm);
-    if (!cleanedTerm) {
-      return;
-    }
-
-    this.debouncedSearch(cleanedTerm);
-  }
-
-  public clearSearch() {
-    this.props.clearSearch();
-    //this.setFocus();
-  }
-
-  public search() {
-    const { search } = this.props;
-    const { searchTerm, isSecondaryDevice } = this.props;
-
-    if (search) {
-      search(searchTerm, {
-        noteToSelf: window.i18n('noteToSelf').toLowerCase(),
-        ourNumber: window.textsecure.storage.user.getNumber(),
-        regionCode: '',
-        isSecondaryDevice,
-      });
-    }
-  }
 }

ts/components/session/LeftPaneMessageSection.tsx

@@ -14,7 +14,7 @@ import { debounce } from 'lodash';
 import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { SearchOptions } from '../../types/Search';
 import { validateNumber } from '../../types/PhoneNumber';
-import { RowRendererParamsType, LeftPane } from '../LeftPane';
+import { LeftPane, RowRendererParamsType } from '../LeftPane';
 
 export interface Props {
   searchTerm: string;
@@ -60,8 +60,8 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
     let conversationList = conversations;
     if (conversationList !== undefined) {
       conversationList = conversationList.filter(
-        conversation => !conversation.isSecondary 
+        conversation =>
-        && !conversation.isPendingFriendRequest
+          !conversation.isSecondary && !conversation.isPendingFriendRequest
       );
     }
 
@@ -145,7 +145,8 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
 
   public renderHeader(): JSX.Element {
     const labels = [window.i18n('messagesHeader')];
-    return LeftPane.renderHeader(
+
+    return LeftPane.RENDER_HEADER(
       labels,
       null,
       window.i18n('compose'),
@@ -158,7 +159,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
       <div>
         {this.renderHeader()}
         {this.state.showComposeView
-          ? LeftPane.renderClosableOverlay(
+          ? LeftPane.RENDER_CLOSABLE_OVERLAY(
               false,
               this.handleOnPasteSessionID,
               this.handleComposeClick,

ts/components/session/LeftPaneSectionHeader.tsx

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