Merge branch 't3chguy/nvl/userinfo' of https://github.com/matrix-org/matrix-react-sdk into t3chguy/nvl/userinfo

 Conflicts:

	src/components/views/right_panel/UserInfo.js

src/components/views/right_panel/UserInfo.js

@@ -20,7 +20,7 @@ limitations under the License.
 import React, {useCallback, useMemo, useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Group, MatrixClient, RoomMember, User} from 'matrix-js-sdk';
+import {Group, RoomMember, User} from 'matrix-js-sdk';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
@@ -38,6 +38,7 @@ import MultiInviter from "../../../utils/MultiInviter";
 import GroupStore from "../../../stores/GroupStore";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import E2EIcon from "../rooms/E2EIcon";
+import withLegacyMatrixClient from "../../../utils/withLegacyMatrixClient";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 
 const _disambiguateDevices = (devices) => {
@@ -57,22 +58,12 @@ const _disambiguateDevices = (devices) => {
     }
 };
 
-const withLegacyMatrixClient = (Component) => class extends React.PureComponent {
-    static contextTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
-    };
-
-    render() {
-        return <Component {...this.props} cli={this.context.matrixClient} />;
-    }
-};
-
 const _getE2EStatus = (devices) => {
     const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
     return hasUnverifiedDevice ? "warning" : "verified";
 };
 
