fix(slimbar): logic to show only friends with unread messages

Satellite-im · Jun 2, 2022 · 4bec4ec · 4bec4ec
1 parent c3a7913
commit 4bec4ec
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 40 deletions.
diff --git a/components/ui/Unread/Unread.vue b/components/ui/Unread/Unread.vue
@@ -4,28 +4,14 @@
 import Vue, { PropType } from 'vue'
 import { User } from '~/types/ui/user'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    testFunc: () => void
-    navigateToUser: () => void
-    handleShowProfile: () => void
-    removeUser: () => void
-  }
-}
+import { ContextMenuItem } from '~/store/ui/types'
 
 export default Vue.extend({
   name: 'Unread',
   mixins: [ContextMenu],
   props: {
     user: {
       type: Object as PropType<User>,
-      default: () => ({
-        name: '',
-        address: '',
-        profilePicture: '',
-        unreadCount: 0,
-      }),
       required: true,
     },
     active: {
@@ -35,13 +21,6 @@ export default Vue.extend({
   },
   data() {
     return {
-      contextMenuValues: [
-        { text: this.$t('context.send'), func: this.navigateToUser },
-        { text: this.$t('context.voice'), func: this.testFunc },
-        { text: this.$t('context.video'), func: this.testFunc },
-        { text: this.$t('context.profile'), func: this.handleShowProfile },
-        { text: this.$t('context.remove'), func: this.removeUser },
-      ],
       isLoading: false,
     }
   },
@@ -50,6 +29,15 @@ export default Vue.extend({
       const hash = this.user?.profilePicture
       return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
     },
+    contextMenuValues(): ContextMenuItem[] {
+      return [
+        { text: this.$t('context.send'), func: this.navigateToUser },
+        { text: this.$t('context.voice'), func: this.testFunc },
+        { text: this.$t('context.video'), func: this.testFunc },
+        { text: this.$t('context.profile'), func: this.handleShowProfile },
+        { text: this.$t('context.remove'), func: this.removeUser },
+      ]
+    },
   },
   methods: {
     testFunc() {
@@ -60,7 +48,7 @@ export default Vue.extend({
       try {
         await this.$store.dispatch('friends/removeFriend', this.user)
       } catch (e) {
-        this.$toast.success(
+        this.$toast.error(
           this.$t('errors.friends.friend_not_removed') as string,
         )
       } finally {

diff --git a/components/views/navigation/sidebar/Sidebar.html b/components/views/navigation/sidebar/Sidebar.html
@@ -63,7 +63,6 @@
     <Slimbar
       v-if="$device.isMobile"
       :servers="$mock.servers"
-      :unreads="users"
       :open-modal="toggleModal"
       horizontal
     />

diff --git a/components/views/navigation/slimbar/Slimbar.html b/components/views/navigation/slimbar/Slimbar.html
@@ -20,8 +20,8 @@
         <UiLoadersSpinner :spinning="true" />
       </div>
       <div id="list-container" v-else>
-        <UiHorizontalRule v-if="unreads.length > 0" />
-        <div class="unreads" v-for="user in unreads">
+        <UiHorizontalRule v-if="friendsWithUnreadMessages.length" />
+        <div class="unreads" v-for="user in friendsWithUnreadMessages">
           <Unread
             :key="user.address"
             :user="user"
@@ -46,7 +46,7 @@
       </div>
     </UiScroll>
     <div id="list-container" v-else>
-      <div class="unreads" v-for="user in unreads">
+      <div class="unreads" v-for="user in friendsWithUnreadMessages">
         <Unread
           :key="user.address"
           :user="user"

diff --git a/components/views/navigation/slimbar/Slimbar.vue b/components/views/navigation/slimbar/Slimbar.vue
@@ -1,14 +1,14 @@
-<template src="./Slimbar.html" />
+<template src="./Slimbar.html"></template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
-import { mapState } from 'vuex'
+import Vue from 'vue'
+import { mapState, mapGetters } from 'vuex'
 import { SettingsIcon, PlusIcon, SatelliteIcon } from 'satellite-lucide-icons'
 import { ModalWindows } from '~/store/ui/types'
-import { User } from '~/types/ui/user'
 import Unread from '~/components/ui/Unread/Unread.vue'
 import { Sounds } from '~/libraries/SoundManager/SoundManager'
 import { DataStateType } from '~/store/dataState/types'
+import { RootState } from '~/types/store/store'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -29,10 +29,6 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
-    unreads: {
-      type: Array as PropType<Array<User>>,
-      default: () => [],
-    },
     servers: {
       type: Array,
       default() {
@@ -49,8 +45,9 @@ export default Vue.extend({
     DataStateType: () => DataStateType,
     ...mapState(['ui']),
     ...mapState({
-      friendsDS: (state) => state.dataState.friends,
+      friendsDS: (state) => (state as RootState).dataState.friends,
     }),
+    ...mapGetters('friends', ['friendsWithUnreadMessages']),
     ModalWindows: () => ModalWindows,
   },
   created() {

diff --git a/layouts/chat.vue b/layouts/chat.vue
@@ -24,7 +24,6 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <MobileSidebar

diff --git a/layouts/files.vue b/layouts/files.vue
@@ -19,7 +19,6 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <MobileSidebar

diff --git a/layouts/friends.vue b/layouts/friends.vue
@@ -22,7 +22,6 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <MobileSidebar

diff --git a/layouts/server.vue b/layouts/server.vue
@@ -19,7 +19,6 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <ServerSidebar

diff --git a/store/friends/getters.ts b/store/friends/getters.ts
@@ -26,6 +26,7 @@ export interface FriendsGetters {
   ): boolean
   alphaSortedFriends(state: FriendsState): Dictionary<Friend[]>
   alphaSortedOutgoing(state: FriendsState): OutgoingRequest[]
+  friendsWithUnreadMessages(state: FriendsState): Friend[]
 }
 
 const getters: GetterTree<FriendsState, RootState> & FriendsGetters = {
@@ -127,6 +128,9 @@ const getters: GetterTree<FriendsState, RootState> & FriendsGetters = {
         (a.userInfo?.name ?? '').localeCompare(b.userInfo?.name ?? ''),
     )
   },
+  friendsWithUnreadMessages: (state: FriendsState): Friend[] => {
+    return state.all.filter((friend) => friend.unreadCount)
+  },
 }
 
 export default getters