Right panel store refactor

src/components/views/right_panel/UserInfo.tsx

@@ -1657,7 +1657,7 @@ const UserInfo: React.FC<IProps> = ({
         previousPhase = RightPanelPhases.RoomMemberInfo;
         cardState = { member };
     } else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) {
-        previousPhase = previousPhase = RightPanelPhases.SpaceMemberList;
+        previousPhase = RightPanelPhases.SpaceMemberList;
         cardState = { spaceId: room.roomId };
     } else if (room) {
         previousPhase = RightPanelPhases.RoomMemberList;

src/stores/right-panel/RightPanelStore.ts

@@ -33,6 +33,7 @@ import {
     IRightPanelForRoom,
     convertCardToStore,
 } from './RightPanelStoreIPanelState';
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 // import RoomViewStore from '../RoomViewStore';
 
 const GROUP_PHASES = [
@@ -77,6 +78,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
     protected async onReady(): Promise<any> {
         // TODO RightPanelStore (will be addressed when dropping groups): This should be used instead of the onDispatch callback when groups are removed.
         // RoomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequestUpdate.bind(this));
         this.loadCacheFromSettings();
         this.emitAndUpdateSettings();
     }
@@ -91,6 +93,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
         if (this.roomStoreToken) {
             this.roomStoreToken.remove();
         }
+        MatrixClientPeg.get().off("crypto.verification.request", this.onVerificationRequestUpdate.bind(this));
         // TODO RightPanelStore (will be addressed when dropping groups): User this instead of the dispatcher.
         // RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
     }
@@ -135,7 +138,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
     public get previousGroup(): IRightPanelCard { return this.previousCard; }
 
     // Setters
-    public setCard(card: IRightPanelCard, allowClose = true, roomId: string = null) {
+    public setCard(card: IRightPanelCard, allowClose = true, roomId?: string) {
         const rId = roomId ?? this.viewedRoomId;
         // this was previously a very multifunctional command:
         // Toggle panel: if the same phase is send but without a state
@@ -166,7 +169,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
             return;
         } else if (targetPhase !== this.currentCard?.phase) {
             // Set right panel and erase history.
-            this.setRightPanelCache({ phase: targetPhase, state: cardState ?? {} });
+            this.setRightPanelCache({ phase: targetPhase, state: cardState ?? {} }, rId);
         }
     }
 
@@ -223,9 +226,11 @@ export default class RightPanelStore extends ReadyWatchingStore {
         if (!!room) {
             this.global = this.global ??
                 convertToStatePanel(SettingsStore.getValue("RightPanel.phasesGlobal"), room);
-
             this.byRoom[this.viewedRoomId] = this.byRoom[this.viewedRoomId] ??
                 convertToStatePanel(SettingsStore.getValue("RightPanel.phases", this.viewedRoomId), room);
+        } else {
+            console.warn("Could not restore the right panel after load, because there was no associated room object." +
+                "The right panel can only be restored, for rooms and spaces but not for groups");
         }
     }
 
@@ -249,8 +254,8 @@ export default class RightPanelStore extends ReadyWatchingStore {
         this.emit(UPDATE_EVENT, null);
     }
 
-    private setRightPanelCache(card: IRightPanelCard) {
-        this.byRoom[this.viewedRoomId] = {
+    private setRightPanelCache(card: IRightPanelCard, roomId?: string) {
+        this.byRoom[roomId ?? this.viewedRoomId] = {
             history: [{ phase: card.phase, state: card.state ?? {} }],
             isOpen: true,
         };
@@ -296,6 +301,15 @@ export default class RightPanelStore extends ReadyWatchingStore {
         return true;
     }
 
+    onVerificationRequestUpdate() {
+        const { member } = this.currentCard.state;
+        const pendingRequest = pendingVerificationRequestForUser(member);
+        if (pendingRequest) {
+            this.currentCard.state.verificationRequest = pendingRequest;
+            this.emitAndUpdateSettings();
+        }
+    }
+
     onRoomViewStoreUpdate() {
         // TODO: use this function instead of the onDispatch (the whole onDispatch can get removed!) as soon groups are removed
         // this.viewedRoomId = RoomViewStore.getRoomId();

src/stores/right-panel/RightPanelStoreIPanelState.ts

@@ -41,9 +41,8 @@ export interface IRightPanelCardState {
 }
 
 export interface IRightPanelCardStateStored {
-    member?: RoomMember | User | GroupMember;
-    verificationRequest?: VerificationRequest;
-    verificationRequestPromise?: Promise<VerificationRequest>;
+    memberId?: string;
+    // we do not store the things associated with verification
     // group
     groupId?: string;
     groupRoomId?: string;
@@ -100,9 +99,15 @@ export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCard
     if (!!panelState?.state?.initialEvent?.getId()) {
         panelStateThisRoomStored.initialEventId = panelState.state.initialEvent.getId();
     }
+    if (!!panelState?.state?.member?.userId) {
+        panelStateThisRoomStored.memberId = panelState.state.member.userId;
+    }
     delete panelStateThisRoomStored.threadHeadEvent;
     delete panelStateThisRoomStored.initialEvent;
     delete panelStateThisRoomStored.memberInfoEvent;
+    delete panelStateThisRoomStored.verificationRequest;
+    delete panelStateThisRoomStored.verificationRequestPromise;
+    delete panelStateThisRoomStored.member;
 
     const storedCard = { state: panelStateThisRoomStored as IRightPanelCardStored, phase: panelState.phase };
     return storedCard as IRightPanelCardStored;
@@ -119,9 +124,13 @@ function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room):
     if (!!panelStateThisRoom.initialEventId) {
         panelStateThisRoom.initialEvent = room.findEventById(panelStateThisRoom.initialEventId);
     }
+    if (!!panelStateThisRoom.memberId) {
+        panelStateThisRoom.member = room.getMember(panelStateThisRoom.memberId);
+    }
     delete panelStateThisRoom.threadHeadEventId;
     delete panelStateThisRoom.initialEventId;
     delete panelStateThisRoom.memberInfoEventId;
+    delete panelStateThisRoom.memberId;
 
     return { state: panelStateThisRoom as IRightPanelCardState, phase: panelStateStore.phase } as IRightPanelCard;
 }