added msg deletion support

src/app/organisms/channel/ChannelViewContent.jsx

@@ -7,6 +7,7 @@ import dateFormat from 'dateformat';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
+import { redact } from '../../../client/action/room';
 import { getUsername, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { diffMinutes, isNotInSameDay } from '../../../util/common';
@@ -223,6 +224,9 @@ function ChannelViewContent({
         && prevMEvent.getSender() === mEvent.getSender()
       );
 
+      const myPowerlevel = roomTimeline.room.getMember(mx.getUserId()).powerLevel;
+      const canIRedact = roomTimeline.room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
+
       let content = mEvent.getContent().body;
       if (typeof content === 'undefined') return null;
       let reply = null;
@@ -293,12 +297,12 @@ function ChannelViewContent({
         });
       }
 
-      const userMXIDColor = colorMXID(mEvent.sender.userId);
+      const senderMXIDColor = colorMXID(mEvent.sender.userId);
       const userAvatar = isContentOnly ? null : (
         <Avatar
           imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
           text={getUsername(mEvent.sender.userId).slice(0, 1)}
-          bgColor={userMXIDColor}
+          bgColor={senderMXIDColor}
           size="small"
         />
       );
@@ -306,7 +310,7 @@ function ChannelViewContent({
         <MessageHeader
           userId={mEvent.sender.userId}
           name={getUsername(mEvent.sender.userId)}
-          color={userMXIDColor}
+          color={senderMXIDColor}
           time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
         />
       );
@@ -350,7 +354,18 @@ function ChannelViewContent({
             size="extra-small"
             tooltip="Reply"
           />
-          <IconButton src={BinIC} size="extra-small" tooltip="Delete" />
+          {(canIRedact || mEvent.getSender() === mx.getUserId()) && (
+            <IconButton
+              onClick={() => {
+                if (window.confirm('Are you sure you want to delete this event')) {
+                  redact(roomId, mEvent.getId());
+                }
+              }}
+              src={BinIC}
+              size="extra-small"
+              tooltip="Delete"
+            />
+          )}
         </MessageOptions>
       );
 

src/client/action/room.js

@@ -189,6 +189,19 @@ async function invite(roomId, userId) {
   }
 }
 
+async function redact(roomId, eventId, reason) {
+  const mx = initMatrix.matrixClient;
+
+  try {
+    await mx.redactEvent(roomId, eventId, undefined, typeof reason === 'undefined' ? undefined : { reason });
+    return true;
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
 export {
-  join, leave, create, invite,
+  join, leave,
+  create, invite,
+  redact,
 };

src/client/state/RoomTimeline.js

@@ -35,6 +35,11 @@ class RoomTimeline extends EventEmitter {
       this.emit(cons.events.roomTimeline.EVENT);
     };
 
+    this._listenRedaction = (event, room) => {
+      if (room.roomId !== this.roomId) return;
+      this.emit(cons.events.roomTimeline.EVENT);
+    };
+
     this._listenDecryptEvent = (event) => {
       if (event.getRoomId() !== this.roomId) return;
 
@@ -67,6 +72,7 @@ class RoomTimeline extends EventEmitter {
     };
 
     this.matrixClient.on('Room.timeline', this._listenRoomTimeline);
+    this.matrixClient.on('Room.redaction', this._listenRedaction);
     this.matrixClient.on('Event.decrypted', this._listenDecryptEvent);
     this.matrixClient.on('RoomMember.typing', this._listenTypingEvent);
     this.matrixClient.on('Room.receipt', this._listenReciptEvent);
@@ -152,6 +158,7 @@ class RoomTimeline extends EventEmitter {
 
   removeInternalListeners() {
     this.matrixClient.removeListener('Room.timeline', this._listenRoomTimeline);
+    this.matrixClient.removeListener('Room.redaction', this._listenRedaction);
     this.matrixClient.removeListener('Event.decrypted', this._listenDecryptEvent);
     this.matrixClient.removeListener('RoomMember.typing', this._listenTypingEvent);
     this.matrixClient.removeListener('Room.receipt', this._listenReciptEvent);