updating structure to fix bold/not bold items

Satellite-im · May 16, 2022 · 0cbd33b · 0cbd33b
1 parent 4166e71
commit 0cbd33b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/components/views/chat/chatbar/footer/is-connected/Connected.html b/components/views/chat/chatbar/footer/is-connected/Connected.html
@@ -4,8 +4,13 @@
     size="1x"
   />
   <TypographyText
-    v-if="participantStatus.PARTICIPANTS.length > 0"
-    :text="participantsText"
+    :text="participantsText.names"
+    data-cy="user-connected"
+    :size="6"
+    class="bolded"
+  />
+  <TypographyText
+    :text="participantsText.description"
     data-cy="user-connected"
     :size="6"
   />

diff --git a/components/views/chat/chatbar/footer/is-connected/Connected.less b/components/views/chat/chatbar/footer/is-connected/Connected.less
@@ -6,11 +6,10 @@
   width: fit-content;
   height: 20px;
   margin-left: calc(1.4rem - 4px);
-
+  .bolded {
+    font-weight: bold;
+  }
   p {
-    &:first-of-type {
-      font-weight: bold;
-    }
     margin-left: 0.4rem;
     margin-bottom: 0;
     line-height: 1.6rem;

diff --git a/components/views/chat/chatbar/footer/is-connected/Connected.vue b/components/views/chat/chatbar/footer/is-connected/Connected.vue
@@ -22,25 +22,29 @@ export default Vue.extend({
     ...mapState(['friends', 'conversation']),
     /**
      * @method participantStatus
-     * @description Get an object that has all participants, connected, and disconnected
+     * @description Get an object that has all participants, connected, and disconnected. The filtering !== null filters out your own username
      */
     participantStatus(): object {
       return {
-        PARTICIPANTS: this.conversation.participants.map((participant) => {
-          return participant.name
-        }),
+        PARTICIPANTS: this.conversation.participants
+          .filter((participant) => participant.name != null)
+          .map((participant) => {
+            return participant.name
+          }),
         CONNECTED: this.conversation.participants
           .filter(
             (participant) =>
-              participant.state === ConversationConnection.CONNECTED,
+              participant.state === ConversationConnection.CONNECTED &&
+              participant.name != null,
           )
           .map((participant) => {
             return participant.name
           }),
         DISCONNECTED: this.conversation.participants
           .filter(
             (participant) =>
-              participant.state === ConversationConnection.DISCONNECTED,
+              participant.state === ConversationConnection.DISCONNECTED &&
+              participant.name != null,
           )
           .map((participant) => {
             return participant.name
@@ -51,23 +55,32 @@ export default Vue.extend({
      * @method participantsText
      * @description three possible strings returned, one for single user, one for multiple users, or no participants (used only for groups)
      */
-    participantsText(): string {
-      if (this.participantStatus.PARTICIPANTS.length === 1) {
-        return `${this.participantStatus.PARTICIPANTS[0]} ${this.$t('ui.is')} ${
-          this.participantStatus.CONNECTED.length
-            ? this.$t('ui.online')
-            : this.$t('ui.offline')
-        }`
+    participantsText(): object {
+      // if there is only one participant (DM) OR there is only one connected user (1 of group chat), use singular
+      if (
+        this.participantStatus.PARTICIPANTS.length === 1 ||
+        this.participantStatus.CONNECTED.length === 1
+      ) {
+        return {
+          names: this.participantStatus.PARTICIPANTS[0],
+          description: `${this.$t('ui.is')} ${
+            this.participantStatus.CONNECTED.length
+              ? this.$t('ui.online')
+              : this.$t('ui.offline')
+          }`,
+        }
       }
+      // if there are multiple connected (2+ group) user plural
       if (
         this.participantStatus.PARTICIPANTS.length > 1 &&
-        this.participantStatus.CONNECTED.length > 0
+        this.participantStatus.CONNECTED.length > 1
       ) {
-        return `${this.participantStatus.CONNECTED.join(', ')} ${this.$t(
-          'ui.are',
-        )} ${this.$t('ui.online')}`
+        return {
+          names: this.participantStatus.CONNECTED.join(', '),
+          description: `${this.$t('ui.are')} ${this.$t('ui.online')}`,
+        }
       }
-      return this.$t('ui.all_offline')
+      return { names: null, description: this.$t('ui.all_offline') }
     },
   },
   watch: {