Fix missing avatar for show current profiles (#9563)

src/components/views/avatars/BaseAvatar.tsx

@@ -48,11 +48,11 @@ interface IProps {
     tabIndex?: number;
 }
 
-const calculateUrls = (url, urls, lowBandwidth) => {
+const calculateUrls = (url: string, urls: string[], lowBandwidth: boolean): string[] => {
     // work out the full set of urls to try to load. This is formed like so:
     // imageUrls: [ props.url, ...props.urls ]
 
-    let _urls = [];
+    let _urls: string[] = [];
     if (!lowBandwidth) {
         _urls = urls || [];
 
@@ -119,7 +119,7 @@ const BaseAvatar = (props: IProps) => {
 
     const [imageUrl, onError] = useImageUrl({ url, urls });
 
-    if (!imageUrl && defaultToInitialLetter) {
+    if (!imageUrl && defaultToInitialLetter && name) {
         const initialLetter = AvatarLogic.getInitialLetter(name);
         const textNode = (
             <span
@@ -145,7 +145,8 @@ const BaseAvatar = (props: IProps) => {
                     width: toPx(width),
                     height: toPx(height),
                 }}
-                aria-hidden="true" />
+                aria-hidden="true"
+                data-testid="avatar-img" />
         );
 
         if (onClick) {
@@ -193,6 +194,7 @@ const BaseAvatar = (props: IProps) => {
                 title={title}
                 alt={_t("Avatar")}
                 inputRef={inputRef}
+                data-testid="avatar-img"
                 {...otherProps} />
         );
     } else {
@@ -208,6 +210,7 @@ const BaseAvatar = (props: IProps) => {
                 title={title}
                 alt=""
                 ref={inputRef}
+                data-testid="avatar-img"
                 {...otherProps} />
         );
     }

src/components/views/avatars/MemberAvatar.tsx

@@ -77,27 +77,24 @@ export default function MemberAvatar({
             ) ?? props.fallbackUserId;
         }
     }
-    const userId = member?.userId ?? props.fallbackUserId;
 
-    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: props.member,
-                    push: card.isCard,
-                });
-            } : props.onClick}
-        />
-    );
+    return <BaseAvatar
+        {...props}
+        width={width}
+        height={height}
+        resizeMethod={resizeMethod}
+        name={name ?? ""}
+        title={props.hideTitle ? undefined : title}
+        idName={member?.userId ?? props.fallbackUserId}
+        url={imageUrl}
+        onClick={viewUserOnClick ? () => {
+            dis.dispatch({
+                action: Action.ViewUser,
+                member: props.member,
+                push: card.isCard,
+            });
+        } : props.onClick}
+    />;
 }
 
 export class LegacyMemberAvatar extends React.Component<IProps> {

src/hooks/room/useRoomMemberProfile.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useMemo } from "react";
 
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import { useSettingValue } from "../useSettings";
@@ -29,18 +29,19 @@ export function useRoomMemberProfile({
     member?: RoomMember | null;
     forceHistorical?: boolean;
 }): RoomMember | undefined | null {
-    const [member, setMember] = useState<RoomMember | undefined | null>(propMember);
-
     const context = useContext(RoomContext);
     const useOnlyCurrentProfiles = useSettingValue("useOnlyCurrentProfiles");
 
-    useEffect(() => {
+    const member = useMemo(() => {
         const threadContexts = [TimelineRenderingType.ThreadsList, TimelineRenderingType.Thread];
-        if ((propMember && !forceHistorical && useOnlyCurrentProfiles)
-            || threadContexts.includes(context?.timelineRenderingType)) {
-            setMember(context?.room?.getMember(userId));
+        if ((!forceHistorical && useOnlyCurrentProfiles)
+            || threadContexts.includes(context.timelineRenderingType)) {
+            const currentMember = context.room?.getMember(userId);
+            if (currentMember) return currentMember;
         }
-    }, [forceHistorical, propMember, context.room, context?.timelineRenderingType, useOnlyCurrentProfiles, userId]);
+
+        return propMember;
+    }, [forceHistorical, propMember, context.room, context.timelineRenderingType, useOnlyCurrentProfiles, userId]);
 
     return member;
 }