All files / src/components/avatar CustomAvatar.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { ReactElement, useEffect, useState } from "react";
import { Avatar, Image, Space } from "antd";
import { getAvatar } from "@utils/TokenUtils";
import { UserOutlined } from "@ant-design/icons";
import { getAvatarForUser } from "@utils/FetchUtils";
import { AvatarData } from "@utils/FetchUtilsProps";
import { isBlank } from "@utils/StringUtils";
import { AvatarSize } from "antd/lib/avatar/AvatarContext";
 
interface AvatarProps {
  userId: number;
  size?: AvatarSize;
  showText?: boolean;
}
 
const CustomAvatar = (props: AvatarProps): ReactElement => {
  const { userId, size, showText } = props;
  const [avatarData, setAvatarData] = useState<string>('');
  const [displayName, setDisplayName] = useState<string>('');
  const getAvatarDataOfUser = (userId: number): void => {
    (async () => {
      if (userId == null) {
        //get current user's avatar
        setAvatarData(getAvatar() ?? '');
      } else {
        const data: AvatarData = await getAvatarForUser(userId);
        setAvatarData(data.avatar);
        const lDisplayName = isBlank(data.name) ? data.username : (data.name ?? '');
        setDisplayName(lDisplayName);
      }
    })();
  };
 
  useEffect(() => {
    getAvatarDataOfUser(userId);
  }, [userId]);
 
  const avatar = (avatarData == null || avatarData === '') ? (<UserOutlined />) : (<Avatar
    src={<Image src={avatarData} preview={false} />}
    size={size ?? "small"}
    alt={displayName}
  />);
 
  return (
    <Space title={displayName}>
      {avatar}
      {showText && displayName}
    </Space>
  );
};
 
export default CustomAvatar;