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

components/typography/Text/Text.vue

@@ -1,4 +1,4 @@
-<template src="./Text.html" />
+<template src="./Text.html"></template>
 <script lang="ts">
 import Vue from 'vue'
 

components/views/chat/chatbar/footer/is-connected/Connected.html

@@ -1,12 +1,4 @@
-<div v-if="!typing && onlineParticipants.length > 0" class="is-connected">
-  <circle-icon
-    :class="`status is-${ onlineParticipants.length > 0 ? $t('ui.online') : $t('ui.offline') }`"
-    size="1x"
-  />
-  <TypographyText
-    v-if="onlineParticipants.length > 0"
-    :text="onlineParticipantsText"
-    data-cy="user-connected"
-    :size="6"
-  />
+<div v-if="!typing" class="is-connected">
+  <circle-icon class="status" :class="connectedStatus" size="1x" />
+  <TypographyText :text="participantsText" data-cy="user-connected" :size="6" />
 </div>

components/views/chat/chatbar/footer/is-connected/Connected.less

@@ -6,11 +6,7 @@
   width: fit-content;
   height: 20px;
   margin-left: calc(1.4rem - 4px);
-
   p {
-    &:first-of-type {
-      font-weight: bold;
-    }
     margin-left: 0.4rem;
     margin-bottom: 0;
     line-height: 1.6rem;

components/views/chat/chatbar/footer/is-connected/Connected.vue

@@ -1,10 +1,11 @@
-<template src="./Connected.html" />
+<template src="./Connected.html"></template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import { CircleIcon } from 'satellite-lucide-icons'
-import { Config } from '~/config'
+import { RootState } from '~/types/store/store'
+import { ConversationParticipant } from '~/store/conversation/types'
 
 export default Vue.extend({
   components: {
@@ -18,36 +19,40 @@ 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',
-        )}`
-      }
-      if (this.onlineParticipants.length > 4) {
-        return `${this.onlineParticipants.length} ${this.$t(
-          'ui.participants',
-        )} ${this.$t('ui.are')} ${this.$t('ui.online')}`
-      }
-      if (this.onlineParticipants.length) {
-        return `${this.onlineParticipants.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')}`
+    ...mapState({
+      allFriends: (state) => (state as RootState).friends.all,
+    }),
+    ...mapGetters('conversation', ['otherParticipants', 'onlineParticipants']),
+    /**
+     * @method participantsText
+     * @description builds translated string for online/offline status
+     */
+    participantsText(): string {
+      // if DM with single person
+      if (this.otherParticipants.length === 1) {
+        return this.$tc(
+          this.onlineParticipants.length
+            ? 'ui.online_status'
+            : 'ui.offline_status',
+          1,
+          {
+            name: this.otherParticipants[0].name,
+          },
+        )
       }
-      return `${this.conversation.participants.join(', ')} ${this.$t(
-        'ui.are',
-      )} ${this.$t('ui.offline')}`
+      // if group
+      return this.$tc('ui.online_status', this.onlineParticipants.length, {
+        name: this.onlineParticipants
+          .map((p: ConversationParticipant) => p.name)
+          .join(', '),
+      })
+    },
+    /**
+     * @method connectedStatus
+     * @description sets css class
+     */
+    connectedStatus(): string {
+      return this.onlineParticipants.length ? 'is-online' : 'is-offline'
     },
   },
   watch: {
@@ -57,21 +62,6 @@ export default Vue.extend({
       immediate: true,
     },
   },
-  methods: {
-    /**
-     * @method friendConnected
-     * @description Send the user ID/address in, get a boolean of it the signal is currently open
-     * @param friendId Address of the current user
-     * @example
-     * friendConnected('user1') // true
-     */
-    friendConnected(friendId: string): boolean {
-      return (
-        this.friends.all.find((friend) => friend.address === friendId).state ===
-        'online'
-      )
-    },
-  },
 })
 </script>
 

locales/en-US.js

@@ -37,8 +37,12 @@ export default {
     not_connected: 'not connected',
     online: 'online',
     offline: 'offline',
+    all_offline: 'All Users are Offline',
     participant: 'participant',
     participants: 'participants',
+    online_status:
+      'All Users are Offline | {name} is online | {name} are online',
+    offline_status: '{name} is offline',
   },
   wallet: {
     wallet: 'Wallet',

store/conversation/getters.ts

@@ -0,0 +1,29 @@
+import {
+  ConversationConnection,
+  ConversationParticipant,
+  ConversationState,
+} from './types'
+
+const getters = {
+  /**
+   * @method otherParticipants
+   * @description get participants other than yourself
+   */
+  otherParticipants: (state: ConversationState): ConversationParticipant[] => {
+    return state.participants.filter((participant) => participant.name != null)
+  },
+  /**
+   * @method onlineParticipants
+   * @description array of online participants other than yourself
+   */
+  onlineParticipants: (
+    state: ConversationState,
+    getters: { otherParticipants: ConversationParticipant[] },
+  ): ConversationParticipant[] => {
+    return getters.otherParticipants.filter(
+      (participant) => participant.state === ConversationConnection.CONNECTED,
+    )
+  },
+}
+
+export default getters