feat(friends): display outgoing friend requests after send

components/views/friends/add/Add.vue

@@ -34,6 +34,12 @@ export default Vue.extend({
       return `${location.origin}/#/friends/list/${this.accounts.active}`
     },
   },
+  mounted() {
+    if (this.$route.params && this.$route.params.id) {
+      this.$data.accountID = this.$route.params.id
+      this._searchFriend()
+    }
+  },
   methods: {
     _searchFriend: debounce(async function (this: any) {
       if (this.accountID.length >= 40) {
@@ -95,12 +101,6 @@ export default Vue.extend({
       }
     },
   },
-  mounted() {
-    if (this.$route.params && this.$route.params.id) {
-      this.$data.accountID = this.$route.params.id
-      this._searchFriend()
-    }
-  },
 })
 </script>
 <style scoped lang="less" src="./Add.less"></style>

components/views/friends/friend/Friend.html

@@ -52,6 +52,18 @@
       <check-icon size="1x" />
     </InteractablesButton>
   </div>
+  <div class="controls" v-else-if="outgoing">
+    <InteractablesButton
+      type="danger"
+      size="small"
+      class="has-tooltip has-tooltip-primary has-tooltip-bottom has-tooltip-desktop-only"
+      :data-tooltip="$t('friends.cancel')"
+      :loading="loading === 'options'"
+      :action="cancelRequest"
+    >
+      <x-icon size="1x" />
+    </InteractablesButton>
+  </div>
   <div class="controls" v-else>
     <InteractablesButton
       v-if="loading !== 'options'"

components/views/friends/friend/Friend.vue

@@ -37,7 +37,7 @@ export default Vue.extend({
   props: {
     friend: {
       type: Object as PropType<Friend>,
-      default: () => {},
+      required: true,
     },
     request: {
       type: Boolean,
@@ -51,6 +51,10 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    outgoing: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -117,6 +121,8 @@ export default Vue.extend({
         this.loading = AddFriendEnum.EMPTY
       }
     },
+    // todo - remove friend request for both users on click
+    async cancelRequest() {},
     sendMessageRequest() {
       this.$router.push(`/chat/direct/${this.$props.friend.address}`)
     },

locales/en-US.js

@@ -528,7 +528,8 @@ export default {
     not_found: "Hmm, we couldn't find a user at that address",
     invalid_id: 'Invalid account ID',
     request_sent: 'Friend request successfully sent!',
-    requests: 'Friends request',
+    requests: 'Friend requests',
+    outgoing: 'Outgoing requests',
     blocked: 'Blocked friends',
     search_placeholder: 'Some User...',
     add: 'Add Friend',
@@ -546,6 +547,7 @@ export default {
     send: 'Send',
     message: 'Message',
     options: 'Options',
+    cancel: 'Cancel request',
   },
   market_place: {
     title: 'Marketplace',

pages/friends/list/FriendsList.html

@@ -6,24 +6,47 @@
         <!-- Friends Add -->
         <FriendsAdd />
         <!-- Friend Requests -->
-        <div v-if="friends.incomingRequests.length" class="padded_divider">
-          <TypographyHorizontalRuleText
-            plaintext
-            :value="$t('friends.requests')"
-          />
-        </div>
-        <FriendsFriend
-          v-for="friend in friends.incomingRequests"
-          :friend="{
+        <template v-if="friends.incomingRequests.length">
+          <div class="padded_divider">
+            <TypographyHorizontalRuleText
+              plaintext
+              :value="$t('friends.requests')"
+            />
+          </div>
+          <FriendsFriend
+            v-for="friend in friends.incomingRequests"
+            :friend="{
               name: friend.userInfo.name,
               address: friend.from,
               state: 'offline',
               status: friend.userInfo.status,
               request: friend
             }"
-          :key="friend.from"
-          request
-        />
+            :key="friend.from"
+            request
+          />
+        </template>
+        <!-- Outgoing Requests -->
+        <template v-if="friends.outgoingRequests.length">
+          <div class="padded_divider">
+            <TypographyHorizontalRuleText
+              plaintext
+              :value="$t('friends.outgoing')"
+            />
+          </div>
+          <FriendsFriend
+            v-for="friend in friends.outgoingRequests"
+            :friend="{
+              name: friend.userInfo.name,
+              address: friend.to,
+              state: 'offline',
+              status: friend.userInfo.status,
+              request: friend
+            }"
+            :key="friend.to"
+            outgoing
+          />
+        </template>
       </div>
       <div class="column is-half-desktop">
         <!-- Friends List -->

store/friends/actions.ts

@@ -53,8 +53,11 @@ export default {
       }),
     )
 
-    const outgoingRequests = outgoing.map<OutgoingRequest>((account) =>
-      friendAccountToOutgoingRequest(account),
+    const outgoingRequests = await Promise.all(
+      outgoing.map(async (account) => {
+        const userInfo = await serverProgram.getUser(new PublicKey(account.to))
+        return friendAccountToOutgoingRequest(account, userInfo)
+      }),
     )
 
     commit('setIncomingRequests', incomingRequests)
@@ -130,7 +133,7 @@ export default {
       throw new Error(FriendsError.FRIEND_INFO_NOT_FOUND)
     }
 
-    const friend: Omit<Friend, 'publicKey' | 'typingState'> = {
+    const friend: Omit<Friend, 'publicKey' | 'typingState' | 'lastUpdate'> = {
       account: friendAccount,
       name: rawUser.name,
       profilePicture: rawUser.photoHash,
@@ -161,7 +164,7 @@ export default {
       )
       commit(
         'removeOutgoingRequest',
-        friendAccountToOutgoingRequest(friendAccount).requestId,
+        friendAccountToOutgoingRequest(friendAccount, null).requestId,
       )
       return
     }
@@ -212,7 +215,7 @@ export default {
       if (account) {
         commit(
           'removeOutgoingRequest',
-          friendAccountToOutgoingRequest(account).requestId,
+          friendAccountToOutgoingRequest(account, null).requestId,
         )
       }
     })
@@ -254,6 +257,7 @@ export default {
     const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
     const $Crypto: Crypto = Vue.prototype.$Crypto
     const $TextileManager: TextileManager = Vue.prototype.$TextileManager
+    const serverProgram: ServerProgram = new ServerProgram($SolanaManager)
 
     const textilePublicKey = $TextileManager.getIdentityPublicKey()
 
@@ -342,11 +346,15 @@ export default {
         friendAccountKey,
       )
 
-      if (parsedFriendRequest)
+      if (parsedFriendRequest) {
+        const userInfo = await serverProgram.getUser(
+          new PublicKey(parsedFriendRequest.to),
+        )
         commit(
           'addOutgoingRequest',
-          friendAccountToOutgoingRequest(parsedFriendRequest),
+          friendAccountToOutgoingRequest(parsedFriendRequest, userInfo),
         )
+      }
     }
   },
   /**
@@ -509,7 +517,7 @@ export default {
     if (transactionId) {
       commit(
         'removeOutgoingRequest',
-        friendAccountToOutgoingRequest(account).requestId,
+        friendAccountToOutgoingRequest(account, null).requestId,
       )
     }
   },
@@ -579,11 +587,13 @@ function friendAccountToIncomingRequest(
  */
 function friendAccountToOutgoingRequest(
   friendAccount: FriendAccount,
+  userInfo: RawUser | null,
 ): OutgoingRequest {
   return {
     requestId: friendAccount.accountId,
     to: friendAccount.to,
     account: friendAccount,
     pending: false,
+    userInfo,
   }
 }

types/ui/friends.d.ts

@@ -9,11 +9,11 @@ export interface FriendRequest {
   requestId: string
   account: FriendAccount
   pending: boolean
+  userInfo: RawUser | null
 }
 
 export interface IncomingRequest extends FriendRequest {
   from: string
-  userInfo: RawUser | null
   account: FriendAccount
 }