update/debug newMessage and chat

package.json

@@ -12,7 +12,6 @@
     "core-js": "^3.6.5",
     "matrix-js-sdk": "^9.1.0",
     "sass": "^1.29.0",
-    "sass-loader": "^10.1.0",
     "v-emoji-picker": "^2.3.1",
     "vue": "^2.6.11",
     "ws": "^7.3.1"

src/components/newMessage.vue

@@ -1,47 +1,45 @@
 <template>
-  <div class="newMessageBanner">
-    <form v-on:submit.prevent="sendMessage()">
+    <form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
       <label for="newMessageInput"></label>
       <textarea @keyup.enter.exact="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
                 autocomplete="off" rows="1" placeholder="type a message ..." v-model="msg.content.body" />
       <icon type="submit" title="press enter to submit" id="sendMessageBtn"
             ic="./sym/ic_send_white_24px.svg" />
     </form>
-  </div>
 </template>
 
 <script>
 import icon from '@/components/icon.vue';
-import main from '@/main.js';
-import matrix from '@/matrix.js';
+import {matrix} from '@/main.js';
 
 export default {
   name: "newMessage",
   components: {
     icon
   },
+  props: {
+    onResize: Function,
+    roomId: String
+  },
   methods: {
-    sendMessage(){
+    async sendMessage(){
       if (this.msg.content.body !== "") {
-        let msgSend = Object.assign({}, this.msg)
-        matrix.methods.sendMessage(msgSend)
-        this.msg.content.body = ""
-        document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
-        document.getElementById("newMessageInput").style.height = "1.25rem"
-        //let msgContainer = document.getElementById("messagesContainer")
-        //msgContainer.scrollTo(0, msgContainer.scrollHeight)
+        let msgSend = Object.assign({}, this.msg);
+        await matrix.sendEvent(msgSend, this.roomId);
+        this.msg.content.body = "";
+        let id = this.$refs.newMessageInput;
+        id.style.height = "1.25rem";
+        this.onResize(id.parentElement.clientHeight);
       }
     },
     resizeMessageBanner(){
-      let id = this.$refs.newMessageInput
-      id.style.height = '1.25rem'
-      id.style.height = `${id.scrollHeight}px`
-      let msgContainer = document.getElementById("messagesContainer")
-      msgContainer.style.height
-          = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
+      let id = this.$refs.newMessageInput;
+      id.style.height = '1.25rem';
+      id.style.height = `${id.scrollHeight}px`;
+      this.onResize(id.parentElement.clientHeight);
     },
     toggleEmojiPicker() {
-      this.showEmojiPicker= !this.showEmojiPicker;
+      this.showEmojiPicker = !this.showEmojiPicker;
     },
     onSelectEmoji(emoji) {
       this.msg.content.body += emoji.data;
@@ -56,8 +54,6 @@ export default {
           msgtype: "m.text"
         }
       },
-      chatroom: main.data().chatroom,
-      session: matrix.data().session,
       showEmojiPicker: false
     }
   }

src/lib/matrixHandler.js

@@ -62,4 +62,11 @@ export class MatrixHandler {
       }
     })
   }
+  async sendEvent(msg, roomId){
+    await this.client.sendEvent(roomId, msg.type, msg.content, '').then(() => {
+      console.log('message sent successfully');
+    }).catch((err) => {
+      console.log(`error while sending message => ${err}`);
+    });
+  }
 }

src/views/chat.vue

@@ -1,22 +1,11 @@
 <template>
   <div>
+    <div ref="chatContainer" class="chatContainer">
       <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
-      <div id="messages" class="messages">
+        <div id="messages" class="messages" ref="messages">
           <p v-if="room.timeline.length === 0" class="info">this room is empty</p>
