add left panel tile view model for invites

and track in-progress state in Invite so it is shared by left panel
and open invite

src/domain/session/leftpanel/BaseTileViewModel.js

@@ -0,0 +1,89 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {avatarInitials, getIdentifierColorNumber} from "../../avatar.js";
+import {ViewModel} from "../../ViewModel.js";
+
+const KIND_ORDER = ["invite", "room"];
+
+export class BaseTileViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._isOpen = false;
+        this._hidden = false;
+        if (options.isOpen) {
+            this.open();
+        }
+    }
+
+    get hidden() {
+        return this._hidden;
+    }
+
+    set hidden(value) {
+        if (value !== this._hidden) {
+            this._hidden = value;
+            this.emitChange("hidden");
+        }
+    }
+
+    close() {
+        if (this._isOpen) {
+            this._isOpen = false;
+            this.emitChange("isOpen");
+        }
+    }
+
+    open() {
+        if (!this._isOpen) {
+            this._isOpen = true;
+            this.emitChange("isOpen");
+        }
+    }
+
+    get isOpen() {
+        return this._isOpen;
+    }
+
+    compare(other) {
+        if (other.kind !== this.kind) {
+            return KIND_ORDER.indexOf(this.kind) - KIND_ORDER.indexOf(other.kind);
+        }
+        return 0;
+    }
+
+    // Avatar view model contract
+    get avatarLetter() {
+        return avatarInitials(this.name);
+    }
+
+    get avatarColorNumber() {
+        return getIdentifierColorNumber(this._avatarSource)
+    }
+
+    get avatarUrl() {
+        if (this._avatarSource.avatarUrl) {
+            const size = 32 * this.platform.devicePixelRatio;
+            return this._room.mediaRepository.mxcUrlThumbnail(this._avatarSource.avatarUrl, size, size, "crop");
+        }
+        return null;
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
+}

src/domain/session/leftpanel/InviteTileViewModel.js

@@ -0,0 +1,55 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {BaseTileViewModel} from "./BaseTileViewModel.js";
+
+export class InviteTileViewModel extends BaseTileViewModel {
+    constructor(options) {
+        super(options);
+        const {invite} = options;
+        this._invite = invite;
+        this._url = this.urlCreator.openRoomActionUrl(this._invite.id);
+    }
+
+    get busy() {
+        return this._invite.accepting || this._invite.rejecting;
+    }
+
+    get kind() {
+        return "invite";
+    }
+
+    get url() {
+        return this._url;
+    }
+
+    compare(other) {
+        const parentComparison = super.compare(other);
+        if (parentComparison !== 0) {
+            return parentComparison;
+        }
+        return this._invite.timestamp - other._invite.timestamp;
+    }
+
+    get name() {
+        return this._invite.name;
+    }
+
+    get _avatarSource() {
+        return this._invite;
+    }
+}

src/domain/session/leftpanel/RoomTileViewModel.js

@@ -15,51 +15,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {avatarInitials, getIdentifierColorNumber} from "../../avatar.js";
-import {ViewModel} from "../../ViewModel.js";
+import {BaseTileViewModel} from "./BaseTileViewModel.js";
 
 function isSortedAsUnread(vm) {
     return vm.isUnread || (vm.isOpen && vm._wasUnreadWhenOpening);
 }
 
