Merge pull request #5168 from matrix-org/t3chguy/dpsah/6785.2

Small code clean ups and tweaks

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,7 +66,7 @@ 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);
@@ -78,12 +74,12 @@ export default class GroupHeaderButtons extends HeaderButtons {
             // 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]);