Always use current profile on thread events

src/components/views/avatars/MemberAvatar.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 import { logger } from "matrix-js-sdk/src/logger";
@@ -27,7 +27,8 @@ import { mediaFromMxc } from "../../../customisations/Media";
 import { CardContext } from '../right_panel/context';
 import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
 import SettingsStore from "../../../settings/SettingsStore";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember | null;
@@ -46,100 +47,85 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     hideTitle?: boolean;
 }
 
-interface IState {
-    name: string;
-    title: string;
-    imageUrl?: string;
-}
-
-export default class MemberAvatar extends React.PureComponent<IProps, IState> {
-    public static defaultProps = {
-        width: 40,
-        height: 40,
-        resizeMethod: 'crop',
-        viewUserOnClick: false,
-    };
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = MemberAvatar.getState(props);
-    }
+export default function MemberAvatar({
+    width,
+    height,
+    resizeMethod = 'crop',
+    viewUserOnClick,
+    ...props
+}: IProps) {
+    const cli = useContext(MatrixClientContext);
+    const card = useContext(CardContext);
+    const roomContext = useContext(RoomContext);
+
+    const [name, setName] = useState<string | undefined>();
+    const [title, setTitle] = useState<string | undefined>();
+    const [imageUrl, setImageUrl] = useState<string | undefined>();
+    const [userId, setUserId] = useState<string | undefined>();
+
+    useEffect(() => {
+        let member = props.member;
 
-    public static getDerivedStateFromProps(nextProps: IProps): IState {
-        return MemberAvatar.getState(nextProps);
-    }
+        const useOnlyCurrentProfiles = (member && !props.forceHistorical
+            && SettingsStore.getValue("useOnlyCurrentProfiles"))
+            || roomContext?.timelineRenderingType === TimelineRenderingType.ThreadsList
+            || roomContext?.timelineRenderingType === TimelineRenderingType.Thread;
 
-    private static getState(props: IProps): IState {
-        let member = props.member;
-        if (member && !props.forceHistorical && SettingsStore.getValue("useOnlyCurrentProfiles")) {
-            const room = MatrixClientPeg.get().getRoom(member.roomId);
+        if (useOnlyCurrentProfiles) {
+            const room = cli.getRoom(member.roomId);
             if (room) {
                 member = room.getMember(member.userId);
             }
         }
         if (member?.name) {
-            let imageUrl = null;
             const userTitle = UserIdentifierCustomisations.getDisplayUserIdentifier(
                 member.userId, { roomId: member?.roomId },
             );
             if (member.getMxcAvatarUrl()) {
-                imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-                    props.width,
-                    props.height,
-                    props.resizeMethod,
-                );
+                setImageUrl(mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
+                    width,
+                    height,
+                    resizeMethod,
+                ));
             }
-            return {
-                name: member.name,
-                title: props.title || userTitle,
-                imageUrl: imageUrl,
-            };
+            setName(member.name);
+            setTitle(props.title || userTitle);
         } else if (props.fallbackUserId) {
-            return {
-                name: props.fallbackUserId,
-                title: props.fallbackUserId,
-            };
+            setName(props.fallbackUserId);
+            setTitle(props.fallbackUserId);
         } else {
             logger.error("MemberAvatar called somehow with null member or fallbackUserId");
-            return {} as IState; // prevent an explosion
         }
-    }
-
-    render() {
-        let {
-            member,
-            fallbackUserId,
-            onClick,
-            viewUserOnClick,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            forceHistorical,
-            hideTitle,
-            ...otherProps
-        } = this.props;
-        const userId = member ? member.userId : fallbackUserId;
 
-        if (viewUserOnClick) {
-            onClick = () => {
+        setUserId(member?.userId ?? props.fallbackUserId);
+    }, [cli,
+        height,
+        props.fallbackUserId,
+        props.forceHistorical,
+        props.member,
+        props.title,
+        resizeMethod,
+        roomContext?.timelineRenderingType,
+        width,
+    ]);
+
+    return (
+        <BaseAvatar
+            {...props}
+            width={width}
+            height={height}
+            resizeMethod={resizeMethod}
+            name={name}
+            title={props.hideTitle ? undefined : title}
+            idName={userId}
+            url={imageUrl}
+            onClick={viewUserOnClick ? () => {
                 dis.dispatch({
                     action: Action.ViewUser,
-                    member: this.props.member,
-                    push: this.context.isCard,
+                    member: props.member,
+                    push: card.isCard,
                 });
-            };
-        }
-
-        return (
-            <BaseAvatar
-                {...otherProps}
-                name={this.state.name}
-                title={hideTitle ? undefined : this.state.title}
-                idName={userId}
-                url={this.state.imageUrl}
-                onClick={onClick}
-            />
-        );
-    }
+            } : props.onClick}
+        />
+    );
 }
-
-MemberAvatar.contextType = CardContext;

src/components/views/messages/SenderProfile.tsx

@@ -14,55 +14,44 @@
  limitations under the License.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import DisambiguatedProfile from "./DisambiguatedProfile";
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 import SettingsStore from "../../../settings/SettingsStore";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
 }
 