-export class RoomTileViewModel extends ViewModel {
+export class RoomTileViewModel extends BaseTileViewModel {
     constructor(options) {
         super(options);
         const {room} = options;
         this._room = room;
-        this._isOpen = false;
         this._wasUnreadWhenOpening = false;
-        this._hidden = false;
         this._url = this.urlCreator.openRoomActionUrl(this._room.id);
-        if (options.isOpen) {
-            this.open();
-        }
     }
 
-    get hidden() {
-        return this._hidden;
-    }
-
-    set hidden(value) {
-        if (value !== this._hidden) {
-            this._hidden = value;
-            this.emitChange("hidden");
-        }
-    }
-
-    close() {
-        if (this._isOpen) {
-            this._isOpen = false;
-            this.emitChange("isOpen");
-        }
-    }
-
-    open() {
-        if (!this._isOpen) {
-            this._isOpen = true;
-            this._wasUnreadWhenOpening = this._room.isUnread;
-            this.emitChange("isOpen");
-        }
+    get kind() {
+        return "room";
     }
 
     get url() {
@@ -67,6 +39,10 @@ export class RoomTileViewModel extends ViewModel {
     }
 
     compare(other) {
+        const parentComparison = super.compare(other);
+        if (parentComparison !== 0) {
+            return parentComparison;
+        }
         /*
         put unread rooms first
         then put rooms with a timestamp first, and sort by name
@@ -110,10 +86,6 @@ export class RoomTileViewModel extends ViewModel {
         return timeDiff;
     }
 
-    get isOpen() {
-        return this._isOpen;
-    }
-
     get isUnread() {
         return this._room.isUnread;
     }
@@ -122,27 +94,6 @@ export class RoomTileViewModel extends ViewModel {
         return this._room.name || this.i18n`Empty Room`;
     }
 
-    // Avatar view model contract
-    get avatarLetter() {
-        return avatarInitials(this.name);
-    }
-
-    get avatarColorNumber() {
-        return getIdentifierColorNumber(this._room.id)
-    }
-
-    get avatarUrl() {
-        if (this._room.avatarUrl) {
-            const size = 32 * this.platform.devicePixelRatio;
-            return this._room.mediaRepository.mxcUrlThumbnail(this._room.avatarUrl, size, size, "crop");
-        }
-        return null;
-    }
-
-    get avatarTitle() {
-        return this.name;
-    }
-
     get badgeCount() {
         return this._room.notificationCount;
     }
@@ -150,4 +101,8 @@ export class RoomTileViewModel extends ViewModel {
     get isHighlighted() {
         return this._room.highlightCount !== 0;
     }
+
+    get _avatarSource() {
+        return this._room;
+    }
 }

src/matrix/Session.js

@@ -56,6 +56,7 @@ export class Session {
         this._roomUpdateCallback = (room, params) => this._rooms.update(room.id, params);
         this._invites = new ObservableMap();
         this._inviteRemoveCallback = invite => this._invites.remove(invite.id);
+        this._inviteUpdateCallback = (invite, params) => this._invites.update(invite.id, params);
         this._user = new User(sessionInfo.userId);
         this._deviceMessageHandler = new DeviceMessageHandler({storage});
         this._olm = olm;
@@ -402,6 +403,7 @@ export class Session {
             roomId,
             hsApi: this._hsApi,
             emitCollectionRemove: this._inviteRemoveCallback,
+            emitCollectionUpdate: this._inviteUpdateCallback,
             user: this._user,
             clock: this._platform.clock,
         });

src/matrix/room/Invite.js

@@ -20,14 +20,19 @@ import {Heroes} from "./members/Heroes.js";
 import {MemberChange, RoomMember, EVENT_TYPE as MEMBER_EVENT_TYPE} from "./members/RoomMember.js";
 
 export class Invite extends EventEmitter {
-    constructor({roomId, user, hsApi, emitCollectionRemove, clock}) {
+    constructor({roomId, user, hsApi, emitCollectionRemove, emitCollectionUpdate, clock}) {
         super();
         this._roomId = roomId;
         this._user = user;
         this._hsApi = hsApi;
         this._emitCollectionRemove = emitCollectionRemove;
+        this._emitCollectionUpdate = emitCollectionUpdate;
         this._clock = clock;
         this._inviteData = null;
+        this._accepting = false;
+        this._rejecting = false;
+        this._accepted = false;
+        this._rejected = false;
     }
 
     get id() {
@@ -63,11 +68,34 @@ export class Invite extends EventEmitter {
     }
 
     async accept() {
-
+        this._accepting = true;
+        this._emitChange("accepting");
     }
 
     async reject() {
+        this._rejecting = true;
+        this._emitChange("rejecting");
+    }
 
+    get accepting() {
+        return this._accepting;
+    }
+
+    get accepted() {
+        return this._accepted;
+    }
+
+    get rejecting() {
+        return this._rejecting;
+    }
+
+    get rejected() {
+        return this._rejected;
+    }
+
+    _emitChange(params) {
+        this.emit("change");
+        this._emitCollectionUpdate(params);
     }
 
     load(inviteData, log) {
@@ -101,18 +129,28 @@ export class Invite extends EventEmitter {
             log.set("id", this.id);
             log.set("membership", membership);
             txn.invites.remove(this.id);
-            return null;
+            return {removed: true, membership};
         }
     }
 
     afterSync(changes) {
         if (changes) {
-            this._inviteData = changes.inviteData;
-            this._inviter = changes.inviter;
-            // emit update/add
-        } else {
-            this._emitCollectionRemove(this);
-            this.emit("change");
+            if (changes.removed) {
+                this._accepting = false;
+                this._rejecting = false;
+                if (changes.membership === "join") {
+                    this._accepted = true;
+                } else {
+                    this._rejected = true;
+                }
+                this._emitCollectionRemove(this);
+                this.emit("change");
+            } else {
+                this._inviteData = changes.inviteData;
+                this._inviter = changes.inviter;
+                // sync will add the invite to the collection by
+                // calling session.addInviteAfterSync
+            }
         }
     }