Always use current profile on thread events (#9524)

src/components/views/avatars/MemberAvatar.tsx

@@ -15,10 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useContext } 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";
 
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -26,8 +25,7 @@ import BaseAvatar from "./BaseAvatar";
 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 { useRoomMemberProfile } from '../../../hooks/room/useRoomMemberProfile';
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember | null;
@@ -46,100 +44,58 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     hideTitle?: boolean;
 }
 
-interface IState {
-    name: string;
-    title: string;
-    imageUrl?: string;
-}
+export default function MemberAvatar({
+    width,
+    height,
+    resizeMethod = 'crop',
+    viewUserOnClick,
+    ...props
+}: IProps) {
+    const card = useContext(CardContext);
 
-export default class MemberAvatar extends React.PureComponent<IProps, IState> {
-    public static defaultProps = {
-        width: 40,
-        height: 40,
-        resizeMethod: 'crop',
-        viewUserOnClick: false,
-    };
+    const member = useRoomMemberProfile({
+        userId: props.member?.userId,
+        member: props.member,
+        forceHistorical: props.forceHistorical,
+    });
 
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = MemberAvatar.getState(props);
-    }
-
-    public static getDerivedStateFromProps(nextProps: IProps): IState {
-        return MemberAvatar.getState(nextProps);
-    }
-
-    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 (room) {
-                member = room.getMember(member.userId);
-            }
-        }
-        if (member?.name) {
-            let imageUrl = null;
-            const userTitle = UserIdentifierCustomisations.getDisplayUserIdentifier(
-                member.userId, { roomId: member?.roomId },
+    const name = member?.name ?? props.fallbackUserId;
+    let title: string | undefined = props.title;
+    let imageUrl: string | undefined;
+    if (member?.name) {
+        if (member.getMxcAvatarUrl()) {
+            imageUrl = mediaFromMxc(member.getMxcAvatarUrl() ?? "").getThumbnailOfSourceHttp(
+                width,
+                height,
+                resizeMethod,
             );
-            if (member.getMxcAvatarUrl()) {
-                imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-                    props.width,
-                    props.height,
-                    props.resizeMethod,
-                );
-            }
-            return {
-                name: member.name,
-                title: props.title || userTitle,
-                imageUrl: imageUrl,
-            };
-        } else if (props.fallbackUserId) {
-            return {
-                name: props.fallbackUserId,
-                title: props.fallbackUserId,
-            };
-        } else {
-            logger.error("MemberAvatar called somehow with null member or fallbackUserId");
-            return {} as IState; // prevent an explosion
+        }
+
+        if (!title) {
+            title = UserIdentifierCustomisations.getDisplayUserIdentifier(
+                member?.userId ?? "", { roomId: member?.roomId ?? "" },
+            ) ?? props.fallbackUserId;
         }
     }
+    const userId = member?.userId ?? props.fallbackUserId;
 
-    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 = () => {
+    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;