fix(footer): adds offline text if user is offline in footer

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

Hide file tree

Showing 3 changed files with 50 additions and 29 deletions.
diff --git a/components/views/chat/chatbar/footer/is-connected/Connected.html b/components/views/chat/chatbar/footer/is-connected/Connected.html
@@ -1,11 +1,11 @@
-<div v-if="!typing && onlineParticipants.length > 0" class="is-connected">
+<div v-if="!typing" class="is-connected">
   <circle-icon
-    :class="`status is-${ onlineParticipants.length > 0 ? $t('ui.online') : $t('ui.offline') }`"
+    :class="`status is-${ participantStatus.CONNECTED.length > 0 ? $t('ui.online') : $t('ui.offline') }`"
     size="1x"
   />
   <TypographyText
-    v-if="onlineParticipants.length > 0"
-    :text="onlineParticipantsText"
+    v-if="participantStatus.PARTICIPANTS.length > 0"
+    :text="participantsText"
     data-cy="user-connected"
     :size="6"
   />

diff --git a/components/views/chat/chatbar/footer/is-connected/Connected.vue b/components/views/chat/chatbar/footer/is-connected/Connected.vue
@@ -5,6 +5,7 @@ import Vue from 'vue'
 import { mapState } from 'vuex'
 import { CircleIcon } from 'satellite-lucide-icons'
 import { Config } from '~/config'
+import { ConversationConnection } from '~/store/conversation/types.ts'
 
 export default Vue.extend({
   components: {
@@ -18,36 +19,55 @@ export default Vue.extend({
     },
   },
   computed: {
-    ...mapState(['ui', 'webrtc', 'friends', 'conversation']),
-    onlineParticipants() {
-      return this.conversation.participants
-        .filter((participant) => participant.state === 'CONNECTED')
-        .map((participant) => participant.name)
-    },
-    onlineParticipantsText() {
-      if (this.onlineParticipants.length === 1) {
-        return `${this.onlineParticipants[0]} ${this.$t('ui.is')} ${this.$t(
-          'ui.online',
-        )}`
+    ...mapState(['friends', 'conversation']),
+    /**
+     * @method participantStatus
+     * @description Get an object that has all participants, connected, and disconnected
+     */
+    participantStatus(): object {
+      return {
+        PARTICIPANTS: this.conversation.participants.map((participant) => {
+          return participant.name
+        }),
+        CONNECTED: this.conversation.participants
+          .filter(
+            (participant) =>
+              participant.state === ConversationConnection.CONNECTED,
+          )
+          .map((participant) => {
+            return participant.name
+          }),
+        DISCONNECTED: this.conversation.participants
+          .filter(
+            (participant) =>
+              participant.state === ConversationConnection.DISCONNECTED,
+          )
+          .map((participant) => {
+            return participant.name
+          }),
       }
-      if (this.onlineParticipants.length > 4) {
-        return `${this.onlineParticipants.length} ${this.$t(
-          'ui.participants',
-        )} ${this.$t('ui.are')} ${this.$t('ui.online')}`
+    },
+    /**
+     * @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')
+        }`
       }
-      if (this.onlineParticipants.length) {
-        return `${this.onlineParticipants.join(', ')} ${this.$t(
+      if (
+        this.participantStatus.PARTICIPANTS.length > 1 &&
+        this.participantStatus.CONNECTED.length > 0
+      ) {
+        return `${this.participantStatus.CONNECTED.join(', ')} ${this.$t(
           'ui.are',
         )} ${this.$t('ui.online')}`
       }
-      if (this.conversation.participants.length === 1) {
-        return `${this.conversation.participants[0]} ${this.$t(
-          'ui.is',
-        )} ${this.$t('ui.offline')}`
-      }
-      return `${this.conversation.participants.join(', ')} ${this.$t(
-        'ui.are',
-      )} ${this.$t('ui.offline')}`
+      return this.$t('ui.all_offline')
     },
   },
   watch: {

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -36,6 +36,7 @@ export default {
     not_connected: 'not connected',
     online: 'online',
     offline: 'offline',
+    all_offline: 'All Users are Offline',
     participant: 'participant',
     participants: 'participants',
   },