-export default class SenderProfile extends React.PureComponent<IProps> {
-    public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+export default function SenderProfile({ mxEvent, onClick }: IProps) {
+    const roomContext = useContext(RoomContext);
+    const cli = useContext(MatrixClientContext);
 
-    render() {
-        const { mxEvent, onClick } = this.props;
-        const msgtype = mxEvent.getContent().msgtype;
+    if (mxEvent.getContent().msgtype === MsgType.Emote) {
+        return null;
+    }
 
-        let member = mxEvent.sender;
-        if (SettingsStore.getValue("useOnlyCurrentProfiles")) {
-            const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
-            if (room) {
-                member = room.getMember(mxEvent.getSender());
-            }
+    let member = mxEvent.sender;
+    if (SettingsStore.getValue("useOnlyCurrentProfiles")
+        || roomContext.timelineRenderingType === TimelineRenderingType.ThreadsList
+        || roomContext.timelineRenderingType === TimelineRenderingType.Thread
+    ) {
+        const room = cli.getRoom(mxEvent.getRoomId());
+        if (room) {
+            member = room.getMember(mxEvent.getSender());
         }
-
-        return <RoomContext.Consumer>
-            { roomContext => {
-                if (msgtype === MsgType.Emote &&
-                    roomContext.timelineRenderingType !== TimelineRenderingType.ThreadsList
-                ) {
-                    return null; // emote message must include the name so don't duplicate it
-                }
-
-                return (
-                    <DisambiguatedProfile
-                        fallbackName={mxEvent.getSender() || ""}
-                        onClick={onClick}
-                        member={member}
-                        colored={true}
-                        emphasizeDisplayName={true}
-                    />
-                );
-            } }
-        </RoomContext.Consumer>;
     }
+
+    return <DisambiguatedProfile
+        fallbackName={mxEvent.getSender() ?? ""}
+        onClick={onClick}
+        member={member}
+        colored={true}
+        emphasizeDisplayName={true}
+    />;
 }

src/components/views/rooms/EventTile.tsx

@@ -1311,7 +1311,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 ]);
             }
             case TimelineRenderingType.Thread: {
-                const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
                 return React.createElement(this.props.as || "li", {
                     "ref": this.ref,
                     "className": classes,
@@ -1325,12 +1324,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                     "onMouseEnter": () => this.setState({ hover: true }),
                     "onMouseLeave": () => this.setState({ hover: false }),
                 }, [
-                    <div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
-                        <RoomAvatar room={room} width={28} height={28} />
-                        <a href={permalink} onClick={this.onPermalinkClicked}>
-                            { room ? room.name : '' }
-                        </a>
-                    </div>,
                     <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
                         { avatar }
                         { sender }

test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

@@ -184,21 +184,65 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
                     Symbol(kCapture): false,
                   }
                 }
-                resizeMethod="crop"
                 viewUserOnClick={false}
                 width={36}
               >
                 <BaseAvatar
                   height={36}
+                  hideTitle={false}
                   idName="@alice:server"
+                  member={
+                    RoomMember {
+                      "_events": Object {},
+                      "_eventsCount": 0,
+                      "_isOutOfBand": false,
+                      "_maxListeners": undefined,
+                      "disambiguate": false,
+                      "events": Object {},
+                      "membership": undefined,
+                      "modified": 1647270879403,
+                      "name": "@alice:server",
+                      "powerLevel": 0,
+                      "powerLevelNorm": 0,
+                      "rawDisplayName": "@alice:server",
+                      "requestedProfileInfo": false,
+                      "roomId": "!room:server",
+                      "typing": false,
+                      "user": undefined,
+                      "userId": "@alice:server",
+                      Symbol(kCapture): false,
+                    }
+                  }
                   name="@alice:server"
                   resizeMethod="crop"
                   title="@alice:server"
-                  url={null}
                   width={36}
                 >
                   <span
                     className="mx_BaseAvatar"
+                    hideTitle={false}
+                    member={
+                      RoomMember {
+                        "_events": Object {},
+                        "_eventsCount": 0,
+                        "_isOutOfBand": false,
+                        "_maxListeners": undefined,
+                        "disambiguate": false,
+                        "events": Object {},
+                        "membership": undefined,
+                        "modified": 1647270879403,
+                        "name": "@alice:server",
+                        "powerLevel": 0,
+                        "powerLevelNorm": 0,
+                        "rawDisplayName": "@alice:server",
+                        "requestedProfileInfo": false,
+                        "roomId": "!room:server",
+                        "typing": false,
+                        "user": undefined,
+                        "userId": "@alice:server",
+                        Symbol(kCapture): false,
+                      }
+                    }
                     role="presentation"
                   >
                     <span

test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
 </span>"
 `;
 
-exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><bdi><a class=\\"mx_Pill mx_UserPill\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></bdi></span></span>"`;
+exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><bdi><a class=\\"mx_Pill mx_UserPill\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" member=\\"[object Object]\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></bdi></span></span>"`;