Always use current profile on thread events

src/components/views/avatars/MemberAvatar.tsx

@@ -15,20 +15,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext, useEffect, useState } 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";
 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 MatrixClientContext from '../../../contexts/MatrixClientContext';
-import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
+import { useRoomMemberProfile } from '../../../hooks/room/useRoomMemberProfile';
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember | null;
@@ -54,60 +51,33 @@ export default function MemberAvatar({
     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>();
+    const member = useRoomMemberProfile({
+        userId: props.member?.userId,
+        member: props.member,
+        forceHistorical: props.forceHistorical,
+    });
 
-    useEffect(() => {
-        let member = props.member;
-
-        const useOnlyCurrentProfiles = (member && !props.forceHistorical
-            && SettingsStore.getValue("useOnlyCurrentProfiles"))
-            || roomContext?.timelineRenderingType === TimelineRenderingType.ThreadsList
-            || roomContext?.timelineRenderingType === TimelineRenderingType.Thread;
-
-        if (useOnlyCurrentProfiles) {
-            const room = cli.getRoom(member.roomId);
-            if (room) {
-                member = room.getMember(member.userId);
-            }
-        }
-        if (member?.name) {
-            const userTitle = UserIdentifierCustomisations.getDisplayUserIdentifier(
-                member.userId, { roomId: member?.roomId },
+    const name = member?.name ?? props.fallbackUserId;
+    let title: string = props.title;
+    let imageUrl: string | undefined;
+    if (member?.name) {
+        if (member.getMxcAvatarUrl()) {
+            imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
+                width,
+                height,
+                resizeMethod,
             );
-            if (member.getMxcAvatarUrl()) {
-                setImageUrl(mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-                    width,
-                    height,
-                    resizeMethod,
-                ));
-            }
-            setName(member.name);
-            setTitle(props.title || userTitle);
-        } else if (props.fallbackUserId) {
-            setName(props.fallbackUserId);
-            setTitle(props.fallbackUserId);
-        } else {
-            logger.error("MemberAvatar called somehow with null member or fallbackUserId");
         }
 
-        setUserId(member?.userId ?? props.fallbackUserId);
-    }, [cli,
-        height,
-        props.fallbackUserId,
-        props.forceHistorical,
-        props.member,
-        props.title,
-        resizeMethod,
-        roomContext?.timelineRenderingType,
-        width,
-    ]);
+        if (!title) {
+            title = UserIdentifierCustomisations.getDisplayUserIdentifier(
+                member.userId, { roomId: member?.roomId },
+            ) ?? props.fallbackUserId;
+        }
+    }
+    const userId = member?.userId ?? props.fallbackUserId;
 
     return (
         <BaseAvatar

src/components/views/messages/SenderProfile.tsx

@@ -14,44 +14,31 @@
  limitations under the License.
  */
 
-import React, { useContext } from 'react';
+import React 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 { useRoomMemberProfile } from '../../../hooks/room/useRoomMemberProfile';
 
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
 }
 
 export default function SenderProfile({ mxEvent, onClick }: IProps) {
-    const roomContext = useContext(RoomContext);
-    const cli = useContext(MatrixClientContext);
-
-    if (mxEvent.getContent().msgtype === MsgType.Emote) {
-        return null;
-    }
-
-    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 <DisambiguatedProfile
-        fallbackName={mxEvent.getSender() ?? ""}
-        onClick={onClick}
-        member={member}
-        colored={true}
-        emphasizeDisplayName={true}
-    />;
+    const member = useRoomMemberProfile({
+        userId: mxEvent.getSender(),
+        member: mxEvent.sender,
+    });
+
+    return mxEvent.getContent().msgtype !== MsgType.Emote
+        ? <DisambiguatedProfile
+            fallbackName={mxEvent.getSender() ?? ""}
+            onClick={onClick}
+            member={member}
+            colored={true}
+            emphasizeDisplayName={true}
+        />
+        : null;
 }

src/hooks/room/useRoomMemberProfile.ts

@@ -0,0 +1,46 @@
+/*
+Copyright 2022 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 { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { useContext, useEffect, useState } from "react";
+
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
+import { useSettingValue } from "../useSettings";
+
+export function useRoomMemberProfile({
+    userId = "",
+    member: propMember,
+    forceHistorical = false,
+}: {
+    userId: string | undefined;
+    member?: RoomMember;
+    forceHistorical?: boolean;
+}): RoomMember {
+    const [member, setMember] = useState<RoomMember | undefined>(propMember);
+
+    const context = useContext(RoomContext);
+    const useOnlyCurrentProfiles = useSettingValue("useOnlyCurrentProfiles");
+
+    useEffect(() => {
+        const threadContexts = [TimelineRenderingType.ThreadsList, TimelineRenderingType.Thread];
+        if ((propMember && !forceHistorical && useOnlyCurrentProfiles)
+            || threadContexts.includes(context?.timelineRenderingType)) {
+            setMember(context.room.getMember(userId));
+        }
+    }, [forceHistorical, propMember, context.room, context?.timelineRenderingType, useOnlyCurrentProfiles, userId]);
+
+    return member;
+}