refactor(friends): move sort methods into getters (#3245)

Satellite-im · May 20, 2022 · 8c4bc3f · 8c4bc3f
1 parent e092694
commit 8c4bc3f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 43 deletions.
diff --git a/pages/friends/list/index.vue b/pages/friends/list/index.vue
@@ -2,13 +2,9 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
-import { cloneDeep } from 'lodash'
+import { mapState, mapGetters } from 'vuex'
 import { DataStateType } from '~/store/dataState/types'
 
-import { getAlphaSorted } from '~/libraries/ui/Friends'
-import { OutgoingRequest } from '~/types/ui/friends'
-
 type Route = 'active' | 'requests' | 'blocked' | 'add'
 declare module 'vue/types/vue' {
   interface Vue {
@@ -28,15 +24,7 @@ export default Vue.extend({
   computed: {
     DataStateType: () => DataStateType,
     ...mapState(['friends', 'dataState']),
-    alphaSortedFriends() {
-      return getAlphaSorted(this.friends.all)
-    },
-    alphaSortedOutgoing() {
-      return cloneDeep(this.friends.outgoingRequests).sort(
-        (a: OutgoingRequest, b: OutgoingRequest) =>
-          a.userInfo?.name.localeCompare(b.userInfo?.name),
-      )
-    },
+    ...mapGetters('friends', ['alphaSortedFriends', 'alphaSortedOutgoing']),
   },
   watch: {
     '$route.query'() {

diff --git a/pages/friends/mobile/add/index.vue b/pages/friends/mobile/add/index.vue
@@ -22,14 +22,10 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
-import { cloneDeep } from 'lodash'
+import { mapState, mapGetters } from 'vuex'
 import { ArrowLeftIcon } from 'satellite-lucide-icons'
 import { DataStateType } from '~/store/dataState/types'
 
-import { getAlphaSorted } from '~/libraries/ui/Friends'
-import { OutgoingRequest } from '~/types/ui/friends'
-
 type Route = 'active' | 'requests' | 'blocked' | 'add'
 declare module 'vue/types/vue' {
   interface Vue {
@@ -51,15 +47,7 @@ export default Vue.extend({
   computed: {
     DataStateType: () => DataStateType,
     ...mapState(['friends', 'dataState']),
-    alphaSortedFriends() {
-      return getAlphaSorted(this.friends.all)
-    },
-    alphaSortedOutgoing() {
-      return cloneDeep(this.friends.outgoingRequests).sort(
-        (a: OutgoingRequest, b: OutgoingRequest) =>
-          a.userInfo.name.localeCompare(b.userInfo.name),
-      )
-    },
+    ...mapGetters('friends', ['alphaSortedFriends', 'alphaSortedOutgoing']),
   },
   watch: {
     '$route.query'() {

diff --git a/pages/friends/mobile/block/index.vue b/pages/friends/mobile/block/index.vue
@@ -29,14 +29,10 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
-import { cloneDeep } from 'lodash'
+import { mapState, mapGetters } from 'vuex'
 import { ArrowLeftIcon } from 'satellite-lucide-icons'
 import { DataStateType } from '~/store/dataState/types'
 
-import { getAlphaSorted } from '~/libraries/ui/Friends'
-import { OutgoingRequest } from '~/types/ui/friends'
-
 declare module 'vue/types/vue' {
   interface Vue {
     friends: any
@@ -57,15 +53,7 @@ export default Vue.extend({
   computed: {
     DataStateType: () => DataStateType,
     ...mapState(['friends', 'dataState']),
-    alphaSortedFriends() {
-      return getAlphaSorted(this.friends.all)
-    },
-    alphaSortedOutgoing() {
-      return cloneDeep(this.friends.outgoingRequests).sort(
-        (a: OutgoingRequest, b: OutgoingRequest) =>
-          a.userInfo.name.localeCompare(b.userInfo.name),
-      )
-    },
+    ...mapGetters('friends', ['alphaSortedFriends', 'alphaSortedOutgoing']),
   },
   methods: {
     /**

diff --git a/store/friends/getters.ts b/store/friends/getters.ts
@@ -1,6 +1,8 @@
+import { cloneDeep, Dictionary } from 'lodash'
 import { FriendsState } from './types'
-import { Friend } from '~/types/ui/friends'
+import { Friend, OutgoingRequest } from '~/types/ui/friends'
 import { RootState } from '~/types/store/store'
+import { getAlphaSorted } from '~/libraries/ui/Friends'
 
 const getters = {
   /**
@@ -91,6 +93,27 @@ const getters = {
         friend.address === rootState.webrtc.activeCall?.peerId,
     )
   },
+
+  /**
+   * @name alphaSortedFriends
+   * @description Get friends sorted by alpha
+   * @returns dictionary of Friends
+   */
+  alphaSortedFriends: (state: FriendsState): Dictionary<Friend[]> => {
+    return getAlphaSorted(state.all)
+  },
+
+  /**
+   * @name alphaSortedOutgoing
+   * @description Get outgoing requests sorted by alpha
+   * @returns dictionary of Friends
+   */
+  alphaSortedOutgoing: (state: FriendsState): OutgoingRequest[] => {
+    return cloneDeep(state.outgoingRequests).sort(
+      (a: OutgoingRequest, b: OutgoingRequest) =>
+        (a.userInfo?.name ?? '').localeCompare(b.userInfo?.name ?? ''),
+    )
+  },
 }
 
 export default getters