Fixed up friend request message display

_locales/en/messages.json

@@ -1577,5 +1577,38 @@
         "example": "Alice, Bob"
       }
     }
+  },
+  "friendRequestPending": {
+    "message": "$name$ sent you a friend request",
+    "description":
+      "Shown in the conversation history when the user recieves a friend request",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Bob"
+      }
+    }
+  },
+  "friendRequestAccepted": {
+    "message": "You accepted $name$'s friend request",
+    "description":
+      "Shown in the conversation history when the user accepts a friend request",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Bob"
+      }
+    }
+  },
+  "friendRequestDeclined": {
+    "message": "You declined $name$'s friend request",
+    "description":
+      "Shown in the conversation history when the user declines a friend request",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Bob"
+      }
+    }
   }
 }

js/models/conversations.js

@@ -567,7 +567,7 @@
     },
     // This will add a message which will allow the user to reply to a friend request
     // TODO: Maybe add callbacks for accept and decline?
-    async addFriendRequest() {
+    async addFriendRequest(body, type = 'incoming') {
       if (this.isMe()) {
         window.log.info(
           'refusing to send friend request to ourselves'
@@ -591,10 +591,11 @@
         sent_at: lastMessage,
         received_at: timestamp,
         unread: 1,
-        source: this.id,
+        from: this.id,
-        target: this.ourNumber,
+        to: this.ourNumber,
         status: 'pending',
-        type: 'incoming',
+        requestType: type,
+        body,
       };
 
       const id = await window.Signal.Data.saveMessage(message, {

js/models/messages.js

@@ -296,16 +296,35 @@
       return {};
     },
     getPropsForFriendRequest() {
-      const source = this.get('source');
+      const source = this.get('from');
-      const target = this.get('target');
+      const target = this.get('to');
       const status = this.get('status') || 'pending';
       const type = this.get('requestType') || 'incoming';
 
+      //TODO: Not sure how we go about confirming and deleting message on server side
+      // I.e do we send a network request from the model? or call a function in the conversation to send the new status
+      const onAccept = async () => {
+        this.set({ status: 'accepted' });
+        await window.Signal.Data.saveMessage(this.attributes, {
+          Message: Whisper.Message,
+        });
+      };
+
+      const onDecline = async () => {
+        this.set({ status: 'declined' });
+        await window.Signal.Data.saveMessage(this.attributes, {
+          Message: Whisper.Message,
+        });
+      };
+
       return {
+        text: this.createNonBreakingLastSeparator(this.get('body')),
         source: this.findAndFormatContact(source),
         target: this.findAndFormatContact(target),
         status,
         type,
+        onAccept,
+        onDecline,
       }
     },
     findContact(phoneNumber) {

stylesheets/_modules.scss

@@ -1023,6 +1023,35 @@
   color: $color-white-07;
 }
 
+// Module: Friend Request
+.module-friend-request__buttonContainer {
+  margin-top: 8px;
+  justify-content: space-around;
+  border-top: 1px solid $color-white-07;
+  padding-top: 4px;
+}
+
+.module-friend-request__buttonContainer button {
+  flex: 0.5;
+  padding: 8px;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  outline:none;
+  color: $color-white;
+}
+
+.module-friend-request__buttonContainer button:first-of-type {
+  border-right: 1px solid $color-white-07;
+}
+
+.module-friend-request__text {
+  padding-top: 6px;
+  padding-bottom: 4px;
+  color: $color-white-08;
+}
+
+
 // Module: Contact Detail
 
 .module-contact-detail {

ts/components/conversation/FriendRequest.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
 import { Localizer } from '../../types/Util';
+import { MessageBody } from './MessageBody';
 
 interface Contact {
   phoneNumber: string;
@@ -12,61 +13,95 @@ interface Contact {
 }
 
 interface Props {
+  text?: string;
   type: 'incoming' | 'outgoing';
   source: Contact;
   target: Contact;
   i18n: Localizer;
   status: 'pending' | 'accepted' | 'declined';
+  onAccept: () => void;
+  onDecline: () => void;
 }
 
 export class FriendRequest extends React.Component<Props> {
   public getStringId() {
     const { status } = this.props;
 
-    return 'youMarkedAsNotVerified';
-
     switch (status) {
       case 'pending':
         return 'friendRequestPending';
       case 'accepted':
         return 'friendRequestAccepted';
       case 'declined':
-        return 'friendRequestDeclined'
+        return 'friendRequestDeclined';
       default:
-        // throw missingCaseError(status);
+        throw new Error(`Invalid friend request status: ${status}`);
     }
   }
 
+  public renderText() {
+    const { text, i18n } = this.props;
+
+    if (!text) {
+      return null;
+    }
+
+    return (
+      <div
+        dir="auto"
+        className='module-message__text module-friend-request__text'
+      >
+        <MessageBody text={text || ''} i18n={i18n} />
+      </div>
+    );
+  }
+
+
   public renderContents() {
     const { source, i18n } = this.props;
     const id = this.getStringId();
 
     return (
-      <Intl
+      <div>
-        id={id}
+        <Intl
-        components={[
+            id={id}
-          <ContactName
+            components={[
+            <ContactName
+                i18n={i18n}
+                key="external-1"
+                name={source.name}
+                profileName={source.profileName}
+                phoneNumber={source.phoneNumber}
+                module="module-friend-request__contact"
+            />,
+            ]}
             i18n={i18n}
-            key="external-1"
+        />
-            name={source.name}
+        {this.renderText()}
-            profileName={source.profileName}
+      </div>
-            phoneNumber={source.phoneNumber}
+      
-            module="module-friend-request__contact"
-          />,
-        ]}
-        i18n={i18n}
-      />
     );
   }
 
+  public renderButtons() {
+      const { onAccept, onDecline } = this.props;
+      return (
+          <div className="module-message__metadata module-friend-request__buttonContainer">
+            <button onClick={onAccept}>Accept</button>
+            <button onClick={onDecline}>Decline</button>
+          </div>
+      )
+  }
+
   public render() {
-    const { type } = this.props;
+    const { type, status} = this.props;
 
     return (
       <div className={`module-message module-message--${type}`}>
         <div className={`module-message__container module-message__container--${type}`}>
             <div className={`module-message__text module-message__text--${type}`}>
                 {this.renderContents()}
+                {(status === 'pending') && this.renderButtons()}
             </div>
         </div>
       </div>