Extract avatars from permalink hook (#10328)

src/components/views/elements/Pill.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState } from "react";
+import React, { ReactElement, useState } from "react";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
 
@@ -22,6 +22,8 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import Tooltip, { Alignment } from "../elements/Tooltip";
 import { usePermalink } from "../../../hooks/usePermalink";
+import RoomAvatar from "../avatars/RoomAvatar";
+import MemberAvatar from "../avatars/MemberAvatar";
 
 export enum PillType {
     UserMention = "TYPE_USER_MENTION",
@@ -52,13 +54,13 @@ export interface PillProps {
 
 export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room, shouldShowPillAvatar }) => {
     const [hover, setHover] = useState(false);
-    const { avatar, onClick, resourceId, text, type } = usePermalink({
+    const { member, onClick, resourceId, targetRoom, text, type } = usePermalink({
         room,
         type: propType,
         url,
     });
 
-    if (!type) {
+    if (!type || !text) {
         return null;
     }
 
@@ -79,6 +81,27 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
     };
 
     const tip = hover && resourceId ? <Tooltip label={resourceId} alignment={Alignment.Right} /> : null;
+    let avatar: ReactElement | null = null;
+
+    switch (type) {
+        case PillType.AtRoomMention:
+        case PillType.RoomMention:
+        case "space":
+            avatar = targetRoom ? <RoomAvatar room={targetRoom} width={16} height={16} aria-hidden="true" /> : null;
+            break;
+        case PillType.UserMention:
+            avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden="true" hideTitle />;
+            break;
+        default:
+            return null;
+    }
+
+    const content = (
+        <>
+            {shouldShowPillAvatar && avatar}
+            <span className="mx_Pill_linkText">{text}</span>
+        </>
+    );
 
     return (
         <bdi>
@@ -91,14 +114,12 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
                         onMouseOver={onMouseOver}
                         onMouseLeave={onMouseLeave}
                     >
-                        {shouldShowPillAvatar && avatar}
-                        <span className="mx_Pill_linkText">{text}</span>
+                        {content}
                         {tip}
                     </a>
                 ) : (
                     <span className={classes} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
-                        {shouldShowPillAvatar && avatar}
-                        <span className="mx_Pill_linkText">{text}</span>
+                        {content}
                         {tip}
                     </span>
                 )}