extract event from timeline.vue to message.vue & message.vue -> event.vue

src/components/event.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="event">
+    <div v-if="event.content.msgtype==='m.text'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
+      <div v-if="replyEvent" class="reply">
+        <span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
+        <span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
+      </div>
+      <div v-html="parseMessage(event.content.body)"></div>
+      <div class="time">{{getTime(event.origin_server_ts)}}</div>
+    </div>
+    <div v-else-if="event.content.msgtype==='m.notice'" class="notice">
+      {{event.content.body}}
+      <span class="time">{{getTime(event.origin_server_ts)}}</span>
+    </div>
+    <div v-else-if="event.type==='m.room.member'" class="info">
+      {{membershipEvents[event.content.membership](event)}}
+      <span class="time">{{getTime(event.origin_server_ts)}}</span>
+    </div>
+    <div v-else class="info">unknown event
+      <span class="time">{{getTime(event.origin_server_ts)}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import {matrix} from '@/main';
+import {calcUserName} from '@/lib/matrixUtils';
+import {parseMessage} from '@/lib/eventUtils';
+import {getTime} from '@/lib/getTimeStrings';
+
+export default {
+  name: 'message',
+  props: {
+    type: String,
+    event: Object,
+    onUpdate: Function
+  },
+  methods:{
+    async getReplyEvent(event){
+      let replyId = this.getReplyId(event.content);
+      return replyId && await matrix.client.fetchRoomEvent(this.event.room_id, replyId);
+    },
+    getReplyId(content){
+      return content['m.relates_to']
+        && content['m.relates_to']['m.in_reply_to']
+        && content['m.relates_to']['m.in_reply_to'].event_id
+    },
+    calcMembershipEvents(){
+
+    },
+    calcUserName,
+    parseMessage,
+    getTime
+  },
+  data(){
+    return{
+      replyEvent: undefined,
+      membershipEvents:{
+        invite(event){ return `invited ${calcUserName(event.target.userId)}` },
+        join(event){
+          if (event.content.displayname !== null) return `changed username to ${event.content.displayname}`
+          return 'joined the room'
+        },
+        leave(){ return 'left the room' },
+        ban(event){return `banned ${calcUserName(event.target.userId)}` }
+      }
+    }
+  },
+  created(){
+    this.getReplyEvent(this.event).then((res) => this.replyEvent = res);
+  },
+  updated(){
+    this.onUpdate();
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.event{
+  .info {
+    font-style: italic;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    margin-left: 0.5rem;
+    .time {
+      font-size: 0.7rem;
+    }
+  }
+  .message{
+    position: relative;
+    width: max-content;
+    min-width: 2rem;
+    max-width: calc(100% - 5rem);
+    padding: 0.7rem 1rem 0.45rem 1rem;
+    background-color: #42a7b9;
+    border-radius: 1rem 1rem 0 1rem;
+    text-align: left;
+    word-break: break-word;
+    white-space: pre-line;
+    margin-top: 0.25rem;
+    .reply{
+      border-left:  2px solid #fff;
+      padding-left: 0.5rem;
+      margin-bottom: 0.5rem;
+      .username{
+        font-weight: bold;
+      }
+    }
+    .time{
+      position: relative;
+      bottom: -0.2rem;
+      font-size: 0.7rem;
+      text-align: right;
+    }
+  }
+  .messageReceive{
+    background-color: #424141;
+    border-radius: 1rem 1rem 1rem 0;
+  }
+  .messageSend{
+    margin-left:auto;
+    margin-right:0;
+    background-color: #357882;
+    border-radius: 1rem 1rem 0 1rem;
+  }
+  .notice{
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    .time{
+      font-size: 0.7rem;
+    }
+  }
+}
+</style>

src/components/message.vue

@@ -1,91 +0,0 @@
-<template>
-    <div :class="type==='send'?'messageSend':'messageReceive'" class="message">
-      <div v-if="replyEvent" class="reply">
-        <span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
-        <span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
-      </div>
-      <div v-html="parseMessage(msg)"></div>
-      <div class="time">{{time}}</div>
-    </div>
-</template>
-
-<script>
-import {matrix} from '@/main';
-import {calcUserName} from '@/lib/matrixUtils';
-import {parseMessage} from '@/lib/eventUtils';
-
-export default {
-  name: 'message',
-  props: {
-    msg: String,
-    time: String,
-    type: String,
-    content: Object,
-    roomId: String
-  },
-  methods:{
-    async getReplyEvent(content) {
-      let replyId = this.getReplyId(content);
-      if (replyId === undefined) return undefined;
-      await matrix.client.fetchRoomEvent(this.roomId, replyId).then((res) => {
-        this.replyEvent = res;
-      });
-    },
-    getReplyId(content){
-      if(!content['m.relates_to']) return undefined;
-      if(!content['m.relates_to']['m.in_reply_to']) return undefined;
-      return content['m.relates_to']['m.in_reply_to'].event_id;
-    },
-    calcUserName,
-    parseMessage
-  },
-  data(){
-    return{
-      replyEvent: undefined
-    }
-  },
-  created() {
-    this.getReplyEvent(this.content);
-  }
-}
-</script>
-
-<style scoped>
-  .message{
-    position: relative;
-    width: max-content;
-    min-width: 2rem;
-    max-width: calc(100% - 5rem);
-    padding: 0.7rem 1rem 0.45rem 1rem;
-    background-color: #42a7b9;
-    border-radius: 1rem 1rem 0 1rem;
-    text-align: left;
-    word-break: break-word;
-    white-space: pre-line;
-    margin-top: 0.25rem;
-  }
-  .messageReceive{
-    background-color: #424141;
-    border-radius: 1rem 1rem 1rem 0;
-  }
-  .messageSend{
-    margin-left:auto;
-    margin-right:0;
-    background-color: #357882;
-    border-radius: 1rem 1rem 0 1rem;
-  }
-  .time{
-    position: relative;
-    bottom: -0.2rem;
-    font-size: 0.7rem;
-    text-align: right;
-  }
-  .reply{
-    border-left:  2px solid #fff;
-    padding-left: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  .username{
-    font-weight: bold;
-  }
-</style>

src/components/timeline.vue

@@ -24,38 +24,23 @@
         >
           {{calcUserName(group[0].sender)}}
         </div>
-        <div
+        <event
-          :class="groupTimeline?'indent event':'event'"
+          v-for="event in group"
-           v-for="event in group"
           :key="event.origin_server_ts"
+          :class="groupTimeline?'indent event':'event'"
           :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
           @contextmenu.prevent="setReplyTo(event)"
-        >
+          :type="event.sender === user?'send':'receive'"
-          <message
+          :event="event"
-            v-if="event.content.msgtype==='m.text'"
+          :on-update="()=>onUpdate()"
-            :type="event.sender === user?'send':'receive'"
+        />
-            :msg=event.content.body :time=getTime(event.origin_server_ts)
-            :content="event.content"
-            :roomId="roomId"
-          />
-          <div v-else-if="event.content.msgtype==='m.notice'" class="notice">
-            {{event.content.body}}
-            <span class="time">{{getTime(event.origin_server_ts)}}</span>
-          </div>
-          <div v-else-if="event.type==='m.room.member'" class="info">
-            {{membershipEvents[event.content.membership]}}
-            <span class="time">{{getTime(event.origin_server_ts)}}</span>
-          </div>
-          <div v-else class="info">unknown event
-            <span class="time">{{getTime(event.origin_server_ts)}}</span></div>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import message from '@/components/message';
+import event from '@/components/event';
 import avatar from '@/components/avatar';
 import splitArray from '@/lib/splitArray';
 import {getDate, getTime} from '@/lib/getTimeStrings';
@@ -64,15 +49,15 @@ import {getUser, calcUserName} from '@/lib/matrixUtils';
 export default {
   name: 'eventGroup',
   components: {
-    message,
+    event,
     avatar
   },
   props: {
     timeline: Array,
     user: String,
     groupTimeline: Boolean,
-    roomId: String,
+    setReplyTo: Function,
-    setReplyTo: Function
+    onUpdate: Function
   },
   methods: {
     getUser,
@@ -80,16 +65,6 @@ export default {
     splitArray,
     getDate,
     getTime
-  },
-  data(){
-    return {
-      membershipEvents:{
-        invite: 'was invented',
-        join: 'joined the room',
-        leave: 'left the room',
-        ban: 'was banned'
-      }
-    }
   }
 }
 </script>
@@ -137,24 +112,6 @@ export default {
         margin-left: 1rem;
         font-weight: bold;
       }
-      .event{
-        .info {
-          font-style: italic;
-          margin-top: 0.5rem;
-          margin-bottom: 0.5rem;
-          margin-left: 0.5rem;
-          .time {
-            font-size: 0.7rem;
-          }
-        }
-        .notice{
-          margin-top: 0.5rem;
-          margin-bottom: 0.5rem;
-          .time{
-            font-size: 0.7rem;
-          }
-        }
-      }
       .indent{
         margin-left: 2.5rem;
       }