From 9e6f6d5a019bf8bb7bb54f8d47cf2398e4a29e7d Mon Sep 17 00:00:00 2001
From: Maxim Shishmarev <maxim@loki.network>
Date: Thu, 31 Oct 2019 15:23:08 +1100
Subject: [PATCH] Fix incorrectly showing friend request as pending

---
 _locales/en/messages.json                     |  8 +++++++
 js/views/conversation_view.js                 |  4 ++--
 stylesheets/_modules.scss                     |  5 +++++
 .../conversation/ConversationHeader.tsx       | 21 ++++++++++++++++---
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index ed4b2c5ed..03eb1040a 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2067,5 +2067,13 @@
   "friendsTab": {
     "message": "Friends",
     "description": "friend tab title"
+  },
+  "pending": {
+    "message": "pending",
+    "description": "Indicates that a friend request is pending"
+  },
+  "notFriends": {
+    "message": "not friends",
+    "description": "Indicates that a conversation is not friends with us"
   }
 }
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index cd7d14cf7..4db648d98 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -203,9 +203,9 @@
           profileName: this.model.getProfileName(),
           color: this.model.getColor(),
           avatarPath: this.model.getAvatarPath(),
-
           isVerified: this.model.isVerified(),
-          isKeysPending: !this.model.isFriend(),
+          isFriendRequestPending: this.model.isPendingFriendRequest(),
+          isFriend: this.model.isFriend(),
           isMe: this.model.isMe(),
           isClosable: this.model.isClosable(),
           isBlocked: this.model.isBlocked(),
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 87e8e5e45..9cb7e8b27 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1432,6 +1432,11 @@
   height: 48px;
 }
 
+.module-conversation-header__title-text {
+  color: darkgrey;
+  margin-left: 1em;
+}
+
 .module-conversation-header__title-flex {
   margin-left: auto;
   margin-right: auto;
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index a670bd25f..fc195218e 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -37,7 +37,8 @@ interface Props {
   hasNickname?: boolean;
 
   isBlocked: boolean;
-  isKeysPending: boolean;
+  isFriend: boolean;
+  isFriendRequestPending: boolean;
   isOnline?: boolean;
 
   onSetDisappearingMessages: (seconds: number) => void;
@@ -102,7 +103,9 @@ export class ConversationHeader extends React.Component<Props> {
       phoneNumber,
       i18n,
       profileName,
-      isKeysPending,
+      isFriend,
+      isGroup,
+      isFriendRequestPending,
       isMe,
       name,
     } = this.props;
@@ -115,6 +118,18 @@ export class ConversationHeader extends React.Component<Props> {
       );
     }
 
+    let text = '';
+    if (isFriendRequestPending) {
+      text = `(${i18n('pending')})`;
+    } else if (!isFriend && !isGroup) {
+      text = `(${i18n('notFriends')})`;
+    }
+
+    const textEl =
+      text === '' ? null : (
+        <span className="module-conversation-header__title-text">{text}</span>
+      );
+
     return (
       <div className="module-conversation-header__title">
         <ContactName
@@ -123,7 +138,7 @@ export class ConversationHeader extends React.Component<Props> {
           name={name}
           i18n={i18n}
         />
-        {isKeysPending ? '(pending)' : null}
+        {textEl}
       </div>
     );
   }