Small code clean ups and tweaks

src/@types/global.d.ts

@@ -28,6 +28,7 @@ import SettingsStore from "../settings/SettingsStore";
 import {ActiveRoomObserver} from "../ActiveRoomObserver";
 import {Notifier} from "../Notifier";
 import type {Renderer} from "react-dom";
+import RightPanelStore from "../stores/RightPanelStore";
 
 declare global {
     interface Window {
@@ -49,6 +50,7 @@ declare global {
         singletonModalManager: ModalManager;
         mxSettingsStore: SettingsStore;
         mxNotifier: typeof Notifier;
+        mxRightPanelStore: RightPanelStore;
     }
 
     interface Document {

src/components/structures/RightPanel.js

@@ -21,6 +21,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {Room} from "matrix-js-sdk/src/models/room";
+
 import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import RateLimitedFunc from '../../ratelimitedfunc';
@@ -34,7 +36,7 @@ import {Action} from "../../dispatcher/actions";
 export default class RightPanel extends React.Component {
     static get propTypes() {
         return {
-            roomId: PropTypes.string, // if showing panels for a given room, this is set
+            room: PropTypes.instanceOf(Room), // if showing panels for a given room, this is set
             groupId: PropTypes.string, // if showing panels for a given group, this is set
             user: PropTypes.object, // used if we know the user ahead of opening the panel
         };
@@ -161,13 +163,13 @@ export default class RightPanel extends React.Component {
     }
 
     onRoomStateMember(ev, state, member) {
-        if (member.roomId !== this.props.roomId) {
+        if (member.roomId !== this.props.room.roomId) {
             return;
         }
         // redraw the badge on the membership list
-        if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.roomId) {
+        if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.room.roomId) {
             this._delayedUpdate();
-        } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.roomId &&
+        } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId &&
                 member.userId === this.state.member.userId) {
             // refresh the member info (e.g. new power level)
             this._delayedUpdate();
@@ -226,8 +228,8 @@ export default class RightPanel extends React.Component {
 
         switch (this.state.phase) {
             case RightPanelPhases.RoomMemberList:
-                if (this.props.roomId) {
-                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
+                if (this.props.room.roomId) {
+                    panel = <MemberList roomId={this.props.room.roomId} key={this.props.room.roomId} />;
                 }
                 break;
             case RightPanelPhases.GroupMemberList:
@@ -242,16 +244,16 @@ export default class RightPanel extends React.Component {
             case RightPanelPhases.EncryptionPanel:
                 panel = <UserInfo
                     user={this.state.member}
-                    roomId={this.props.roomId}
-                    key={this.props.roomId || this.state.member.userId}
+                    roomId={this.props.room.roomId}
+                    key={this.props.room.roomId || this.state.member.userId}
                     onClose={this.onCloseUserInfo}
                     phase={this.state.phase}
                     verificationRequest={this.state.verificationRequest}
                     verificationRequestPromise={this.state.verificationRequestPromise}
                 />;
                 break;
             case RightPanelPhases.Room3pidMemberInfo:
-                panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
+                panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.room.roomId} />;
                 break;
             case RightPanelPhases.GroupMemberInfo:
                 panel = <UserInfo
@@ -270,7 +272,7 @@ export default class RightPanel extends React.Component {
                 panel = <NotificationPanel />;
                 break;
             case RightPanelPhases.FilePanel:
-                panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
+                panel = <FilePanel roomId={this.props.room.roomId} resizeNotifier={this.props.resizeNotifier} />;
                 break;
         }
 

src/components/structures/RoomView.js

@@ -2064,7 +2064,7 @@ export default createReactClass({
 
         const showRightPanel = !forceHideRightPanel && this.state.room && this.state.showRightPanel;
         const rightPanel = showRightPanel
-            ? <RightPanel roomId={this.state.room.roomId} resizeNotifier={this.props.resizeNotifier} />
+            ? <RightPanel room={this.state.room} resizeNotifier={this.props.resizeNotifier} />
             : null;
 
         const timelineClasses = classNames("mx_RoomView_timeline", {

src/components/structures/ScrollPanel.js

@@ -97,7 +97,7 @@ export default createReactClass({
 
         /* startAtBottom: if set to true, the view is assumed to start
          * scrolled to the bottom.
-         * XXX: It's likley this is unecessary and can be derived from
+         * XXX: It's likely this is unnecessary and can be derived from
          * stickyBottom, but I'm adding an extra parameter to ensure
          * behaviour stays the same for other uses of ScrollPanel.
          * If so, let's remove this parameter down the line.
@@ -141,6 +141,7 @@ export default createReactClass({
         /* style: styles to add to the top-level div
          */
         style: PropTypes.object,
+
         /* resizeNotifier: ResizeNotifier to know when middle column has changed size
          */
         resizeNotifier: PropTypes.object,

src/components/views/avatars/MemberAvatar.tsx

@@ -16,23 +16,24 @@ limitations under the License.
 */
 
 import React from 'react';
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+
 import dis from "../../../dispatcher/dispatcher";
 import {Action} from "../../../dispatcher/actions";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import BaseAvatar from "./BaseAvatar";
 
 interface IProps {
-    // TODO: replace with correct type
-    member: any;
-    fallbackUserId: string;
+    member: RoomMember;
+    fallbackUserId?: string;
     width: number;
     height: number;
-    resizeMethod: string;
+    resizeMethod?: string;
     // The onClick to give the avatar
-    onClick: React.MouseEventHandler;
+    onClick?: React.MouseEventHandler;
     // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
-    viewUserOnClick: boolean;
-    title: string;
+    viewUserOnClick?: boolean;
+    title?: string;
 }
 
 interface IState {

src/components/views/right_panel/GroupHeaderButtons.tsx

@@ -41,13 +41,9 @@ interface IProps {}
 export default class GroupHeaderButtons extends HeaderButtons {
     constructor(props: IProps) {
         super(props, HeaderKind.Group);
-        this.onMembersClicked = this.onMembersClicked.bind(this);
-        this.onRoomsClicked = this.onRoomsClicked.bind(this);
     }
 
     protected onAction(payload: ActionPayload) {
-        super.onAction(payload);
-
         if (payload.action === Action.ViewUser) {
             if ((payload as ViewUserPayload).member) {
                 this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member});
@@ -70,20 +66,20 @@ export default class GroupHeaderButtons extends HeaderButtons {
         }
     }
 
-    private onMembersClicked() {
+    private onMembersClicked = () => {
         if (this.state.phase === RightPanelPhases.GroupMemberInfo) {
             // send the active phase to trigger a toggle
             this.setPhase(RightPanelPhases.GroupMemberInfo);
         } else {
             // This toggles for us, if needed
             this.setPhase(RightPanelPhases.GroupMemberList);
         }
-    }
+    };
 
-    private onRoomsClicked() {
+    private onRoomsClicked = () => {
         // This toggles for us, if needed
         this.setPhase(RightPanelPhases.GroupRoomList);
-    }
+    };
 
     renderButtons() {
         return [

src/components/views/right_panel/HeaderButtons.tsx

@@ -65,9 +65,7 @@ export default abstract class HeaderButtons extends React.Component<IProps, ISta
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
     }
 
-    protected onAction(payload) {
-        // Ignore - intended to be overridden by subclasses
-    }
+    protected abstract onAction(payload);
 
     public setPhase(phase: RightPanelPhases, extras?: Partial<SetRightPanelPhaseRefireParams>) {
         dis.dispatch<SetRightPanelPhasePayload>({

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -36,13 +36,9 @@ const MEMBER_PHASES = [
 export default class RoomHeaderButtons extends HeaderButtons {
     constructor(props) {
         super(props, HeaderKind.Room);
-        this.onMembersClicked = this.onMembersClicked.bind(this);
-        this.onFilesClicked = this.onFilesClicked.bind(this);
-        this.onNotificationsClicked = this.onNotificationsClicked.bind(this);
     }
 
     protected onAction(payload: ActionPayload) {
-        super.onAction(payload);
         if (payload.action === Action.ViewUser) {
             if (payload.member) {
                 this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member});
@@ -58,7 +54,7 @@ export default class RoomHeaderButtons extends HeaderButtons {
         }
     }
 
-    private onMembersClicked() {
+    private onMembersClicked = () => {
         if (this.state.phase === RightPanelPhases.RoomMemberInfo) {
             // send the active phase to trigger a toggle
             // XXX: we should pass refireParams here but then it won't collapse as we desire it to
@@ -67,17 +63,17 @@ export default class RoomHeaderButtons extends HeaderButtons {
             // This toggles for us, if needed
             this.setPhase(RightPanelPhases.RoomMemberList);
         }
-    }
+    };
 
-    private onFilesClicked() {
+    private onFilesClicked = () => {
         // This toggles for us, if needed
         this.setPhase(RightPanelPhases.FilePanel);
-    }
+    };
 
-    private onNotificationsClicked() {
+    private onNotificationsClicked = () => {
         // This toggles for us, if needed
         this.setPhase(RightPanelPhases.NotificationPanel);
-    }
+    };
 
     public renderButtons() {
         return [

src/components/views/right_panel/UserInfo.js

@@ -45,6 +45,7 @@ import EncryptionPanel from "./EncryptionPanel";
 import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
 import { verifyUser, legacyVerifyUser, verifyDevice } from '../../../verification';
 import {Action} from "../../../dispatcher/actions";
+import {useIsEncrypted} from "../../../hooks/useIsEncrypted";
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -124,18 +125,6 @@ async function openDMForUser(matrixClient, userId) {
     createRoom(createRoomOptions);
 }
 
-function useIsEncrypted(cli, room) {
-    const [isEncrypted, setIsEncrypted] = useState(room ? cli.isRoomEncrypted(room.roomId) : undefined);
-
-    const update = useCallback((event) => {
-        if (event.getType() === "m.room.encryption") {
-            setIsEncrypted(cli.isRoomEncrypted(room.roomId));
-        }
-    }, [cli, room]);
-    useEventEmitter(room ? room.currentState : undefined, "RoomState.events", update);
-    return isEncrypted;
-}
-
 function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
     return useAsyncMemo(async () => {
         if (!canVerify) {
@@ -1485,7 +1474,7 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
 const UserInfo = ({user, groupId, roomId, onClose, phase=RightPanelPhases.RoomMemberInfo, ...props}) => {
     const cli = useContext(MatrixClientContext);
 
-    // Load room if we are given a room id and memoize it
+    // Load room if we are given a room id and memoize it - this can be undefined for User Info/Group Member Info
     const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
     // fetch latest room member if we have a room, so we don't show historical information, falling back to user
     const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);

src/hooks/useIsEncrypted.ts

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 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 {useCallback, useState} from "react";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import {useEventEmitter} from "./useEventEmitter";
+
+// Hook to simplify watching whether a Matrix room is encrypted, returns undefined if room is undefined
+export function useIsEncrypted(cli: MatrixClient, room?: Room): boolean | undefined {
+    const [isEncrypted, setIsEncrypted] = useState(room ? cli.isRoomEncrypted(room.roomId) : undefined);
+
+    const update = useCallback((event: MatrixEvent) => {
+        if (room && event.getType() === "m.room.encryption") {
+            setIsEncrypted(cli.isRoomEncrypted(room.roomId));
+        }
+    }, [cli, room]);
+    useEventEmitter(room ? room.currentState : undefined, "RoomState.events", update);
+
+    return isEncrypted;
+}

src/stores/RightPanelStore.ts

@@ -223,3 +223,5 @@ export default class RightPanelStore extends Store<ActionPayload> {
         return RightPanelStore.instance;
     }
 }
+
+window.mxRightPanelStore = RightPanelStore.getSharedInstance();