-        <!--<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts" class="event">
-          <div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
-               style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
-          </div>
-          <div v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
-               style="margin-left: 3rem; margin-top: 1rem">{{message.sender}}
-          </div>
-          <message :type="message.sender === session.user?'send':'receive'"
-                   :group="session.currentRoom.members.length > 2"
-                   :msg=message.content.body :time=getTime(message.origin_server_ts) />
-          <userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)"
-                         :userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
-        </div>-->
-        <div class="timeGroup" v-for="timeGroup in splitArray(room.timeline, obj => getDate(obj.event.origin_server_ts), obj => obj.event)" :key="timeGroup[0].origin_server_ts">
+          <div class="timeGroup" v-for="timeGroup in splitArray(room.timeline,
+          obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
             <div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
             <div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
               <div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
@@ -24,7 +13,7 @@
                 <userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
               </div>
               <div class="event" v-for="event in group" :key="event.origin_server_ts">
-              <message :type="event.sender === user?'send':'receive'"
+                <message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
                          :group="room._membersPromise.length > 2"
                          :msg=event.content.body :time=getTime(event.origin_server_ts) />
               </div>
@@ -32,15 +21,16 @@
           </div>
         </div>
       </div>
-    <!--<newMessage />-->
       <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
+    </div>
+    <newMessage :onResize="(height)=>resize(height)" :roomId="room.roomId"/>
     <!--<topBanner />-->
   </div>
 </template>
 
 <script>
 import message from '@/components/message.vue';
-//import newMessage from '@/components/newMessage.vue';
+import newMessage from '@/components/newMessage.vue';
 //import topBanner from '@/components/topBanner.vue';
 import Icon from "@/components/icon";
 import userThumbnail from '@/components/userThumbnail';
@@ -50,7 +40,7 @@ export default {
   components: {
     Icon,
     message,
-    //newMessage,
+    newMessage,
     //topBanner,
     userThumbnail
   },
@@ -75,8 +65,8 @@ export default {
       if (this.$refs.msgContainer.scrollTop === 0){
         console.log("load messages")
       }
-      let msgContainer = document.getElementById("messagesContainer")
-      this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
+      let msg = this.$refs.msgContainer;
+      this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
     },
     splitArray(arr, key, get=obj=>obj){
       let payload = [[]];
@@ -87,6 +77,9 @@ export default {
         if (key(obj) !== key(nextObj)) payload.push([]);
       })
       return payload;
+    },
+    resize(height){
+      this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3rem)`;
     }
   },
   data(){
@@ -101,38 +94,56 @@ export default {
 }
 </script>
 
-<style scoped>
-.messagesContainer{
+<style scoped lang="scss">
+.chatContainer{
   position: absolute;
   margin: 0;
   left: 0;
   top: 3rem;
-  height: calc(100% - 7rem);
   width: 100%;
+  height: calc(100% - 7rem);
+  .messagesContainer{
+    height: 100%;
     overflow-y: auto;
-}
-.messages{
+    .messages{
       position: relative;
       margin-top: 1rem;
       margin-bottom: 1rem;
-}
-#scrollDown{
-  position: absolute;
-  background-color: #fff;
-  bottom: 5rem;
-  right: 1rem;
-  display: block;
-}
-.info{
-  text-align: center;
-  font-style: italic;
-  margin: 1rem;
-}
-.eventGroup{
+      .eventGroup{
         position: relative;
         width: 100%;
         height: fit-content;
         margin-top: 0.75rem;
+      }
+      .info{
+        text-align: center;
+        font-style: italic;
+        margin: 1rem;
+      }
+      .time{
+        top: 0.25rem;
+        position: sticky;
+        z-index: 100;
+        background-color: #2d2d2d;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        width: fit-content;
+        left: 50%;
+        transform: translate(-50%,0);
+        margin-top: 0.5rem;
+      }
+    }
+
+  }
+  #scrollDown{
+    position: absolute;
+    background-color: #fff;
+    bottom: 1rem;
+    right: 1rem;
+    display: block;
+    height: 2rem;
+    width: 2rem;
+  }
 }
 .userThumbnail{
   position: absolute;
@@ -152,16 +163,4 @@ export default {
 .username{
   margin-left: 1rem;
 }
-.time{
-  top: 0.25rem;
-  position: sticky;
-  z-index: 100;
-  background-color: #2d2d2d;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  width: fit-content;
-  left: 50%;
-  transform: translate(-50%,0);
-  margin-top: 0.5rem;
-}
 </style>