fix(friends): online status is hidden if not friend

Satellite-im · Jun 17, 2022 · d1a6c61 · d1a6c61
1 parent aa6764c
commit d1a6c61
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/components/ui/User/State/State.less b/components/ui/User/State/State.less
@@ -10,13 +10,18 @@
     --circle-radius: 10px;
   }
 
+  &.showStatus {
+    .circle {
+      mask: radial-gradient(
+          circle calc(var(--circle-radius) + var(--border-width)) at 86% 86%,
+          #0000 98%,
+          #000
+        )
+        100% 100%/100% 100% no-repeat;
+    }
+  }
+
   .circle {
-    mask: radial-gradient(
-        circle calc(var(--circle-radius) + var(--border-width)) at 86% 86%,
-        #0000 98%,
-        #000
-      )
-      100% 100%/100% 100% no-repeat;
     overflow: hidden;
   }
 

diff --git a/components/ui/User/State/State.vue b/components/ui/User/State/State.vue
@@ -3,7 +3,7 @@
     class="user-state"
     data-cy="user-state"
     :style="`width:${size}px; height:${size}px`"
-    :class="{ 'is-large': size > 36 }"
+    :class="{ 'is-large': size > 36, 'has-status': showStatus }"
   >
     <UiCircle
       data-cy="satellite-circle-profile"
@@ -13,22 +13,25 @@
       :source="src"
       @click="clickHandler"
     />
-    <div
-      v-if="user.state !== 'mobile' && !isTyping"
-      class="status"
-      :class="{ [`is-${user.state}`]: user.state }"
-    />
-    <smartphone-icon
-      v-else-if="user.state === 'mobile'"
-      size="1x"
-      :class="`mobile-status is-${user.state}`"
-    />
-    <UiChatTypingIndicator v-else />
+    <div v-if="showStatus" class="container-status">
+      <div
+        v-if="user.state !== 'mobile' && !isTyping"
+        class="status"
+        :class="{ [`is-${user.state}`]: user.state }"
+      />
+      <smartphone-icon
+        v-else-if="user.state === 'mobile'"
+        size="1x"
+        :class="`mobile-status is-${user.state}`"
+      />
+      <UiChatTypingIndicator v-else />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
+import { mapState, mapGetters } from 'vuex'
 import { SmartphoneIcon } from 'satellite-lucide-icons'
 import { User } from '~/types/ui/user'
 
@@ -58,6 +61,19 @@ export default Vue.extend({
       default: () => {},
     },
   },
+  computed: {
+    ...mapGetters('friends', ['friendExists']),
+    ...mapState(['accounts']),
+    showStatus() {
+      return (
+        this.friendExists(this.$props.user.address) ||
+        this.$props.user.address === this.accounts.active
+      )
+    },
+  },
+  mounted() {
+    console.log(this.showStatus)
+  },
 })
 </script>