From b59f508d3afd77272cc07d398a1a225c130315d8 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Fri, 20 May 2022 16:39:36 +1000
Subject: [PATCH] refactor(chat): replace hounddog calls with store getters

---
 components/views/chat/chatbar/Chatbar.vue            | 3 ++-
 components/views/chat/enhancers/glyphs/item/Item.vue | 7 +++----
 components/views/chat/group/Group.vue                | 5 +++--
 components/views/chat/message/Message.vue            | 9 ++++-----
 components/views/chat/message/reply/Item/Item.vue    | 5 +++--
 pages/chat/direct/_address.vue                       | 7 ++++---
 6 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/components/views/chat/chatbar/Chatbar.vue b/components/views/chat/chatbar/Chatbar.vue
index 56ca87a9a9..08a80c7ab1 100644
--- a/components/views/chat/chatbar/Chatbar.vue
+++ b/components/views/chat/chatbar/Chatbar.vue
@@ -41,6 +41,7 @@ export default Vue.extend({
   },
   computed: {
     ...mapGetters('chat', ['getFiles']),
+    ...mapGetters('friends', ['getActiveFriend']),
     ...mapState(['ui', 'friends', 'webrtc', 'chat', 'textile', 'conversation']),
     activeFriend() {
       return this.conversation?.participants?.[0]
@@ -128,7 +129,7 @@ export default Vue.extend({
   watch: {
     'friends.all': {
       handler() {
-        const activeFriend = this.$Hounddog.getActiveFriend(this.friends)
+        const activeFriend = this.getActiveFriend()
         if (activeFriend)
           this.recipientTyping =
             activeFriend.typingState === PropCommonEnum.TYPING
diff --git a/components/views/chat/enhancers/glyphs/item/Item.vue b/components/views/chat/enhancers/glyphs/item/Item.vue
index 654b13f19b..d790114bc2 100644
--- a/components/views/chat/enhancers/glyphs/item/Item.vue
+++ b/components/views/chat/enhancers/glyphs/item/Item.vue
@@ -1,6 +1,7 @@
 <template src="./Item.html"></template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
+import { mapGetters } from 'vuex'
 import { Glyph } from '~/types/ui/glyph'
 import loadImg from '~/assets/img/glyphLoader.webp'
 
@@ -33,6 +34,7 @@ export default Vue.extend({
     }
   },
   computed: {
+    ...mapGetters('friends', ['findFriendByAddress']),
     getSrc(): string {
       return this.isLoaded ? this.src.replace('$1', 'small') : loadImg
     },
@@ -54,10 +56,7 @@ export default Vue.extend({
     },
     sendGlyph() {
       const { id, address } = this.$route.params
-      const activeFriend = this.$Hounddog.findFriendByAddress(
-        address,
-        this.$store.state.friends,
-      )
+      const activeFriend = this.findFriendByAddress(address)
 
       if (!activeFriend && !id) {
         return
diff --git a/components/views/chat/group/Group.vue b/components/views/chat/group/Group.vue
index 866e29448b..f81024836b 100644
--- a/components/views/chat/group/Group.vue
+++ b/components/views/chat/group/Group.vue
@@ -1,7 +1,7 @@
 <template src="./Group.html"></template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import { Config } from '~/config'
 import { Group } from '~/types/messaging'
 import {
@@ -38,6 +38,7 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['ui', 'friends', 'accounts', 'groups']),
+    ...mapGetters('friends', ['findFriend']),
     address() {
       return (
         this.groupMember?.name ||
@@ -71,7 +72,7 @@ export default Vue.extend({
       }
 
       // Try to find the friend you are talking to
-      const friend = this.$Hounddog.findFriend(this.group.from, this.friends)
+      const friend = this.findFriend(this.group.from)
 
       if (friend?.profilePicture) {
         return `${this.$Config.textile.browser}/ipfs/${friend?.profilePicture}`
diff --git a/components/views/chat/message/Message.vue b/components/views/chat/message/Message.vue
index 4c2d1cf9c1..ce6286ae01 100644
--- a/components/views/chat/message/Message.vue
+++ b/components/views/chat/message/Message.vue
@@ -1,7 +1,7 @@
 <template src="./Message.html"></template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 import { ArchiveIcon } from 'satellite-lucide-icons'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
@@ -63,6 +63,7 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['ui', 'textile', 'accounts']),
+    ...mapGetters('friends', ['findFriendByAddress']),
     hasReactions(): boolean {
       return (
         this.$props.message.reactions && this.$props.message.reactions.length
@@ -305,10 +306,8 @@ export default Vue.extend({
 
       if (message !== this.$props.message.payload) {
         const { address } = this.$route.params
-        const recipient = this.$Hounddog.findFriendByAddress(
-          address,
-          this.$store.state.friends,
-        )
+        const recipient = this.findFriendByAddress(address)
+
         if (!recipient) {
           this.$store.dispatch('textile/editTextMessage', {
             to: this.$store.state.friends.activeConversation.target
diff --git a/components/views/chat/message/reply/Item/Item.vue b/components/views/chat/message/reply/Item/Item.vue
index d4b2c85020..386e962a97 100644
--- a/components/views/chat/message/reply/Item/Item.vue
+++ b/components/views/chat/message/reply/Item/Item.vue
@@ -1,7 +1,7 @@
 <template src="./Item.html"></template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import { UIMessage, Group } from '~/types/messaging'
 import {
   getUsernameFromState,
@@ -35,6 +35,7 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['ui', 'friends', 'accounts']),
+    ...mapGetters('friends', ['findFriend']),
     address() {
       if (!this.reply.from) {
         return ''
@@ -62,7 +63,7 @@ export default Vue.extend({
       }
 
       // Try to find the friend you are talking to
-      const friend = this.$Hounddog.findFriend(this.reply.from, this.friends)
+      const friend = this.findFriend(this.reply.from)
 
       if (friend?.profilePicture) {
         return `${this.$Config.textile.browser}/ipfs/${friend?.profilePicture}`
diff --git a/pages/chat/direct/_address.vue b/pages/chat/direct/_address.vue
index 720fa85fbb..ebbcf2a213 100644
--- a/pages/chat/direct/_address.vue
+++ b/pages/chat/direct/_address.vue
@@ -19,6 +19,7 @@ export default Vue.extend({
       friendsExist: (state) => (state as RootState).friends?.all?.length > 0,
     }),
     ...mapGetters('textile', ['getInitialized']),
+    ...mapGetters('friends', ['findFriendByAddress']),
     groupedMessages() {
       const { address } = this.$route.params
       const conversation = this.$typedStore.state.textile.conversations[address]
@@ -34,7 +35,7 @@ export default Vue.extend({
       const { address } = this.$route.params
       const { friends } = this.$store.state
 
-      return this.$Hounddog?.findFriendByAddress(address, friends)
+      return this.findFriendByAddress(address)
     },
   },
   watch: {
@@ -52,7 +53,7 @@ export default Vue.extend({
           const { address } = this.$route.params
           const { friends } = this.$store.state
 
-          const friend = this.$Hounddog?.findFriendByAddress(address, friends)
+          const friend = this.findFriendByAddress(address)
 
           if (address && friend) {
             this.$store.dispatch('textile/fetchMessages', {
@@ -71,7 +72,7 @@ export default Vue.extend({
           const { address } = this.$route.params
           const { friends } = this.$store.state
 
-          const friend = this.$Hounddog?.findFriendByAddress(address, friends)
+          const friend = this.findFriendByAddress(address)
 
           if (address && friend) return