-const DevicesSection = withLegacyMatrixClient(({devices, userId, loading}) => {
+const DevicesSection = ({devices, userId, loading}) => {
     const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo');
     const Spinner = sdk.getComponent("elements.Spinner");
 
@@ -95,7 +86,7 @@ const DevicesSection = withLegacyMatrixClient(({devices, userId, loading}) => {
             </div>
         </div>
     );
-});
+};
 
 const onRoomTileClick = (roomId) => {
     dis.dispatch({
@@ -104,7 +95,7 @@ const onRoomTileClick = (roomId) => {
     });
 };
 
-const DirectChatsSection = withLegacyMatrixClient(({cli, userId, startUpdating, stopUpdating}) => {
+const DirectChatsSection = withLegacyMatrixClient(({matrixClient: cli, userId, startUpdating, stopUpdating}) => {
     const onNewDMClick = async () => {
         startUpdating();
         await createRoom({dmUserId: userId});
@@ -194,7 +185,7 @@ const DirectChatsSection = withLegacyMatrixClient(({cli, userId, startUpdating,
     );
 });
 
-const UserOptionsSection = withLegacyMatrixClient(({cli, member, isIgnored, canInvite}) => {
+const UserOptionsSection = withLegacyMatrixClient(({matrixClient: cli, member, isIgnored, canInvite}) => {
     let ignoreButton = null;
     let insertPillButton = null;
     let inviteUserButton = null;
@@ -371,24 +362,7 @@ const useRoomPowerLevels = (room) => {
     return powerLevels;
 };
 
-const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, member, startUpdating, stopUpdating}) => {
-    let kickButton;
-    let banButton;
-    let muteButton;
-    let redactButton;
-
-    const powerLevels = useRoomPowerLevels(room);
-    const editPowerLevel = (
-        (powerLevels.events ? powerLevels.events["m.room.power_levels"] : null) ||
-        powerLevels.state_default
-    );
-
-    const me = room.getMember(cli.getUserId());
-    const isMe = me.userId === member.userId;
-    const canAffectUser = member.powerLevel < me.powerLevel || isMe;
-    const membership = member.membership;
-
-    if (canAffectUser && me.powerLevel >= powerLevels.kick) {
+const RoomKickButton = withLegacyMatrixClient(({matrixClient: cli, member, startUpdating, stopUpdating}) => {
     const onKick = async () => {
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         const {finished} = Modal.createTrackedDialog(
@@ -397,9 +371,9 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
             ConfirmUserActionDialog,
             {
                 member,
-                    action: membership === "invite" ? _t("Disinvite") : _t("Kick"),
-                    title: membership === "invite" ? _t("Disinvite this user?") : _t("Kick this user?"),
-                    askReason: membership === "join",
+                action: member.membership === "invite" ? _t("Disinvite") : _t("Kick"),
+                title: member.membership === "invite" ? _t("Disinvite this user?") : _t("Kick this user?"),
+                askReason: member.membership === "join",
                 danger: true,
             },
         );
@@ -424,15 +398,13 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
         });
     };
 
-        const kickLabel = membership === "invite" ? _t("Disinvite") : _t("Kick");
-        kickButton = (
-            <AccessibleButton className="mx_UserInfo_field"
-                              onClick={onKick}>
+    const kickLabel = member.membership === "invite" ? _t("Disinvite") : _t("Kick");
+    return <AccessibleButton className="mx_UserInfo_field" onClick={onKick}>
         { kickLabel }
-            </AccessibleButton>
-        );
-    }
-    if (me.powerLevel >= powerLevels.redact) {
+    </AccessibleButton>;
+});
+
+const RedactMessagesButton = withLegacyMatrixClient(({matrixClient: cli, member}) => {
     const onRedactAllMessages = async () => {
         const {roomId, userId} = member;
         const room = cli.getRoom(roomId);
@@ -500,13 +472,12 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
         }
     };
 
-        redactButton = (
-            <AccessibleButton className="mx_UserInfo_field" onClick={onRedactAllMessages}>
+    return <AccessibleButton className="mx_UserInfo_field" onClick={onRedactAllMessages}>
         { _t("Remove recent messages") }
-            </AccessibleButton>
-        );
-    }
-    if (canAffectUser && me.powerLevel >= powerLevels.ban) {
+    </AccessibleButton>;
+});
+
+const BanToggleButton = withLegacyMatrixClient(({matrixClient: cli, member, startUpdating, stopUpdating}) => {
     const onBanOrUnban = async () => {
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         const {finished} = Modal.createTrackedDialog(
@@ -515,10 +486,10 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
             ConfirmUserActionDialog,
             {
                 member,
-                    action: membership === 'ban' ? _t("Unban") : _t("Ban"),
-                    title: membership === 'ban' ? _t("Unban this user?") : _t("Ban this user?"),
-                    askReason: membership !== 'ban',
-                    danger: membership !== 'ban',
+                action: member.membership === 'ban' ? _t("Unban") : _t("Ban"),
+                title: member.membership === 'ban' ? _t("Unban this user?") : _t("Ban this user?"),
+                askReason: member.membership !== 'ban',
+                danger: member.membership !== 'ban',
             },
         );
 
@@ -527,7 +498,7 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
 
         startUpdating();
         let promise;
-            if (membership === 'ban') {
+        if (member.membership === 'ban') {
             promise = cli.unban(member.roomId, member.userId);
         } else {
             promise = cli.ban(member.roomId, member.userId, reason || undefined);
@@ -549,16 +520,17 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
     };
 
     let label = _t("Ban");
-        if (membership === 'ban') {
+    if (member.membership === 'ban') {
         label = _t("Unban");
     }
-        banButton = (
-            <AccessibleButton className="mx_UserInfo_field" onClick={onBanOrUnban}>
+
+    return <AccessibleButton className="mx_UserInfo_field" onClick={onBanOrUnban}>
         { label }
-            </AccessibleButton>
-        );
-    }
-    if (canAffectUser && me.powerLevel >= editPowerLevel) {
+    </AccessibleButton>;
+});
+
+const MuteToggleButton = withLegacyMatrixClient(
+    ({matrixClient: cli, member, room, powerLevels, startUpdating, stopUpdating}) => {
         const isMuted = _isMuted(member, powerLevels);
         const onMuteToggle = async () => {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -610,11 +582,49 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
         };
 
         const muteLabel = isMuted ? _t("Unmute") : _t("Mute");
-        muteButton = (
-            <AccessibleButton className="mx_UserInfo_field"
-                              onClick={onMuteToggle}>
+        return <AccessibleButton className="mx_UserInfo_field" onClick={onMuteToggle}>
             { muteLabel }
-            </AccessibleButton>
+        </AccessibleButton>;
+    },
+);
+
+const RoomAdminToolsContainer = withLegacyMatrixClient(
+    ({matrixClient: cli, room, children, member, startUpdating, stopUpdating}) => {
+        let kickButton;
+        let banButton;
+        let muteButton;
+        let redactButton;
+
+        const powerLevels = useRoomPowerLevels(room);
+        const editPowerLevel = (
+            (powerLevels.events ? powerLevels.events["m.room.power_levels"] : null) ||
+            powerLevels.state_default
+        );
+
+        const me = room.getMember(cli.getUserId());
+        const isMe = me.userId === member.userId;
+        const canAffectUser = member.powerLevel < me.powerLevel || isMe;
+
+        if (canAffectUser && me.powerLevel >= powerLevels.kick) {
+            kickButton = <RoomKickButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />;
+        }
+        if (me.powerLevel >= powerLevels.redact) {
+            redactButton = (
+                <RedactMessagesButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />
+            );
+        }
+        if (canAffectUser && me.powerLevel >= powerLevels.ban) {
+            banButton = <BanToggleButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />;
+        }
+        if (canAffectUser && me.powerLevel >= editPowerLevel) {
+            muteButton = (
+                <MuteToggleButton
+                    member={member}
+                    room={room}
+                    powerLevels={powerLevels}
+                    startUpdating={startUpdating}
+                    stopUpdating={stopUpdating}
+                />
             );
         }
 
@@ -629,10 +639,11 @@ const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, me
         }
 
         return <div />;
-});
+    },
+);
 
 const GroupAdminToolsSection = withLegacyMatrixClient(
-    ({cli, children, groupId, groupMember, startUpdating, stopUpdating}) => {
+    ({matrixClient: cli, children, groupId, groupMember, startUpdating, stopUpdating}) => {
         const [isPrivileged, setIsPrivileged] = useState(false);
         const [isInvited, setIsInvited] = useState(false);
 
@@ -734,7 +745,7 @@ const useIsSynapseAdmin = (cli) => {
 };
 
 // cli is injected by withLegacyMatrixClient
-const UserInfo = withLegacyMatrixClient(({cli, user, groupId, roomId, onClose}) => {
+const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, roomId, onClose}) => {
     // Load room if we are given a room id and memoize it
     const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
 

src/utils/withLegacyMatrixClient.js

@@ -0,0 +1,31 @@
+/*
+Copyright 2019 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 React from "react";
+import PropTypes from "prop-types";
+import {MatrixClient} from "matrix-js-sdk";
+
+// Higher Order Component to allow use of legacy MatrixClient React Context
+// in Functional Components which do not otherwise support legacy React Contexts
+export default (Component) => class extends React.PureComponent {
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    };
+
+    render() {
+        return <Component {...this.props} matrixClient={this.context.matrixClient} />;
+    }
+};