first draft of Redaction ELS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/MessagePanel.js

@@ -29,6 +29,7 @@ import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
 import {textForEvent} from "../../TextForEvent";
+import RedactionEventListSummary from "../views/elements/RedactionEventListSummary";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -1062,5 +1063,102 @@ class MemberGrouper {
     }
 }
 
+// Wrap consecutive redactions by the same user in a ListSummary, ignore if redacted
+class RedactionGrouper {
+    static canStartGroup = function(panel, ev) {
+        return panel._shouldShowEvent(ev) && ev.isRedacted();
+    }
+
+    constructor(panel, ev, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.readMarker = panel._readMarkerForEvent(
+            ev.getId(),
+            ev === lastShownEvent,
+        );
+        this.events = [ev];
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+    }
+
+    shouldGroup(ev) {
+        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) return false;
+        if (ev.getType() === "m.room.redaction") return true; // for show-hidden-events users
+        return ev.isRedacted() && ev.sender === this.events[0].sender &&
+            ev.getUnsigned().redacted_because.sender === this.events[0].getUnsigned().redacted_because.sender;
+    }
+
+    add(ev) {
+        if (ev.getType() === "m.room.redaction") return; // for show-hidden-events users
+        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+            ev.getId(),
+            ev === this.lastShownEvent,
+        );
+        this.events.push(ev);
+    }
+
+    getTiles() {
+        // If we don't have any events to group, don't even try to group them. The logic
+        // below assumes that we have a group of events to deal with, but we might not if
+        // the events we were supposed to group were redacted.
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+
+        const panel = this.panel;
+        const lastShownEvent = this.lastShownEvent;
+        const ret = [];
+
+        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+            const ts = this.events[0].getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        // Ensure that the key of the MemberEventListSummary does not change with new
+        // member events. This will prevent it from being re-created unnecessarily, and
+        // instead will allow new props to be provided. In turn, the shouldComponentUpdate
+        // method on ELS can be used to prevent unnecessary renderings.
+        const key = "redactioneventlistsummary-" + (this.prevEvent ? this.events[0].getId() : "initial");
+
+        let highlightInMels = false;
+        let eventTiles = this.events.map((e) => {
+            if (e.getId() === panel.props.highlightedEventId) {
+                highlightInMels = true;
+            }
+            // In order to prevent DateSeparators from appearing in the expanded form
+            // of MemberEventListSummary, render each member event as if the previous
+            // one was itself. This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+
+        if (eventTiles.length === 0) {
+            eventTiles = null;
+        }
+
+        ret.push(
+            <RedactionEventListSummary
+                key={key}
+                events={this.events}
+                onToggle={panel._onHeightChanged} // Update scroll state
+                startExpanded={highlightInMels}
+            >
+                 { eventTiles }
+            </RedactionEventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.events[0];
+    }
+}
+
 // all the grouper classes that we use
-const groupers = [CreationGrouper, MemberGrouper];
+const groupers = [CreationGrouper, MemberGrouper, RedactionGrouper];