feat(chat): ui messages progress

Satellite-im · Jul 7, 2022 · bffd700 · bffd700
1 parent 496a97e
commit bffd700
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 21 deletions.
diff --git a/components/views/chat/conversation/Conversation.html b/components/views/chat/conversation/Conversation.html
@@ -1,19 +1,31 @@
 <div id="conversation">
-  <!-- <UiLoadersMessage :count="3" v-if="loading" /> -->
+  <UiLoadersMessage :count="3" v-if="loading" />
   <div class="group" v-for="message of messages">
     <div v-if="message.type === 'direct'">
+      <div v-if="message.from === did">
+        <p>SELF:</p>
+      </div>
+      <div v-else>
+        <p>FRIEND:</p>
+      </div>
+      <span>
+        <UiUserName :username="message.from" :badge="badge" />
+      </span>
+      <TypographyText :text="message.at" data-cy="chat-timestamp" />
       <p>{{message.body}}</p>
     </div>
+    <p>--------</p>
   </div>
-  <!-- <div class="group" v-for="group in messages" v-else>
-    <div v-if="group.type === 'group'">
-      <Group :group="group" :key="group.id" :groupId="groupId" />
+  <!-- 
+  <div class="group" v-for="message in messages">
+    <div v-if="message.type === 'direct'">
+      <Group :group="message" :key="message.id" :groupId="groupId" />
     </div>
-    <div v-if="group.type === 'caret_divider'">
+    <div v-if="message.type === 'caret_divider'">
       <UiCaretDivider text="New Messages" />
     </div>
-    <div v-else-if="group.type === 'divider'">
-      <TypographyHorizontalRuleText :value="group.at.toString()" />
+    <div v-else-if="message.type === 'divider'">
+      <TypographyHorizontalRuleText :value="message.at.toString()" />
     </div>
   </div>
   <div v-if="textile.messageLoading" data-cy="loading-indicator" class="zoop">

diff --git a/components/views/chat/conversation/Conversation.vue b/components/views/chat/conversation/Conversation.vue
@@ -24,6 +24,10 @@ export default Vue.extend({
       type: String,
       default: '',
     },
+    did: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     ...mapState({

diff --git a/libraries/Iridium/chat/ChatManager.ts b/libraries/Iridium/chat/ChatManager.ts
@@ -197,11 +197,14 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       action: 'message',
       message: messageCID,
     })
-    await this.iridium.connector.send(conversation, {
-      to: await Promise.all(
-        conversation.participants.map((p) => Iridium.DIDToPeerId(p)),
-      ),
-    })
+    await this.iridium.connector.send(
+      { type: 'chat/message', conversationId: id, messageCID },
+      {
+        to: await Promise.all(
+          conversation.participants.map((p) => Iridium.DIDToPeerId(p)),
+        ),
+      },
+    )
     this.emit(`conversation/${id}`, {
       action: 'message',
       message: messageCID,

diff --git a/pages/chat/direct/Direct.html b/pages/chat/direct/Direct.html
@@ -1,4 +1,4 @@
 <div id="direct">
-  <!-- <UiChatEncrypted v-if="$route.params.address" /> -->
-  <Conversation :messages="messages" :loading="false" />
+  <UiChatEncrypted v-if="$route.params.address" />
+  <Conversation :did="did" :messages="messages" :loading="false" />
 </div>
diff --git a/pages/chat/direct/_address.vue b/pages/chat/direct/_address.vue
@@ -16,6 +16,7 @@ export default Vue.extend({
   data() {
     return {
       messages: [],
+      did: iridium.connector.id,
     }
   },
   computed: {
@@ -91,13 +92,10 @@ export default Vue.extend({
         this.messages.push(message)
       })
       await iridium.chat.subscribeToChannel(this.friend, async (event) => {
-        if (Object.keys(event.payload.message).length) {
-          const msgs = []
-          for (const msg in event.payload.message) {
-            msgs.push(await iridium.connector.load(msg))
-          }
-          console.log('in-coming chat messages...', msgs)
-          // todo: better append those messages to the UI
+        if (event.payload.messageCID && event.payload.type === 'chat/message') {
+          this.messages.push(
+            await iridium.connector.load(event.payload.messageCID),
+          )
         }
       })
     }