chore(userstatus): fixed user state display while changing conversation

Satellite-im · May 17, 2022 · f39a0e0 · f39a0e0
1 parent a228fcd
commit f39a0e0
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 16 deletions.
diff --git a/components/ui/Unread/Unread.vue b/components/ui/Unread/Unread.vue
@@ -71,12 +71,18 @@ export default Vue.extend({
       this.$store.dispatch('ui/showProfile', this.user)
     },
     navigateToUser() {
-      if (
-        this.$route.params.address === this.user.address &&
-        this.$device.isMobile
-      ) {
-        this.$store.commit('ui/showSidebar', false)
+      if (this.$route.params.address === this.user.address) {
+        if (this.$device.isMobile) {
+          this.$store.commit('ui/showSidebar', false)
+        }
+        return
       }
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.user.address,
+        type: 'friend',
+        participants: [this.user],
+        calling: false,
+      })
       this.$router.push(`/chat/direct/${this.user.address}`)
     },
   },

diff --git a/components/views/chat/chatbar/footer/is-connected/Connected.vue b/components/views/chat/chatbar/footer/is-connected/Connected.vue
@@ -18,7 +18,7 @@ export default Vue.extend({
     },
   },
   computed: {
-    ...mapState(['ui', 'webrtc', 'friends', 'conversation']),
+    ...mapState(['friends', 'conversation']),
     onlineParticipants() {
       return this.conversation.participants
         .filter((participant) => participant.state === 'CONNECTED')
@@ -50,13 +50,6 @@ export default Vue.extend({
       )} ${this.$t('ui.offline')}`
     },
   },
-  watch: {
-    'conversation.participants': {
-      handler() {},
-      deep: true,
-      immediate: true,
-    },
-  },
   methods: {
     /**
      * @method friendConnected

diff --git a/components/views/group/clickable/Clickable.html b/components/views/group/clickable/Clickable.html
@@ -1,5 +1,6 @@
 <div
   class="group"
+  v-bind:class="{ 'is-selected' : isSelected}"
   @contextmenu="contextMenu"
   v-on:click="navigateToGroup(group.id)"
 >

diff --git a/components/views/group/clickable/Clickable.less b/components/views/group/clickable/Clickable.less
@@ -1,4 +1,8 @@
 .group {
+  &.is-selected {
+    &:extend(.background-semitransparent-lighter);
+  }
+
   .status {
     path {
       stroke: @midground;

diff --git a/components/views/group/clickable/Clickable.vue b/components/views/group/clickable/Clickable.vue
@@ -4,7 +4,6 @@
 import Vue, { PropType } from 'vue'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
 import { Group } from '~/store/groups/types'
-import { Message } from '~/types/textile/mailbox'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -23,6 +22,11 @@ export default Vue.extend({
       }),
       required: true,
     },
+    isSelected: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   data() {
     return {
@@ -46,6 +50,12 @@ export default Vue.extend({
      */
     navigateToGroup(address: string) {
       this.$router.push(`/chat/groups/${address}`)
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.group.id,
+        type: 'group',
+        calling: false,
+        participants: this.group.members,
+      })
     },
   },
 })

diff --git a/components/views/navigation/sidebar/Sidebar.html b/components/views/navigation/sidebar/Sidebar.html
@@ -111,7 +111,12 @@
               :isTyping="ui.isTyping.address === thing.address"
               :isSelected="thing.address === $route.params.address"
             />
-            <GroupClickable v-else :group="thing" :key="thing.id" />
+            <GroupClickable
+              v-else
+              :group="thing"
+              :key="thing.id"
+              :isSelected="thing.id === $route.params.id"
+            />
           </div>
         </div>
         <div

diff --git a/components/views/user/User.vue b/components/views/user/User.vue
@@ -153,12 +153,20 @@ export default Vue.extend({
      * @example ---
      */
     navigateToUser() {
+      if (this.$route.params.address === this.user.address) {
+        return
+      }
       if (this.$device.isMobile) {
         // mobile, show slide 1 which is chat slide, set showSidebar flag false as css related
         this.$store.commit('ui/setSwiperSlideIndex', 1)
         this.$store.commit('ui/showSidebar', false)
       }
-
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.user.address,
+        type: 'friend',
+        participants: [this.user],
+        calling: false,
+      })
       this.$router.push(`/chat/direct/${this.user.address}`)
     },
     async handleShowProfile() {