chore: code refactor

Satellite-im · Jun 22, 2022 · 9acd1ef · 9acd1ef
1 parent 2d6626a
commit 9acd1ef
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 40 deletions.
diff --git a/components/ui/User/State/State.less b/components/ui/User/State/State.less
@@ -10,18 +10,13 @@
     --circle-radius: 10px;
   }
 
-  &.has-status {
-    .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, 'has-status': showStatus }"
+    :class="{ 'is-large': size > 36 }"
   >
     <UiCircle
       data-cy="satellite-circle-profile"
@@ -13,25 +13,23 @@
       :source="src"
       @click="clickHandler"
     />
-    <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
+      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>
 </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'
 
@@ -61,19 +59,6 @@ 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>
 

diff --git a/components/views/friends/friend/Friend.html b/components/views/friends/friend/Friend.html
@@ -1,5 +1,11 @@
 <div class="friend" data-cy="friend">
-  <UiUserState :user="friend" :src="src" />
+  <UiUserState v-if="showStatus" :user="friend" :src="src" />
+  <UiCircle
+    v-else
+    :type="src ? 'image' : 'random'"
+    :seed="friend.address"
+    :source="src"
+  />
   <div class="description">
     <TypographySubtitle :size="6" :text="friend.name" data-cy="friend-name" />
     <TypographyText :text="friend.status" />

diff --git a/components/views/friends/friend/Friend.vue b/components/views/friends/friend/Friend.vue
@@ -10,6 +10,8 @@ import {
   CircleIcon,
   SmartphoneIcon,
 } from 'satellite-lucide-icons'
+import { mapState, mapGetters } from 'vuex'
+
 import { ContextMenuItem } from '~/store/ui/types'
 import { Friend } from '~/types/ui/friends'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
@@ -55,6 +57,8 @@ export default Vue.extend({
     }
   },
   computed: {
+    ...mapGetters('friends', ['friendExists']),
+    ...mapState(['accounts']),
     src(): string {
       const hash =
         this.friend?.photoHash ||
@@ -65,6 +69,12 @@ export default Vue.extend({
     contextMenuValues(): ContextMenuItem[] {
       return [{ text: this.$t('context.remove'), func: this.removeFriend }]
     },
+    showStatus(): boolean {
+      return (
+        this.friendExists(this.$props.friend.address) ||
+        this.$props.friend.address === this.accounts.active
+      )
+    },
   },
   beforeDestroy() {
     this.$store.commit('ui/toggleContextMenu', false)