refactor(conversation): improve hooks to avoid repeated logic (#4779)

components/compositions/conversations.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef } from 'vue'
+import { computed, ComputedRef, reactive } from 'vue'
 import { Conversation } from '~/libraries/Iridium/chat/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import { User } from '~/libraries/Iridium/users/types'
@@ -7,12 +7,22 @@ import { TrackKind } from '~/libraries/WebRTC/types'
 export function conversationHooks() {
   // @ts-ignore
   const $nuxt = useNuxtApp()
-  const conversationId: ComputedRef<string> = computed(() => {
+
+  const managers = reactive({
+    chat: iridium.chat,
+    users: iridium.users,
+  })
+
+  // todo - refactor so a conversationId param can be passed in rather than relying on route every time
+  const conversationId: ComputedRef<string | undefined> = computed(() => {
     return $nuxt.$route.params.id
   })
 
   const conversation: ComputedRef<Conversation | undefined> = computed(() => {
-    return iridium.chat.state.conversations[conversationId.value]
+    if (!conversationId.value) {
+      return
+    }
+    return managers.chat.state.conversations[conversationId.value]
   })
 
   const isGroup: ComputedRef<boolean> = computed(() => {
@@ -27,26 +37,51 @@ export function conversationHooks() {
     )
   })
 
+  const otherParticipants: ComputedRef<(User | undefined)[]> = computed(() => {
+    return otherDids.value.map((did) => managers.users.getUser(did))
+  })
+
+  const otherTypingParticipants: ComputedRef<(User | undefined)[]> = computed(
+    () => {
+      if (!conversationId.value) {
+        return []
+      }
+      return (
+        managers.chat.ephemeral.typing[conversationId.value]?.map((did) =>
+          managers.users.getUser(did),
+        ) ?? []
+      )
+    },
+  )
+
+  const allParticipantsAlphaSorted: ComputedRef<(User | undefined)[]> =
+    computed(() => {
+      if (!conversation.value) {
+        return []
+      }
+      const arr = conversation.value.participants.map((p) =>
+        managers.users.getUser(p),
+      ) as User[]
+      return arr.sort((a, b) => a.name.localeCompare(b.name))
+    })
+
   const enableRTC: ComputedRef<boolean> = computed(() => {
     return Boolean(
       otherDids.value?.filter(
-        (did) => iridium.users.ephemeral.status[did] === 'online',
+        (did) => managers.users.ephemeral.status[did] === 'online',
       ).length,
     )
   })
 
-  // for a DM
-  const userDetails: ComputedRef<User> = computed(() => {
-    return iridium.users.state[otherDids.value[0]]
-  })
-
   return {
     conversation,
     conversationId,
     isGroup,
     otherDids,
+    otherParticipants,
+    otherTypingParticipants,
+    allParticipantsAlphaSorted,
     enableRTC,
-    userDetails,
   }
 }
 
@@ -61,7 +96,7 @@ export async function call({
 }) {
   // @ts-ignore
   const $nuxt = useNuxtApp()
-  const { enableRTC, otherDids } = conversationHooks()
+  const { enableRTC } = conversationHooks()
 
   if (!enableRTC.value) {
     return

components/views/chat/UserList.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="user-list hover-scroll">
     <TypographyText>
-      {{ $t('pages.chat.members', { count: userDetails.length }) }}
+      {{
+        $t('pages.chat.members', { count: allParticipantsAlphaSorted.length })
+      }}
     </TypographyText>
-    <div v-for="user in userDetails" :key="user.did" class="user">
+    <div
+      v-for="user in allParticipantsAlphaSorted"
+      :key="user.did"
+      class="user"
+    >
       <UiUserState :user="user" :conversation-id="conversationId" />
       <TypographyText class="ellipsis">
         {{ user.name }}
@@ -13,30 +19,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, ComputedRef, reactive } from 'vue'
-import iridium from '~/libraries/Iridium/IridiumManager'
+import Vue from 'vue'
 import { conversationHooks } from '~/components/compositions/conversations'
-import { User } from '~/libraries/Iridium/users/types'
 
 export default Vue.extend({
   setup() {
-    const { conversation, conversationId } = conversationHooks()
+    const { conversationId, allParticipantsAlphaSorted } = conversationHooks()
 
-    const state = reactive({
-      users: iridium.users,
-    })
-
-    const userDetails: ComputedRef<User[]> = computed(() => {
-      if (!conversation.value) {
-        return []
-      }
-      const arr = conversation.value.participants.map((p) =>
-        state.users.getUser(p),
-      ) as User[]
-      return arr.sort((a, b) => a.name.localeCompare(b.name))
-    })
-
-    return { conversation, conversationId, userDetails }
+    return { conversationId, allParticipantsAlphaSorted }
   },
 })
 </script>

components/views/chat/chatbar/Chatbar.html

@@ -31,12 +31,12 @@
     />
   </div>
   <TypographyText
+    v-if="activeUpload"
     class="no-select"
     size="sm"
-    :color="'danger'"
-    v-if="activeUpload"
+    color="danger"
   >
     {{ $t('global.active_upload') }}
   </TypographyText>
-  <ChatbarFooter v-else :charlimit="charlimit" />
+  <!-- <ChatbarFooter v-else :charlimit="charlimit" /> -->
 </div>

components/views/navigation/mobile/toolbar/Toolbar.html

@@ -20,8 +20,8 @@
   >
     <video-icon size="1.4x" />
   </button>
-  <template v-if="userDetails">
-    <UiUserState v-if="!isGroup" :user="userDetails" />
+  <template v-if="otherParticipants.length">
+    <UiUserState v-if="!isGroup" :user="otherParticipants[0]" />
     <UiGroupIcon v-else :members="conversation?.participants" />
   </template>
 </div>

components/views/navigation/mobile/toolbar/Toolbar.vue

@@ -29,12 +29,12 @@ export default Vue.extend({
       conversationId,
       isGroup,
       otherDids,
+      otherParticipants,
       enableRTC,
-      userDetails,
     } = conversationHooks()
 
     async function handleCall() {
-      if (isGroup.value || !enableRTC.value) {
+      if (isGroup.value || !enableRTC.value || !conversationId.value) {
         return
       }
       await call({
@@ -47,9 +47,8 @@ export default Vue.extend({
     return {
       conversation,
       isGroup,
-      otherDids,
       enableRTC,
-      userDetails,
+      otherParticipants,
       handleCall,
     }
   },

components/views/navigation/toolbar/Toolbar.html

@@ -1,7 +1,7 @@
 <div class="toolbar">
   <InteractablesSidebarToggle v-if="!ui.showSidebar" />
   <div class="circle-container">
-    <UiUserState v-if="!isGroup" class="circle" :user="userDetails" />
+    <UiUserState v-if="!isGroup" class="circle" :user="otherParticipants[0]" />
     <UiGroupIcon v-else :members="conversation.participants" />
   </div>
   <div class="user-info">

components/views/navigation/toolbar/Toolbar.vue

@@ -21,7 +21,6 @@ import {
   conversationHooks,
   call,
 } from '~/components/compositions/conversations'
-import { User } from '~/libraries/Iridium/users/types'
 
 export default Vue.extend({
   components: {
@@ -46,8 +45,8 @@ export default Vue.extend({
       conversationId,
       isGroup,
       otherDids,
+      otherParticipants,
       enableRTC,
-      userDetails,
     } = conversationHooks()
 
     const subtitleText: ComputedRef<string | undefined> = computed(() => {
@@ -68,7 +67,7 @@ export default Vue.extend({
     })
 
     async function handleCall() {
-      if (isGroup.value || !enableRTC.value) {
+      if (isGroup.value || !enableRTC.value || !conversationId.value) {
         return
       }
       await call({
@@ -81,12 +80,11 @@ export default Vue.extend({
     return {
       conversation,
       isGroup,
-      otherDids,
       enableRTC,
       subtitleText,
       callTooltipText,
-      userDetails,
       handleCall,
+      otherParticipants,
     }
   },
   data() {

pages/chat/_id.vue

@@ -9,7 +9,7 @@ export default Vue.extend({
   name: 'Chat',
   layout: 'desktop',
   setup() {
-    const { conversationId, conversation, isGroup } = conversationHooks()
+    const { conversationId, isGroup } = conversationHooks()
 
     const state = reactive({
       webrtc: iridium.webRTC,
@@ -19,7 +19,7 @@ export default Vue.extend({
       return state.webrtc.isActiveCall(conversationId.value)
     })
 
-    return { conversation, isGroup, isActiveCall }
+    return { isGroup, isActiveCall }
   },
 })
 </script>